Not able to reference kendo ui nested grid

3 posts, 0 answers
  1. viaindia
    viaindia avatar
    1 posts
    Member since:
    Apr 2014

    Posted 07 Sep 2016 Link to this post

    Below is the kendo ui nested grid sample code and I highlighted the code which is the issue. Here I am trying to reference the nested grid inside a parent grid, but getting undefined exception. Not sure what I am doing wrong here.

    var filterWorkOrderBundleDetails = function (DetailId) {
            var control = $("#grid_" + DetailId).data("kendoGrid");                                                              //(undefined): Not able to reference nested grid.
            //Todo

            return {            
                WorkOrderDetailId: DetailId
            }
        }

     

    @(Html.Kendo().Grid<PM.Entities.Model.sp_Sel_WorkOrderDetailByWorkOrderNo_Result>()
        .Name("WorkOrderDetailGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.WorkOrderDetailNo).Title("Order Detail No").Filterable(e => e.Extra(false)).Width(80);
            columns.Bound(p => p.Description1).Title(productColumnTitle).Filterable(e => e.Extra(false)).Width(200);
            columns.Bound(p => p.AccountDetails).Title("Account").Filterable(e => e.Extra(false)).Width(200);
            columns.Bound(p => p.UnitPriceMultiplier).Title("Unit Price").Filterable(e => e.Extra(true)).Width(100).ClientTemplate("$#:kendo.toString(UnitPriceMultiplier, '" + @decimalFormat + "')#");
            columns.Bound(p => p.PartnerShare).Title("Partner Share").Filterable(e => e.Extra(true)).Width(100);
            columns.Bound(p => p.TelcoShare).Title(userSession.TenantName + " Share").Filterable(e => e.Extra(true)).Width(100);
            columns.Bound(p => p.Discount).Title("Adjustment").Filterable(e => e.Extra(true)).Width(100);
            columns.Bound(p => p.Description).Title("Description").Filterable(e => e.Extra(true)).Width(200);
        })
        .ClientDetailTemplateId("rowDetailTemplate")
        .DataSource(ds => ds
            .Ajax()
            .Read(read => read.Action("GetAppWorkOrderDetails1", "WorkOrder").Data("window.pm.order.tracking.filterWorkOrderDetails"))
            .PageSize(PageSize)
        )
        .NoRecords(NoRecordFound)
        .AutoBind(true)
        .Events(e => e.DataBound("window.pm.order.tracking.onDataBound"))
        .Pageable(page => page.PageSizes(PageSizes).Messages(msg => msg.Display("{0} - {1} of {2:n0} items")))
        .Scrollable(a => a.Height("auto"))
        .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
        .Resizable(e => e.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        )
    </div>

    <script id="rowDetailTemplate" type="text/x-kendo-template">
        #if (WorkOrderDetailId != null){#
        @(Html.Kendo().Grid<PM.Entities.Model.sp_Sel_WorkOrderDetailByWorkOrderNo_BundleItems_Result>()
            .Name("grid_#=WorkOrderDetailId#")
            .Columns(columns =>
            {
                columns.Bound(o => o.WorkOrderNo).Title("Order").Width(80);
                columns.Bound(o => o.WorkOrderDetailNo).Title("Order Detail No").Width(80);
                columns.Bound(o => o.Partner).Title("Partner").Width(120);
                columns.Bound(o => o.BillChargeCode).Title("Charge Code").Width(80);
                columns.Bound(o => o.AccountDetails).Title("Account").Width(120);
                columns.Bound(p => p.UnitPriceMultiplier).Title("Unit Price").Filterable(e => e.Extra(true)).Width(100).ClientTemplate("$\\\\#:kendo.toString(UnitPriceMultiplier, '" + @decimalFormat + "')\\\\#");
                columns.Bound(p => p.Quantity).Title("Quantity").Filterable(e => e.Extra(true)).Width(100);
                columns.Bound(p => p.PartnerShare).Title("Partner Share").Filterable(e => e.Extra(true)).Width(100);
                columns.Bound(p => p.TelcoShare).Title(userSession.TenantName + " Share").Filterable(e => e.Extra(true)).Width(100);
                columns.Bound(p => p.Discount).Title("Adjustment").Filterable(e => e.Extra(true)).Width(100);
                columns.Bound(o => o.Description).Title("Description").Width(120);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(PageSize)
                .Read(read => read.Action("GetAppWorkOrderBundleDetails", "WorkOrder").Data("window.pm.order.tracking.filterWorkOrderBundleDetails('#=WorkOrderDetailId#')"))
            )
            .Pageable()
            .Scrollable(a => a.Height("auto"))
            .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
            .Resizable(e => e.Columns(true))
            .Reorderable(reorder => reorder.Columns(true))
            .ToClientTemplate()
        )
        #}else{  }#
    </script>

     

    Please help me!

  2. pat
    pat avatar
    4 posts
    Member since:
    May 2020

    Posted 12 May Link to this post

    I stuck at this problems too , got undefined when calling subgrid id but i already checked in page, its grid is already rendered

  3. Anton Mironov
    Admin
    Anton Mironov avatar
    107 posts

    Posted 15 May Link to this post

    Hi, Viaindia and Pat,

    At the time the "filterWorkOrderBundleDetails" JavaScript function is invoked, the inner grid has not been fully initialized. The instance of the grid could be obtained only after the initialization process has finished. All of the properties of the master row are available in the child grid. Is there a specific functionality you are willing to achieve? If yes, could you share more details on the scenario?

    Accessing the properties from the master row has been demonstrated in point 7 of the following article:

    https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/templates/client-detail-template#setting-the-client-hierarchy

    Here is a sample implementation of the detailed grid's Read option:

    .Read(read => read.Action("GetAppWorkOrderBundleDetails", "WorkOrder", new { workOrderDetailId = "#=WorkOrderDetailId#" }))
    I hope this information helps.

     

     

    Regards,
    Anton Mironov
    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.
Back to Top