KendoUI Jquery grid - parameters on WebAPI has null

1 Answer 199 Views
Grid
Jagat
Top achievements
Rank 1
Jagat asked on 28 Apr 2021, 07:17 PM

Hello,

I am trying Kendo UI to see if we can use it in our projects.

This is my first attempt to load a grid. The WebAPI method gets hit but, the parameters on the WebAPI side are showing as null.

Can anyone let me know what needs to be changed here?


 var costCenter = {

                        Contract_StartDate : '01/01/2021',  
                        Contract_EndDate : '05/01/2021'
                        Grant_ID : 750  
                    }
       
                            
       
         var crudServiceBaseUrl = 'http://localhost:55383/api/CostCenterSetup',
             dataSource = new kendo.data.DataSource({
                 
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/GetCostCenterDataForEdit",
                            type:"POST",
                            data: function () {
                                alert(costCenter.Contract_StartDate);
                                return costCenter
                            },
                                //{
                                //    Contract_StartDate: "01/01/2021", 
                                //    Contract_EndDate : "05/01/2021",
                                //    Grant_ID: "750"  
                                //}                            ,    
                            contentType : "application/json",
                            dataType: "json"
                        },
                        //,
                        //update: {
                        //    url: crudServiceBaseUrl + "/UpdateCostCenterInfo",
                        //    dataType: "jsonp"
                        //},
                        //destroy: {
                        //    url: crudServiceBaseUrl + "/DeleteCostCenterInfo",
                        //    dataType: "jsonp"
                        //},
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    autoSync: true,
                    aggregate: [{
                        field: "TotalSales",
                        aggregate: "sum"
                    }],
                    group: {
                        field: "Category.CategoryName",
                        dir: "desc",
                        aggregates: [
                            { field: "TotalSales", aggregate: "sum" }
                        ]
                    },
                    schema: {
                        model: {
                            id: "CostCenterID",
                            fields: {
                                CostCenterID: { editable: false, nullable: true },
                                CostCenter_Name: { type: "string", editable: false },
                                Grant_ID: { type: "string", editable: false },
                                Fund_ID: { type: "string", editable: false },
                                Department_ID: { type: "string", editable: false },
                                Program_ID: { type: "string", editable: false },                               
                                //Fund: {
                                //    defaultValue: {
                                //        FundID: -1,
                                //        FundName: "---Select---"
                                //    }
                                //},
                                //Grant: {
                                //    defaultValue: {
                                //        GrantID: -1,
                                //        Grant: "---Select---"
                                //    }
                                //},
                                //Department: {
                                //    defaultValue: {
                                //        DepartmentID: -1,
                                //        Department: "---Select---"
                                //    }
                                //},
                                //Program: {
                                //    defaultValue: {
                                //        ProgramID: -1,
                                //        Program: "---Select---"
                                //    }
                                //}
                            }
                        }
                    }
                });

        function Loadgrid() {

                $("#kuiGrid").kendoGrid({
                        dataSource: dataSource,
                        columnMenu: {
                            filterable: false
                        },
                        height: 680,
                        editable: "incell",
                        pageable: true,
                        sortable: true,
                        navigatable: true,
                        resizable: true,
                        reorderable: true,
                        groupable: true,
                        filterable: true,
                        toolbar: ["excel", "pdf", "search"],
                        columns: [{
                            selectable: true,
                            width: 75,
                            attributes: {
                                "class": "checkbox-align",
                            },
                            headerAttributes: {
                                "class": "checkbox-align",
                            }
                        }, {
                            field: "CostCenterID",
                            title: "CostCenterID",
                            //format: "{0:c}",
                            width: 105
                        },{
                            field: "CostCenter_Name",
                            title: "CostCenter_Name",
                           // template: "<div class='product-photo' style='background-image: url(../content/web/foods/#:data.ProductID#.jpg);'></div><div class='product-name'>#: ProductName #</div>",
                            width: 300
                        }, {
                            field: "Grant_ID",
                            title: "GrantID",
                            //format: "{0:c}",
                            width: 105
                        }, {
                            field: "Fund_ID",
                            title: "Fund ID",
                            //template: "<span id='badge_#=ProductID#' class='badgeTemplate'></span>",
                            width: 130,
                        },  {
                            field: "Department_ID",
                            title: "DepartmentID",
                            width: 105
                        }, {
                            field: "Program_ID",
                            title: "ProgramID",
                            //format: "{0:c}",
                            width: 140
                            //aggregates: ["sum"],
                        },{
                            field: "Fund",
                            title: "Fund List",
                            editor: clientFundEditor,
                            //groupHeaderTemplate: "Category: #=data.value#, Total Sales: #=kendo.format('{0:c}', aggregates.TotalSales.sum)#",
                            width: 125
                        }, {
                            field: "Grant",
                                title: "Grant List",
                            //editor: clientCategoryEditor,
                            //template: "<input id='rating_#=ProductID#' data-bind='value: CustomerRating' class='rating'/>",
                            //editable: returnFalse,
                            width: 140
                        }, {
                            field: "Department",
                            title: "Department List",
                            //template: "<div class='k-text-center'><img src='../content/web/country-flags/#:data.Country.CountryNameShort#.png' alt='#: data.Country.CountryNameLong#' title='#: data.Country.CountryNameLong#' width='30' /></div>",
                            //editor: clientCountryEditor,
                            width: 120
                        }, {
                            field: "Program",
                                title: "Program List",
                            //editor: clientCategoryEditor,
                            //format: "{0:c}",
                            //template: "<span id='chart_#= ProductID#' class='sparkline-chart'></span>",
                            width: 220
                        },
                        { command: "destroy", title: "&nbsp;", width: 120 }],
                    });
                //});

        }

       

        function clientFundEditor(container, options) {
            $('<input required name="Country">')
                .appendTo(container)
                .kendoDropDownList({
                    dataTextField: "FundName",
                    dataValueField: "FundID",
                    dataSource: {
                        transport: {
                            read: {
                                 url: 'http://localhost:55383/api/Lookups/GetFunds',
                                 data: {
                                    CID: 'CONAME',
                                    TableName: 'Lkup_Funds'
                                 },
                                 dataType: "jsonp"
                            }
                        }
                    },
                    autoWidth: true
                });
        }


 

 

