Update Kendo Grid Column(Foreign Key) on Javascript Call

Question

So i am new to kendo controlles in MVC.

I have below .cshtml file.

 @(Html.Kendo().Grid<AssetDeprGroupViewModel>()
        .Name("AssetDeprGrid")
        .Columns(c =>
        {                
            c.Bound(p => p.AssetDeprGroup).Title("Depr Group").HeaderHtmlAttributes(new { style = "text-align: center" }).ClientTemplate("<span title='#=data.AssetDeprGroup#'>#=data.AssetDeprGroup#</span>").Width(85);
            c.ForeignKey(p => p.AssetDeprClass, data2).Title("Class").HeaderHtmlAttributes(new { style = "text-align: center" }).Width(53);                                    
            c.Group(gr => gr
            .Title("AMT").HeaderHtmlAttributes(new { style = "text-align: center" })
                .Columns(info =>
                {
                    info.ForeignKey(p => p.MethodAMT, data1).HeaderHtmlAttributes(new { style = "text-align: center" }).Title("Method").Format("{0:p0}").Width(41);
                    info.ForeignKey(p => p.ConventionAMT, data).HeaderHtmlAttributes(new { style = "text-align: center" }).Title("Convention").Width(41);
                    info.Bound(p => p.LifeAMT).HeaderHtmlAttributes(new { style = "text-align: center" }).Title("Life").Width(25);                    
                })
                );               
            c.Command(command =>
            {
                command.Edit(); command.Destroy();
            }).Visible(hasCRUDpermission)                                      
                .Width(55)
                .Title("Action")
                .HtmlAttributes(new { style = "text-align: center;" })
                .HeaderHtmlAttributes(new { style = "text-align: center;" });
        })

        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Scrollable()
        .DataSource(ds => ds
            .Ajax()
            .ServerOperation(true)
            .Events(e => e.Sync("sync_handler").Change("autoPopulate"))                                                
            .Read("GetAssetDeprGroups", "ProjectManagement")
            .Create("CreateAssetGroups", "ProjectManagement")
            .Update(update=>update.Action("UpdateAssetGroups", "ProjectManagement").Data("additionalInfo"))
            .Destroy("DeleteAssetGroups", "ProjectManagement")

So on my change event i am calling below javascript.

 function autoPopulate(e) {
        if (e.action == 'itemchange' && e.field == 'AssetDeprClass') {            
            //var grid = $("#AssetDeprGrid").data("kendoGrid");
            var assetClassUrl = "@Url.Content("~/ProjectManagement/GetAssetDeprClass")";
            var assetClass = $("#AssetDeprClass").val();
            $.ajax({
                url: assetClassUrl,
                type: "POST",
                data: { assetClass: assetClass },
                success :function(d) {                    
                    var classData = d.Data[0];                    

                    $("#LifeAMT").val(classData.LifeAMT).toString();
                    $("#MethodAMT").val(classData.MethodAMT).toString();
                   $("#ConventionAMT").val(classData.ConventionAMT).toString();                                               }            
            });
        }
    };

The columns are updating fine with the latest data hwen we submit but the columns with foreign key are not reflecting their value on grid dropdown. It shows the same data as previous.

Any solution?

Answer 1

data, data1 and data2 should be Enumerable type and include key and value then you should specify key and value in the ForeignKey column

for example if MethodAMT is your foreignkey:

info.ForeignKey(p => p.MethodAMT, data1 , "MeshodAMT" ,"MeshodAMTTitle").HeaderHtmlAttributes(new { style = "text-align: center" }).Title("Method").Format("{0:p0}").Width(41);