We Keep Coding

Kendo ui grid Fiter mode:row

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);
}
}
});
}

Kendo ui grid - checkbox,modal or radio button on specific cell

need help.
Kendo ui Grid
Kendo grid code:
$('#triggerParameterData').kendoGrid({
columns: [{field: "name"},{field: "value"},{field: "description"}],
selectable: "multiple,row",
pageable: false,
scrollable: false,
editable: true,
dataSource: {
data: popup, schema: {
model: {
fields: {
name: { editable: false },
description: { editable: false },
}
}
}
},
})
I want to make 2nd row value cell into a check box. if anyone have solution please share.
special thanks.

Reference: Kendo Grid Columns.Template
.....
columns: [
{field: "name"},
{field: "value", template: '<input type="checkbox" value="#: value #">'},
{field: "description"}
]
......

Use this fiddle
JS:
var popup = [ { value:true, name: "Enos", description: "Es" },
{ value:true,name: "Ray", description: "Rs" },
{ value:true,name: "Justice", description: "Js" },
{ value:true,name: "RR", description: "ESW" },
{ value:true,name: "Gop", description: "Gp" },
{ value:true,name: "DS", description: "JN" },
{ value:true,name: "Raven", description: "Rv" },
{ value:true,name: "FD", description: "FDGH" },
{ value:true,name: "Andrew", description: "Ar" },
{ value:true,name: "DDD", description: "GFG" },
{ value:true,name: "Shayne", description: "S" },
{ value:true,name: "YYY", description: "GHFGH" },
{ value:true,name: "Walter", description: "W" },
{ value:true,name: "EEE", description: "LUIO" },
{ value:true,name: "ZKZG", description: "RD" },
{ value:true,name: "JJJ", description: "FGJHGH" }];
$(document).ready(function () {
$('#triggerParameterData').kendoGrid({
columns: [{ field: "name" },
{ field: "value", template: '<input type="checkbox" value="#: value #">' },
{ field: "description" }],
selectable: "multiple,row",
pageable: false,
scrollable: false,
editable: true,
dataSource: {
data: popup, schema: {
model: {
fields: {
name: { editable: false },
value: { editable: false },
description: { editable: false },
}
}
}
},
})
});

How to populate koGrid Groups Array on initial load?

How can I populate a koGrid Groups Array? The last line of the following code is throwing an error:
gridOptions: {
data: ko.observableArray([{ name: 'John', title: 'Abc', age: 29, salary: 35000, company: "OATI" }, { name: 'Peter', title: 'XYZ', age: 35, salary: 70000, company: "Infogain" }]),
multiSelect: true,
showGroupPanel: true,
showColumnMenu: false,
showFilter: false,
columnsChanged: this.columnsChanged,
maintainColumnRatios: true,
enablePaging: true,
pagingOptions: this.pagingOptions,
hideChildren: false,
footerVisible: false,
displaySelectionCheckbox: false,
columnWidth: 1000,
columnDefs: ko.observableArray([
{ field: '_sortIndex', visible: false, displayName: "Random Sort", sortDirection: "asc" },
{ field: 'name', visible: true, displayName: "Name", selectable: true, groupIndex: 1, width: 150 },
{ field: 'title', visible: true, displayName: "Title", width: 150 },
{ field: 'age', visible: true, displayName: "Age", width: 150 },
{ field: 'salary', visible: true, displayName: "Salary", agg: "sum", width: 150 },
{ field: 'company', visible: true, displayName: "Company", width: '**' }
]),
groups: ['company'] // this code is throwing error. without this line it is working fine.
}
Can anyone explain what is wrong?

Saving column with custom editor gives nested column array

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?

Kendo Grid filter to use combo box with column.values rather than drop down list

I'm trying to get Kendo's Grid to show a filter using a combo box rather than a drop down list when used with values. What I mean is, on the grid columns array, each column can be given a list of values (objects with text and value properties) for each possible entry in the database, thereby rather than showing a code, it shows a recognisable name or text instead of the code. The problem is that whenever I specify values against the column, the filter reverts to a fixed list of criteria and a drop-down list, which I don't want.
See an example of what I mean here. What I'd like to see is the filter (on the Category column) to show a combo-box rather than a drop down list, but still use the values against the codes in the table to show in the data in the grid, but it doesn't seem to work.

As you say it doesn't work with the values property, so one approach would be to set up a custom row template and use a lookup function on category ID and replace it with the corresponding text:
var categories = [{
"value": 1,
"text": "Beverages"
}, {
"value": 2,
"text": "Condiments"
}, {
"value": 3,
"text": "Confections"
}, {
"value": 4,
"text": "Dairy Products"
}, {
"value": 5,
"text": "Grains/Cereals"
}, {
"value": 6,
"text": "Meat/Poultry"
}, {
"value": 7,
"text": "Produce"
}, {
"value": 8,
"text": "Seafood"
}];
function getCategory(catID) {
return $.grep(categories, function(n, i) {
return n.value === catID;
})[0].text;
}
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
CategoryID: {
field: "CategoryID",
type: "number",
defaultValue: 1
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
}
}
}
}
});
var rowTemplateString = '<tr data-uid="#: uid #">' +
'<td>#: ProductName #</td>' +
'<td>#: getCategory(CategoryID) #</td>' +
'<td>#: UnitPrice #</td>' + '<td></td>' +
'</tr>';
var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');
var commonSettings = {
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [{
field: "ProductName",
title: "Product Name"
},
{
field: "CategoryID",
width: "150px",
//values: categories,
dataTextField: "text",
dataValueField: "value",
dataSource: categories,
filterable: {
ui: function(element) {
element.kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: categories
});
}
},
title: "Category"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "150px"
},
{
command: "destroy",
title: " ",
width: "110px"
}
],
editable: true
};
$("#grid").kendoGrid($.extend({
rowTemplate: rowTemplateString,
altRowTemplate: altRowTemplateString
}, commonSettings));
});
Note: In this demo I haven't tried to handle the template for the Delete column. I just left it blank.
Here's the Dojo http://dojo.telerik.com/oFulu

Try this One,According to your demo here
</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
var categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
},{
"value": 4,
"text": "Dairy Products"
},{
"value": 5,
"text": "Grains/Cereals"
},{
"value": 6,
"text": "Meat/Poultry"
},{
"value": 7,
"text": "Produce"
},{
"value": 8,
"text": "Seafood"
}];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{
field: "CategoryID",
width: "150px",
values: categories,
editor:function(container,options)
{
$('<input name-"' + options.fields +'"/>').
appendTo(container).kendoComboBox({
autoBind:false,
dataTextField:"text",
dataValueFiled:"value",
dataSource:new kendo.data.DataSource({
schema:{
model:{
id:"value",
fields:{
text:{},
value:{}
}
}
},
data:categories
})
})
},
title: "Category"
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
{ command: "destroy", title: " ", width: "110px"}],
editable: true
});
});
</script>