Thank you for your reply, I was following the instructions in this link: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/checkbox-filter-menu. In filterinitialization, after the ajax response I try to change the default filter options, but the filter wont be loaded properly at first as shown in the attached file. After few seconds it will be shown properly. I was wondering how i can fix this issue.
var
removeFiltersForField = function (expression, field) {
if
(expression.filters) {
expression.filters = $.grep(expression.filters, function (filter) {
removeFiltersForField(filter, field);
if (filter.filters) {
return filter.filters.length;
} else {
return filter.field != field;
}
});
}
};
var
initializedFilterMenu = function (e) {
var
popup = e.container.data("kendoPopup");
var
dataSource = _this.dataSource;
var
field = e.field;
var
filteUrl = (JSON.parse(JSON.stringify(gridUrl)));
filteUrl.targetTable += '?field=' + field;
var
success = function (response) {
var helpTextElement =
e.container.children(":first").children(":first");
var element = $("<div
class='checkbox-ontainer'></div>").insertAfter(helpTextElement).kendoListView({
dataSource: response,
template: "<div><input type='checkbox' value='#:" +
field + "#'/>#:" + field + "#</div>"
});
e.container.find("[type='submit']").click(function (e) {
e.preventDefault();
e.stopPropagation();
var filter = dataSource.filter() || { logic: "and", filters:
[] };
var fieldFilters = $.map(element.find(":checkbox:checked"),
function (input) {
return {
field: field,
operator:
"eq",
value:
input.value
};
});
if (fieldFilters.length) {
removeFiltersForField(filter, field);
filter.filters.push({
logic:
"or",
filters: fieldFilters
});
dataSource.filter(filter);
}
popup.close();
});
};
var
error = function (xhr, status, error) {
Ember.Logger.error('Fail response: ' + xhr.responseText + ' (status=' +
xhr.status + ' ' + error + ')');
};
_this.get('PopulateGridData')(filteUrl, success, error, {}, 'GET',
false, true);
};
var
dataSource = {
transport: {
read: function (options) {
var success = function (response) {
options.success(response);
};
var error = function (xhr, status, error) {
Ember.Logger.error('Fail response: ' + xhr.responseText + ' (status=' +
xhr.status + ' ' + error + ')');
};
_this.get('PopulateGridData')(gridUrl, success, error, options.data,
'POST', true, true);
},
},
pageSize: gridPageSize,
schema: gridSchema,
serverPaging: true,
serverSorting: true,
serverGrouping: true,
serverFiltering: true,
};
var
gridOptions = {
dataSource: dataSource,
columns: gridColumns,
editable: gridEditable,
pageable: {
refresh: true,
numeric: false,
previousNext: false,
},
height: gridHeight,
scrollable: {
virtual: true,
},
groupable: true,
filterable: true,
filterMenuInit: initializedFilterMenu,
};
var grid =
Ember.$("#kendo-grid").kendoGrid(gridOptions).data('kendoGrid');
// The
filterMenuInit event is raised when the filter menu is initialized.
grid.bind("filterMenuInit",
initializedFilterMenu);
_this.set('kendoGrid', grid);