Rank 1
Hi am trying to do crud operation using javascript kendo grid with webapi. But one issue am facing here is that,even for update and delete also,post method only hitting. Kindly help me out. Below is my code
JS
-----
@{
ViewBag.Title = "KendoGrid";
}
<html>
<head>
<title></title>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.k-grid tbody .k-button {
width: 81px !important;
height: 25px;
font-size: small;
}
#grid .k-grid-header .k-header {
background-color: white;
font-weight: bold;
}
.k-tooltip {
background-color: orange !important;
width: 300px;
height: 60px;
}
.k-tooltip-content {
vertical-align: middle;
}
.k-tooltip-content p {
float: left;
}
.k-tooltip-content p {
font-size: 1.4em;
padding: 20px;
width: 160px;
text-align: left;
}
.k-grid-content > table > tbody > tr {
/*background-color: white;*/
background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
padding: 20px;
}
.k-grid-content > table > tbody > .k-alt {
/*background-color: lightgray !important;*/
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
}
.k-master-row {
background-color: white;
}
.k-grid tbody tr {
height: 10px !important;
}
.k-grid tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 10px !important;
}
.k-grid .k-alt {
background-color: lightgoldenrodyellow;
}
/*selection*/
.k-grid table tr.k-state-selected {
background: #f99;
color: #fff;
}
.highlightedRow {
background-color: yellow !important;
}
.k-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
/* Hide the Grid header and pager during export */
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap,
.k-pdf-export a.k-button.k-button-icontext,
.k-pdf-export .k-filter-row,
.k-pdf-export .k-grouping-header,
.k-pdf-export .k-grid tr td:last-child {
display: none !important;
}
</style>
<link href="~/Content/KendoStyles/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/Content/KendoStyles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/KendoStyles/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Jszip.js"></script>
<script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="windowTemplate">
Delete this client
<strong>#= MasterName #</strong>?
<br />
<br />
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script>
kendo.pdf.defineFont({
"DejaVu Sans": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/pako_deflate.min.js"></script>
</head>
<body>
<div id="window"></div>
<div id="example">
<button id="show_col" class="k-button">Show Master Name</button>
<button id="hide_col" class="k-button">Hide Master Name</button>
<div id="grid"></div>
@*<div id="sample"></div>
<br /> <br />
<div id="child"></div>*@
<script>
var hide = false;
var ClientMaster = [
{ "ClientID": 1, "ClientName": "Verizon Consumer", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "ClientID": 2, "ClientName": "Fiserv Securities Inc - 8137", "AppDesc": "*** ALL ***", "WC3ClientKey": "22-33" },
{ "ClientID": 3, "ClientName": "Kaiser Permanente - Colorado (8079)", "AppDesc": "Statements-Statements", "WC3ClientKey": "29-58" },
{ "ClientID": 4, "ClientName": "Kaiser Permanente - Georgia (1381)", "AppDesc": "*** ALL ***", "WC3ClientKey": "29-56" },
{ "ClientID": 5, "ClientName": "United Concordia - 8025", "AppDesc": "CARDS-Cards", "WC3ClientKey": "35-77" },
{ "ClientID": 6, "ClientName": "AAA Colorado - 1439", "AppDesc": "Cards-AAA Colorado Cards", "WC3ClientKey": "39-69" },
{ "ClientID": 7, "ClientName": "Empire BCBS National Accounts - 04270", "AppDesc": "Digital-DC5 Digital Cards", "WC3ClientKey": "52-92" },
{ "ClientID": 8, "ClientName": "CapitalOne - 4345", "AppDesc": "DC5E - T-Empire DC5E Test", "WC3ClientKey": "53-94" },
{ "ClientID": 9, "ClientName": "BOA - 4270", "AppDesc": "No ClientApplication", "WC3ClientKey": "62-73" },
{ "ClientID": 10, "ClientName": "Amazon - 2250", "AppDesc": "Card Only", "WC3ClientKey": "54-98" },
{ "ClientID": 111, "ClientName": "USAA", "AppDesc": "Electronic cards", "WC3ClientKey": "49-25" },
{ "ClientID": 112, "ClientName": "POC Demo", "AppDesc": "Demo cards", "WC3ClientKey": "87-96" },
{ "ClientID": 113, "ClientName": "Reliant Invoices", "AppDesc": "Emails", "WC3ClientKey": "14-82" },
{ "ClientID": 114, "ClientName": "Fiserv Atlanta - 20000", "AppDesc": "Emails", "WC3ClientKey": "54-21" },
{ "ClientID": 115, "ClientName": "Berkshire - 04730", "AppDesc": "Emails", "WC3ClientKey": "67-11" }
];
var ClientDetails1 = [
{ "MasterClientID": 1, "ClientID": 11, "ClientName": "Tier 1 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 12, "ClientName": "Tier 1 Verizon Consumer - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 13, "ClientName": "Tier 1 Verizon Consumer - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 14, "ClientName": "Tier 1 Verizon Consumer - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 15, "ClientName": "Tier 1 Verizon Consumer - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 16, "ClientName": "Tier 1 Verizon Consumer - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 17, "ClientName": "Tier 1 Verizon Consumer - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 18, "ClientName": "Tier 1 Verizon Consumer - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 19, "ClientName": "Tier 1 Verizon Consumer - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 20, "ClientName": "Tier 1 Verizon Consumer - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 2, "ClientID": 21, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 22, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 23, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 24, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 25, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 26, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 27, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 28, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 29, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 30, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 5, "ClientID": 31, "ClientName": "Tier 1 United Concordia - 8025 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 32, "ClientName": "Tier 1 United Concordia - 8025 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 33, "ClientName": "Tier 1 United Concordia - 8025 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 34, "ClientName": "Tier 1 United Concordia - 8025 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 35, "ClientName": "Tier 1 United Concordia - 8025 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 36, "ClientName": "Tier 1 United Concordia - 8025 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 37, "ClientName": "Tier 1 United Concordia - 8025 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 38, "ClientName": "Tier 1 United Concordia - 8025 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 39, "ClientName": "Tier 1 United Concordia - 8025 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 40, "ClientName": "Tier 1 United Concordia - 8025 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" }
];
var clientDetails2 = [
{ "MasterClientID": 11, "ClientID": 211, "ClientName": "Tier 2 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 212, "ClientName": "Tier 2 Verizon Consumer - Virginia - Fairfax", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 213, "ClientName": "Tier 2 Verizon Consumer - Virginia - Chantilly", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 214, "ClientName": "Tier 2 Verizon Consumer - Virginia - Beach", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 215, "ClientName": "Tier 2 Verizon Consumer - Virginia - Loudon", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 216, "ClientName": "Tier 2 Verizon Consumer - Virginia - Centreville", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 217, "ClientName": "Tier 2 Verizon Consumer - Virginia - Potomac", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 218, "ClientName": "Tier 2 Verizon Consumer - Virginia - Leesburg", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 219, "ClientName": "Tier 2 Verizon Consumer - Virginia - Reston", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 220, "ClientName": "Tier 2 Verizon Consumer - Virginia - winfield", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" }
]
var clientMasterID = ClientMaster.length + 1;
var selected = [];
var uids = [];
var gridElement;
function getIndexById(id) {
var idx,
l = ClientMaster.length;
for (var j; j < l; j++) {
if (ClientMaster[j].ClientID == id) {
return j;
}
}
return null;
}
//var testJson = [{ "MasterClientID": 0, "MasterName": "TestFOS", "MasterControlID": null, "Description": null, "StatusInd": null, "ActiveInd": false, "LastUpdateOn": "2015-08-25T10:35:40.74", "LastUpdateBy": "TESTCOG1", "BusinessVertical": null }];
var windowTemplate = kendo.template($("#windowTemplate").html());
$(document).ready(function () {
var crudServiceBaseUrl = "";
var tblMasterClient = [];
var tblMasterClientsDataSource = new kendo.data.DataSource({
//batch: false,
//transport: {
//read: {
// url: "/Home/MsgDetails_Read",
// contentType: "application/json; charset=utf-8",
// type: "GET"
//},
//read: function (e) {
// e.success(ClientMaster);
//},
//create: {
// //e.data.ClientID = clientMasterID++;
// //ClientMaster.push(e.data);
// //e.success(e.data);
// url: "/api/tblMasterClients",
// contentType: "application/json",
// type: "POST"
//},
// read:
// {
// url: "/api/tblMasterClients",
// },
// update: {
// ClientMaster[getIndexById(e.data.ClientID)] = e.data;
// e.success();
// url: "/api/tblMasterClients",
// type: "PUT"
// },
// destroy: function (e) {
// destroy: {
// ClientMaster.splice(getIndexById(e.data.ClientID), 1);
// e.success();
// url: "/api/tblMasterClients",
// type: "DELETE"
// },
// update: {
// url: function (tblMasterClient) {
// return "api/tblMasterClients/" + tblMasterClient.MasterClientID;
// },
// contentType: "application/json",
// type: "PUT"
// },
// destroy: {
// url: function (tblMasterClient) {
// return "api/products/" + tblMasterClient.MasterClientID;
// },
// contentType: "application/json",
// type: "DELETE"
// },
// parameterMap: function (options, operation) {
// if (operation !== "read" && options.models) {
// return { models: kendo.stringify(options.models) };
// }
// },
// error: function (e) {
// alert("Status: " + e.status + "; Error message: " + e.errorThrown);
// },
// serverFiltering: true,
//},
//resizable: true,
//toolbar: ["pdf", "create"],
//pageSize: 10,
//schema: {
// //data: "d",
// //total: function (response) { // For grid item count botttom right of grid
// // return $(response.d).length;
// //},
// model: {
// fields: {
// MasterClientID: { editable: true, nullable: true, type: "number" },
// MasterName: { validation: { required: true } }
// }
// }
//},
//serverPaging: true
transport: {
read: {
url: "/api/tblMasterClients",
type: "GET"
},
create:
{
url:"/api/tblMasterClients",
//data: JSON.stringify(testJson),
//data: JSON.stringify({ 'tblMasterClient': $("#grid").data("kendoGrid").dataSource.view() }),
//contentType: "application/json",
dataType: "json",
type: "POST"
},
update: {
url: "/api/tblMasterClients",
type: "Put",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
destroy: {
url: "/api/tblMasterClients",
type: "Delete",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
//parameterMap: function (options, operation) {
// debugger;
// //if (operation !== "read" && options.models) {
// //if (operation !== "read") {
// // // return { models: kendo.stringify(options.models) };
// // return JSON.stringify(options);
// //}
// if (operation === "update") {
// return { masterClientID: options.MasterClientID }
// }
// if (operation === "create") {
// return JSON.stringify({ MasterName: options.MasterName });
// }
// if (operation === "destroy") {
// return { masterClientID: options.MasterClientID }
// }
//},
parameterMap: function (options, operation) {
//if (operation !== "read" && options.models) {
// return { models: JSON.stringify(options.models) };
//}
if (operation !== "read") {
//tblMasterClient.push({ 'tblMasterClient': JSON.stringify(options) })
return options;
}
}
},
editable: { //disables the deletion functionality
update: true,
destroy: true
},
batch:false,
serverPaging: true,
schema: {
//data: "data", // records are returned in the "data" field of the response
//total: "total" // total number of records is in the "total" field of the response
id: "MasterClientID",
model: {
fields: {
MasterClientID: { editable: false, nullable: true, type: "number" },
MasterName: { validation: { required: true } }
}
}
},
pageSize: 20
});
var element = $("#grid").kendoGrid({
dataSource: tblMasterClientsDataSource,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
height: 430,
scrollable: {
virtual: true
},
sortable: true,
resizable: true,
//pageable: {
// pageSize: 10,
// refresh: true,
// pageSizes: true,
// buttonCount: 5
//},
editable: "popup",
groupable: true,
selectable: "multiple",
reorderable: true,
dataBinding: function (e) {
//store the uids of selected rows
$("#grid .k-state-selected").each(function () {
uids.push($(this).data("uid"));
});
},
dataBound: function (e) {
if (uids.length != 0) {
for (var i = 0; i < uids.length; i++) {
var curr_uid = uids[i];
//find and reselect the rows via their uid attribute
this.tbody.find("tr[data-uid='" + curr_uid + "']").addClass("k-state-selected");
}
}
},
//detailInit: detailInit,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
toolbar: ["pdf", "excel", "create"],
pdf: {
allPages: true,
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
columns: [
//{
// field: "MsgNum",
// title: "Message Number",
// width: "200px",
// filterable: {
// ui: cardNameFilter
// }
//},
//{
// field: "MsgDesc",
// title: "Message Description",
// width: "200px",
// filterable: {
// ui: industryTypeFilter
// }
//},
{
field: "MasterClientID",
title: "Master Client ID",
width: "200px",
type:"number"
},
{
field: "MasterName",
title: "Master Name",
width: "200px"
},
{
command: [
{ name: "edit" },
{
name: "Delete",
click: function (e) { //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var dataItem = this.dataItem(tr); //get the row data so it can be referred later
kendoWindow.content(windowTemplate(dataItem)); //send the row data object to the template and render it
kendoWindow.open().center();
$("#yesButton").click(function () {
$("#grid").data('kendoGrid').dataSource.remove(dataItem);
$("#grid").data('kendoGrid').dataSource.sync();
kendoWindow.close();
})
$("#noButton").click(function () {
kendoWindow.close();
})
}
}
]
},
]
}).data("kendoGrid");
var tooltip = $("#grid").kendoTooltip({
filter: "tr", //this filter selects the first column cells
position: "bottom",
content: function (e) {
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem;
//var target = e.target; // element for which the tooltip is shown
//return $(target).text();
var masterClientID = dataItem.MasterClientID;
var masterClientName = dataItem.MasterName;
//var appDesc = dataItem.AppDesc;
//var wc3ClientKey = dataItem.WC3ClientKey;
//alert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <span style="text-decoration: underline;">underline</span>!');
var dataContent = ('Master Client ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName);
//var dataContent = ('Master Client ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName + '<br>' + 'App Description: ' + appDesc + '<br>' + 'Wc3ClientKey: ' + wc3ClientKey);
return dataContent;
//return content
}
}).data("kendoTooltip");
//$(element.tbody).on("click", "tr", function (e) {
// $(this).addClass("highlightedRow");
//});
$("#show_col").on("click", function () {
element.showColumn(1);
});
$("#hide_col").on("click", function () {
element.hideColumn(1);
});
$("#txtSearchString").keydown(function (event) {
onSearch();
})
});
function SaveClientDetails() {
var postUrl;
var paramValue;
var gridData = $("#grid").data("kendoGrid").dataSource.data();
alert(gridData);
postUrl = '@Url.Content("/api/tblMasterClients/")';
paramValue = JSON.stringify({ 'tblMasterClients': gridData });
$.ajax({
url: postUrl,
type: 'POST',
dataType: 'json',
data: paramValue,
contentType: 'application/json; charset=utf-8',
success: function (result) {
console.log(result);
},
error: function (objAjaxRequest, strError) {
var respText = objAjaxRequest.responseText;
console.log(respText);
}
});
}
var kendoWindow = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
width: "360px",
height: "100px"
}).data("kendoWindow");
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: ClientDetails1
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
,
scrollable: false,
sortable: true,
resizable: true,
detailInit: detailInit1,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
pageable: {
pageSize: 10,
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ClientID", title: "Client ID", width: "80px", type: "number" },
{ field: "ClientName", title: "Client Name", width: "150px" },
{ field: "AppDesc", title: "App Description", width: "150px" },
{ field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },
],
editable: "popup"
});
}
function detailInit1(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: clientDetails2
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
,
scrollable: false,
sortable: true,
resizable: true,
pageable: {
pageSize: 10,
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
columns: [
{ field: "ClientID", title: "Client ID", width: "80px", type: "number" },
{ field: "ClientName", title: "Client Name", width: "150px" },
{ field: "AppDesc", title: "App Description", width: "150px" },
{ field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },
],
editable: "popup"
});
}
</script>
</div>
</body>
</html>
webapi
-----------------
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using System.Web.Mvc;
namespace KendoGridPOC
{
public class tblMasterClientsController : ApiController
{
private WC3OnlineEntities db = new WC3OnlineEntities();
// GET: api/tblMasterClients
public IQueryable<tblMasterClient> GettblMasterClients()
{
return db.tblMasterClients;
}
// GET: api/tblMasterClients/5
[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult GettblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
return Ok(tblMasterClient);
}
// PUT: api/tblMasterClients/5
[ResponseType(typeof(void))]
[System.Web.Mvc.AcceptVerbs(HttpVerbs.Put)]
public IHttpActionResult PuttblMasterClient(int id, tblMasterClient tblMasterClient)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != tblMasterClient.MasterClientID)
{
return BadRequest();
}
db.Entry(tblMasterClient).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!tblMasterClientExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/tblMasterClients
[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult PosttblMasterClient(tblMasterClient tblMasterClient)
{
//tblMasterClient tblMasterClient
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.tblMasterClients.Add(tblMasterClient);
db.SaveChanges();
//return null;
return CreatedAtRoute("DefaultApi", new { id = tblMasterClient.MasterClientID }, tblMasterClient);
}
// DELETE: api/tblMasterClients/5
[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult DeletetblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
db.tblMasterClients.Remove(tblMasterClient);
db.SaveChanges();
return Ok(tblMasterClient);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool tblMasterClientExists(int id)
{
return db.tblMasterClients.Count(e => e.MasterClientID == id) > 0;
}
}
}​
8 Answers, 1 is accepted
In the grid settings you have explicitly set the content type of the POST payload to be application/json, however, the server is expecting form data. Hence, the POST requests that are made are unlikely to work.
Please remove the content-type application/json so that the Grid transport can serialize the payload as form value.
For reference, I am attaching a sample Kendo Grid + WebAPI project here. I hope this can help you to get started.
Regards,
Genady Sergeev
Telerik
Rank 1
please see my code. I have tried with your sample reference.But still am getting the same issue. Kindly see my cshtml and webapi code below.
cshtml code:
---------------------
@{
ViewBag.Title = "KendoGrid";
}
<html>
<head>
<title></title>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.k-grid tbody .k-button {
width: 81px !important;
height: 25px;
font-size: small;
}
#grid .k-grid-header .k-header {
background-color: white;
font-weight: bold;
}
.k-tooltip {
background-color: orange !important;
width: 300px;
height: 60px;
}
.k-tooltip-content {
vertical-align: middle;
}
.k-tooltip-content p {
float: left;
}
.k-tooltip-content p {
font-size: 1.4em;
padding: 20px;
width: 160px;
text-align: left;
}
.k-grid-content > table > tbody > tr {
/*background-color: white;*/
background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
padding: 20px;
}
.k-grid-content > table > tbody > .k-alt {
/*background-color: lightgray !important;*/
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
}
.k-master-row {
background-color: white;
}
.k-grid tbody tr {
height: 10px !important;
}
.k-grid tbody tr td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 10px !important;
}
.k-grid .k-alt {
background-color: lightgoldenrodyellow;
}
/*selection*/
.k-grid table tr.k-state-selected {
background: #f99;
color: #fff;
}
.highlightedRow {
background-color: yellow !important;
}
.k-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
/* Hide the Grid header and pager during export */
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap,
.k-pdf-export a.k-button.k-button-icontext,
.k-pdf-export .k-filter-row,
.k-pdf-export .k-grouping-header,
.k-pdf-export .k-grid tr td:last-child {
display: none !important;
}
</style>
<link href="~/Content/KendoStyles/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/Content/KendoStyles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/KendoStyles/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Jszip.js"></script>
<script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="windowTemplate">
Delete this client
<strong>#= MasterName #</strong>?
<br />
<br />
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script>
kendo.pdf.defineFont({
"DejaVu Sans": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/pako_deflate.min.js"></script>
</head>
<body>
<div id="window"></div>
<div id="example">
<button id="show_col" class="k-button">Show Master Name</button>
<button id="hide_col" class="k-button">Hide Master Name</button>
<div id="grid"></div>
<div id="test"></div>
@*<div id="sample"></div>
<br /> <br />
<div id="child"></div>*@
<script>
var hide = false;
var ClientMaster = [
{ "ClientID": 1, "ClientName": "Verizon Consumer", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "ClientID": 2, "ClientName": "Fiserv Securities Inc - 8137", "AppDesc": "*** ALL ***", "WC3ClientKey": "22-33" },
{ "ClientID": 3, "ClientName": "Kaiser Permanente - Colorado (8079)", "AppDesc": "Statements-Statements", "WC3ClientKey": "29-58" },
{ "ClientID": 4, "ClientName": "Kaiser Permanente - Georgia (1381)", "AppDesc": "*** ALL ***", "WC3ClientKey": "29-56" },
{ "ClientID": 5, "ClientName": "United Concordia - 8025", "AppDesc": "CARDS-Cards", "WC3ClientKey": "35-77" },
{ "ClientID": 6, "ClientName": "AAA Colorado - 1439", "AppDesc": "Cards-AAA Colorado Cards", "WC3ClientKey": "39-69" },
{ "ClientID": 7, "ClientName": "Empire BCBS National Accounts - 04270", "AppDesc": "Digital-DC5 Digital Cards", "WC3ClientKey": "52-92" },
{ "ClientID": 8, "ClientName": "CapitalOne - 4345", "AppDesc": "DC5E - T-Empire DC5E Test", "WC3ClientKey": "53-94" },
{ "ClientID": 9, "ClientName": "BOA - 4270", "AppDesc": "No ClientApplication", "WC3ClientKey": "62-73" },
{ "ClientID": 10, "ClientName": "Amazon - 2250", "AppDesc": "Card Only", "WC3ClientKey": "54-98" },
{ "ClientID": 111, "ClientName": "USAA", "AppDesc": "Electronic cards", "WC3ClientKey": "49-25" },
{ "ClientID": 112, "ClientName": "POC Demo", "AppDesc": "Demo cards", "WC3ClientKey": "87-96" },
{ "ClientID": 113, "ClientName": "Reliant Invoices", "AppDesc": "Emails", "WC3ClientKey": "14-82" },
{ "ClientID": 114, "ClientName": "Fiserv Atlanta - 20000", "AppDesc": "Emails", "WC3ClientKey": "54-21" },
{ "ClientID": 115, "ClientName": "Berkshire - 04730", "AppDesc": "Emails", "WC3ClientKey": "67-11" }
];
var ClientDetails1 = [
{ "MasterClientID": 1, "ClientID": 11, "ClientName": "Tier 1 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 12, "ClientName": "Tier 1 Verizon Consumer - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 13, "ClientName": "Tier 1 Verizon Consumer - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 14, "ClientName": "Tier 1 Verizon Consumer - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 15, "ClientName": "Tier 1 Verizon Consumer - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 16, "ClientName": "Tier 1 Verizon Consumer - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 17, "ClientName": "Tier 1 Verizon Consumer - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 18, "ClientName": "Tier 1 Verizon Consumer - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 19, "ClientName": "Tier 1 Verizon Consumer - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 1, "ClientID": 20, "ClientName": "Tier 1 Verizon Consumer - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 2, "ClientID": 21, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 22, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 23, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 24, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 25, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 26, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 27, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 28, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 29, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 2, "ClientID": 30, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
{ "MasterClientID": 5, "ClientID": 31, "ClientName": "Tier 1 United Concordia - 8025 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 32, "ClientName": "Tier 1 United Concordia - 8025 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 33, "ClientName": "Tier 1 United Concordia - 8025 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 34, "ClientName": "Tier 1 United Concordia - 8025 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 35, "ClientName": "Tier 1 United Concordia - 8025 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 36, "ClientName": "Tier 1 United Concordia - 8025 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 37, "ClientName": "Tier 1 United Concordia - 8025 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 38, "ClientName": "Tier 1 United Concordia - 8025 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 39, "ClientName": "Tier 1 United Concordia - 8025 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
{ "MasterClientID": 5, "ClientID": 40, "ClientName": "Tier 1 United Concordia - 8025 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" }
];
var clientDetails2 = [
{ "MasterClientID": 11, "ClientID": 211, "ClientName": "Tier 2 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 212, "ClientName": "Tier 2 Verizon Consumer - Virginia - Fairfax", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 213, "ClientName": "Tier 2 Verizon Consumer - Virginia - Chantilly", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 214, "ClientName": "Tier 2 Verizon Consumer - Virginia - Beach", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 215, "ClientName": "Tier 2 Verizon Consumer - Virginia - Loudon", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 216, "ClientName": "Tier 2 Verizon Consumer - Virginia - Centreville", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 217, "ClientName": "Tier 2 Verizon Consumer - Virginia - Potomac", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 218, "ClientName": "Tier 2 Verizon Consumer - Virginia - Leesburg", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 219, "ClientName": "Tier 2 Verizon Consumer - Virginia - Reston", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 220, "ClientName": "Tier 2 Verizon Consumer - Virginia - winfield", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" }
]
var clientMasterID = ClientMaster.length + 1;
var selected = [];
var uids = [];
var gridElement;
function getIndexById(id) {
var idx,
l = ClientMaster.length;
for (var j; j < l; j++) {
if (ClientMaster[j].ClientID == id) {
return j;
}
}
return null;
}
//var testJson = [{ "MasterClientID": 0, "MasterName": "TestFOS", "MasterControlID": null, "Description": null, "StatusInd": null, "ActiveInd": false, "LastUpdateOn": "2015-08-25T10:35:40.74", "LastUpdateBy": "TESTCOG1", "BusinessVertical": null }];
var windowTemplate = kendo.template($("#windowTemplate").html());
$(document).ready(function () {
var crudServiceBaseUrl = "";
var tblMasterClient = [];
var tblMasterClientsDataSource = new kendo.data.DataSource({
//batch: false,
//transport: {
//read: {
// url: "/Home/MsgDetails_Read",
// contentType: "application/json; charset=utf-8",
// type: "GET"
//},
//read: function (e) {
// e.success(ClientMaster);
//},
//create: {
// //e.data.ClientID = clientMasterID++;
// //ClientMaster.push(e.data);
// //e.success(e.data);
// url: "/api/tblMasterClients",
// contentType: "application/json",
// type: "POST"
//},
// read:
// {
// url: "/api/tblMasterClients",
// },
// update: {
// ClientMaster[getIndexById(e.data.ClientID)] = e.data;
// e.success();
// url: "/api/tblMasterClients",
// type: "PUT"
// },
// destroy: function (e) {
// destroy: {
// ClientMaster.splice(getIndexById(e.data.ClientID), 1);
// e.success();
// url: "/api/tblMasterClients",
// type: "DELETE"
// },
// update: {
// url: function (tblMasterClient) {
// return "api/tblMasterClients/" + tblMasterClient.MasterClientID;
// },
// contentType: "application/json",
// type: "PUT"
// },
// destroy: {
// url: function (tblMasterClient) {
// return "api/products/" + tblMasterClient.MasterClientID;
// },
// contentType: "application/json",
// type: "DELETE"
// },
// parameterMap: function (options, operation) {
// if (operation !== "read" && options.models) {
// return { models: kendo.stringify(options.models) };
// }
// },
// error: function (e) {
// alert("Status: " + e.status + "; Error message: " + e.errorThrown);
// },
// serverFiltering: true,
//},
//resizable: true,
//toolbar: ["pdf", "create"],
//pageSize: 10,
//schema: {
// //data: "d",
// //total: function (response) { // For grid item count botttom right of grid
// // return $(response.d).length;
// //},
// model: {
// fields: {
// MasterClientID: { editable: true, nullable: true, type: "number" },
// MasterName: { validation: { required: true } }
// }
// }
//},
//serverPaging: true
transport: {
read: {
url: "/api/tblmasterclients",
type: "GET"
},
create:
{
url: "/api/tblmasterclients",
//data: JSON.stringify(testJson),
//data: JSON.stringify({ 'tblMasterClient': $("#grid").data("kendoGrid").dataSource.view() }),
//contentType: "application/json",
//dataType: "json",
type: "POST"
},
update: {
url: "/api/tblmasterclients/puttblmasterclient",
type: "PUT",
//contentType: "application/json; charset=utf-8",
//dataType: "json"
},
destroy:
{
url: "/api/tblmasterclients/deletetblmasterclient",
type: "DELETE",
//contentType: "application/json; charset=utf-8",
//dataType: "json"
},
schema: {
model: {
id: "MasterClientID",
fields: {
MasterClientID: { editable: false, nullable: false, type: "number" },
MasterName: { validation: { required: true },type:"string" }
}
}
},
//parameterMap: function (options, operation) {
// debugger;
// //if (operation !== "read" && options.models) {
// //if (operation !== "read") {
// // // return { models: kendo.stringify(options.models) };
// // return JSON.stringify(options);
// //}
// if (operation === "update") {
// return { masterClientID: options.MasterClientID }
// }
// if (operation === "create") {
// return JSON.stringify({ MasterName: options.MasterName });
// }
// if (operation === "destroy") {
// return { masterClientID: options.MasterClientID }
// }
//},
parameterMap: function (options, operation) {
//if (operation !== "read" && options.models) {
// return { models: JSON.stringify(options.models) };
//}
if (operation !== "read") {
return options;
}
}
},
//editable: { //disables the deletion functionality
// update: true,
// destroy: true
//},
//batch:false,
serverPaging: true,
pageSize: 20
});
var element = $("#grid").kendoGrid({
dataSource: tblMasterClientsDataSource,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
height: 430,
scrollable: {
virtual: true
},
sortable: true,
resizable: true,
//pageable: {
// pageSize: 10,
// refresh: true,
// pageSizes: true,
// buttonCount: 5
//},
editable: "popup",
groupable: true,
selectable: "multiple",
reorderable: true,
dataBinding: function (e) {
//store the uids of selected rows
$("#grid .k-state-selected").each(function () {
uids.push($(this).data("uid"));
});
},
dataBound: function (e) {
if (uids.length != 0) {
for (var i = 0; i < uids.length; i++) {
var curr_uid = uids[i];
//find and reselect the rows via their uid attribute
this.tbody.find("tr[data-uid='" + curr_uid + "']").addClass("k-state-selected");
}
}
},
//detailInit: detailInit,
//filterable: {
// extra: false,
// operators: {
// string: {
// contains: "Contains",
// startswith: "Starts with",
// eq: "Is equal to",
// neq: "Is not equal to",
// endswith: "Ends with"
// }
// }
//},
toolbar: ["pdf", "excel", "create"],
pdf: {
allPages: true,
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
columns: [
//{
// field: "MsgNum",
// title: "Message Number",
// width: "200px",
// filterable: {
// ui: cardNameFilter
// }
//},
//{
// field: "MsgDesc",
// title: "Message Description",
// width: "200px",
// filterable: {
// ui: industryTypeFilter
// }
//},
{
field: "MasterClientID",
title: "Master Client ID",
width: "200px",
type:"number"
},
{
field: "MasterName",
title: "Master Name",
width: "200px"
},
{
command: [
{ name: "edit" },
{
name: "Delete",
click: function (e) { //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var dataItem = this.dataItem(tr); //get the row data so it can be referred later
kendoWindow.content(windowTemplate(dataItem)); //send the row data object to the template and render it
kendoWindow.open().center();
$("#yesButton").click(function () {
$("#grid").data('kendoGrid').dataSource.remove(dataItem);
$("#grid").data('kendoGrid').dataSource.sync();
kendoWindow.close();
})
$("#noButton").click(function () {
kendoWindow.close();
})
}
}
]
},
]
}).data("kendoGrid");
//$("#test").kendoGrid({
// dataSource: {
// transport: {
// read: "/api/tblmasterclients",
// create:
// {
// url: "/api/tblmasterclients",
// type: "POST"
// },
// update: {
// url: "/api/tblmasterclients",
// type: "PUT"
// },
// destroy: {
// url: "/api/tblmasterclients",
// type: "DELETE"
// }
// },
// schema: {
// model: {
// id: "MasterClientID",
// fields: {
// MasterClientID: { type: "number" },
// MasterName: { type: "string" }
// }
// }
// },
// parameterMap: function (options, operation) {
// //if (operation !== "read" && options.models) {
// // return { models: JSON.stringify(options.models) };
// //}
// alert(options.models);
// if (operation !== "read" && options.models) {
// return { models: JSON.stringify(options.models) };
// }
//}
// },
// toolbar: ["create"],
// editable: {
// mode: "popup"
// },
// height: 550,
// columns: [{
// field: "MasterClientID",
// filterable: false
// },
// {
// field: "MasterName",
// title: "Master Name"
// },
// {
// command: ["edit", "destroy"],
// title: " ", width: "250px"
// },
// ]
//});
var tooltip = $("#grid").kendoTooltip({
filter: "tr", //this filter selects the first column cells
position: "bottom",
content: function (e) {
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem;
//var target = e.target; // element for which the tooltip is shown
//return $(target).text();
var masterClientID = dataItem.MasterClientID;
var masterClientName = dataItem.MasterName;
//var appDesc = dataItem.AppDesc;
//var wc3ClientKey = dataItem.WC3ClientKey;
//alert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <span style="text-decoration: underline;">underline</span>!');
var dataContent = ('Master Client ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName);
//var dataContent = ('Master Client ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName + '<br>' + 'App Description: ' + appDesc + '<br>' + 'Wc3ClientKey: ' + wc3ClientKey);
return dataContent;
//return content
}
}).data("kendoTooltip");
//$(element.tbody).on("click", "tr", function (e) {
// $(this).addClass("highlightedRow");
//});
$("#show_col").on("click", function () {
element.showColumn(1);
});
$("#hide_col").on("click", function () {
element.hideColumn(1);
});
$("#txtSearchString").keydown(function (event) {
onSearch();
})
});
var kendoWindow = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
width: "360px",
height: "100px"
}).data("kendoWindow");
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: ClientDetails1
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
,
scrollable: false,
sortable: true,
resizable: true,
detailInit: detailInit1,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
pageable: {
pageSize: 10,
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ClientID", title: "Client ID", width: "80px", type: "number" },
{ field: "ClientName", title: "Client Name", width: "150px" },
{ field: "AppDesc", title: "App Description", width: "150px" },
{ field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },
],
editable: "popup"
});
}
function detailInit1(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: clientDetails2
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
,
scrollable: false,
sortable: true,
resizable: true,
pageable: {
pageSize: 10,
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
endswith: "Ends with"
}
}
},
columns: [
{ field: "ClientID", title: "Client ID", width: "80px", type: "number" },
{ field: "ClientName", title: "Client Name", width: "150px" },
{ field: "AppDesc", title: "App Description", width: "150px" },
{ field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },
],
editable: "popup"
});
}
</script>
</div>
</body>
</html>
My webapi code:
------------------------------
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using System.Web.Mvc;
namespace KendoGridPOC
{
public class tblMasterClientsController : ApiController
{
private WC3OnlineEntities db = new WC3OnlineEntities();
// GET: api/tblMasterClients
private readonly List<tblMasterClient> masterClients;
public tblMasterClientsController()
{
masterClients = new List<tblMasterClient>();
masterClients.AddRange(new tblMasterClient[] {
new tblMasterClient()
{
MasterClientID = 3001,
MasterName="TestFiserv"
},
new tblMasterClient()
{
MasterClientID = 3002,
MasterName="TestDefenders"
}
});
}
public List<tblMasterClient> GettblMasterClients()
{
return masterClients;
}
//public IQueryable<tblMasterClient> GettblMasterClients()
//{
// return db.tblMasterClients;
//}
// GET: api/tblMasterClients/5
//[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult GettblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
return Ok(tblMasterClient);
}
// PUT: api/tblMasterClients/5
[System.Web.Http.HttpPut]
//[ResponseType(typeof(void))]
public IHttpActionResult PuttblMasterClient(int id, tblMasterClient tblMasterClient)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != tblMasterClient.MasterClientID)
{
return BadRequest();
}
db.Entry(tblMasterClient).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!tblMasterClientExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/tblMasterClients
//[ResponseType(typeof(tblMasterClient))]
[System.Web.Http.HttpPost]
public IHttpActionResult PosttblMasterClient(tblMasterClient tblMasterClient)
{
//tblMasterClient tblMasterClient
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.tblMasterClients.Add(tblMasterClient);
// db.SaveChanges();
//return null;
return CreatedAtRoute("DefaultApi", new { id = tblMasterClient.MasterClientID }, tblMasterClient);
}
// DELETE: api/tblMasterClients/5
[System.Web.Http.HttpDelete]
//[ResponseType(typeof(tblMasterClient))]
public IHttpActionResult DeletetblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
db.tblMasterClients.Remove(tblMasterClient);
db.SaveChanges();
return Ok(tblMasterClient);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool tblMasterClientExists(int id)
{
return db.tblMasterClients.Count(e => e.MasterClientID == id) > 0;
}
}
}
Note: Also i tried with this method also
create:
{
url:"/api/clients/create",
type:"POST"
}​
But not at all working. Please help me.
Rank 1
I found the issue finally. But still i am having problem.Below is my webapi put and delete code. In that arguments are having "id" field.So both methods are not hitting.If i have only model,method is hitting. Kindly help me out.
public IHttpActionResult PuttblMasterClient(int id,tblMasterClient tblMasterClient)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != tblMasterClient.MasterClientID)
{
return BadRequest();
}
db.Entry(tblMasterClient).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!tblMasterClientExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}​
public IHttpActionResult DeletetblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
db.tblMasterClients.Remove(tblMasterClient);
db.SaveChanges();
return Ok(tblMasterClient);
}
​
Rank 1
I found the issue finally. But still i am having problem.Below is my webapi put and delete code. In that arguments are having "id" field.So both methods are not hitting.If i have only model,method is hitting. Kindly help me out.
public IHttpActionResult PuttblMasterClient(int id,tblMasterClient tblMasterClient)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != tblMasterClient.MasterClientID)
{
return BadRequest();
}
db.Entry(tblMasterClient).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!tblMasterClientExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}​
public IHttpActionResult DeletetblMasterClient(int id)
{
tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
if (tblMasterClient == null)
{
return NotFound();
}
db.tblMasterClients.Remove(tblMasterClient);
db.SaveChanges();
return Ok(tblMasterClient);
}
HI I already posted this issue. But still I didnt get any reply for this. Kindly help me out. Please reply as soon as possible.It will be very helpful for me.
Hello Palanisamy,
Most probably your routing is not correct. Your URLs in the dataSource configuration should not include the verb in them. So they should be like - tblmasterclient and tblmasterclient.
Are you able to call your methods without the dataSource, but using a standard Ajax call?
Regards,
Kiril Nikolov
Telerik
Rank 1
Rank 1
Thanks for your ideas. I found the solution. Please find the below code.
cshtml
-----------------
$("#test").kendoGrid({
dataSource: {
transport: {
read: "/api/tblmasterclients",
create:
{
url: "/api/tblmasterclients",
type: "POST"
},
update: {
url: function (tblmasterclient) {
return "/api/tblmasterclients/" + tblmasterclient.MasterClientID
},
type: "PUT"
},
destroy: {
url: function (tblmasterclient) {
return "/api/tblmasterclients/" + tblmasterclient.MasterClientID
},
type: "DELETE"
}
},
schema: {
model: {
id: "MasterClientID",
fields: {
MasterClientID: { type: "number" },
MasterName: { type: "string" }
}
}
},
parameterMap: function (options, operation) {
if (operation !== "read") {
return options;
}
}
},
toolbar: ["create"],
editable: {
mode: "popup"
},
height: 550,
columns: [{
field: "MasterClientID",
filterable: false
},
{
field: "MasterName",
title: "Master Name"
},
{
command: ["edit", "destroy"],
title: " ", width: "250px"
},
]
});​
Hello Palanisamy,
Then can you please provide a runnable sample where the issue can be reproduced, so we can take a look at it and advise your further?
Regards,
Kiril Nikolov
Telerik