MVC Grid in Partial View - Client side functions not working.

4 posts, 0 answers
  1. Alex
    Alex avatar
    19 posts
    Member since:
    Nov 2011

    Posted 22 Jan Link to this post

    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!

  2. Alex
    Alex avatar
    19 posts
    Member since:
    Nov 2011

    Posted 22 Jan Link to this post

    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?

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex
    Alex avatar
    19 posts
    Member since:
    Nov 2011

    Posted 22 Jan in reply to Alex Link to this post

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

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Jan Link to this post

    Hi Alex,

    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
    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready