I'm using filter column mode:row in my grid. For my numeric column the menu is showned as below
What i need is a filter in this column as the filter that is used in menu mode
Here is a part of my code
schema: {
data: "results",
total: "total",
model: {
id: "accountingTransactionKey",
fields: {
accountingTransactionKey: { editable: false, nullable: false },
date: { editable: false, nullable: false },
organization: { editable: false, nullable: false },
accountDebit: { editable: false, nullable: true },
costArticleUsed: { editable: false, nullable: true },
accountCredit: { editable: false, nullable: true },
isIntraGroupPartnerOrganization: { editable: false, nullable: true, type: "number" },
currency: { editable: false, nullable: true },
sum: { editable: false, nullable: true, type: "number"},...
...{
field: "sum",
title: "Сумма",
width: "150px",
//format: "{0:n2}",
locked: true,
filterable:
{
multi: true,
cell:
{
operator: "eq",
suggestionOperator: "eq",
showOperators: true
}
},
template: function (dataItem) { return numberWithSpaces(dataItem.sum.toFixed(2)) },
footerTemplate: "<b>" +"#: numberWithSpaces(sum.toFixed(2)) #"+"</b>"
},
There is a soltion for my request?
Thank you
I have tried the following script and it gives me a range filter by using the property extra.
<script>
$(document).ready(function() {
var griddata = createRandomData(50);
$("#grid").kendoGrid({
dataSource: {
data: griddata,
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
filterable: false,
},
{
field: "Title",
filterable: false,
},
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: false,
},
{
field: "Age",
width: 100,
filterable:
{
extra: true
}
}
]
});
});
</script>
If you want to create a customized range filter.
columns: [
{
field: "Age",
filterable: {
cell: { template: betweenAgeFilter }
}
}
]
function betweenAgeFilter(args) {
var filterCell = args.element.parents(".k-filtercell");
filterCell.empty();
filterCell.html('<span style="justify-content:center;"> <span>From:</span><input id="startAge"/><span>To:</span><input id="endAge"/></span>');
$("#startAge").kendoNumericTextBox({
change: function (e) {
var startAge = e.sender.value();
var endAge = $("#endAge").data("kendoNumericTextBox").value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
$("#endAge").kendoNumericTextBox({
change: function (e) {
var startAge = $("#startAge").data("kendoNumericTextBox").value();
var endAge = e.sender.value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
}
Related
I have a Kendo grid which is populated from a SQL database. The kendo expand works fine and returns a different kendo grid in the expand when the program first starts but if I do a new search and return different results the expand row does not work.
My code for the expand ->
function detailInitd(e) {
TextvalueFile = "manno test";
$.ajax({
type: "post",
data: JSON.stringify({
search_string: TextvalueFile,
}),
url: "/Search.aspx/File_Search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
var grid = this;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: object.d,
schema: {
model: {
path: { type: "string" },
st_size: { type: "number" },
},
},
pageSize: 20,
},
reorderable: true,
resizable: true,
navigatable: true,
selectable: "multiple",
scrollable: true,
sortable: true,
filterable: true,
columnMenu: true,
pageable: {
input: true,
numeric: true
},
columns: [
{ field: "path", title: "Path", width: 200 },
{ field: "st_size", title: "Size", width: 60 },
{ field: "st_blks", title: "BLKS", width: 60 },
{ field: "st_acctime", title: "acc Time", width: 70 },
{ field: "st_modtime", title: "mod Time", width: 75 },
]
});
}
};
My code for the original kendo grid ->
function DisplaySearch() {
}
textS.value = value;
valsearch = textS;
$.ajax({
type: "post",
data: JSON.stringify({
search_string: valsearch,
}),
url: "/Search.aspx/display_search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
$("#searchGrid").kendoGrid({
theme:"Default",
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
create_browse: {type:"number"},
},
},
pageSize: 20,
},
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr"));
},
reorderable: true,
navigatable: true,
selectable: "single",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
reordable: true,
resizable: true,
pageable: {
input: true,
numeric: true,
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
{field: "create_browse", title:"Browse", Width: 50},
],
change: function(){
var grid = this;
grid.select().each(function(){
var dataItem = grid.dataItem($(this));
testdata = dataItem.archive_header_key;
grid.expandRow(grid.element.closest("tr"));
})
},
dataBound: function () {
this.expandRow();
},
});
}
Any help would be appreciated.
There is some sample code to check if a kendoGrid is already initialized:
https://www.telerik.com/forums/grid-creation-best-practices
It works for me and fixed the expandRow issue.
function searchButtonClick() {
var gridElement = $("#grid"),
grid = gridElement.data("kendoGrid");
if (!grid) {
gridElement.kendoGrid({
...
});
} else {
grid.dataSource.read();
}
}
I think this is duplicated instances. When you are searching, and call your response() you instanciate always an kendoGrid probably, you have to do something like:
Declare an variable out of response() like:
var $searchGrid = null;
And change your response() :
function response(object) {
if($searchGrid){
$searchGrid .destroy();
$("#searchGrid").empty();
$("#searchGrid").remove();
}
$("#searchGrid").kendoGrid({
theme:"Default",
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
create_browse: {type:"number"},
},
},
pageSize: 20,
},
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr"));
},
reorderable: true,
navigatable: true,
selectable: "single",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
reordable: true,
resizable: true,
pageable: {
input: true,
numeric: true,
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
{field: "create_browse", title:"Browse", Width: 50},
],
change: function(){
var grid = this;
grid.select().each(function(){
var dataItem = grid.dataItem($(this));
testdata = dataItem.archive_header_key;
grid.expandRow(grid.element.closest("tr"));
})
},
dataBound: function () {
this.expandRow();
},
}).data("kendoGrid");;
}
Hope this help
I have the following code:
function grd_onChange(e) {
var grid = $("#grd").data("kendoGrid");
var selectedCell = grid.select();
var index = selectedCell.index();
var row = selectedCell.closest("tr");
var col = selectedCell.closest("td");
alert(row);
}
I would like to know how can I get the column index when a user clicks on a cell of a particular row of the grid.
Please try with the below code snippet.
<body>
<script>
function onChange(arg) {
var grid = $("#Grid").data("kendoGrid");
var row = this.select().closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = this.select().index();
alert(rowIdx + '-' + colIdx);
}
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
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
},
selectable: "multiple cell",
change: onChange,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>
<div id="Grid"></div>
</body>
OR
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
alert(rowIdx + '-' + colIdx);
});
}
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
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
},
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
<div id="Grid"></div>
Let me know if any concern.
I am working on kendo ui grid, the dropdown fills with the data from api call.....
The problem is,
selected item value is not passing to viewModel or passing null value
I am doing something terrible, please help...thanks for your time:)
Script
...
schema: {
model: {
id: "ProjectId",
fields: {
ProjectId: { editable: true, nullable: false, type: "number" },
ClientId: { editable: true, nullable: false, type: "number" },
Name: { editable: true, nullable: true, type: "string" },
// Status: { editable: true, nullable: true, type: "string" },
Status: { editable: true, nullable: true, type: "string", defaultValue: { StatusId: "NotCompleted"}},
IsActive: { editable: true, nullable: false, type: "boolean" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
toolbar: ["create"],
scrollable: false,
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Name", title: "Project Name", width: "170px" },
//{ field: "Status", title: "Status", width: "110px" },
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ field: "IsActive", title: "Active", width: "50px" },
{ command: "", template: "<a href='Project/Task'>Manage Task</a>", width: "30px", filterable: false },
{ command: "", template: "<a href='Project/Setting'>Setting</a>", width: "30px", filterable: false },
{ command: ["edit", "delete"], title: " ", width: "80px" }
],
editable: "popup"
});
function statusDropDownEditor(container, options) {
$('<input required data-value-field="StatusID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "/api/dropdown/GetProjectStatus"
}
}
});
}
have you add the
dataTextField: "name",
dataValueField: "id"
?
I am trying to use a dropdown select as an editor for one of my columns, defined as:
function phoneTypeEditor(container, options) {
$('<input required name="' + options.field + '" data-text-field="typeName" data-value-field="typeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [
{
"typeName": "Work",
"typeId": 1
},
{
"typeName": "Branch",
"typeId": 2
},
{
"typeName": "Home",
"typeId": 3
},
{
"typeName": "Mobile",
"typeId": 4
}
],
close: function()
{
}
});
}
In my model I have:
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
type: {
type: 'string',
editable: true,
defaultValue: {
typeId: 1,
typeName: "Work"
},
},
tel: {
type: 'string',
editable: true
}
}
}
And finally my column:
{
field: 'typeId',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
template: '#=typeName#'
},
But when I try to create a row in my grid my post data looks like this:
phoneId:0
type[typeId]:1
type[typeName]:Work
tel:
typeName:
contactId:97558
When it should be:
phoneId:0
typeId:1
typeName:Work
tel:
typeName:
contactId:97558
And I get a new row in my grid that is thin and empty.
How can I get this to work properly?
PS If I don't have:
typeName: {
type: 'string'
}
In my model I get an error saying typeName is not defined.
I now have:
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
typeId: {
type: 'number',
defaultValue: 1
},
tel: {
type: 'string',
editable: true
},
typeName: {
type: 'string',
defaultValue: 'Work',
}
}
}
And...
columns: [
{
field: 'phoneId',
headerTemplate: '<b>Phone Id</b>',
filterable: false,
width: '50px',
hidden: true
},
{
field: 'typeId',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
template: '#=typeName#'
},
{
field: 'tel',
headerTemplate: '<b>Number</b>',
filterable: false,
}
],
But now when I change the option in the dropdown, it appears that you haven't changed it but the actualy number id of the item has changed, just not the text. How do I make it so both the typeId and typeName change?
I'm in the process of creating a big business application using kendo ui. Since application is big. we have started to follow modular patter in javascript code.
When using modular pattern wtih kendo ui. i'm getting some errors.
i have created hierarchy grid. Each grid code will be modular object. like below:
But i'm getting below error: (I have commented error lines like this //error. Please see below)
SCRIPT5007: Unable to get property 'find' of undefined or null reference.
Reason for error is "this" object is referred to window object. But it should refer kendo grid object.. how to resolve this
var Customer = (function ($,window) {
var gridCustomer = null;
var dataSource = null;
var createColumns = function () {
return [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
};
var setDataSource = function () {
if (customerGridDataSource != undefined) {
return dataSource = new kendo.data.DataSource({
data: customerGridDataSource,
schema: {
data: function (response) {
return response;
},
total: function (response) {
return response.length;
},
model: {
id: "CustomerID",
fields: {
CustomerID: { editable: false, nullable: false, type: "int" },
FirstName: { editable: true, nullable: false, type: "string" },
LastName: { editable: true, nullable: true, type: "string" },
Country: { editable: true, nullable: true, type: "string" },
City: { editable: true, nullable: true, type: "string" },
Title: { editable: true, nullable: true, type: "string" }
}
}
},
pageSize: 5,
serverPaging: false,
serverSorting: false
});
}
else {
alert("Data Source undefined. Please Contact Administrator.")
}
};
var onDataBound = function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());//error
};
var init = function () {
gridCustomer = $("#gridCustomer").kendoGrid({
sortable: true,
filterable: true,
pageable: {
pageSize: 5,
pageSizes: true
},
columns: createColumns(),
dataSource: setDataSource(),
dataBound: onDataBound(),
detailInit: Order.Init()
});
};
return {
Init: function () {
init();
}
}
})(jQuery,window);
var Order = (function ($,window) {
var gridOrder = null;
var dataSource = null;
var createColumns = function () {
return [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
};
var setDataSource = function () {
if (customerGridDataSource != undefined) {
return dataSource = new kendo.data.DataSource({
data: customerGridDataSource,
schema: {
data: function (response) {
return response;
},
total: function (response) {
return response.length;
},
model: {
id: "CustomerID",
fields: {
OrderID: { editable: false, nullable: false, type: "int" },
ShipCountry: { editable: true, nullable: false, type: "string" },
ShipAddress: { editable: true, nullable: true, type: "string" },
ShipName: { editable: true, nullable: true, type: "string" }
}
}
},
pageSize: 5,
serverPaging: false,
serverSorting: false,
serverFiltering: false,
filter: { field: "CustomerID", operator: "eq", value: e.data.CustomerID }
});
}
else {
alert("Data Source undefined. Please Contact Administrator.")
}
};
var init = function (e) {
gridOrder = $("<div/>").appendTo(e.detailCell).kendoGrid({
scrollable: false,
sortable: true,
pageable: true,
columns: createColumns(),
dataSource: setDataSource()
});
};
return {
Init: function (e) {
init(e);
}
}
})(jQuery,window);
$(function () {
Customer.Init();
});
Kendo ui provides a parameter called e for dataBound event. e.sender is the grid. So your code should seems to this:
var onDataBound = function (e) {
var grid = e.sender;
grid.expandRow(grid.tbody.find("tr.k-master-row").first());
};
As I mention in comments: It seems the problem is with the dataBound: onDataBound(), because you should set the function onDataBound to the dataBound event not the result of execution onDataBound().The e is undefined because kendo executing the onDataBound() when it wants to set the initial value of dataBound event, not the time the dataBound event has occurred. replace dataBound: onDataBound() with dataBound: onDataBound and try again:
var init = function () {
gridCustomer = $("#gridCustomer").kendoGrid({
sortable: true,
filterable: true,
pageable: {
pageSize: 5,
pageSizes: true
},
columns: createColumns(),
dataSource: setDataSource(),
dataBound: onDataBound, //Not immediately execution
detailInit: Order.Init //Not immediately execution
});
};
You have to remove the parentheses at the end of onDataBound when you add the handler to the grid's configuration object (same with Order.Init), otherwise you're immediately executing the function instead of when the event is triggered:
gridCustomer = $("#gridCustomer").kendoGrid({
sortable: true,
filterable: true,
pageable: {
pageSize: 5,
pageSizes: true
},
columns: createColumns(),
dataSource: setDataSource(),
dataBound: onDataBound,
detailInit: Order.Init
});