Asp.net MVC WebGrid in partial view not updating through Ajax

Question

I have 2 WebGrids each in a different partial view, displaying on a View Page. All is working fine but when I do sorting or pagination on WebGrid, it's not updating through ajax. What am I doing wrong?

PartialView1:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>>" %>
<%    
  var grid1var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid1", canSort: true, ajaxUpdateContainerId: "Div1", canPage: true, rowsPerPage: 5);%>
  <div id="Div1">
  <%=grid1var.GetHtml(htmlAttributes: new { id = "grid1" }, tableStyle: "GridTable", headerStyle: "GridHeader", footerStyle: "GridFooter",
  columns: grid1var.Columns(
  grid1var.Column(columnName: "Id", header: "ID", canSort: true),
  grid1var.Column(columnName: "Request_For_Id", header: "Request For", canSort: true),
  grid1var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
))%>
  </div>

PartialView2

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>>" %>
<%    
  var grid2var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid2", canSort: true, ajaxUpdateContainerId: "Div2", canPage: true, rowsPerPage: 5);%>
  <div id="Div2">
  <%=grid2var.GetHtml(htmlAttributes: new { id = "grid2" }, tableStyle: "GridTable", headerStyle: "GridHeader", footerStyle: "GridFooter",
  columns: grid2var.Columns(
  grid2var.Column(columnName: "Id", header: "ID", canSort: true),
  grid2var.Column(columnName: "Request_For_Id", header: "Request For", canSort: true),
  grid2var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
))%>
  </div>

MainPage:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>" %>
<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../../Content/Styles/Dashboard.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <%using (Html.BeginForm("Action", "Dashboard", FormMethod.Post)){ %>
    <div id="MainDashboardDiv">
      <div class="LiveTile">
        <div id="PriorityDiv1">
          <%Html.RenderAction("RecentRequests", Model); %>
        </div>  <!--End of PriorityDiv1 -->
        <div id="PriorityDiv2">
        <%Html.RenderAction("PriorityRequests", Model); %>
        </div>  <!--End of PriorityDiv2 -->
      </div>      <!--End of LiveTile -->
    </div><!--End of MainDashboardDiv -->
    <%} %>
</asp:Content>

Master page HEAD tag content:

<head id="head" runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("~/Scripts/jquery-1.9.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/modernizr-1.7.min.js") %>" type="text/javascript"></script>
    <asp:ContentPlaceholder ID="HeadContent" runat="server">
    </asp:ContentPlaceholder>      
    <link href="../../Content/menu.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/menu.js" type="text/javascript"></script>
</head>

Also when I check console through firebug, I saw an error while I do sorting and pagination: Error is:

TypeError: $(...).parent(...).delegate is not a function

on code:

$(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function()

Above code is generated by WebGrid dynamically. I am not writing it.

@Simon, You mean jquery 1.9.1 or jquery file for webgrid logic. if u mean jquery 1.9.1, then it is already updated in my VS2010,I am just adding a link in my viewpage and if you mean jquery file webgrid logic, I am not doing it. WebGrid do it itself. — Dhwani, Feb 21 '13 at 10:46
can you try including scripts files you needed in your partial view itself??? — ssilas777, Feb 23 '13 at 08:26
@ssilas777, hey I have added whole page code(with sccripts). — Dhwani, Feb 25 '13 at 05:34

score 1 · Answer 1 · answered Feb 21 '13 at 11:17

If webgrid it's including jQuery and you are referencing jQuery as well then jQuery is defined twice. That would explain your error:

$(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function()

Disable the link in your webpage and it should work. If you need to work with jQuery 1.9+ and webgrid is using an older version of jQuery then replace it with a newer one.

Possible you get some error if webgrid is not compatible with jQuery 1.9+, then leave a comment to get more help.

HINT: Check finally generated HTML for multiple jQuery includes.

score 1 · Answer 2 · answered Feb 22 '13 at 11:59

1

try this
$(containerId).parent.delegate(containerId + ' a[data-swhglnk="true"]', 'click', function()

answered Feb 22 '13 at 11:59

Sagar Hirapara

1,677
13
24

hey I am not generating the code of delegate, so no chance to edit it. – Dhwani Feb 25 '13 at 08:38

score 1 · Answer 3 · answered Feb 28 '13 at 07:05

1

Alright I know the problem, but I am new. So this will take me a bit to put together. The problem is that your partial views are causing your event listener on the sorting and propogation to stop listening. You will come across this same problem if you try to use Jquery to set up multi-page tables; as you toggle through the pages your listeners will disconnect. This is happening within Jquery and amongst other benefits; it is done for security reason so dont change that. So there are two, for now, ways around this. The first is to reconnect through a callback each time it needs to be attached and the second is to drop the listening responsibilities down to a sub class.

I would post the examples with the answer but bounty is almost up. So i want a chance at that, either way if you are interested let me know and I will have the code shortly.

answered Feb 28 '13 at 07:05

Four_lo

1,150
10
28

I am interested to know the solution. It'll be grateful to me if I have a chance. – Dhwani Feb 28 '13 at 07:38
I agree I have seen many different variations of this problem. There are many ways to go around it, but nothing I have seen has been clean and secure. So thats what I am working on, if I fall asleep at the computer I didnt forget I am working on it. – Four_lo Feb 28 '13 at 07:44
I wish I can get solution and can help others who might facing the same problem. – Dhwani Feb 28 '13 at 09:25
@mariozski, In that case what you suggest me to do. I am in trouble just because of WebGrid. – Dhwani Feb 28 '13 at 09:43
Can you try to debug your javascript and see what $(containerId) is pointing to? – mariozski Feb 28 '13 at 13:03

Asp.net MVC WebGrid in partial view not updating through Ajax

3 Answers3