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: " ", 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
0
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
commented on 19 May 2021, 08:48 PM
Top achievements
Rank 1
Rank 1
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
commented on 24 May 2021, 01:11 PM
Telerik team
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.