Grid MVVM data-columns, can we bind this to a source?

10 posts, 0 answers
  1. Chris
    Chris avatar
    38 posts
    Member since:
    Feb 2012

    Posted 23 Mar 2012 Link to this post

    I've got a bit of a scenario, I'm loving the fact you can bind a full DataSource to a grid now, but the data-columns section of it is what's troubling me.

    Currently, I have
    data-columns='[{"field": "ID"}]'

    in which works fine, but I'm wanting a *lot* of more intense functionality than that, in which has to be done on one line in HTML otherwise the templates break in Kendo. An example of this is just one row (I have 10):

    { field: "id", title: "Actions", template: "<span class='k-icon k-arrow-next'></span> <span class='k-icon k-delete deleteLink'></span>", width: 60, filterable: false, sortable: false },

    What I was looking for was something like data-columns="source: dataColumns" but this doesn't seem to work. I'd settle for being able to do the data-columns="" code on multiple lines on my HTML document. Right now, on one line, it's completely unreadable.

    I'm surprised more people aren't asking how to do this, unless I'm missing something?
  2. Yavuz
    Yavuz avatar
    2 posts
    Member since:
    Feb 2012

    Posted 27 Mar 2012 Link to this post

    We're looking for the same thing - does anyone have any ideas?

    We are just starting to use the declarative syntax for the grids and our simple prototype with 5 columns is difficult to read/debug.  What we do is copy the string to a .js file, edit it there using multiple lines, then "stringify" it and copy it back to the html document.

    This is our current data-columns attribute for our demo grid (this is all on one line in the html document):

    data-columns='[{"field":"OrderID","title":"Order Id","filterable":"false", "template":"<a href=\"##\" class=\"cmc-grid-details-popup\">#=OrderID#</a>"},"Freight", {"field": "OrderDate","title": "Order Date","width": "100","format": "{0:MM/dd/yyyy}"}, {"field": "ShipName","title": "Ship Name","width": "200"}, {"field": "ShipCity","title": "Ship City"}]'
  3. Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 28 Mar 2012 Link to this post


     It seems that multiline JSON is not recognized and parsed. We will implement that for the next official release.

    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Alvaro
    Alvaro avatar
    9 posts
    Member since:
    Mar 2012

    Posted 23 May 2012 Link to this post

    From the release notes, this was fixed on 2012.1.515.

    But if I can't just bind the data-columns to something in my VM, I still think it's weird to have all that stuff on my HTML. 

    I have found a nice way to keep the columns definitions on my JS and still use MVVM binding.


    Alvaro Oliveira.
  5. John
    John avatar
    1 posts
    Member since:
    Jun 2012

    Posted 19 Oct 2012 Link to this post

    Hi Atanas,

    "filterable":"false" is still ignored. Can you confirm that it has made it into a production release?
  6. Faisal
    Faisal avatar
    9 posts
    Member since:
    Aug 2012

    Posted 12 Nov 2012 Link to this post

    @Alvaro your provided fiddle was not working. So I have fixed it with also some little improvements:

    The working example is at following link:
  7. Cory
    Cory avatar
    11 posts
    Member since:
    Jun 2014

    Posted 12 Oct 2014 Link to this post

    What is Telerik's stance on adding more MVVM bindings to the Grid? Having only events, source, and visible bindings available is pretty limiting and has the potential to force some pretty verbose JSON into HTML as Chris mentions. Considering the age of this post it doesn't seem like a columns binding has been considered.

    Now that AngularJS support is included and provides a clean way to configure the grid, I'm wondering if MVVM enhancements will taper off. It'd be nice if Telerik could provide some guidance here so we know whether MVVM will continue to be enhanced or if we should be looking toward migrating pieces to Angular.
  8. Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 14 Oct 2014 Link to this post


    Adding more MVVM bindings for the grid isn't in our immediate plans. Please open a new feedback item so we can track the user interest in this feature and prioritize it against similar items.
    Atanas Korchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Oscar
    Oscar avatar
    185 posts
    Member since:
    Oct 2010

    Posted 19 Oct 2017 in reply to Atanas Korchev Link to this post

    Hello kendo team:

    Three years later... Any advance on this?

    Kind regards

  10. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 24 Oct 2017 Link to this post

    Hi, Oscar,

    This forum thread is quite outdated and there are some MVVM features which were added since then.

    You can check the Kendo UI UserVoice portal for some items that were since voted up and implemented here:

    Can you let me know if there is anything in particular that you are after so I can provide you with a more specific answer?  

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top