Set pre-defined value for filter in Kendo UI Grid
angularjs, kendo-grid, kendo-ui
Solution
Finally found a kendo forum question that set me in the right direction!
The solution is not to add the pre-set filter value while constructing the grid but to do it once the grid has finished building using the kendoGrid.dataSource.filter object:
angular.module('sgComponents').directive('sgGrid', [
return {
restrict: 'AE',
scope: { filterable: @sgFilterable, predefineFilterValue: @sgPredefineFilterValue},
template: '<div class="sg-grid">\
<div class="pager-bar">\
<div></div>\ // THE KENDO GRID
</div>\
</div>',
link: function(scope, element, attrs) {
buildGrid();
function buildGrid() {
//code same as in original question
grid.kendoGrid(gridOptions); // build the grid
};
/*
* Builds the options for the grid
*/
function buildGridOptions(scope, attrs, grid) {
//code same as in original question
}
/*
* the grid has finished building so
* now get hold of it and pre-set the
* filter value.
* The values (the field to filter, the type of filter and the value)
* are hard-coded here but ultimately would
* come from a JSON object on the scope, constructed
* using values from the model
*/
kendoGrid = gridElem.data('kendoGrid'); // the grid
//If the attribute to pre-set a filter value is true...
if (scope.predefineFilterValue === 'true') {
var ds = kendoGrid.dataSource; // the datasource object has a filter object
ds.filter([
{
"logic":"or", // could be 'and'
"filters":[{
"field":"accountId", // the column you want to filter
"operator":"eq", // the type of filter
"value":105 // the value, hard-coded for testing
}]
}
}
}
}
]);
Problem
I want to set a user-defined search value in a filter on a kendo grid. As soon as the user opens the filter, the value will be placed into the search box. Any advice would be much appreciated. This is similar question to Set default filter for Kendo UI Grid except that I'm using angular js and I want a user-defined string filter value: This is how I build my grid. I'm using angular js to create a div with custom attributes. The most notable attributes are `sg-grid` (the kendo grid itself), `sg-filterable` (set to true to indicate that this grid should be filterable) and `sg-predefine-filter` (also set to true to indicate that this grid's filter should have a string entered into the search box when it opens): Markup ``` <div sg-grid sg-data="api/grid/accounts" sg-columns="accountId,name,pricingFrequency,shortName,status" sg-filterable="true" sg-predefine-filter-value="true" </div> ``` Scripting (simplified to demo here) ``` angular.module('sgComponents').directive('sgGrid', [ return { restrict: 'AE', scope: { filterable: @sgFilterable, predefineFilterValue: @sgPredefineFilterValue}, template: '<div class="sg-grid">\ <div class="pager-bar">\ <div></div>\ // THE KENDO GRID </div>\ </div>', link: function(scope, element, attrs) { buildGrid(); function buildGrid() { var grid = element.find(':nth-child(2)'); // 2nd DIV IN THE TEMPLATE var gridOptions = buildGridOptions(scope, attrs, grid); grid.kendoGrid(gridOptions); // build the grid }; /** Builds the options for the grid */ function buildGridOptions(scope, attrs, grid) { if (scope.filterable === 'true') { opts.filterable = {}; opts.filterable.operators = {}; opts.filterable.operators.string = {} if (scope.predefineFilterValue === 'true') { // set a pre-defined value if true opts.filterable.operators.string = { eq: 'Is equal to', value:'Test' } } else { // just show the filter option opts.filterable.operators.string = { eq: 'Is equal to' } } } } } }; ]); ``` Here is an image of the console log: The outcome. As you can see, my value is added as another filter option. I don't want this, I want it to be in the input box as a value!