Hi all -
I'm using MVC5/EF6 along with JQuery, Bootstrap, and Kendo UI for MVC .NET. I have a grid setup that works perfectly in a normal view, using AJAX clientside binding. No issues.
However, I need to use this same grid within a partial view. When I use the EXACT same code, the client side functions no longer work in the grid (i.e. Filtering, Paging, Date Picker, etc.). The one function that does work is the Sort (???).
After digging around for a day, I think I saw somewhere that I may need to add specific Kendo JS scripts to my partial view to get things to work again. Unfortunately, I cannot find that page now that things make more sense.
So - let me ask here:
What do I need to do to get the Kendo MVC Grid client side functions to work inside a Partial View? Again, everything works inside a normal View using client side ajax configuration (the controller sends back JSON, etc.). The exact same code and client side ajax configuration is not fully functional in a Partial View.
Please advise. Thanks in advance!
3 Answers, 1 is accepted
Rank 1
Further, it appears that filtering DOES work for a boolean (where you can pop up the filter and select to show items based on true or false). That actually works. However, filtering on text or a date picker is not working.
A bug?
Rank 1
Just so you have it, here's the control markup and configuration:
@(Html.Kendo().Grid<SDM.Models.SoftwareResultVM>() .Name("SoftwareGrid") .Columns(columns => { columns.Bound(c => c.Name) .ClientTemplate("<a href='" + Url.Action("Details", "Software") + "/#= SoftwareID #' " + ">#= Name #</a>") .HeaderHtmlAttributes(new { @style = "text-align: center; font-weight: bold; font-size: 10pt;" }) .HtmlAttributes(new { @class = "txtCenter txt10 txtBold" }); columns.Bound(c => c.Website) .Filterable(false) .ClientTemplate("<a title='#= Website #' href='#= Website #'>#= Website #</a>") .HeaderHtmlAttributes(new { @style = "text-align: center; font-weight: bold; font-size: 10pt;" }) .HtmlAttributes(new { @class = "txtCenter txt9" }); columns.Bound(c => c.Importance) .Width(140) .HeaderHtmlAttributes(new { @style = "text-align: center; font-weight: bold; font-size: 10pt;" }) .HtmlAttributes(new { @class = "txtCenter txt9" }); columns.Bound(c => c.CreateDate) .Width(150) .Format("{0:MM/dd/yyyy}") .HeaderHtmlAttributes(new { @style = "text-align: center; font-weight: bold; font-size: 10pt;" }) .HtmlAttributes(new { @class = "txtCenter txt9" }); columns.Bound(c => c.IsActive) .Width(120) .HeaderHtmlAttributes(new { @style = "text-align: center; font-weight: bold; font-size: 10pt;" }) .ClientTemplate("<input disabled='disabled' type='checkbox' class='checkbox' style='margin: 0px auto; height: 13px; width: 13px;' #=IsActive ? checked='checked' :'' # />"); columns.Bound(c => c.SoftwareID) .Width(50) .Filterable(false) .HtmlAttributes(new { @class = "txtCenter" }) .ClientTemplate("<div class='glyphicon glyphicon-edit txt12 cursor-pointer' style='color: \\#034FDB;' title='Edit Software' onclick=\"document.location='/Software/Edit/#= SoftwareID #'\";'></div>").Title(""); }) .Pageable(pager => pager.PageSizes(new[] { 10, 25, 50, 100, 250 })) .Filterable() .Sortable() .Scrollable() .HtmlAttributes(new { style = "height:500px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(10) .Sort(sort => sort.Add("CreateDate").Descending()) .Read(read => read.Action("GetSoftwareDataJson", "Home")) ))
I am not sure what exactly is causing this, however I would recommend checking the browser's console for any error messages that might give us a clue. Another thing that you might check is if the jQuery and Kendo UI scripts are include twice. The latter should be avoided, as it causes unexpected behavior.
Regards,
Alexander Popov
Telerik