Binding to a collection of dynamic objects

Thread is closed for posting
7 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 01 Aug 2012 Link to this post


    Kendo UI Suite and Version


    jQuery Version


    Supported Browsers and Platforms

    All supported by Kendo UI 

    Components/Widgets used 


    ASP.NET MVC Version


    This project demonstretes how to populate Grid component with collection of dynamic objects. 
  2. Mariano
    Mariano avatar
    4 posts
    Member since:
    Jan 2013

    Posted 22 Mar 2013 Link to this post

    Sorry but this sample is'nt dynamic because in the body of grid declaration, you put this:

    ( m.Id("ProductID");
     m.Field("ProductID", typeof(int));
     m.Field("ProductName", typeof(string));
     m.Field("UnitPrice", typeof(decimal));
     m.Field("QuantityPerUnit", typeof(string));  )

    This column declarations is static, this means that you have alredy know column names. The ideal case is that you can bind column names with a list of items for example 
  3. Bram
    Bram avatar
    8 posts
    Member since:
    May 2012

    Posted 09 Apr 2013 Link to this post

    Is there an example with really dynamic object with all CRUD operations ? (Because Datatable is not supported for CRUD inline editing)

    Kind Regards

  4. iCognition
    iCognition avatar
    71 posts
    Member since:
    Apr 2012

    Posted 31 Jul 2013 Link to this post

    This was never dynamic as mentioned by another user. Where are the dynamic columns, static columns are easy...
  5. ken
    ken avatar
    3 posts
    Member since:
    Aug 2013

    Posted 17 Oct 2013 Link to this post

    Did anybody find out how to handle dynamic columns?

    On a related note, Grid doesn't seem to handle nested references as in:

    [{ 1: { x: ..., y:, ... }, ...]

  6. Peter
    Peter avatar
    2 posts
    Member since:
    May 2012

    Posted 26 Nov 2013 Link to this post

    Don't know if this issue is solved, but below is one example of code for creating a dynamic grid. Don't forget the IEnumerable<dynamic> row.

    @model IEnumerable<dynamic>
    ViewBag.Title = "Home Page";

    .DataSource(ds => ds.Ajax()
    .Model(m =>
    m.Field("CustomerId", typeof(int));
    m.Field("Name", typeof(string));
    m.Field("City", typeof(string));
    m.Field("Country", typeof(string));
    .Read(r => r.Action("Read", "Home"))
    .Update(u => u.Action("Update", "Home"))
    .Destroy(u => u.Action("Destroy", "Home"))
    .Create(u => u.Action("Create", "Home"))
    .ToolBar(toolBar => toolBar.Create())
    .Columns(columns =>
    columns.Command(command =>
    .Editable(editable => editable.TemplateName("CustomerItem").Mode(GridEditMode.PopUp))
  7. Shehzad
    Shehzad avatar
    1 posts
    Member since:
    Jan 2013

    Posted 02 Jan 2014 Link to this post

    After researching for a while with no luck I finally found a solution.  Here are the details. 

    Problem:  I want to generate dynamic columns in the grid every refresh.  Because my columns are based on an hour and date dimension which you would imagine are going to change every hour and hence would have a different name every time.  However i still want to generate columns on the fly and show them with nice display labels as date

    Solution: So i figured since I am getting Json data what should i do.  Here is my solution. 

    Note that If try to pass pre-formatted string as the Key in JSon i.e. 03/01/2014.  it would break the grid because the key in json has to comply with javascript variable naming conventions.  So as a work around instead of passing the data string in json key i am passing something like "d03_01_2014".  Once the gird is bound to the data i would loop through the columns collection of the kendo gird and rename/replace unwanted characters (i.e. 'd' and '_') with the ones i want. 

    below is the function that would create my grid
    01.function createGrid10Days(data) {
    03.    dataSource: {
    04.        type: "json",
    05.        data: data,
    06.        pageSize: 20
    07.    },
    08.    height: 605,
    09.    scrollable: false,
    10.    pageable: {
    11.        input: true,
    12.        numeric: false
    13.    },
    14.    sortable: true
    then upon document ready i can make calls to get JSon data and pass it to the create method above and do the renaming of columns afterwards as shown below.
    //First Create My HTML grid the usual way.  Pass in the JSON Data to the create grid method.
    //Right after the grid is created, rename the columns by looping through it                           
    var g = $("#grid10Days").data("kendoGrid");
    for (i = 0; i < g.columns.length ; i++)
         var oldFName = g.columns[i].field;
         var newFName = oldFName.replace("d", "");
         newFName = newFName.split("_").join("/");
         $("#grid10Days thead [data-field=" + oldFName + "] .k-link").html(newFName);

    Hope this helps if you are same as my situation.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.