Accessing Child Grid table using Jquery

[Jaesoon]

I have a grid with 2 hierarchy, one parent and one child.

 

I'm trying to override the child grids in built "delete" function by adding a custom command to it and calling a javascript function.

 

When i call the javascript function, i can call 

$(e.target).closest("tr");

to get the current selected row, however i have no idea how i can get the child grid object using javascript.

 

For example, the child grid would be defined as follows:

<script id="cGrid" type="text/kendo-tmpl">
@(Html.Kendo().Grid<CGridModel>()
      .Name("grid_#=Id#")

 Normally you would access any kendo grid by doing the following

var grid = $("#NAME_OF_GRID_HERE").data("kendoGrid");

And so i have tried 

var grid = $("#grid_#=Id#").data("kendoGrid");

But to no avail.

 

What's the correct way of getting the child's grid object using javascript?

[Dimiter Madjarov]

Hello Jaesoon,

You could again use jQuery's closest() method to retrieve the Grid wrapper via it's k-grid CSS class for example.
E.g.

var grid = $(e.target).closest(".k-grid").data("kendoGrid");

 

Regards,
Dimiter Madjarov
Telerik

[Jaesoon]

Thanks Dimiter, i was able to access the nested grid using this function.

[Annie hera]

Hi If I have a Tab Strip associated to the parent grid and two Child Grids .How can I access the Child Grid 2?

[Tsvetomir]

Hi Annie,

Based on the provided information,  I am not sure in which event you would like to access the child grid. Could you provide more details on the whole scenario, for instance, does the master have a detail template? And within this details template, there is a TabStrip with two other grids. Is that correct?

In general, the grids could be accessed via the ",k-grid" class. However, they should be accessed at a time when the detailed template has been opened, therefore, its TabStrip and inner grids initialized.

Looking forward to your reply.

 

Regards,
Tsvetomir
Progress Telerik

[Annie hera]

Hi Tsvetomir,

Sorry for not giving adequate details.

Yes, the master have a detail Template and within this detail Template there is a Tabstrip with two grids.

In theTab item(ie the ChildGrid ) we have a Grid ToolBar Template with a  DatePicker and a Combo Box to filter the Grid values .

we dont require the Filter functionality of the Grid , we want an external control to filter. So I am not able to access the child grid from the DatePicker and Combo value Change event. In the attributeChage event , how to access the child Kendo Grid 2(There are two grids in the TabStrip)

The Code for the  detail Template  with the toolBar Template and  is given Below: 

 

<script id="secattributes" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
             .Name("tabStrip_#=MasterId#")
             .SelectedIndex(0)
             .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
             .Items(items =>
             {                            

                         items.Add().Text("Overlapping Attributes").Content(@<text>
                            @(Html.Kendo().Grid<CoreMaster.Models.OverlapView>()
                                            .Name("OverlapSecurityAttribute_#=MasterId#")
                                             .ToolBar(toolbar =>
                                             {
                                                                toolbar.ClientTemplateId("GridToolbarTemplate");
                                               })
                                              .Editable(editable => editable.Mode(GridEditMode.InCell))
                                              .Columns(cols =>
                                              {
                                                      cols.Bound(y => y.Attribute).Title("Attribute");                                                              
                                                                 cols.Bound(y => y.StartDate).Title("Start Date")
                                                                 .Format("{0:yyyy/MM/dd}").EditorTemplateName("AttributeDate");
                                                                 cols.Bound(y => y.EndDate).Title("End Date")
                                                                 .Format("{0:yyyy/MM/dd}").EditorTemplateName("AttributeDate");
                                                             })                                            
                                              .DataSource(dataSource => dataSource
                                              .Ajax().PageSize(5)
                                              .Batch(true)                                        
                                             

                                              .Model(model =>
                                              {
                                                                 model.Id(p => p.SecurityAttributeId);                                                               
                                                                 model.Field(p => p.StartDate);
                                                                 model.Field(p => p.EndDate);
                                                             })                                               .
                                              .Read(read => read.Action("OverlappingSecurity_Attributes_Read", "SecurityMaster").Data("paramters(#=SecurityMasterId#)"))                                             
                                                   )                                          
                                              .ToClientTemplate() ) </text>);
                                         }).ToClientTemplate())
</script>

@*Overlapping Attributes Tool Bar Template*@
<script id="GridToolbarTemplate" type="text/x-kendo-template">
    <div class="CreateBtnCo">
        <a class="k-button k-button-icontext k-grid-add" href='\\#'><span class="k-icon k-add"></span>Add new Attribute</a>
    </div>
    <div class="SaveBtnCo">
        <a role='button' class='k-button k-button-icontext k-grid-save-changes' href='\\#'><span class='add-save-button'></span>Save Changes</a>
    </div>
    <div class="CancelBtnCo">
        <a role='button' class='k-button k-button-icontext k-grid-cancel-changes' href='\\#'><span class='add-cancel-button'></span>Cancel Changes</a>
    </div>
    <div class="AttributeTypeContainer">

        <label class="Attribute-Label" for="AttributeTypeName"> Attribute Type </label>
        @(Html.Kendo().DropDownList()
                         .Name("TypeId")
                         .DataTextField("AttributeTypeName")
                         .DataValueField("AttributeTypeId")
                         .AutoBind(false)
                        .OptionLabel("All")
                         .Events(e => e.Change("AttributeChange"))
                         .HtmlAttributes(new { style = "width: 150px;" })
                         .DataSource(ds =>
                            {
                                ds.Read("AttributeTypesSecurity_Read", "AttributeType");
                            })
                         .ToClientTemplate()
        )
    </div>
    <div class="Date">

        @(Html.Kendo().DatePicker()
                .Name("datepicker")
                .Format("{0:yyyy/MM/dd}")
                .HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
                .DateInput()
                .Events(e => e.Change("DateChange"))
                .ToClientTemplate()
        )

    </div>
</script>
<script type="text/javascript">
   
    function AttributeChange() {
        var value = this.value(),
            grid = $("#OverlapSecurityAttribute_#=SecurityMasterId#").data("kendoGrid");

        if (value) {
            grid.dataSource.filter({ field: "AttributeId", operator: "eq", value: parseInt(value) });
        } else {
            grid.dataSource.filter({});
        }
    }
</script>

[Tsvetomir]

Hi Annie,

Thank you for the additional details. Indeed, based on the event arguments of the AttributeChange event handler, you could look for the grid's detail row. After that, search back down for the two grids. Here is an example:

$(e.sender.element).closest("tr.k-detail-row").find("[data-role='grid']:eq(1)")

Could you specify whether the two grids are within the same tab of the TabStrip or not? In case they are in different tabs, you should ensure that the two grids are first initialized. Otherwise, accessing the second grid will return undefined. 

Looking forward to your reply.

 

Regards,
Tsvetomir
Progress Telerik

[Annie hera]

Hi Tsvetomir,

Thanks for the quick response. 

The Grids are in two different tabs associated to the master.

Master Grid Detail Template--> TabStrip--> Tab1, Grid1   &&  Tab2 ,Grid2

The toolbar template is present in the Tab2 grid. I have to filter the Tab2 grid based on the AttributeChange() event.

So while accessing the search combo , The Tab2 Grid would be already initialized.

[Tsvetomir]

Hi Annie,

In short, you would like to access the grid that is holding the DropDownList, is that correct? If so, you could do it as follows:

$(e.sender.element).closest("[data-role='grid']").getKendoGrid()

 

Regards,
Tsvetomir
Progress Telerik

[Annie hera]

Thanks Tsvetomir, that Works for me .