Hi!
I'm working on a rather large page and I notice that the page loads up with ugly controls and then the browser window hangs for a second or two and controls start converting to kendo. And once the whole page is ready, there is still some delay before inputs start accepting text or interaction. Is there a way/best practice to load up kendo faster or pre-cook? If not at least put up view (page) sized loading spinner until page finalizes. I'm assuming something in Kendo Framework would trigger a call back once everything is settled.
Thanks.

I am using the grid in an Angular component with calls to an API. In order to set the API parameters from another set of controls, I use the read function in the dataSource transport. My initial attempt at this function used the options.data.take and options.data.skip to set up the count and offset in my API, as well. In the grid options, I have the pageable set to an object with pageSizes and buttonCount. I can pull the correct data into the grid and use the pager at the bottom to move between pages. When the external filters object that is an input for my Angular component changes, the grid rebinds using k-rebind in the kendo-grid tag on the Angular view. This works most of the time.
The issue I have is when I have something with a lot of data and move to one of the later pages using the pager. If I then change my external filters to give me a smaller set of data, the grid attempts to rebind while on a page that is AFTER the last page in the new dataSource. Based on several questions I have seen, I added code to reset the dataSource.page to 1 in the read function prior to refreshing the data through the API. However, this causes the read function to run twice. I can minimize this effect by checking to see if the page is already 1, but any time the dataSource.page method is called, the read function runs twice. I do not want to cause the load on our API to be greater than necessary. I have tried just changing the options so that the calls to the API are correct, but this causes the pager to give odd numbers such as "250 - 4 of 4 items". Is there any way to stop this from happening and allow the pager to be correct?
My current read function is as follows:
read: function (options) { var filtersChanged = IsFilterChanged(); // method to do compare on external filters if (filtersChanged) { if (vm.gridOptions.dataSource.page() != 1) { vm.gridOptions.dataSource.page(1); } options.data.page = 1; options.data.skip = 0; } var params = { count: options.data.take, offset: options.data.skip }; if (vm.selectedFilters.myOption) { params.optionID = vm.selectedFilters.myOption; } // ... myService.availableItems.get( params, function (data) { options.success(data); }, function (error) { // do something });},The view is as follows:
<kendo-grid id="myItems" options="vm.gridOptions" k-ng-delay="vm.selectedFilters" k-rebind="vm.selectedFilters" ></kendo-grid>Thanks!
Hi I am able to call my odata controller with the correct key but I am missing the payload, so delta is null.
How can I set the payload? and also return the updated entity?
datasource definition:
var baseUrl = "odata/reports",
dataSource = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: {
url: baseUrl,
dataType: "json"
},
update: {
url: (data) => {
return baseUrl + "(" + data.models[0].Id + ")";
},
dataType: "json",
type: "PATCH"
},
destroy: {
url: baseUrl,
dataType: "json",
type: "DELETE"
},
create: {
url: baseUrl,
dataType: "json",
type: "POST"
}
},
webapi odata controller:
public IHttpActionResult Patch(int key, Delta<T> delta)
{
Validate(delta.GetEntity());
if (!ModelState.IsValid)
return BadRequest(ModelState);
var entity = Repository.GetByKey(key);
if (entity == null)
return NotFound();
if (!AuthenticationService.HasWriteAccess(CurentUser, entity))
return Unauthorized();
try
{
delta.Patch(entity);
Repository.Save();
}
catch (Exception e)
{
return InternalServerError(e);
}
return Updated(entity);
}
Hi,
When running webpack I get the error "Unused label" into the file node_modules\kendo\js\spreadsheet\runtime.functions.js
Hi,
I've installed kendo (latest buil) using npm with my pro license.
I'm able to make it work using webpack, but I could not do the same with jszip which is required for export.
Any suggestion?
Thanks!
Ok so I have a kendo grid. Leaving off the definition to make not so long, but I do have autoBind: false on it. I then do the 3 functions below to add a custom multi-select filter to one column. The other thing I have is I set an initial filter on that same column in the grid definition. The problem I am having is that filter gets called twice, once with correct params and a 2nd time with the original filter, or if I have that original filter commented out; it will call it the second time using any other column filters on the grid you have set in the ui, but without using the custom filter on this one column.
I've spent all day and night trying to figure this out... Any ideas.
01.self.onSchemaPopulated = function (columns, model) {02. 03. var measureKey = _.find(columns, function(item) {04. return item.field === 'measure_key';05. });06. 07. measureKey.filterable =08. {09. extra: false,10. operators: {11. string: { 12. eq: "Is equal to" 13. }14. },15. ui: self.measureKeyFilter 16. };17. 18. };19. 20. self.measureKeyFilter = function (element) {21. 22. element.removeAttr("data-bind");23. 24. var menu = $(element).parent();25. 26. menu.find(".k-filter-help-text").text("Show records for measure keys in:");27. menu.find("[data-role=dropdownlist]").remove();28. 29. var multiSelect = element.kendoMultiSelect({30. dataBound: function (e) {31. e.sender.tagList.addClass('k-full-button');32. e.sender.ul.addClass('k-multiselect-items');33. },34. dataSource: _.invoke(self.itemSelected().measures(), 'measure_key'),35. tagMode: 'single',36. tagTemplate: '<div>#:values.length# measures selected...</div>',37. value: _.invoke(self.itemSelected().checkedMeasures(), 'measure_key'),38. }).data("kendoMultiSelect");39. 40. menu.find("[type=submit]").on("click", { widget: multiSelect }, self.filterByMeasureKey);41. 42. };43. 44. self.filterByMeasureKey = function (e) {45. 46. var newFilter = { logic: "and", filters: [] };47. var measureFilter = null;48. var values = e.data.widget.value();49. 50. if (values.length !== self.itemSelected().measures().length) {51. 52. measureFilter = { logic: "or", filters: [] };53. 54. $.each(values, function (i, v) {55. measureFilter.filters.push({ field: "measure_key", operator: "eq", value: v });56. });57. 58. newFilter.filters.push(measureFilter);59. 60. };61. 62. var grid;63. 64. if (self.isRelationshipSummaryToggled()) {65. grid = $('#' + self.rsOptions.id).data("kendoGrid");66. } else {67. grid = $('#' + self.rdOptions.id).data("kendoGrid");68. };69. 70. var currentFilters = grid.dataSource.filter();71. 72. if (!isNull(currentFilters)) { 73. 74. _.each(currentFilters.filters, function (x) { 75. 76. if (!_.isArray(x.filters)) {77. newFilter.filters.push(x);78. } else if (x.filters[0].field !== 'measure_key') {79. newFilter.filters.push(x);80. };81. 82. }); 83. 84. }; 85. 86. grid.dataSource.filter(newFilter);87. 88. };Inside a main grid I have a nested detail grid and a button. How is it possible to add a row to the nested grid on a button click. My solution doesn't work: @scope.detailsGrid is undefined (which is predictable).
$scope.addRow = function () { var grid = $scope.detailsGrid.data("kendoGrid"); grid.addRow(); return false; };<kendo-grid k-scope-field="mainGrid" options="mainGridOptions"> <div k-detail-template> <div kendo-grid k-scope-field="detailsGrid" k-options="detailGridOptions(dataItem)"></div> <button ng-click="addRow()" style="width:100px; height:30px;">Add row</button> </div></kendo-grid>How to draw a line between targeted Menu Items. Documentation says use 'k-separator' class. Is there alternative?
Also, By default a line is added after first menu item. How do i remove it? Please see attached.