Develop Reference

MVC Kendo Grid server side filter by Javascript

I'm new at Kendo MVC, trying to build an application but at client side I'm using Javascript instead of conventional RAZOR.
I'm getting and loading data properly in the grid but facing problem while filtering. I'm using this code:
$("#gridStudent").kendoGrid({
dataSource: {
type: "json",
transport: {
read: '../Student/GetStudentData/',
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
columns: [
{ field: "StudentId", title: "StudentId", width: 50, hidden: true },
{ field: "StudentName", title: "Student Name", width: "130px" },
{ field: "Mobile", title: "Mobile", width: "130px" },
{ field: "Gender", title: "Gender", template: '#=Gender == 2 ? "Female" : "Male"#', width: "130px" },
{ field: "Section", title: "Section", width: "130px" },
{ field: "Address", title: "Address", width: "130px" }
],
pageable: {
refresh: true,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
navigatable: true,
selectable: "row"
});
And controller is
public JsonResult GetStudentData([DataSourceRequest] DataSourceRequest options)
{
var query= _Db.Students.ToList();
var data = query.ToDataSourceResult(options);
return Json(data , JsonRequestBehavior.AllowGet);
}
This loading data to grid perfectly but while filtering, I'm not getting filtered data object
Please suggest me some solution on this. I'm going to use javascript/jQuery (no razor) in client side so please something in this.
Thanks in advance

Populate jqgrid dropdown list with JSON data using editoptions

I am new to web development, I have run into this problem and have researched and tried many other methods to no avail. I need to populate a drop down list in a jqgrid only with values that are in my database. The url that I am using to do this gives me the correct response in JSON as follows (note that I only sent through selected fields):
{
"serviceBranchResult": [
{
"branch_services": [],
"queues": [],
"service_description": null,
"service_id": 2,
"service_name": "Forex",
"service_status": null
},
{
"branch_services": [],
"queues": [],
"service_description": null,
"service_id": 3,
"service_name": "Tellers",
"service_status": null
}
]
}
When I try to do a dropdownlist from the method below without reading the json from the url it works 100% however it isnt dynamic, I use the method getAllSelectOptions() and where I am using it in the grid looks like this:
function getAllSelectOptions() {
var services = {
'1':'Forex', '2':'Tellers', '3':'Consultants'};
return services;
}
My code for the grid:
url: "http://localhost:8080/service.svc/employees/3"
datatype: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
height: '250',
colNames: ['ID', 'Name', 'Surname', 'Username', 'Email', 'Branch ID', 'User Type', 'Status', 'Speciality'],
colModel: [
{ name: 'employee_id', index: 'employee_id'},
{ name: 'employee_name', index: 'employee_name', editable: true },
{ name: 'employee_surname', index: 'employee_surname', editable: true },
{ name: 'employee_username', index: 'employee_username', editable: true },
{ name: 'employee_email', index: 'employee_email', editable: true },
{ name: 'branch_id', index: 'branch_id', editable: true },
{ name: 'user_type', index: 'user_type', editable: true },
{ name: 'employee_state', index: 'employee_state', editable: true },
{ name: 'employee_speciality', index: 'employee_speciality', editable: true,
sortable: true,
align: 'center',
editable: true,
cellEdit: true,
edittype: 'select',
formatter: 'select',
editoptions: { value: getAllSelectOptions() }
}],
rowNum: 20,
rowList: [10, 20, 30],
pager: '#pager_jqgrid',
And this works perfectly.
However I use this following method to potentially replace the getAllSelectOptions() method and it does return the information when I use alert boxes, but does not work.
function availAtBranch() {
$.ajax({
type: "GET",
url: "http://localhost:8080/service.svc/branch/3",
dataType: "json",
success: function (data) {
$.each(data.serviceBranchResult, function (i, obj) {
//alert(obj.service_id + ":" + obj.service_name);
var div_data = obj.service_name + ":" + obj.service_name;
//alert(div_data);
});
return div_data;
}
});
I think it has something to do with how in parsing the JSON to the editoptions method, or sending an object through. How do I get my JSON to be in the format as described in the getAllSelectOptions() method, or how do I display my data in the dropdownlist. Thank you in advance

JSGrid Callback Methods

I am building grid using JSGrid (js-grid.com). I want call back methods to implement validations before adding new record or updating record. Documentation provided on website is not clearly mentioned how to implement one. Please refer http://js-grid.com/docs/#callbacks.
I need help how can i implement callback method cause i am new to JSGrid & Scripting. Following is my sample code. Please guide me where to put callback methods.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});
Thanks in advanced.

$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
// added for demo
onItemInserting: function(args) {}, // before controller.insertItem
onItemInserted: function(args) {}, // on done of controller.insertItem
onItemUpdating: function(args) {}, // before controller.updateItem
onItemUpdated: function(args) {}, // on done of controller.updateItem
onItemDeleting: function(args) {}, // before controller.deleteItem
onItemDeleted: function(args) {}, // on done of controller.deleteItem
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});

