I am trying to change the kendo grid filter for date columns to state only "From" and "to". I cannot find a way to do this using MVC Razor Syntax.
filterable: {
extra: false, //do not show extra filters
operators: { // redefine the string operators
string: {
contains: "Contains",
startswith: "Starts With",
eq: "Is Equal To"
}
}
}
If you want to use Razor I guess you are using the ASP.NET MVC version, the syntax is
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
))
)
https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization
Related
I have a telerik mvc grid (NOT JAVASCRIPT) with groupable() turned on. The column i am grouping by has a link in it. No big deal since that's easy on a column template. However, header templates don't allow access to data from a column different that the one the grouping is set on, and our links are all based on the "ID" column (hidden) whereas the grouping is on the "Name" column.
Can I call javascript from the header template to get the data I need?
here is an example of what has worked
.Groupable()
.Selectable()
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("#= rowCommandsUndelete(data, false, true) #").Title(" ").Width(100);
columns.Bound(m => m.Active)
.Title("Active?")
.ClientTemplate("#= ActiveState(data.Active) #")
.Width(85);
columns.Bound(m => m.Origin.Name)
.ClientGroupHeaderTemplate("<a href='www.google.com'>link </a>")
.ClientTemplate("<div id='#=data.ID#'></div><a href='/Origins?id=#=data.Origin.ID#'>#=data.Origin.Name#</a>") //Empty div with "data.ID" is required (see JavaScript section below)
.Width(300);
and this doesn't work and gives an error: Uncaught TypeError: Cannot read property 'ID' of undefined
columns.Bound(m => m.Origin.Name)
.ClientGroupHeaderTemplate("<a href='www.google.com'> #=data.Origin.ID#</a>")
the final answer is thanks to sandro. On an ajax page, use clientgroupheadertemplate like this on a column:
columns.Bound(m => m.Origin.Name)
.ClientGroupHeaderTemplate("#=buildHeader( value )#")
buildheader is a javascript function, and value is a built-in value in the header. Here's the javascript function:
function buildHeader(value) {
return "<h4><u><a href='\origins?OriginName=" + encodeURIComponent(value) + "'>" + value + "</a></u></h4>";
}
value contained the string from the column and i was able to create a link this way and set it to the column header. I have also successfully called javascript now from a footer to trigger something after a calculation.
It's groupHeaderTemplate configuration.
Example:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "link",
groupHeaderTemplate: "<a href=#=value# target='_blank'>google.com</a>"
}
],
dataSource: {
data: [
{ name: "Jane Doe", link: "https://google.com" },
{ name: "John Doe", link: "https://google.com" }
],
group: { field: "link" }
}
});
I need help using a custom column filter for handling JS objects.
I have a slickgrid table where the values in one column are JS object:
[
{ id: "1234", text: "Batman"},
{ id: "2345", text: "Robin"}
]
I use a custom formatter to smash the object into a string:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext: any) =>
value ? value.map(o => o.text).join(', ') : '';
Which displays in slickgrid as
Batman, Robin
my slickgrid options use gridmenu and enables column filtering:
this.gridOptions = {
enableGridMenu: true,
enableFiltering: true,
enableAutoResize: true,
enableColumnReorder: true
};
My columnDef enables filtering for this column:
{
id: 'owners',
name: 'Owners',
field: 'owners',
sortable: false,
formatter: optionFormatter,
filterable: true
}
Everything works if the value in the cell is a string, but the filter doesn't work if the cell is an object. I assume the filter is searching the pre-formatted value.
Is there a way to provide the column with a custom filter function that knows how to search the JS object for the query string? For example if I could just search the JSON.stringify(value), that would be good enough.
Alternatively, this answer describes how I could use the formatter to store the formatted text as a different string property in dataContext. If I do that, how do I specify which property to filter, seeing as it is a different property than the column field?
I found a workaround.
preprocess my data, calling JSON.stringify on all values that are objects:
flattenFeature(f: Feature): any{
var res = {};
for (var prop in f) {
res[prop] = (typeof f[prop] === 'object') ? JSON.stringify(f[prop]) : f[prop];
}
return res;
}
Then in my formatter, I parse the json, before formatting:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext) =>
value ? JSON.parse(value).map(o => o.text).join(', ') : '';
This allows the standard string filter to search the stringify'd JSON
I have the following situation, a kendo grid and I want to select which filter operators, this works fine:
var filters_op = {
operators: {
string: {
eq: "Is equal to",
neq: "Is not equal to",
contains: "Contains"
}
}
}
element.kendoGrid({
dataSource: dataSource,
filterable: filters_op,
columns: ...
...
});
However my application is multi-language, and previous I had the property filterable: true (or false) and the vendor kendo global do the work to translate and brings its own filterable operators.
On the other hand, the default operators from Kendo Global contains some filters like "starts with", "Is after", "Is after or equal to"... which my application doesn't support yet, and when I override them, I lose the translation support from K.Global
Is it possible to have both, select which I want and the translate from K.Glbl together?
You can't choose which one of the kendo global operators will be translated on the filterable parameter of your kendoGrid function. Kendo does not allow that, yet.
However, you can translate the operators by yourself (or by a third-party library) and provide them on the filters_op. That will override the kendo default filters and also translate them.
I recommend you to use the I18n.t translate method of the i18n to do that. Your code will look like this, for example:
var filtersOp = {
operators: {
string: {
eq: I18n.t('kendo.grid.filterable.operators.string.eq'),
neq: I18n.t('kendo.grid.filterable.operators.string.neq'),
contains: I18n.t('kendo.grid.filterable.operators.string.contains')
},
date: {
eq: I18n.t('kendo.grid.filterable.operators.date.eq'),
neq: I18n.t('kendo.grid.filterable.operators.date.neq')
},
enums: {
eq: I18n.t('kendo.grid.filterable.operators.enums.eq'),
neq: I18n.t('kendo.grid.filterable.operators.enums.neq')
}
}
}
...
element.kendoGrid({
...
filterable: filtersOp,
columns: ...
...
})
As you can see, the I18n library will handle this translation procedure.
I got this small but strange error while implementing kendo column filters. My filtering icon has an additional dot in IE. In all other browsers everything looks fine. I don't know how to delete or at least hide this small additional dot.
Here is the screenshot from IE:
and here is how it should look like:
I used a regular kendo filtering implementation, example of the code is below:
var MyGrid = function($div) {
var base = $div.data('baseurl');
var columns = [
{ field: 'userName', title: 'User Name'},
{ field: 'age', type:'number', title: 'Age' }];
grid($div, columns, {
datasource: datasource(base + '/double', ViewBackbone.options()),
options: {
filterable : {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Equals"
},
number: {
eq: "Is equal",
gt: "Greater than",
lt: "Less than"
}
},
messages: {
info: "Choose an option",
filter:"Filter",
clear: "Clear"
}
},
}
});
};
The problem was solved by fixing the width property to the columns header. So in your css you have to specify the width to be more than 100%. I set up mine to be 115% and the dot disapeered.
In inline navigation, i want to remove user entered value from custom error message.
So far all examples have this sticked to message.
For e.g. I want to remove date "2013-blah blah"
(source: easycaptures.com)
Thanks.
You can use custom_func to achieve this.
Add editrules to column details in colModel like given below
editrules:{custom: true, custom_func: customValidationMessage}
and the function (In this case I am doing validation for required, you can do your validation for date in if condition )
function customValidationMessage(val, colname) {
if (val.trim() == "") {
return [ false,colname + " is required " ];
} else {
return [ true, "" ];
}
}