How to get current sort field in kendo grid? - kendo-ui

I'm beginner...
I'm using kendo-grid with Jquery.
I want to get current sorted field in kendo-gird.
I found this.
console.log(grid.dataSource._sort[0].dir);
console.log(grid.dataSource._sort[0].field);
Can I find alternative way?
this is my code.
var dataSource = new kendo.data.DataSource({
transport : {
read : {
type : 'post',
dataType : 'json',
contentType : 'application/json;charset=UTF-8',
url : cst.contextPath() + "/watcher/kendoPagination_statsErrorHistoryRetrieveQry.htm",
data : param
},
parameterMap: function (data, opperation) {
return JSON.stringify(data);
}
},
schema : {
data : function(data) {
return data;
},
total : function(response) {
return response.length > 0 ? response[0].TOTAL_COUNT : 0;
}
},
pageSize : cst.countPerPage(),
serverPaging : true,
serverSorting : true
});
var columns = kendoGridColumns();
$("#grid")
.kendoGrid({
dataSource : dataSource,
sortable : {
mode : 'multiple',
allowUnsort : true
},
columns : columns.error()
selectable : 'row',
scrollable : true,
resizable : true,
}));
How can I get current sorted field name?

Avoid using private fields. The DataSource sort method is the official way to get the current sort state:
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sort
var dataSource = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
sort: { field: "age", dir: "desc" }
});
var sort = dataSource.sort();
console.log(sort.length); // displays "1"
console.log(sort[0].field); // displays "age"

Related

Kendo Grid - Grouping and logic

I have a question about the Kendo Grid and grouping - I'd like to include some logic when it comes to grouping a grid. I need to group addresses by state, and if state is empty, then group by country. Is this doable? Thanks.
You could create a hidden column that has state is available otherwise country, and then set the datasource to group by that column:
var jsondata = [
{City : "Houston",State : "Texas",Country : "USA"},
{City : "New York",State : "New York",Country : "USA"},
{City : "Austin",State : "Texas",Country : "USA"},
{City : "London",State : "",Country : "UK"},
{City : "Manchester",State :"",Country : "UK"},
{City : "Paris",State : "",Country : "France"}
];
for (var i=0; i < jsondata.length; i++){
var stateCountry = jsondata[i].State ? jsondata[i].State : jsondata[i].Country;
jsondata[i].Group = stateCountry;
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: jsondata,
schema: {
model: {
fields: {
City: { type: "string" },
State: { type: "string" },
Country: { type: "string" },
}
}
},
group: {
field: "Group",
dir: "asc"
}
},
groupable: false,
scrollable: true,
columns: [
{ field: "City" },
{ field: "State" },
{ field: "Country" },
{ field: "Group", title: "State/Country", hidden: true }
]
});
});
DEMO

Kendo UI Server side sorting and filtering

Given below kendo dataSource which is calling API though services.
It is difficult to identify whether sorting or filtering event is triggered.
var dataSource = new kendo.data.DataSource({
transport: {
// read : "/scripts/data/products/categoryLabel.json",
read : function(options){
// alert(options.data.page + "-" + options.data.pageSize);
console.log("Read options : " , options);
var order_by;
if (options.data.sort) {
if (options.data.sort.length > 0) {
var sortField = options.data.sort[0].field;
if (options.data.sort[0].dir == 'asc') {
var sortOrder = '';
}
else if (options.data.sort[0].dir == 'desc') {
var sortOrder = '-';
};
order_by = sortOrder + sortField;
}
}
if (options.data && options.data.filter && options.data.filter.filters) {
config ={
value: options.data.filter.filters[0].value,
field: options.data.filter.filters[0].field,
accountId: $scope.model.adAccount.accounts.selected.aa_id,
category_id : null,
};
console.log("input: ", options.data.filter.filters[0])
}
Campaignlabel.fetchCategorycampaign(config, order_by, options.data.page, options.data.pageSize).success(function (fetchCampaignlabel) {
$scope.model.totalCount = fetchCampaignlabel.count;
options.columns = $scope.model.columns;
options.success(fetchCampaignlabel.results);
// config = null;
}).error(function (fetchCampaignlabel) {
options.error(fetchCampaignlabel.results);
});
},
},
pageable : true,
pageSize:50,
serverPaging: true,
reorderable: true,
sortable :true,
page : 1,
serverFiltering: true,
serverSorting: true,
schema: {
total: function (result) {
result = result.data || result;
return $scope.model.totalCount;
},
model: {
id : "campaign_id",
fields: {
Select : {type : "boolean"},
category: { editable: false, type: 'number'},
campaign_id: { editable: false, type: 'number'},
name: { editable: false, type : "string" },
objective: { editable: false, type : "string" },
status: { editable: false, type : "string" },
category_name: { editable: false },
start_time : { editable: false, type: "date"},
}
}
},
});
Please suggest any way to identify filter or sorting event here.

Saving a Kendo datasource using jStorage