Web API  Code:

 


[System.Web.Http.Route("api/CostCenterSetup/GetCostCenterDataForEdit")]
        [System.Web.Http.HttpPost]
        public List<CostCenter> GetCostCenterDataForEdit(CostCenterEdit costCenterDetails)
        {}

 public class CostCenterEdit
    {
        
        public string Contract_StartDate { get; set; }

        public string Contract_EndDate { get; set; }
        public string Grant_ID { get; set; }
    }

 

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 03 May 2021, 08:33 AM

Hi Jagat,

In general, the parameters that are sent from the client-side should match the parameter names on the server-side. Hence, you could try returning a JavaScript object with a costCenterDetails property?

 data: function () {
                                alert(costCenter.Contract_StartDate);
                                return { costCenterDetails: costCenter };
                            }

Let me know if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Jagat
Top achievements
Rank 1
commented on 19 May 2021, 08:48 PM

Tsvetomir,

That worked.

On that same grid , i want to update and am stuck again. Clicking on "Update" button on the grid row does nothing. I do not see any error either. Am I missing anything here?


dataSource = new kendo.data.DataSource({
                 
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/GetCostCenterDataForEdit",
                            type:"POST",
                            data: function () {
                                return CostCenterEdit;
                            },
                            contentType : "application/json",
                            dataType: "json"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/UpdateCostCenter",
                            type:"POST",
                            data: function () {
                                return kendo.stringify(options.model);
                                //CostCenterEdit.UpdateUserID = localStorage.getItem("username");
                                //return e.model;
                               // return option.model;
                            },
                            contentType : "application/json",
                            dataType: "json"
                        },
                        parameterMap: function (options, operation) {
                            
                            if (operation === "update" && options.model) {
                               
                                return { models: kendo.stringify(options.model) };
                            }
                            else  if (operation === "read") {
                                
                                return kendo.stringify(options);
                            }
                             
                        }
                    },
                    batch: false,

 

 

WebAPI code looks like:


  [System.Web.Http.Route("api/CostCenterSetup/UpdateCostCenter")]
        [System.Web.Http.HttpPost]
        public string UpdateCostCenter(CostCenter costCenterDetails)
        {
	}

 

 

Tsvetomir
Telerik team
commented on 24 May 2021, 01:11 PM

I have investigated the provided code snippets and I noticed that the model of the data source is missing the schema.model.id option

The id is needed in order for the grid to keep track of the edited rows, otherwise, it would not be able to locate the exact data item and send it over to the server-side.

Tags
Grid
Asked by
Jagat
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or