This is a migrated thread and some comments may be shown as answers.

refresh child grid in hierarchical grid

1 Answer 554 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DHHS
Top achievements
Rank 1
DHHS asked on 28 Jul 2015, 02:49 PM

I have custom editable hierarchical grid. I have add and delete buttons in the child grid. when i click add button on child grid, it opens up kendo window on which user will be displayed list of records where user can select record and click add button. On add click button i am writing ajax call which adds the records. on success of ajax call i am refreshing parent grid which closes up the child expandable row. At that point i just want to refresh child grid so that it still stays open.

I have same issue with delete button too. when user clicks on delete on child grid, I have a ajax call which deletes the record but on success i want to refresh just child grid 

parent grid
 
    <div class="col-xs-18 col-md-12">
                @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
        .Name("grid")
        .Columns(columns =>
        {
            //columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ContractorType).Width(100);
            columns.Bound(p => p.ContractorName);
            columns.Bound(p => p.BHSISNum).Width(200); ;
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}").Width(180);
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}").Width(180);
          
            columns.Command(command => command.Custom("Remove").Text("Remove").SendDataKeys(true).Click("deleteClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" })).Width(160);
 
        }).Events(e => e.DataBound("onDataBound"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:350px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
        ))
            </div>
 
child grid
 
 
 
    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
            .Name("grid_#=Id#")
            .Columns(columns =>
            {
                // columns.Bound(o => o.Id).Width(50);
                columns.Bound(o => o.ServiceId);
                columns.Bound(o => o.ServiceType);
                columns.Bound(o => o.AdultChild);
                columns.Bound(o => o.Qualifier);
                columns.Command(command => command.Custom("Remove").SendDataKeys(true).Click("deleteClickServices"));
            }).Events(e => e.DataBound("onDataBoundServices"))
             .ToolBar(toolbar =>
{
    toolbar.Template(@<text>
        <div class="toolbar">
            <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Assign Services</button>
        </div>
    </text>);
})
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .PageSize(10)
                                                          .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id }))
                                        )
                                        .Pageable()
                                        .Sortable()
                                        .ToClientTemplate()
 
        )
    </script>
 
on click assign button on child grid
 
    @(Html.Kendo().Window()
    .Name("servicewindow")
    .Title("Assign Services")
    .Content(@<text><div class="container-fluid">
            <div class="row">
                <div class="col-xs-18 col-md-12">
                    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
        .Name("gridServicesWindow")
        .Columns(columns =>
        {
            columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chkBoxServices' />");
            columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ServiceId);
            columns.Bound(p => p.ServiceType);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.AdultChild);
        })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                        .AutoBind(false)
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                        .HtmlAttributes(new { style = "height:350px;margin-right:30px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                                .Read(read => read.Action("GetAllServices_Read", "Contract").Data("additionalInfoAddServices"))
                )
                    )
                    <button class="k-button close-buttonservices k-primary" style="bottom: 10px; ">Cancel</button>
                    <button class="k-button k-primary" id="addSelectedServices" style="bottom: 10px; ">Assign</button>
                </div>
 
            </div>
 
 
        </div></text>
            )
            .Draggable()
    .Resizable()
    .Width(800)
    .Modal(true)
    .Visible(false)
 
    )
 
 
script :
 
  $("#addSelectedServices").bind("click", function () {
            var checked = [];
            for(var i in checkedServiceIds){
                if(checkedServiceIds[i]){
                    checked.push(i);
                }
            }
            var contractId = '@(ViewBag.ContractService.Id)';
            var contractorId=addSelectedContractorService;
            addServices(checked,contractId,contractorId)
        });
        function addServices(lstServices,contractId,contractorId) {
            var element = $(document.body);
            kendo.ui.progress(element, true);
            $.ajax({
                url: '@Url.Action("AddServices", "Contract")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    lstSelectedService: lstServices ,
                    contractorId:contractorId,
                    contractId: contractId
                }),
 
                success: function (response, jqXHR) {
                    var element = $(document.body);
                    kendo.ui.progress(element, false);
                    var orderWindow = $('#servicewindow').data("kendoWindow");
                    orderWindow.close();
                    var addSelectedContractorService =null;
                    checkedServiceIds.length =0;
                    //delete checked;
                    $('#grid').data().kendoGrid.dataSource.read();//refreshing parent grid but want to refesh only child grid
                    //var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
                    //grid.dataSource.read();
                },
                error: function(jqXHR, errorThrown) {
                    var element = $(document.body);
                    kendo.ui.progress(element, false);
                    alert('Error - ' + errorThrown);
                }
 
            });
        }
        function deleteClickServices(e)
        {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var Id = dataItem.Id;
            var kendoWindow = $("<div />").kendoWindow({
                title: "Confirm",
                resizable: false,
                modal: true,
                height: "100px",
                width: "300px"
            });
 
            kendoWindow.data("kendoWindow")
                .content($("#delete-confirmation").html())
                .center().open();
 
            kendoWindow
                .find(".delete-confirm,.delete-cancel")
                    .click(function() {
                        if ($(this).hasClass("delete-confirm")) {
                            var lstServiceId = [];
                            lstServiceId.push(Id);
                            var gridMaster = $("#grid").data("kendoGrid");
                            var row= gridMaster.dataItem($(e.target).closest(".k-detail-row").prev(".k-master-row"));
                            var contractorId = row.Id;
                            var contractId = '@( ViewBag.ContractService.Id)';
                            removeService(lstServiceId,contractorId,contractId,kendoWindow)
                        }
                        if ($(this).hasClass("delete-cancel")) {
                            return true;}
                    })
                    .end()
        }
        function removeService(lstServiceId,contractorId,contractId,kendoWindow) {
            var element = $(document.body);
            kendo.ui.progress(element, true);
            $.ajax({
                url: '@Url.Action("RemoveService", "Contract")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    lstSelectedService: lstServiceId ,
                    contractorId:contractorId,
                    contractId: contractId
                }),
 
                success: function (response, jqXHR) {
                    var element = $(document.body);
                    kendo.ui.progress(element, false);
                    kendoWindow.data("kendoWindow").close();
                    $('#grid').data().kendoGrid.dataSource.read(); //refreshing parent grid but want to refesh only child grid
 
                    //var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
                    //grid.dataSource.read();
 
                },
                error: function(jqXHR, errorThrown) {
                    var element = $(document.body);
                    kendo.ui.progress(element, true);
                    kendoWindow.data("kendoWindow").close();
                    alert('Error - ' + errorThrown);
                }
 
            });
        }

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 30 Jul 2015, 03:25 PM

Hello DHHS,

As far as I understand you want to refresh the child grid when add/delete action. In the code below you are calling the read method of the parent grid data source.

$('#grid').data().kendoGrid.dataSource.read();//refreshing parent grid but want to refesh only child grid

Since the method addSelectedServices is called from the button inside the detail row (at same level with the child grid container) you can find the the grid element on the same level as the button and this element should be the child grid container. 

 

Regards,
Boyan Dimitrov
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
Tags
Grid
Asked by
DHHS
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or