So I am using Kendo UI Grid and I want to add data-priority to the columns that way I can hide and show columns depending on the viewport I know this is possible with JQuery Mobile (http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_tables_columntoggle) .But Is this possible in Kendo UI?
You can add custom attributes to the column headers using the headersAttributes configuration.
Use it like this (if you are using pure javascript version of Kendo):
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
headerAttributes: {"data-priority": "1"}
},
// more columns...
});
Related
I am using Kendo UI Grid and other Kendo tools for my project.
How can I change some of its settings globally without using any specific id or class?
Eg: Whenever I use grid, pageable message should be "My custom message" across all the site.
I can do that by targeting perticular grid component like below. I am using kendoGrid many places or many times in same page itself. In that case, how can I do the same without repeating the pageable message everytime?
Online Demo { jsFiddle }
$(document).ready(function () {
$("#grid1").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
$(document).ready(function () {
$("#grid2").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
.............
If I have 5 grid items in same page, let say #grid1, #grid2, #grid3, #grid4, #grid5, should I need to add below message to all 5 grid components?
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
Instead, is there a way where I can override the global properties for KendoGrid element without touching the original plugin?
You don't need to add the configuration to each grid. Instead you can take advantage of Kendo's localization features. To change the pager text for all of your grids you should include a "messages" file after you have loaded "kendo.all.min.js". Since this has to do with localization, the "messages" files are culture-specific. If you have not defined a culture for you project Kendo will assume en-US by default.
Here's what you need to do:
Find the original kendo.messages.en-US.min.js file for your version of Kendo. You should be able to find this file in the Kendo installation directory, for example: C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\js\messages
Copy the file to your project
Look for itemsPerPage inside the file and change its value to whatever you want.
Add a reference to the file in your html's <head> section, but make sure it is after kendo.all.min.js
For more information on localizing Kendo take a look at this article: http://docs.telerik.com/kendo-ui/framework/localization/overview
You can also see a working example here: http://demos.telerik.com/kendo-ui/grid/localization
I want to be able to filter a column based on values from a different column.
I have bound a column to ID property and showing Name (using template). When the user filters/sorts, the values of the bound property (ID) are used. I want to use the values of a different property/column.
I have already figured out a way to handle sort (using compare function for kendo.ui.GridColumnSortable) but cannot find a way to handle filter.
PS: I tried using filterMemberPath and sortMemberPath but they only seem to work for server side filtering/sorting.
Talked to Kendo support and found a couple of ways to handle this issue:
if using Kendo version 2016.3 or above, the filter event can be used
filterable: true,
filter: function(e) {
if (e.filter.filters[0].field == "age") {
e.preventDefault();
this.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
}
but if using kendo version 2016.1 or below, the following approach works which uses filterMenuInit and binds the click event on filter button
filterable: true,
filterMenuInit: function(e) {
var button = e.container.find(".k-primary");
var fieldName = e.field;
var grid = this;
button.on("click", function(e) {
e.preventDefault()
grid.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
});
},
I have a Kendo grid which has a lot of columns.
At the initial loading, only a few columns are displayed since I used the hidden attribute on Grid options.
{ field: 'projDisplayId', title: "columnToBeDisplayed", width: "170px"},
{ field: 'workTypDescription', hidden: true, title: "hiddenColumn", width: "170px" },
After that, I manually added some other columns by checking them on the column menu (see My Kendo Grid)
However, when I refresh the page, the columns I added before the refresh have disappeared.
Is there any way to keep the added columns displayed even after I refresh the page?
$("#ElementId").attr("disabled","disabled");
The Above code only works for the Date pickers which are declared in Html page.
But I want to Disable the kendo Date picker in the kendo Grid Header Filter area.
Here is a simple way of achieving what you want.
Disabled text input on grid filter
I have modified the date cell to have the following:
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
filterable: {
cell: {
template: function (element) {
element.element.kendoDatePicker({
});
element.element.attr('disabled', 'disabled');
}
}
}
}
You will notice that I have added a template to the cell which will override the default date picker and add my own date picker to the filter row.
Note if you want to do this via the menu you just need to do this at the first element item e.g. element.kendoDatePicker({})
Hope this is what you are after.
For more info on this take a look at this link:
kendo grid filter api
I am wondering if there's an easy way to have the multiselect widget's css functionality shown in this demo
http://demos.kendoui.com/web/multiselect/index.html
applied to an autocomplete widget.
If the only reason for using autocomplete is that the list of values is huge and you want to do server side filtering (serverFiltering) with a multiselect widget as well. You just need to define serverFiltering as true.
Example:
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "getData.php"
}
},
serverFiltering: true
});
$("#items").kendoMultiSelect({
dataValueField: "name",
dataTextField : "name",
dataSource : ds
});
You will receive a some additional parameters saying what the user has typed so far and you server can return only the data that meets the condition.
This JSFiddle (http://jsfiddle.net/OnaBai/rpDuL/) tries to show you how it works. You can start typing a country name and see that it actually filters the data. Since this is just JavaScript I've simulated server filtering implementing a read function that greps the data for those records meeting the condition.