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

2 posts, 0 answers
  1. Bart
    Bart avatar
    1 posts
    Member since:
    Feb 2013

    Posted 28 Feb 2013 Link to this post


    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

    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?

  2. Vladimir Iliev
    Vladimir Iliev avatar
    2194 posts

    Posted 05 Mar 2013 Link to this post

    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 ( % 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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top