Grid MVC dynamic column data?

10 posts, 0 answers
  1. Peter
    Peter avatar
    8 posts
    Member since:
    Mar 2016

    Posted 25 Apr 2016 Link to this post

    Hi!

    I use Kendo UI for MVC 2016.1.301, with MVC 6 (Core 1.0). I have a grid with some fixed (bound) columns, and a few dynamic columns. I have managed to add the columns dynamically, with titles. The data type for these dynamic columns are bool. I've found various samples but none of them works, either they don't compile or they have no effect. I must add I'm new to the Razor engine so I don't understand exactly what's happening at all times.

    So, how do I replace the [X] with data from the view model? I've tried variations on this theme, using .Bound and .Template, but nothing compiles either compile-time or run-time:

    1.for (int i = 0; i < Model.PresetsList.PresetsList.Count(); i++)
    2.{
    3.    string titel = Model.PresetsList.PresetsList[i].PresetsName;
    4.    int columnIndex = i;
    5.    columns.Bound(cgi => cgi.MadeChoicePresetsList[columnIndex].IsSelected.ToString()).Title(titel);
    6.}

     

    Here's the current code which displays a [X] instead of data:

    01.    @(Html.Kendo().Grid<C.ViewModels.ChoiceGroupItemViewModel>()
    02.        .Name("choicegroupitemsgrid")
    03.        .Columns(columns =>
    04.        {
    05.            columns.Bound(col => col.ChoiceGroupID).Title("gruppID");
    06.            columns.Bound(col => col.ItemID).Title("artikelID");
    07.            columns.Bound(col => col.ManufacturerItemID).Title("Tillv. artikelnr");
    08.            columns.Bound(col => col.ItemName).Title("Benämning");
    09.            columns.Bound(col => col.CustomerPayablePriceInclTax).Title("Pris").HtmlAttributes(new { align = "right" });
    10. 
    11.            foreach (var presets in Model.PresetsList.PresetsList)
    12.            {
    13.                columns.Template("[X]").Title(presets.PresetsName);
    14.            }
    15.        }
    16.        )
    17.        .Scrollable()
    18.        .Pageable(pgbl => pgbl
    19.            .Refresh(true)
    20.            .PageSizes(true)
    21.            .ButtonCount(5)
    22.        )
    23.        .Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
    24.        .DataSource(datasrc => datasrc
    25.            .Ajax()
    26.            .Read(read => read
    27.                .Action("ChoiceGroupItems", "ChoiceGroup", new { area = "Backoffice", id = Model.ChoiceGroupID })
    28.            )
    29.            .PageSize(20)
    30.        )
    31. 
    32.)

  2. Peter
    Peter avatar
    8 posts
    Member since:
    Mar 2016

    Posted 26 Apr 2016 in reply to Peter Link to this post

    Hi! Found the answer, I was almost there!

    All I had to do was to bind to the bool property, not to a .ToString() function:

    1.for (int i = 0; i < Model.PresetsList.PresetsList.Count(); i++)
    2.{
    3.    string titel = Model.PresetsList.PresetsList[i].PresetsName;
    4.    int columnIndex = i;
    5.    columns.Bound(cgi => cgi.MadeChoicePresetsList[columnIndex].IsSelected).Title(titel);
    6.}

    The values rendered by the grid are rendered as "true" or "false".

    Peter

  3. Peter
    Peter avatar
    8 posts
    Member since:
    Mar 2016

    Posted 12 May 2016 in reply to Peter Link to this post

    I thought I was done, but not obviously not quite. When I edit the line (GridEditMode.InLine) and click Update, the view model that is posted to my controller does not contain any of the dynamic column's data. The posted data contains the other fields (i.e. TenantPayablePriceInclTax).

    The model for the dynamic data is (other properties omitted for brevity):

    public string TenantPayablePriceInclTax { get; set; }
    public List<MadeChoicePresets> MadeChoicePresetsList;

    Any hints are appreciated.

  4. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 16 May 2016 Link to this post

    Hello Peter,

    I would recommend you to check out the following example which demonstrates how to update a dynamically added columns.

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Allan
    Allan avatar
    11 posts
    Member since:
    Oct 2012

    Posted 16 Feb Link to this post

    Kostadin, whilst the example does indeed show an answer, it is not viable for me as I can't load the contents (in excess of 20 million records) into a DataTable to be passed across the wire.  I am using paging, grouping and filtering on the grid.  The grid displays rates and fees applied to the rates in their currency type.  The dynamic columns reflect the currency types.  Which change according to those used by the returned data.  e.g.  if only USD fees are present in the resultset, only the USD column is shown.  Theremany currency types and it's not an option to put all of them in the grid and hise the empty ones.

    Any suggestions?

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2115 posts

    Posted 20 Feb Link to this post

    Hi Allan,

    You can use the example in regards of creating the columns structure only and use AJAX binding for the data. The main idea of the example is to illustrate how to use a collection for creating the columns structure dynamically and you can use any other collection for creating the columns. Note that it is not necessary to have any data in that collection and you can use the AJAX binding for providing the actual data:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Alex
    Alex avatar
    2 posts
    Member since:
    Oct 2016

    Posted 26 Oct in reply to Konstantin Dikov Link to this post

    Hey, I was wondering how the same grid: 

     

    @model System.Data.DataTable


    @(Html.Kendo().Grid<dynamic>()
    .Name("Grid")
    .Columns(columns =>
    {
    foreach (System.Data.DataColumn column in Model.Columns)
    {
    var c = columns.Bound(column.ColumnName);
    if (column.ColumnName == "UnitPrice")
    {
    c.ClientFooterTemplate("sum:#:sum#").ClientGroupFooterTemplate("sum:#:sum#");
    }
    else if (column.ColumnName == "UnitsInStock")
    {
    c.ClientFooterTemplate("max:#:max#").ClientGroupFooterTemplate("avg:#:average#");
    }
    }
    columns.Command(cmd=>cmd.Edit());
    })
    .Pageable()
    .Sortable()
    .Editable(ed=>ed.Mode(GridEditMode.PopUp))
    .Filterable()
    .Groupable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
    var id = Model.PrimaryKey[0].ColumnName;
    model.Id(id);
    foreach (System.Data.DataColumn column in Model.Columns)
    {
    var field = model.Field(column.ColumnName, column.DataType);
    if (column.ColumnName == id)
    {
    field.Editable(false);
    }

    }
    })
    .Aggregates(a=>
    {
    a.Add("UnitPrice", typeof(decimal?)).Sum();
    a.Add("UnitsInStock", typeof(short?)).Average().Max();
    })
    .Read(read => read.Action("Read", "Home"))
    .Update(update => update.Action("Update", "Home"))
    )
    )

     

    Can be done using an ajax call instead? Any Help would be greatly appreciated. 

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2115 posts

    Posted 30 Oct Link to this post

    Hello Alex,

    If you want to receive the data structure from custom AJAX call, you will have to initialize the entire Grid on client side (jQuery initialization). A blog post for such implementation is available in the link below:
    Hope this helps.


    Regards,
    Konstantin Dikov
    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.
  9. Alex
    Alex avatar
    2 posts
    Member since:
    Oct 2016

    Posted 30 Oct in reply to Konstantin Dikov Link to this post

    Hello, thanks for the information. It really helped, but just to confirm what I am thinking is that you are unable to achieve this in pure MVC widgets?

     

    ~Alex

  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2115 posts

    Posted 31 Oct Link to this post

    Hello Alex,

    For MVC approach you should use the previously suggested example, where you will need to have access to the columns structure within the controller. If the columns structure will be received from an AJAX call, using the MVC wrapper seems unnecessary, although that you should still be able to change/define its columns structure by using the getOptions/setOptions methods and modifying only the columns collection of the options and the schema of the dataSource:
     
    Best Regards,
    Konstantin Dikov
    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