I'm trying to set a kendo grid column's sortable property via a variable to control when the column can have sorting facility and when it can't.
But this is not working.
If I directly set the sortable property to true/false it works accordingly, but when I'm using a variable to set it, it is not, regardless of the variable value, the property is always set to 'true'.
Example:
This works as expected.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ sortable: false, field: "id" },
{ field: "name" }
],
sortable: true,
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</sript>
But this does not, id field always gets sortable property as true
<div id="grid"></div>
<script>
// if first time it's true, then the sortable property is retaining true always,
// regardless if on second call the variable is set to false. there is no effect
var setColumnSort = canBeFalseOrTrue;
$("#grid").kendoGrid({
columns: [
{ sortable: setColumnSort, field: "id" },
{ field: "name" }
],
sortable: true,
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>
Is there anyway to dynamically disable/enable sorting of a column in a kendo grid?
You need to set it dynamically through grid properties once the grid is initialized.
$('#grid').kendoGrid({
sortable: true,
columns: [
{...}
]
});
var grid = $('#grid').getKendoGrid();
var options = grid.options;
options.columns[0].sortable = false;
grid.setOptions(options);
Example: Enable/disable sorting on column
Related
Is it possible to get the selected items count in the kendoMultiSelect's footerTemplate?
I created a DOJO example with an attemp to use instance.dataItems().length but for some reason, the value is always 0.
$("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
footerTemplate: '#: instance.dataItems().length # item(s) selected'
});
EDIT:
due #Aleksandar comment where he points out
Calling setOptions in an event handler or the respective widget is not
recommended and can cause an endless loop or a JavaScript error.
I take his suggestion into account and add his solution as an answer.
footerTemplate: '<span id="total">#:instance.value().length#</span> item(s) selected',
change:function(e){
var itmsSelected = e.sender.value().length;
$("#total").html(itmsSelected);
}
OBSOLETE:
Guess it's not in an observable object. One of the possible solutions is to change footerTemplate
every time a change happens on multiSelect:
var multi = $("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
change: function() {
this.setOptions({"footerTemplate": this.value().length +" item(s) selected"});
},
dataTextField: "name",
dataValueField: "id",
footerTemplate: '0 item(s) selected'
}).getKendoMultiSelect();
Example: Footer template update
I have a Kendo UI Grid that has the "auto-bind" property set to false. I have also set the "pageable.alwaysVisible" property to false to hide the grid's pager when it's not needed.
The problem I'm having is that because the grid is not data bound when it first loads, the "alwaysVisible" property does not work and the pager is shown. At this stage I would expect the pager to be hidden as there is no data to be paged.
Is there anyway I can hide the pager on first load when the grid is not data bound?
It doesn't look like what you want is available out-of-the-box, but you could achieve it using a bit of CSS. This is probably a better approach than my previous answer, which in essence triggered the grid to bind itself anyway. How about hiding the pager initially until the grid is eventually bound, at which point it takes over management of the pager visibility?
<style>
#grid>.k-pager-wrap.k-grid-pager {
display: none;
}
</style>
<div id="grid"></div>
<button onclick="javascript:$('#grid').data('kendoGrid').dataSource.read()">Refresh</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 3,
alwaysVisible: false
},
autoBind: false
});
</script>
Example here: https://dojo.telerik.com/EBaZAjAc
This looks like a quirk of the grid when it doesn't know that it has no data yet. Perhaps you could try pushing "no data" into your datasource in the first instance? The following snippet demonstrates your problem; un-commenting the last line fixes it:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: new kendo.data.DataSource(),
pageable: {
pageSize: 5,
alwaysVisible: false
},
autoBind: false,
});
//$("#grid").data("kendoGrid").dataSource.data([]);
</script>
Example here: https://dojo.telerik.com/OZAXugOt
You can use something like this:
dataBound: function(e){
if(e.sender.dataSource.total() <= e.sender.dataSource.pageSize()){
e.sender.pager.element.hide();
} else {
e.sender.pager.element.show();
}
Take a look at this example:
http://dojo.telerik.com/OhEDo
I have a kendo grid like what I've posted below. I'm populating the grid based on the data in the url I provided for it. However, there is one column on the grid, the flag column, which I would like to be a separate datasource to populate that column, based on the id. The datasource for that column would look something like:
[{id:1234, flag: 'N'}, {id:5678, flag:'Y'}]
Is there a way where I can populate just 1 column in the grid based on a completely different datasource from the rest of the grid? The flag would need to be placed on the row of its corresponding id. If so, how can I implement this? Any help would be appreciated.
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: url
},
pageSize: 30
},
height: 400,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "id",
title: "ID",
width: 240
}, {
field: "FirstName",
title: "First Name"
}, {
field: "LastName",
title: "LastName"
}, {
field: "flag",
title: "Flag",
width: 150
}]
});
Consider using a foreign key column.
http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn
I have a kendo grid displaying data correctly. I want to add an input box where when user types something in the grid filters that data, like a search box functionality for the grid.
Initially i set the grid's data source:
$("#grid").data("kendoGrid").setDataSource(new kendo.data.DataSource({ data: result }));
filter is applied like this:
$("#grid").data("kendoGrid").dataSource.filter({
logic: 'or',
filters: [
{ field: 'lastName', operator: 'startswith', value: viewModel.get('searchValue') },
{ field: 'address', operator: 'startswith', value: viewModel.get('searchValue') }
]
});
and the input box:
<input data-bind="value: searchValue" />
However whenever the searchValue is changed, the dataSource remains the same, and the grid doesn't change.
Onchange function you may hookup below code
var kgrid = $("#grid").data("kendoGrid");
var orfilter = { logic: "or", filters: [] };
orfilter.filters.push({ field: "lastName", operator: "startswith", value: viewModel.get('searchValue') },
{ field: "address", operator: "startswith", value: viewModel.get('searchValue') });
kgrid.dataSource.filter(orfilter);
I am using the Kendo UI grid and am display a role of models. Each model has a navigation property, and I am trying to display a field that exists in this navigation property.
//schema for my kendo data source
schema: {
data: function (data) {
return data || [];
}
}
......................................................
$("#FAAFreqGrid").kendoGrid({
dataSource: FAADS,
columns: [
{ field: "Id", title: "Freq ID", format: "{0:c}", width: "120px" },
{ field: "Frequency", title: "Frequency Test" format: "{0:c}", width: "120px" },
{ field: "FREQ_POOL", title: "FAATEST", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
If I go to my Web API Url, I get a json response of:
[{"$id":"1","Frequency":"164.1375","FREQ_POOL":{"$id":"2","IsAM":true,......etc}
FREQ_POOL is my navigation property, and it has the data I want. Frequency exists and displays in my grid properly. But my FREQ_POOL field says [object Object], and if I try to say "FREQ_POOL.IsAM", it says IsAM is not defined. I cannot get it to bind to any property I can bind to any other non-navigation field. How do I make this work? The data exists in the JSON object that is returned, but the binding just isn't working correctly. Thanks.
You could set a template for the column in question, like this:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name.first#, #: name.last# </strong>"
}],
dataSource: [ { name: { first: 'Jane', last: 'Doe' } }, { name: { first: "John", last: 'Doe' } } ]
});
the template can then be used to show object in the dataset
more info, you could find here
For the editing, you could then also define the cell editor, with an extra template or function, more info about that, you could find here.