This is a migrated thread and some comments may be shown as answers.

MVC: Unable to display Kendo grids

10 Answers 31 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 07 Feb 2014, 10:02 PM
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))        
      )

10 Answers, 1 is accepted

Sort by
0
Jack
Top achievements
Rank 1
answered on 07 Feb 2014, 10:06 PM
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; }
}
0
Alexander Popov
Telerik team
answered on 11 Feb 2014, 04:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jack
Top achievements
Rank 1
answered on 11 Feb 2014, 05:25 PM
Sure, I'll attach that part of the project in .rar and post it here later tonight.
0
Jack
Top achievements
Rank 1
answered on 12 Feb 2014, 04:06 PM
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
0
Jack
Top achievements
Rank 1
answered on 12 Feb 2014, 04:23 PM
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>
0
Accepted
Alexander Popov
Telerik team
answered on 13 Feb 2014, 09:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jack
Top achievements
Rank 1
answered on 13 Feb 2014, 03:09 PM
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.
0
Jack
Top achievements
Rank 1
answered on 13 Feb 2014, 07:57 PM
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?


    }





0
Jack
Top achievements
Rank 1
answered on 14 Feb 2014, 05:53 PM
Never mind, solve it with an easier work-around
0
Jack
Top achievements
Rank 1
answered on 14 Feb 2014, 05:54 PM
solved*
Tags
Grid
Asked by
Jack
Top achievements
Rank 1
Answers by
Jack
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or