I am trying to sort my data on desc date order but I can't, I keep getting an asc ordering on my kendo ui grid, here is the code.
this.gridConfig = {
dataSource: {
transport: {
read: '/api/endpoint,
dataType: 'json'
},
schema: {
data: "my_data_var"
}
},
sort: { field: "date", dir: "desc"},
resizable: true,
filterable: true,
pageable: {
pageSize: 200
},
columns: [{
field: 'date',
title: 'Date',
template: "#= kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd/MMM/yyyy') #"
sort option is a dataSource configuration so it should be :
dataSource: {
transport: {
read: '/api/endpoint,
dataType: 'json'
},
schema: {
data: "my_data_var"
},
sort: { field: "date", dir: "desc"}
},
Related
I'm using a kendo hierarchy grid. I am trying to figure out how to pass data from a a row in the child grid back to my update function so I can update my database.
Here is the code for my grid:
$("#NewPhraseGrid").kendoGrid({
dataSource: gridNewPhraseDataSource,
columns: [
{ template: "<input type='checkbox' class='checkbox' />" },
{ field: "Status", editable: false, title: "Status" },
{ field: "PhraseCodeComputed", editable: false, title: "Phrase Code Computed" },
{ field: "PhraseText", editable: true, title: "Phrase Text" },
{ field: "Example", title: "Example" },
{ field: "NotesDesc", title: "Notes" },
{ field: "Source", title: "Source" }
],
selectable: true,
pageable: true,
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
});
Here is the code for my child grid:
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
scrollable: false,
dataSource: {
type: "json",
transport: {
read: {
url: "concepts/getSimplifications",
dataType: "json",
type: "get"
},
create: {
url: "concepts/createSimplifications",
dataType: "json",
data: { "originalPhraseCodeComputed": e.data.PhraseCodeComputed },
type: "post"
},
update: {
url: "concepts/updateSimplifications",
dataType: "json",
data: { "phraseText": PhraseText, "phraseType": PhraseType },
type: "post"
}
},
schema: {
data: "data",
model: {
id: "NewPhraseCodeComputed",
fields: {
OriginalPhraseCode: { type: "string", editable: false },
NewPhrasePrefix: { type: "string", editable: false },
NewPhraseNumber: { type: "number", editable: false },
NewPhraseCodeComputed: { type: "string", editable: false },
PhraseType: { type: "string", editable: "true" },
PhraseText: {type: "string", editable: "true"}
}
}
}
},
sortable: true,
pageable: true,
toolbar: ["create"],
filter: { field: "OriginalPhraseCode", operator: "eq", value: e.data.PhraseCodeComputed },
columns: [
{ field: "NewPhraseCodeComputed", title: "New Phrase Code", width: "110px" },
{ field: "PhraseType", title: "Phrase Type", width: "110px", editor: phraseTypeDropDownEditor},
{ field: "PhraseText", title: "Phrase Text", width: "110px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
}
Here is the code for my custom drop down editor:
function phraseTypeDropDownEditor(container, options) {
$('<select id= phraseTypeSelection' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "phraseType",
dataValueField: "phraseType",
dataSource: {
type: 'json',
transport: {
read: {
dataType: 'json',
url: "concepts/getPhraseTypes",
type: 'get'
}
}
}
});
};
I'd like to pass back the values of the row being edited in the child grid for the columns Phrasetext and PhraseType to my update function for said grid, but I don't know how to access those values.
Can anyone provide any insight on how to do so?
Try binding your custom editor to the name attribute, like this
function phraseTypeDropDownEditor(container, options) {
$('<select id="phraseTypeSelection" name"' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "phraseType",
dataValueField: "phraseType",
dataSource: {
type: 'json',
transport: {
read: {
dataType: 'json',
url: "concepts/getPhraseTypes",
type: 'get'
}
}
}
});
};
$(document).ready(function () {
var agenciesData = new kendo.DataToken.DataSource({
type: 'webapi',
transport: {
read: { url: "/api/Agencies/", dataType: "json", data: { activity: getActivity() } },
create: { url: "/api/Agencies", type: "POST", dataType: "json" },
destroy: { url: "/api/Agencies/{0}", type: "DELETE" },
update: { url: "/api/Agencies/{0}", type: "PUT" },
idField: "ID"
},
filter: [{ field: "Activity", operator: "eq", value: getActivity() }],
pageSize: 15,
page: 1,
total: 0,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
schema: {
data: "Data",
total: "Total",
model: {
id: "ID",
fields: {
ID: { editable: false, type: "number" },
AgencyName: { type: "string" },
AgentName: { type: "string" },
Address: { type: "string" },
City: { type: "string" },
Tel1: { type: "string" },
Tel2: { type: "string" },
Pele: { type: "string" },
Activity: { type: "number" },
ToDate: { type: "date" }
}
}
}
});
$("#agenciesGrid").kendoGrid({
dataSource: agenciesData,
toolbar: [{ text: "valid", className: "validAgents" }, { text: "not valid", className: "notValid" }, { text: "all", className: "allAgents" }, { text: "potential", className: "potetial" }],
editable: false,
navigatable: true,
sortable: true,
autoBind: false,
height: 430,
pageable: { refresh: true },
columns: [
{ field: "ID", hidden: true },
{ field: "AgencyName", title: "agency", width: 150, filterable: { cell: { operator: "contains" } } },
{ field: "AgentName", title: "agent", width: 150, filterable: { cell: { operator: "contains" } } },
{ field: "Address", title: "address", width: 200, template: "#= Address + ' ' + City #", filterable: false },
{ field: "Tel1", title: "phones", width: 300, template: "#= Tel1 + ' : ' + Tel2 + ' : ' + Pele #", filterable: false },
{ field: "Activity", title: "active", width: "90px" },
{ field: "ToDate", title: "end Contract", type: "date", width: 90, format: "{0:dd/MM/yyyy}", parseFormats: ["yyyy-MM-ddThh:mm:ss"] }
]
});
$(".validAgents").click(function () { //valid
$("#myActivity").val("1");
$('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "1" });
});
$(".notValid").click(function () {//notValid
$("#myActivity").val("2");
$('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "2" });
});
$(".potetial").click(function () {//potetial
$("#myActivity").val("3");
$('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "3" });
});
});
function getActivity(){
var myActivity = $("#myActivity").val();
return myActivity;
}
When I use kendo grid already filtered by parameter like : $('#someGrid').data().kendoGrid.dataSource.read({ activity: value });
i see the get: https://localhost:44305/api/Agencies/?sort=&page=1&pageSize=15&group=&filter=&activity=1
The grid is filter as expected but, when I want to do paging, sorting, refresh - I get the whole data ignoring the filter that i made.
and I see the get: https://localhost:44305/api/Agencies/?sort=&page=1&pageSize=15&group=&filter=
How can I save my filter state to do paging and sorting on the data came from the server side ?
even when i used differen approach like "scrollable: { virtual: true }" and when i scroll down - every request is without the filtering...
Thanks
Did you try
var agenciesData = new kendo.DataToken.DataSource({
filter : function () {
return object;
}
});
I mean try using filter as a function and you can do your logic inside the function depending on the situation.
I have following init function for inner grid.
Date are fetched but after the change od some data in inner grid is not diplayed small red arrow signalizing change on the dataSource (model).
So if i processed update request no changes made in the inner grid is send back in the request (always it send old data).
How can i solve it please and what i'm doing wrong?
I tried to find some solution here and in documentation but without luck.
Thanks for any help.
function detailInit(e) {
//var dataSource = options.model.get("costCategory");
console.log(e);
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.milestones,
schema: {
model: {
fields: {
id: {
type: "string"
},
estimate: {
type: "number",
nullable: true,
defaultValue: null,
editable: true
},
actual: { type: "number" }
}
},
data: function(response) {
console.log(response);
return response;
},
},
pageSize: 10
},
scrollable: false,
sortable: true,
editable: "incell",
columns: [
{ field: "id", width: "70px" },
{ field: "milestoneTemplate.name", title:$translate.instant('MILESTONE_TEMPLATE_NAME'), width: "110px" },
{ field: "estimate", title:$translate.instant('ESTIMATE'), width: "110px" },
{ field: "actual", title:$translate.instant('ACTUAL') },
]
});
};
I have an issue sending Telerik Kendo Grid viewdata to MVC Controller. I've tried to make ViewModel etc but i just can't figure this one out.
Here is my code to populate grid:
var grid = $("#grid").kendoGrid({
dataSource: {
data: kontdata.Data,
schema: {
model: {
fields: {
Id: { type: "number", editable: false },
Name: { type: "string" },
Number: { type: "string" },
Info: { type: "string" },
Email: { type: "string" },
Category: { type: "string" },
MarketingAllowed: { type: "number", editable: false },
AddedDate: { type: "date", editable: false }
}
}
},
pageSize: 20
},
height: 500,
scrollable: true,
toolbar: kendo.template($("#template").html()),
serveroperation: false,
sortable: true,
editable: { mode: "incell", confirmation: false },
selectable: "row",
filterable: true,
pageable: true,
columns: [
{
field: "Name",
title: "Nimi"
},
{
field: "Number",
title: "Numero"
},
{
field: "Info",
title: "Info"
},
{
field: "Email",
title: "Email"
},
{
field: "Category",
title: "Kategoria"
},
{
field: "MarketingAllowed",
title: "Markkinointikielto",
width: "160px"
},
{
field: "AddedDate",
title: "LisättyPvm",
format: "{0:dd/MM/yyyy HH:mm:ss}"
},
{
command: [
{ name: "destroy", text: "Poista", width: "70px" }
]
}
]
}).data("kendoGrid");
And here is the code to post grid view data:
function tallennagridi() {
var griddata = $("#grid").data("kendoGrid");
$.ajax(
{
type: 'POST',
url: '/Contactlist/Savegriditems/',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ griditems: griddata.dataSource.view() }),
success: function (result) {
alert('success');
}
});
};
And here is the controller:
public JsonResult Savegriditems([DataSourceRequest] DataSourceRequest request, CustomerViewModel griditems)
{
var joku = griditems;
return Json(joku, "Content-type: text/x-json; charset=utf-8", JsonRequestBehavior.AllowGet);
}
Any help would be appreciated.
Br. Eero
My mistake, CustomerViewModel gridItems should have been:
CustomerViewModel[] gridItems;
I can able to filer the matched data using filter button.How to get the popup window if there is no matched data after clicking the filter data.Present If there is no matched data the table is showing empty instead of that how to rise a pop to tell no matched data to filter
// Set up information window
$("#filter-msg").kendoWindow({
modal: true,
visible: false
});
// Set up date pickers
$("#datetimepicker1").kendoDatePicker({});
$("#datetimepicker2").kendoDatePicker({});
// Set up DDL
var categories = $("#categories").kendoDropDownList({
optionLabel: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
}
}).data("kendoDropDownList");
var products = $("#products").kendoDropDownList({
autoBind: false,
cascadeFrom: "categories",
optionLabel: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
}
}
}).data("kendoDropDownList");
var orders = $("#orders").kendoDropDownList({
autoBind: false,
cascadeFrom: "products",
optionLabel: "Select order...",
dataTextField: "Order.ShipCity",
dataValueField: "OrderID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
}
}
}).data("kendoDropDownList");
// Bind "click" event on button "Filter"
$("#filter").on("click", function () {
var mindate = $('#datetimepicker1').data("kendoDatePicker").value();
var maxdate = $('#datetimepicker2').data("kendoDatePicker").value();
var product = $("#products").data("kendoDropDownList").value();
var order = $("#orders").data("kendoDropDownList").value();
if (!mindate || !maxdate || !product || !order) {
var content = "";
if (!mindate)
content += "<div class=\"k-error-colored\">mindate is not defined!</div>";
if (!maxdate)
content += "<div class=\"k-error-colored\">maxdate is not defined!</div>";
if (!product)
content += "<div class=\"k-error-colored\">product is not defined!</div>";
if (!order)
content += "<div class=\"k-error-colored\">order is not defined!</div>";
$("#filter-msg").data("kendoWindow")
.content(content)
.center()
.open();
return false;
}
var condition = {
logic: "and",
filters: [{
field: "OrderDate",
operator: "ge",
value: mindate
}, {
field: "OrderDate",
operator: "le",
value: maxdate
}]
};
grid.dataSource.filter(condition);
});
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,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
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");
Here is the js fiddle: http://jsfiddle.net/XHW3w/1/
Done, you can check using length property of dataSource.data
Here is the updated jsfiddle
grid.dataSource.filter(condition);
console.log(grid.dataSource.data.length);
if(grid.dataSource.data.length <= 1)
$("#filter-msg").data("kendoWindow")
.content("<div class=\"k-error-colored\">No record found!</div>")
.center()
.open();