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);
}
});
}