Grid MVC dynamic column data?

6 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
    6 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
    2047 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.
Back to Top