/* BeejBløg */

Mar 2, 2017 - 1 minute read - Comments -

Kendo UI Nuggets

Grid doesn’t like spaces in dataSource field names

(I happen to be subscribing to KnockoutJS observable here to receive data feed but that naturally depends on your framework of choice.)

Typical Kendo JS error: invalid template

Particularly note the way the columns property is generated.

 1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829303132333435363738
sigCapVm.packingSlips.subscribe(function (newval) {
  var gridPackingSlips = $("#gridPackingSlips");
  var kgrid = gridPackingSlips.data("kendoGrid");
  if (kgrid && kgrid.columns.length) kgrid.dataSource.data(newval);
  else {
    if (kgrid) kgrid.destroy();
    gridPackingSlips.kendoGrid({
      //workaround for autogenerating columns with spaces
      //from: https://www.telerik.com/forums/field-name-with-space-and-other-than-numeric-creating-issues-to-load-the-grid#23fk8zzWZkioYCn7Tr4xFg

      columns: $.map(Object.keys(newval.length === 0 ? {} : newval[0]),
        function (el) {
          if (el.startsWith("_")) return; //by convention, don't show fields startin with "_"
          //hash aka pound (#) is special character in kendo template syntax
          return { field: '["' + el.replace("#", "\#") + '"]', title: el }
        }), 

      dataSource: { data: newval },
      noRecords: { template: "no records found for those inputs" },
      height: "20em",
      change: function (e) {
        //good to remember that we're not doing a true knockout binding here vs setting the grid's dataSource.data property above
        //so we have to "manually" connect the selected row back to the viewmodel here
        var selectedPackingSlip = e.sender.dataItem(e.sender.select());
        var vm = ko.contextFor(gridPackingSlips[0]).$root;
        vm.selectPackingSlipId(selectedPackingSlip._PackingSlipId);
      },
              
      resizable: true,
      //scrollable: false,
      sortable: true,
      filterable: false,
      selectable: true
          
    });
  };
});
  

Tags: WebDev

Nuget Cheatsheet ASP.Net Controller API nuggets

comments powered by Disqus