I am trying to apply sorting on all data when i click on Name but sorting operation is applied on first page data.
Here is my code.
$("#products-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ProductList", "Product"))",
type: "POST",
dataType: "json",
data: additionalData
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: #(defaultGridPageSize),
serverPaging: true,
// serverFiltering: true,
sort: { field: "Name", dir: "desc" },
},
pageable: true,
sortable: true,
editable: {
confirmation: "#T("Admin.Common.DeleteConfirmation")",
mode: "inline",
},
scrollable: false,
columns: [
{
field: "Name",
title: "#T("Admin.Catalog.Products.Fields.Name")",
sortable: {
initialDirection: "desc"
},
width: 300,
} ]
});
I have also tried with serverSorting: true but at that time default sorting not working.
Related
I'm trying to add subgrids to an existing jqGrid.
When I expand a parent row, the URL is called and the JSON response looks good (to my eyes) but it is not being bound to the sub grid rows.
If I call the web service directly by pasting the URL in a browser, the response looks good.
This is the full jqGrid definition:
/* +++ Group Grid Definition +++ */
$("#<%= id %>_groupTable").jqGrid({
loadonce: true,
datatype: 'local',
//sortable: true,
gridview: true,
editurl: "clientArray",
autowidth: true,
rowNum: 12000,
height: 150,
multiselect: false,
hidegrid: false,
pgbuttons: false,
pginput: false,
sortname: "Date",
sortorder: "desc",
jsonReader: {
root: "inbox",
page: "page",
total: "total",
records: "records",
id: "id",
repeatitems: false,
subgrid: { repeatitems: true }
},
toolbar: [true, "bottom"],
colModel: [
{
name: 'userGroupId',
label: '{{VIEW_LABEL}}',
index: 'userGroupId',
width: 50,
fixed: true,
hidden: true,
//sortable: false,
align: 'center'
}, {
name: 'desc',
label: '{{NAME_LABEL}}',
index: 'desc',
width: 130,
align: 'center',
sorttype: 'text'
}],
hidegrid: false,
gridComplete: function () {
$('#<%= id %> .loading').remove();
$('#<%= id %>_groupTable').jqGrid('setSelection', 1);
},
loadComplete: styleGroupRows,
afterInsertRow: styleGroupRows,
subGrid: true,
subgridtype: 'json',
subGridUrl: '/ws/users/groupusers',
subGridModel: [
{
name: ['Name'],
width: [200],
params: ['userGroupId']
}]
}).jqGrid('bindKeys', {
'scrollingRows': true
});
This is the JSON response from the web service:
{'rows':['User 1312','User 1316','User 1286','User 1149']}
I'm expecting a single column of user names in the sub grids but only the column headers appear.
Your subGrid response does not match the rules.
Try with the following response:
{"rows":[{"id":"1","cell":["User 1312"]},{"id":"2","cell":["User 1316"]}]}
I seem to be having an issue trying to bing my JSON result to my Kendo UI grid
This is my JSON result I get back from my web service:
"{
"Data":[{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-04-27T00:00:00",
"Name":"One",
"Number":"201504260952",
"Status":"Draft",
"Id":3
},
{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-07-08T11:04:00",
"Name":"fdasfdsa",
"Number":"20150708110209",
"Status":"Draft",
"Id":17},
{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-07-09T08:44:00",
"Name":"Two",
"Number":"20150709084329",
"Status":"Draft",
"Id":20
}],
"Groups":null,
"Total":3
}"
This is my Grid and data source set up:
$(function () {
var myGrid = $("#myGrid");
myGrid.kendoGrid({
groupable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
hidden: true,
field: "Id"
},
{
headerTemplate: ""
},
{
title: "Status",
field: "Status"
},
{
title: "Number",
field: "Number"
},
{
title: "Name",
field: "Name"
}]
});
var myDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/somewhere.svc/Data",
dataType: "json",
type: "GET"
}
},
schema: {
data: 'Data',
groups: 'Groups',
aggregates: 'Aggregates',
total: 'Total',
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Status: { type: 'string' },
Number: { type: 'string' },
Name: { type: 'string' },
ModifiedBy: { type: 'string' },
ModifiedDate: { type: 'date' }
}
}
},
pageSize: 5,
serverPaging: true,
serverGrouping: true,
serverSorting: true,
serverFiltering: true
});
myGrid.data("kendoGrid").setDataSource(myDataSource);
});
When the page loads I can see that I get the above JSON but I don't get any rows displayed in the grid.
What might I be doing wrong?
I am new to Kendo UI, While I am using the Kendo Grid UI which is consuming the service, the read operation is working fine and the Grid is populated with the data from services but the delete operation is not working
I have tested the delete service using the fiddler getting a perfect response,but I confused why the delete button in kendo grid is not firing the endpoint
I struggled for past one week but no improvement
This is my code,
var carsDataSource1 = new kendo.data.DataSource(
{
batch: true,
transport: {
read: {
url: "/DesktopModules/MyServicesTest/API/DropData/Drop",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
},
destroy: {
url: function(options)
{
return 'DesktopModules/MyServicesTest/API/DeleteCategory/
Delete' + options.models[0].id;
},
dataType: "json",
type: "DELETE"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var CategoryID = options.models[0].id;
console.log(CategoryID);
return CategoryID;
}
}
},
shema:
{
model: {
id: "CategoryID",
field: {
CategoryID:
{
editable: false,
nullable: true,
type: "number"
},
CategoryName:
{
editable: false,
nullable: false,
type: "string"
},
}
}
}
});
$("#grid1").kendoGrid({
dataSource: carsDataSource1,
height: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CategoryID",
title: "number "
},
{
field: "CategoryName",
title: "Name"
},
{ command:"destroy"}
],
toolbar: ["create"],
editable: "inline",
destroy:true,
});
});
Ok, so here is the thing... I have grid with 3 columns: Premises Order, Name and Postal Code
The first column Premises Order is editable(numericall). What I want to do is this: Make an onChange function to save the value of the new inserted number. I know I need a procedure for that I just want to know how to catch the value (in console), to know that I have it and than I'll do the procedure.
Here is the code
PremisesGrid2 = $("#assignedRoute").kendoGrid({
dataSource: {
type: "application/jsonp",
transport: {
read:
{
url: "http://" + servername + "/uBillingServices/Premise/Premise.svc/GetAllPremisesByRoute",
dataType: "json",
data: function () {
return {
Route_ID: selectedID,
UserName: userName,
WorkStation: workStation
}
}
}
}, pageSize: 10,
serverPaging: true,
schema: {
model: {
fields: {
ID: { type: "string", validation: { required: true }, editable: false },
PostalCode: { type: "string", validation: { required: true }, editable: false },
Latitude: { type: "string", validation: { required: true }, editable: false },
Longitude: { type: "string", validation: { required: true }, editable: false },
IsMember: { type: "string", validation: { required: true }, editable: false },
Name: { type: "string", validation: { required: true }, editable: false },
RouteOrderBy: { type: "number", validation: { required: true }, editable: true, nullable: false, format: "{0:n2}" }
}
},
data: function (result) {
return result.rows || result;
},
total: function (result) {
var data = this.data(result);
return result.totalRows || result.length || 0; ;
}
}
},
change: onChange,
dataBound: function (e) {
e.sender.select(e.sender.tbody.find(">tr:first"));
},
selectable: "multiple",
scrollable: true,
filterable: true,
editable: true,
groupable: false,
pageable: {
numeric: true,
pageSizes: true,
previousNext: false
},
sortable: {
mode: "single",
allowUnsort: false
},
height: 400,
columns: [
{ field: "RouteOrderBy", title: "Premise Order", headerAttributes: {
style: "font-size:small; text-align:center"
}, attributes: { style: "text-align:right" }
},
{ field: "PostalCode", title: "Assigned Premises", headerAttributes: {
style: "font-size:small; text-align:center"
}
},
{ field: "Name", title: "Customer", headerAttributes: {
style: "font-size:small; text-align:center"
}
}
]
});
Thank you.
Instead of using change event, you should use save. change is fired when there is a change in the selection of a row not in the value.
For displaying the edited value, the HTML element containing the edited value and the item in the model, you can use:
save : function (e) {
console.log("The values entered by the user.", e.values);
console.log("The jQuery element which is in edit mode.", e.container);
console.log("The edited model.", e.model);
},
Another frustrating day with the Kendo Grid. Anyway, my problem is this: When I click "Edit" on a grid row item, it goes into edit mode. Good. Then I modify a record, and click update. I would expect the "/Company/SaveAccountAdmin" method to be called.But no... The read method is called again. When I click "Cancel" the record just disappears! The $("#save") click event is just an attempt to force a save, but surely these events can be triggered off the grid command buttons? Any ideas anyone?
/// <reference path="../kendo.all-vsdoc.js" />
$(document).ready(function () {
var CompanyId = $("#CompanyId").val();
var dataSource = new kendo.data.DataSource(
{
batch: true,
pageSize: 10,
transport: {
create: {
url: "/Company/SaveAccountAdmin",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin",
},
read: {
url: "/Company/ReadAccountAdmin"
},
update: {
url: "/Company/SaveAccountAdmin",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin",
},
//destroy: {},
parameterMap: function (options, operation) {
if (operation !== "read" && options.model) {
return { model: kendo.stringify(options.model) };
}
}
},
schema: {
model: {
id: "ComanyContactId",
fields: {
CompanyId: { type: "number", editable: false, nullable: false, defaultVaue: CompanyId },
CompanyContactId: { type: "number", editable: false, defaultValue: 0 },
FirstName: { type: "string", nullable: false, validation: { required: true } },
LastName: { type: "string", nullable: false, validation: { required: true } },
Email: { type: "string", nullable: false, validation: { required: true } },
Phone: { type: "string", nullable: false, validation: { required: true } },
IsActive: { type: "boolean" }
}
}
}
});
$("#save").click(function (event) {
event.preventDefault();
var rows = $.map(dataSource.data(), function (value, index) {
return {
CompanyId: value["CompanyId"],
CompanyContactId: value["CompanyContactId"],
FirstName: value["FirstName"],
LastName: value["LastName"],
Email: value["Email"],
Phone: value["Phone"],
IsActive: value["IsActive"]
}
});
var jsonCompanyContacts = JSON.stringify(rows);
$.ajax({
url: '/Company/SaveAccountAdmin',
type: 'POST',
traditional: true,
data: { "jsonCompanyContacts": jsonCompanyContacts },
success: alert("Data Saved")
})
});
$("#AccountAdmins").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
editable: "inline",
sortable: true,
pageable: true,
navigatable: true,
editable: "inline",
columns: [
{ field: "CompanyId", title: "CompanyID", sortable: true },
{ field: "CompanyContactId", title: "Company ContactID", sortable: true },
{ field: "FirstName", title: "First Name", sortable: true },
{ field: "LastName", title: "Last Name" },
{ field: "Email", title: "Email", },
{ field: "Phone", title: "Phone", },
{ field: "IsActive", title: "Is Active" },
{ command: ["edit", "destroy"], title: " ", width: "210px" }]
});
});
My guess is that it is because you have the Read URL set for the Update command:
update: {
url: "/Company/SaveAccountAdmin", // <-- Not used because it is changed below
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin", // <-- Read URL set
},