How can I modify column filter option in kendo grid when grid is loaded? For example
add filter option filterable: { multi: true } or change width width: 120.
More detail, I have this code:
$("#Table").kendoGrid({
dataSource: { data },
pageSize: 30,
pageable: true,
sortable: true,
navigatable: true,
resizable: true,
groupable: true,
filterable: true,
selectable: "multiple, row",
columns:
[{ field: "ID", title: "ID", width: "20px", },
{ field: "Customer.Title", title: "Customer", width: "30px" },
{ field: "Author.Title", title: "Expert", width: "30px" },
{ field: "Body", title: "Body", width: "200px" },
{ field: "RemainderBody", title: "RemainderBody", width: "50px" },
]
}).data("kendoGrid");
I want to modify Customer filterable like filterable: { multi: true }
Going along with #NigelK and suggesting to use setOptions. Here is an example of setting an individual column to use multicheck filtering.
<div id="grid"></div>
<script>
grid = $("#grid").data("kendoGrid");
grid.setOptions({
columns: {
1: {
filterable: {
multi: true
}
}
}
});
</script>
Here is a dojo to test the code above.
You can use the setOptions method to change the grid configuration after it has been created. Check the API reference for the grid:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions
Note that this will destroy and recreate the grid.
Related
I have a grid and a multiselect ,i want to filter the grid by the multiselect according to what i select ,and when i de select,the grid should be filterd accordingly,here is my grid:
$("#grid").kendoGrid({
dataSource: ds2,
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "name",
title: "Name",width:"50px"},
{ field: "Description",
title: "Description", width: "80px"
},
{ field: "WindSpeed",
title: "Wind Speed", width: "40px"
},
{ field: "RPM",
title: "RPM", width: "40px"
},
{ field: "Power",
title: "Power", width: "40px"
}
]
});
the data which bind the datasource:
var ds1 = new kendo.data.DataSource({
data: rsturn_f.EventNames
});
var ds2 = new kendo.data.DataSource({
data: rsturn_f.Data
});
and here is the multi select:
$("#evnts").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "Nme",
dataValueField: "Nme",
//autoBind: false,
select: onSelect,
deselect: onDeselect,
dataSource: ds1
});
by onselect i do this:
function onSelect(e) {
ds2.filter({ field: "Description", operator: "startswith", value: e.dataItem });
}
now if i want to filter on multiple value and un filter by removing the values from multiselect i dont know what should i do,any idea?
You have to use change event of the Multiselect. You can directly use a function in the operation attribute which is passed to the dataSource filter API.
function onChange(e) {
ds2.filter({ field: "Description", value: this.value(),
operator: function(currentValue, filterValues){
if(filterValues.length===0){
return true;
}
if(filterValues.indexOf(currentValue)!==-1){
return true;
}
return false;
}
});
}
I'm trying to have a kendo grid column extremely thin, basically like a line. Reducing the width property below 10px or 10 doesn't seem to have any effect.
Here's what I'm doing:
let mainGridOptions = {
dataSource: myData,
columns: [{
field: "color",
title: " ",
width: '5px' // tried even without px, just 5
}]
};
Anyone know what's happening?
I am not able to reproduce it I please try with the below code snippet or look in this demo.
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: '5px'
}]
});
});
</script>
If you will set the column width to '5px' then you could not see anything into column because some default spacing(Margin/padding) applied to the columns.
I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");
I am using Kendo UI web in an ASP.NET MVC4 project.
I am trying to create a master/details grids and a detailsTemplate for each. I have some question regarding this situation:
What's the difference between hierarchy and details?
Is it possible to populate the details grid in a separate div on a master row click instead of that little triangle?
This code was my starting point : http://jsfiddle.net/WKSkC/2/
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns:
[
{field: "FirstName", title: "First Name", width: "110px" },
{ field: "LastName", title: "Last Name", width: "110px" },
{ field: "Country", width: "110px" },
{ field: "City", width: "110px" },
{ field: "Title" }
]});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Thank you for your help.
You can use the API of the Grid to expand it programatically.
//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
$(element).data().kendoGrid.expandRow($(this));
})
Here is updated version.
Or you can use make the Grid selectable and use the select event instead of hooking a click event like shown above.
I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}