I'm adding and removing data to a Kendo dataSource. I wish to save it localStorage, and be able to read it again from localStorage.
Here I've attempted to use jStorage for the saving and loading of data.
How it's loaded:
if ($.jStorage.get('favoritter') != null) {
var datakilde_favoritter = $.jStorage.get('favoritter');
} else {
var data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
var datakilde_favoritter = new kendo.data.DataSource({
data: data,
sort: { field: "name", dir: "asc" }
});
}
How it's saved:
$.jStorage.set('favoritter', datakilde_favoritter);
Define your DataSource as:
var ds = new kendo.data.DataSource({
transport: {
read : function (op) {
var data = $.jStorage.get('favoritter');
if (!data) {
data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
}
op.success(data);
},
update : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
destroy: function (op) {
console.log("destroy", ds.data());
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
create : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
}
},
sort : { field: "name", dir: "asc" },
pageSize : 10,
schema : {
model: {
id : "id",
fields: {
id : { type: 'number' },
name: { type: 'string' }
}
}
}
});
You might consider removing create and destroy if not needed.
And your grid would be something like:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : "popup",
pageable : true,
toolbar : ["create"],
columns : [
{ command: ["edit", "destroy"], width: 100 },
{ field: "id", width: 90, title: "#" },
{ field: "name", width: 90, title: "URL Name" }
]
}).data("kendoGrid");
Basically when updating you need to invoke op.success with the data returned from the server. In your case since it is the browser itself, you don't need just to return the original data.

Display the popup view when the filtering is under process

In my group's project, we had a one grid and export button. We came across an issue which is that when exopt the data in excel format fiddle: http://jsfiddle.net/SZBrt/11/ need to display the pop up message stating that 'The data is getting filtered' to be displayed so that the we can know the filtering is under process. I appreciate your help in advance.
And My Code:
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
filterable: true,
sortable : true,
pageable : true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name",
width: 200
},
{
field: "ShipCity",
title: "Ship City"
}
]
}).data("kendoGrid");
Add to the DataSource definition an event handler for requestStart and requestEnd.
dataSource: {
requestStart : function() {
// Add code for displaying your own "loading" message
},
requestEnd: function() {
// Add code for hiding your own "loading" message
},
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
You did not specify how that Loading message looks like, it might be as simple as adding / removing visibility:
requestStart: function () {
$("#loading-msg").css("visibility", "visible");
},
requestEnd: function () {
$("#loading-msg").css("visibility", "hidden");
},
or open / close a window:
requestStart: function () {
$("#loading-msg").data("kendoWindow").center().open();
},
requestEnd: function () {
$("#loading-msg").data("kendoWindow").close();
},

DataTable + JEditable + AutoComplete(BAssistance) + Server Side Processing

After almost struggling for a week I have been able to make DataTable + JEditable + AutoComplete(BAssistance) with server side processing using Json to work.
I thought it would be useful to somebody out there.
$(document).ready(function() {
$('#example tbody td').editable(
function(value, settings) {
processEventForTable(this, value);
return(value);
},
"height": "20px"
});
oTableexample = $('#example').dataTable({
"bInfo": true,
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "GetPaginationData.aspx",
"sPaginationType": "full_numbers",
"bPaginate" : true,
"fnServerData": function ( sSource, aoData, fnCallback ) {
var data = {"name" : "kObjectId",
"value" : definitionId};
aoData.push(data);
data = { "name" : "ObjectName", "value" : "example" };
aoData.push(data);
data = { "name" : "InstanceId", "value" : instanceId };
aoData.push(data);
data = { "name" : "IsNewRequest", "value" : IsNewRowAdded};
IsNewRowAdded = 0;
aoData.push(data);
debugger;
$.ajax( {
"dataType": 'json',
"type": "Get",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"fnDrawCallback" : function() {
debugger;
SetDataTableIDAndAttachJEditable("example");
$('#example tbody td').editable( function(value, settings)
{
var aPos = oTableexample.fnGetPosition( this );
processEventForTableNew(aPos[0], aPos[1], value, "example");
return(value);
}
);
}
});
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete(settings.autocomplete.url, {
dataType:'json',
parse : function(data) {
return $.map(data, function(item) {
return {
data : item,
value : item.Key,
result: item.value
}
})
},
formatItem: function(row, i, n) {
return row.value;
},
mustMatch: false,
focus: function(event, ui) {
$('#example tbody td[title]').val(ui.item.label);
return false;
}
});
}
});
$("#example tbody td > span[title]").editable(
function(value,settings){
return value;
},
{
type : "autocomplete",
tooltip : "Click to edit...",
autocomplete : {
url : "autocompleteeg.aspx"
}
}
);
});
This code works perfectly fine.
DataTables use Server Side Processing. And I am submitting the changes to JEditable to javascript function. From there on Submit I am submitting the entire change array to server.
This code has become too long can anybody help me refactor it.
If there is any better way to accomplish the same thing then I am waiting for it. :)
Yeah cool Dude !
Just a small syntax error in your code.
} , { // opening bracket missing
"height": "20px"
}
Thanks a lot

Resources