Accessing Child Grid table using Jquery

10 posts, 1 answers
  1. Jaesoon
    Jaesoon avatar
    60 posts
    Member since:
    Oct 2012

    Posted 04 Jun 2015 Link to this post

    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?

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 05 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Jaesoon
    Jaesoon avatar
    60 posts
    Member since:
    Oct 2012

    Posted 05 Jun 2015 Link to this post

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

  4. Annie hera
    Annie hera avatar
    4 posts
    Member since:
    Feb 2020

    Posted 27 Mar 2020 Link to this post

    Hi If I have a Tab Strip associated to the parent grid and two Child Grids .How can I access the Child Grid 2?
  5. Tsvetomir
    Admin
    Tsvetomir avatar
    837 posts

    Posted 31 Mar 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  6. Annie hera
    Annie hera avatar
    4 posts
    Member since:
    Feb 2020

    Posted 09 Apr 2020 in reply to Tsvetomir Link to this post

    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>


  7. Tsvetomir
    Admin
    Tsvetomir avatar
    837 posts

    Posted 10 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  8. Annie hera
    Annie hera avatar
    4 posts
    Member since:
    Feb 2020

    Posted 10 Apr 2020 in reply to Tsvetomir Link to this post

    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.

  9. Tsvetomir
    Admin
    Tsvetomir avatar
    837 posts

    Posted 13 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  10. Annie hera
    Annie hera avatar
    4 posts
    Member since:
    Feb 2020

    Posted 13 Apr 2020 in reply to Tsvetomir Link to this post

    Thanks Tsvetomir, that Works for me . 

Back to Top