Grid MVC dynamic column data?

4 Answers 1668 Views
Grid
Magnus
Top achievements
Rank 1
Magnus asked on 25 Apr 2016, 11:47 AM

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.)

4 Answers, 1 is accepted

Sort by
0
Magnus
Top achievements
Rank 1
answered on 26 Apr 2016, 09:21 AM

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

Magnus
Top achievements
Rank 1
commented on 12 May 2016, 03:03 PM

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.

Kostadin
Telerik team
commented on 16 May 2016, 02:03 PM

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
Allan
Top achievements
Rank 1
commented on 16 Feb 2017, 06:14 AM

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?

0
Konstantin Dikov
Telerik team
answered on 20 Feb 2017, 07:16 AM
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.
Alex
Top achievements
Rank 1
commented on 26 Oct 2017, 07:27 PM

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. 

0
Konstantin Dikov
Telerik team
answered on 30 Oct 2017, 02:01 PM
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.
Alex
Top achievements
Rank 1
commented on 30 Oct 2017, 02:14 PM

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

0
Konstantin Dikov
Telerik team
answered on 31 Oct 2017, 03:19 PM
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.
Tags
Grid
Asked by
Magnus
Top achievements
Rank 1
Answers by
Magnus
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or