I am trying to filter my kendo Grid with a multiselect box. I have a grid with serverFiltering turned on with more or less this setup:
// this is in the grid configuration
columns: [
{
title: "Name",
width: 160,
field: mem_ORD_EditieTitel,
filterable: {
ui: multiSelect
}
}, ...
]
// and the function corresponding to the filterable option
function multiSelect(element)
{
var multi = element.kendoMultiSelect({
placeholder: "Select editions",
dataSource: remoteDataSource,
dataTextField: "mem_ORD_EditieTitel",
dataValueField: "mem_ORD_EditieTitel",
optionLabel: "--Select Value--"
}).data('kendoMultiSelect');
}
The problem is that when i select more than one value, the request only includes the first selected item. Is there anyway to fix this? Or does the kendo grid just doesnt feature this? For example:
filter[filters][0][field]:mem_ORD_EditieTitel
filter[filters][0][operator]:eq
filter[filters][0][value]:SomeTitle
filter[logic]:and
Thanks
When I use this definition:
element.kendoMultiSelect({
valuePrimitive: true,
dataSource: kendoDataSource,
dataTextField: textField,
dataValueField: valueField,
optionLabel: optionLabel
}).data("kendoMultiSelect");
Multiple values are posted to the server:
filter[filters][0][field] SubFunctionCode
filter[filters][0][operation] eq
filter[filters][0][value] ICT-2,ICT-3
filter[logic] and
page 1
pageSize 5
skip 0
take 5
The filter[filters][0][value] equals "ICT-2,ICT-3".
The next challenge is how to process the comma-separated value at the server-side. I do not have a solution for this issue...
Related
I have an existing grid creating in Kendo UI for Jquery. I want to put a static drop down/select box in the first field/cell of the grid on each row. When I do it shows up as "undefined".
Most of the examples I see on her and the Telerik site use an editor. In my case the drop down is static. Once they click on an item they will be redirect to another page to do something. At the moment I just want to get the drop down to show up with hard coded options.
jQuery(function($){
"use strict";
var grid = $("#grid").kendoGrid(){
....
columns: [{
field: "my_links",
title: "My Links",
template: "#=getMyLinks(DATA.user_id)#"
},{
....
}_.data("kendoGrid");
function setGridData(){
....
});
grid.setDataSource(dataSource);
}
setGridData();
});
function getMyLinks(user_id){
$('<input id="my_links" name="my_links/>')
.kendoDropDownList{[
dataSource: [
{ id: 1, name: "View" },
{ id: 2, name: "Create },
{ id: 3, name: "Delete"}
],
dataTextField: "name",
dataValueField: "id"
});
}
I would expect a drop down in the
You should provide DOM element for drop down widget in columns.template field and then initialize all widgets in dataBound event.
$("#grid").kendoGrid({
columns: [{
field: "my_links",
title: "My Links",
template: "<input id="my_links" name="my_links/>"
}],
dataBound: function (){
getMyLinks(DATA.user_id);
}
}).data("kendoGrid");
I am currently working with Kendo UI and am trying to data bind my Kendo observable to my drop down list. My drop down list is customized and is created inside of a Kendo editing popup object. I used a simple approach of just calling the editor in my columns and creating a function that creates a drop down list in that object. Now I am able to data bind with out an issue in my HTML file, however I am finding it difficult to do the same with my current approach.
Currently I am filling up the grid with data, I am able to populate the grid with the client name and client number, but the client type is not being posted. I assume is the failure to appropriately data-bind.
This is my Kendo observable
var viewModel = kendo.observable({
client: {
clientName: "",
clientNumber: "",
clientType: "",
},
dropdownlist: ["HCC", "Tax", "Audit", "Advisory"],
});
This is my Kendo Grid
$("#grid").kendoGrid({
dataSource: client,
toolbar: ["create"],
columns: [{
field: "clientName",
title: "Client Name",
},
{
field: "clientNumber",
title: "Client Number",
},
{
field: "clientType",
title: "Client Type",
editor: categoryDropDownEditor,
}
],
editable: "popup",
})
And this is my customized function which I am having issues data binding.
function categoryDropDownEditor(container) {
$('<input data-role="dropdownlist" data-bind="source: dropdownlist , value: client.clientType">')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
replace value: client.clientType to value: clientType:
function categoryDropDownEditor(container) {
$('<input data-role="dropdownlist" data-bind="source: dropdownlist, value: clientType">')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Engagement Types",
dataSource: viewModel.dropdownlist,
});
}
I want to include kendo dropdownlist into my grid.
Everything's going to be fine except one thing.
When i want to "Add Record" with default kendo create toolbar, i can't bind first value fetched from dropdownlist datasource.
Datasource works fine. Dropdownlist works fine too.
If I choose anything from dropdownlist manually, everything works fine.
$scope.mainGridOptions = {
dataSource: {
transport: ...
schema: ...
},
batch: false,
...
toolbar: ["create"],
columns: [
...,{
field: "location_id",
title: "Location",
editor: function(container,options){
var input = $('<input/>');
input.attr('name',options.field);
input.appendTo(container);
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
index: 0,
});
}
},
...
]
};
I tried this too. except "index", i tried to manually select first item from dataSource. Visually it works fine. Even with Third item selected too, but when i click "Update", data isn't bounded.
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
dataBound: function(e){
this.select(0);
}
});
Anyone?
So, i found the solution.
It's seem to be a bug of Kendo DropDownList.
I'm bounding it manually after dataSource load from dropdown dataBound event.
Here we go:
editor: function(container,options){
var input = $('<input/>');
input.attr('name',options.field);
input.attr('data-bind','value:' + options.field);
input.appendTo(container);
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
index: 0,
dataBound: function(){
options.model[options.field] = this.dataItem().value;
}//end databound
});//end dropdownlist
}//end editor
I would like to ask, how to change in Kendo Grid component column filterable input (see image below) into dropdown menu with two given values (CZ and EN)?
Many thanks for any help.
EDIT:
I tried to do by this way, but with no effect:
{
field :"language",
title : $translate.instant('LANG'),
type: "string",
width:220,
filterable: {
ui: function (element) {
element.kendoDropDownList({
dataSource: ['CZ','EN'],
optionLabel: "--Select Value--"
});
}
}
},
Check this tutorial, it should give you information how to do it
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Sorry, Is this that you are trying to achieve ?
I have resolved this by applying below code
{
field: "language",
title: "Language",
width: 150,
filterable: {
multi: true,
dataSource: [
{ language: "CN" },
{ language: "EN" }
]
}
}
Hope this will work for you
I have used Kendo grid, I need to select a row without command columns.
Here is my code..
var grid = $("#grid").kendoGrid({
dataSource: grid,
height: 450,
sortable: true,
selectable: "row",
columns: [
{ field: "user" },
{ field: "subject" },
{ field: "status" },
{ command: ["Update"], title: "Subscribe" },
{ command: ["destroy "], title: "Delete"}
]
});
In UI I want to select user, subject, status only.
Not possible out-of-the box, however when you use the select() method you will receive only the data cells.
If you need it really badly you might use the change event of the Grid and search for selected command cells to remove their k-state-selected class.