[Solved] Kendo Grid not calling server when calling read

[Marcus]

So I am working in ASP.NET MVC using a Kendo Grid and I am having trouble with the grid not reloading after calling read. There isn't an error in the console and the grid just goes blank. At first I thought it was because it was editable but then i removed that and it still has issues.

Grid:

01.@(Html.Kendo().Grid<Common.Warehouse.ViewModels.WareHouseAssetViewModels.AssetTransferSKUViewModel>()
02.            .Name("AssetTransferGrid")
03.            .HtmlAttributes(new { @style = "height:100%" })
04.            .Columns(columns =>
05.            {
06.              columns.Bound(m => m.SKUTitle).Title("SKU");
07.              columns.Bound(m => m.SerialNumber).Title("Serial Number").Media("sm");
08.              columns.Bound(m => m.QtyShipped).Title("Quantity").Media("sm");
09.              columns.Bound(m => m.ValueEach).Title("Value Each");
10.              columns.Command(command => command.Destroy());
11.            })
12.            .ToolBar(toolbar =>
13.            {
14.              toolbar.Custom().Text("Ship Transfer").HtmlAttributes(new { @id = "Ship" });
15.              toolbar.Save();
16.              toolbar.Excel();
17.              toolbar.Pdf();
18.            })
19.            .Pdf(pdf => pdf
20.              .AllPages()
21.              .AvoidLinks()
22.              .RepeatHeaders()
23.              .RepeatHeaders()
24.              .FileName("Transfer_Ship")
25.              .PaperSize("8.5in","11in")
26.              .Scale(0.8)
27.              .Margin("3pt","3pt","3pt","3pt"))
28.            .Excel(excel => excel
29.              .FileName("Transfer_Ship")
30.              .AllPages(true))
31.            .Editable(editable => editable.Mode(GridEditMode.InCell))
32.            .DataSource(datasource => datasource
33.              .Ajax()
34.              .Events(e => e.Error("error_handler"))
35.              .PageSize(40)
36.              .ServerOperation(true)
37.              .Model(model =>
38.              {
39.                model.Id(m => m.Id);
40.              })
41.              .Sort(sort => sort.Add(m => m.SKUTitle).Ascending())
42.              .Read(read =>
43.              {
44.                read.Type(HttpVerbs.Post);
45.                read.Action("ReadShippedTransferSKUs_Async", "AssetManager", new { assetTransferId = Model.Id } );
46.              })
47.              .Update(update => update.Action("UpdateTransferSKU","AssetManager"))
48.              .Destroy(destroy => destroy.Action("DeleteTransferSKU", "AssetManager"))
49.            )
50.            .Scrollable(sc => sc
51.            .Height(500)
52.            .Endless(true)
53.            .Enabled(true)
54.            )
55.            .Sortable()
56.            .Filterable(ftb => ftb
57.              .Mode(GridFilterMode.Menu)
58.              .Extra(false)
59.              .Operators(op => op
60.                .ForString(str => str
61.                  .Clear().Contains("Contains").StartsWith("Begins With").EndsWith("Ends With")
62.                )
63.              )
64.            )
65.            .Selectable(select => select
66.              .Mode(GridSelectionMode.Single)
67.              .Type(GridSelectionType.Row)
68.            )
69.            .Mobile(MobileMode.Auto)
70.            .NoRecords(n => n.TemplateId("noRecords"))
71.        )
72.
73.        @Html.Partial("_TemplateNoRecords")

 

Server Code:

01.public async Task<ActionResult> ReadShippedTransferSKUs_Async([DataSourceRequest]DataSourceRequest request, Guid assetTransferId)
02.        {
03.            string entityId = getEntityID();
04.            DataSourceResult result = await IWarehouse.GetAssetTransferSKUsByTransferId(assetTransferId, entityId)
05.                .Select(s => new WAVM.AssetTransferSKUViewModel
06.                {
07.                    Id = s.ID,
08.                    SKUTitle = s.SKU.Title,
09.                    SerialNumber = s.SKUItem != null ? s.SKUItem.SerialNumber : string.Empty,
10.                    QtyShipped = s.QtyShipped,
11.                    QtyReceived = s.QtyShipped,
12.                    ValueEach = s.ValueEach
13.                })
14.                .ToDataSourceResultAsync(request);
15.
16.            return Json(result, JsonRequestBehavior.AllowGet);
17.        }

 

Javascript Callback:

01.function skuAddSucces(data) {
02.        var x = data["Success"];
03.        var y = data["SuccessMsg"];
04.        var z = data["Type"];
05.        alertShow(x, z, y);
06.        if (x) {
07.          var grid = $("#AssetTransferGrid").kendoGrid().data("kendoGrid");
08.          grid.dataSource.read();
09.        }
10.      }

[Petar]

Hello Marcus,

You can use the requestEnd event of the DataSource to execute the skuAddSucces function when the event is triggered. Then in the e.response object, you will receive the raw remote service response. The Events configuration of the DataSource will look like:

.Events(e => e.Error("error_handler").requestEnd("onRequestEnd"))

In the onRequestEnd function, you can use its event handler and implement the desired functionality based on the already mentioned e.response object.

Regards,
Petar
Progress Telerik

[Marcus]

I figured it out. I was calling 

$("#AssetTransferGrid").kendoGrid().data("kendoGrid")

instead of 

$("#AssetTransferGrid").data("kendoGrid")

 which broke it.

[Petar]

Hi Marcus,

Thank you for sharing the solution with the community. Yes, once you have the Grid initialized you don't have to do it a second time, but just get its data attributes using the second snippet you provided. 

Regards,
Petar
Progress Telerik