MVC: Unable to display Kendo grids

[Jack]

Here is my configuration in the View using html helpers and I have attached a picture of how it looks like:

@(Html.Kendo().Grid<Merchant_List_Updater_MVC.Controllers.AreaObject>()
               .Name("Grid")
               .Columns(columns =>
               {
                            columns.Bound(x => x.name).Title("Region Name");
                            columns.Bound(p => p.locationList).Title("Locations Included");
                            //Once clicked it searches and invokes a function in the script named "EditButtonClicked".
                            columns.Command(command => command.Custom("Modify")
                                                              .Click("ModifyButtonClicked"))
                                                                                          .HeaderHtmlAttributes(new {style = "width:80px;"})
                                                                                          .Width("105px");
                            //Once clicked it searches and invokes a function in the script named "DeleteButtonClicked".
                            columns.Command(command => command.Custom("Remove")
                                                              .Click("DeleteButtonClicked"))
                                                                                          .HeaderHtmlAttributes(new {style = "width:80px;"})
                                                                                          .Width("105px");
               })
               .Pageable(pageable => pageable.PreviousNext(true).ButtonCount(5))
               .Sortable(sortable => sortable.Enabled(true))
               .Scrollable(scr => scr.Height("auto"))
               .DataSource(dataSource => dataSource
                                         .Ajax()
                                         .Read(read => read.Action("AreaJsonDataSourceOrder", "ModifyOptions"))
                                         .PageSize(15))
               .Resizable(resize => resize.Columns(true))
               .Reorderable(reorder => reorder.Columns(true))
               .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))        
      )

[Jack]

By the way, the object being used is in this view's controller:

public class AreaObject
{
        public string name { get; set; }
        public List<string> locationList { get; set; }
}

[Alexander Popov]

Hi Jack,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide a runnable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Regards,
Alexander Popov
Telerik

[Jack]

Sure, I'll attach that part of the project in .rar and post it here later tonight.

[Jack]

Good morning Alex,
      Below is a Dropbox link to a part of my project that shows the issue because the file size limit on Telerik is 2mb (Why?!).

Also, I've removed any database dependencies and authorization requirements. You can just run the solution and you will see that there is no data displayed on the grid, but when you click on any of the grid's header to sort the data, it will display the data stored in plain text. The problem is that the grid calls the datasource ActionResult function in the view only after I invokes its sort function. The grid should call the ActionResult when it is initiated. All the logic is in the controller and the view.

Dropbox Link: https://dl.dropboxusercontent.com/u/100525529/KendoGrid.zip

[Jack]

By the way, each record in the "Region Name" column is supposed to display a string and each record in the "Locations Included" column is supposed to display every element in a list<string>

[Alexander Popov]

Hi Jack,

Thank you for the provided project. I reviewed it and noticed that jQuery is included more than once, which could lead to unpredictable behavior. Once I fixed this the Grid populated properly, as seen in this screencast.
Regarding your second question - you can display a list of the locations using a ClientTemplate that iterates over the array of items and builds the HTML list. You can find additional information about Kendo UI Templates here.

Regards,
Alexander Popov
Telerik

[Jack]

Nice one!  That was a hard bug to catch. Your solution works.
This is why I don't like finishing someone else's project. You never know what is hidden in the background.

[Jack]

Hi Alex, so I tried to iterate through the list and display all elements into the column but I've having trouble getting it to work.
Here is what I have so far.
In Grid definition:
columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(x.locationList) #");

In <script>:
function iterate(object) {
        var html = "<ul>";

        for (var x = 0; x < object.length; x++) {
            html += "<li>";
            html += object[x];
            html += "</li>";
        }

        html += "</ul>";
        return html;
}

However, this causes all the records to disappear. What is the correct syntax to do this?


    }

[Jack]

Never mind, solve it with an easier work-around

[Jack]

solved*