Task : Create Notes (plain text) with some other parameters (which were already populated while main view is loading). So I have to integrate my Notes section in a partial view and avoid postback the page and refresh KendoGrid, with the new notes added by the user.
My approach:
I have created a div with id = "grid". So my ultimate target is to update KendiGrid to this div.
<div id="grid"></div>
then I have gone through several samples mentioned in KendoGrid documentation and learnt special points regarding the changes I need to apply and match with the configurations.
(KendoGrid samples : http://docs.telerik.com/kendo-ui/api/javascript/ui/grid and http://demos.telerik.com/kendo-ui/grid/index)
So I have started like below:
$("#grid").kendoGrid({
})
We should configure a datasource for the grid. So I have able to create datasource like below
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
parameterMap: function (data, operation) {
if (operation == "read") {
data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
}
return data;
}
}
})
(I just reading the data and pumping into the grid. I also pushing one parameter to the Action and I'm using json calls)
I need to show an error message when KendoGrid facing a issue on loading data. So it's like below after update.
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
parameterMap: function (data, operation) {
if (operation == "read") {
data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
}
return data;
}
},
error: function (e) {
ShowGeneralErrorMsg('ERROR TO SHOW');
}
}
})
Also I need to define the schema to show.
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
parameterMap: function (data, operation) {
if (operation == "read") {
data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
}
return data;
}
},
error: function (e) {
ShowGeneralErrorMsg('ERROR TO SHOW');
},
schema: {
model: {
id: "FIELD1",
fields: {
OTHERFIELD1: { type: "string" },
OTHERFIELD2: { type: "string" },
OTHERFIELD3: { type: "date" }
}
}
},
batch:false
}
})
dataSource: {
type: "json",
transport: {
read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
parameterMap: function (data, operation) {
if (operation == "read") {
data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
}
return data;
}
},
error: function (e) {
ShowGeneralErrorMsg('ERROR TO SHOW');
},
schema: {
model: {
id: "FIELD1",
fields: {
OTHERFIELD1: { type: "string" },
OTHERFIELD2: { type: "string" },
OTHERFIELD3: { type: "date" }
}
}
},
batch:false
}
})
After defining the schema, I have updated the columns configurations with custom template definitions for several columns. Disable sorting.
dataSource: {
type: "json",
transport: {
read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
parameterMap: function (data, operation) {
if (operation == "read") {
data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
}
return data;
}
},
error: function (e) {
ShowGeneralErrorMsg('ERROR TO SHOW');
},
schema: {
model: {
id: "FIELD1",
fields: {
OTHERFIELD1: { type: "string" },
OTHERFIELD2: { type: "string" },
OTHERFIELD3: { type: "date" }
}
}
},
batch: false
},
navigatable: true,
dataBound: function () {
},
sortable: false,
toolbar: kendo.template('<div class="dropdown milestone-add-btn">' +
'<a href="javascript:void(0);" onclick="javascript:ShowAddForm();" class="action-btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"><i class="icon icon-add icon-accent"></i><span>add</span></a>' +
'</div>')
,
columns: [{
field: "OTHERFIELD1",
headerTemplate: '<div><label class="grid_header_label">OTHERFIELD1</label></div>',
template: '<a class="text_ellipsis" style="float:left; width:400px;" href="javascript:void(0);" title="#=OTHERFIELD1#">#=OTHERFIELD1#</a>'
},
{
field: "OTHERFIELD2",
headerTemplate: '<label class="grid_header_label">OTHERFIELD2</label>',
template: "#= kendo.toString(kendo.parseDate(OTHERFIELD2, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
},
{
field: "User",
headerTemplate: '<div><label class="grid_header_label">OTHERFIELD3</label></div>',
editor: OTHERFIELD3Editor,
template: "#=OTHERFIELD3#"
},
{
command: [
{
name: "destroy",
text: " ",
iconClass: "icon icon-accent icon-remove icon-align icon-2x",
}
]
}],
editable: false
});
$("#grid").find(".k-grid-toolbar").insertAfter($("#grid .k-grid-content"));