Why is formatting my KendoGrid columns not working?

I'm learning Kendo UI, and following one of the walkthroughs. I've got a grid working, but the date formatting is not working, for some reason.
$("#archiveGrid").kendoGrid({
columns: [
{ field: "SentDate", title: "Sent", format: "{0:MM/dd/yyyy}" },
{ field: "SenderName", title: "Sender" },
{ field: "SenderEmail", title: "Email" },
"Subject"
],
dataSource: new kendo.data.DataSource({
transport: {
read: "api/messages"
},
pageSize: 15,
serverPaging: true,
schema: {
data: "Data",
total: "Count"
}
}),
pageable: true
});
But my dates still come out looking like 2014-02-07T21:06:03.993. I tested the theory that the grid is ignoring the format property and changed the format string to "foo {0:MM/dd/yyyy}", which made the dates appear as foo 2014-02-07T21:06:03.993.
So what am I doing wrong?

You are missing the model in DataSource. try adding a proper model and set the type as date. then the format will work properly and also don't forget to mention the id.
schema: {
id: "Id",
data: "Data",
total: "Count",
fields: {
SentDate: { editable: true, type: "date"},
SenderName: { editable: true},
SenderName: { editable: true}
}
}

Kendo UI grid not triggering transport create URL

Ive a kendoUI grid doing CRUD from a web service. For some reason, read command works perfectly and populates my grid.
But when I try to create a new record, despite that it shows the new record in the grid and i can edit its fields, button save does not trigger the web service.
Checking out http logs, I see no hit on the service. Only on "read".
This is the grid's code:
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "libyMsg.php?way=getUsrMsgList"
},
create: {
url: "libyMsg.php?way=createMsg",
type: "PUT"
},
update: {
url: "libyMsg.php?way=updateeMsg",
type: "PUT"
},destroy: {
url: "libyMsg.php?way=destroyMsg",
type: "PUT"
},
batch: true,
pageSize: 10,
schema: {
data: "data",
model: {
id: "msg_id",
fields: {
msg_id: { editable: false, nullable: true },
msg_title: { validation: { required: true } },
msg_content: { validation: { required: true } },
msg_type: { type: "number", validation: { min: 0, required: true }},
msg_date: { type: "date", validation: { required: true } },
msg_status: { type: "number", validation: { min: 0, required: true } }
}
}
},
},
columns: [{ field: "msg_id", width: 40,title: "ID" },
{ field: "msg_title",width: 300, title: "Title" },
{ field: "msg_content", width: 300,title: "Content" },
{ field: "msg_type", width: 40,title: "Type" },
{ field: "msg_date", width: 300,title: "Date" },
{ field: "msg_status", width: 40,title: "Status" }],
scrollable: true,
sortable: true,
editable:true,
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create", "save", "cancel"],
});
});
This is driving me crazy. Anyone?
Ty/M

Your transport is wrong. Try this instead:
transport:{
read :"libyMsg.php?way=getUsrMsgList",
create :{
url :"libyMsg.php?way=createMsg",
type:"PUT"
},
update :{
url :"libyMsg.php?way=updateeMsg",
type:"PUT"
},
destroy:{
url :"libyMsg.php?way=destroyMsg",
type:"PUT"
}
},
create, update and destroy should be part of transport.