Custom Editor on per cell basis, creating hiearchies, ODATA vs. JSON

[Bart]

Hello,

I'm evaluating the KendoUI grid for a project that I am doing. I like the inline editors that your grid provides but the issue I have with that is the editor can be assigned only at the column level. What if I want to be able to specify the editor type on a per cell level. How would I do that? 

In my application I also need to show TreeView type of hierarchy in the grid that allows the user to expand and collapse rows in the grid. The grid would be something like the following shown in the SlickGrid example

http://mleibman.github.com/SlickGrid/examples/example5-collapsing.html

Would you be able to do that with KendoUI? Is there some sample code you can show me?

Also, I see that KendoUI uses ODATA instead of JSON. Is there a reason for that? Can I use the KnockoutJS data binding feature instead of KendoUI data binding techniques for the grid?

Thanks.

[Vladimir Iliev]

Hi Bart,

Please find the answers of your questions below:

• What if I want to be able to specify the editor type on a per cell level - basically this is not supported out-of-the-box, however you can achieve it using the following JavaScript on document ready event (current example switches between regular text input and DropDownList editor depending on custom logic):

  $(function () {
      //Change Grid with your grid name
      var grid = $("#Grid").data("kendoGrid");
      //change the index of the column with required column index
      grid.columns[2].editor = function (container, options) {
          //example logic to switch between two editors
          //options.model contains current row model
          if (options.model.id % 2 == 0) {
              //first editor is the default editor
              $("<input data-bind='value:" + options.field + "' class='k-input k-textbox'/>").appendTo(container);
          } else {
              //second editor is drowpDownList
              $("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoDropDownList({
                  dataTextField: "text",
                  dataValueField: "value",
                  dataSource: [
                      { text: "Order Food", value: "Order Food" },
                      { text: "Order Office Materials" , value: "Order Office Materials"},
                      { text: "Order Production Materials", value: "Order Production Materials" }
                  ],
              });
          }
      }
  })

    
•  In my application I also need to show TreeView type of hierarchy in the grid - Currently this feature is not supported, however I would suggest to share your idea at Kendo UserVoice to allow other users vote for it. Most voted ideas are included in next KendoUI releases. 

Kind Regards,
Vladimir Iliev
the Telerik team