mvc3 webgrid paging inside a Jquery show hide div RSS

• • Reply
  

  chandrasheka...

  Member

  5 Points

  47 Posts

  mvc3 webgrid paging inside a Jquery show hide div

  May 03, 2012 09:33 PM|LINK

  I am using a mvc3 webgrid inside a div. I am using jquery to show hid that grid. But when I click on page numbe rin grid the show hide functionality doesnt work as webgrid paging is a server side call. Can I use partial view to solve the issue? How do we use ajax paging and sorting with webgrid. Any other options? Please suggest.

  Thanks in Advance.

• • Reply
  

  Huske

  Contributor

  4060 Points

  756 Posts

  Re: mvc3 webgrid paging inside a Jquery show hide div

  May 03, 2012 09:44 PM|LINK

  Have a look at this blog post. It explains how to use webgrid and it shows how to setup client side paging: http://apparch.wordpress.com/2012/01/04/webgrid-in-mvc3/

   

• • Reply
  

  CodeHobo

  All-Star

  18647 Points

  2647 Posts

  Re: mvc3 webgrid paging inside a Jquery show hide div

  May 03, 2012 09:45 PM|LINK

  You can implement ajax paging in the webgrid. You have to set the ajaxUpdateContainerId.

  Take a look at the following

  http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid

  and
  http://stackoverflow.com/questions/4342578/razor-webgrid-ajax-paging-and-sorting 

  Hattan Shobokshi
  Blog | Twitter : @Hattan
  
• • Reply
  

  gopakumar.r

  Participant

  959 Points

  193 Posts

  Re: mvc3 webgrid paging inside a Jquery show hide div

  May 04, 2012 02:05 AM|LINK

  Try puting your Show/Hide button click jQuery code into a below block

  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_endRequest(function () {
  // Code goes here
  });

  See if this works for you.
  
  

  Cheers,
  Gopakumar
  
  | Please click “Mark as Answer” on the post(s) if it helps |
• • Reply
  

  chandrasheka...

  Member

  5 Points

  47 Posts

  Re: mvc3 webgrid paging inside a Jquery show hide div

  May 04, 2012 07:24 PM|LINK

  @{
      var gridUserRoles = new WebGrid(canPage: true, defaultSort: "CreatedOn", rowsPerPage: 5,
                              ajaxUpdateContainerId: "Divxyz");
      gridUserRoles.Bind(Model.abc, rowCount: Model.UserRoles.Count(), autoSortAndPage: true);
      gridUserRoles.Pager(WebGridPagerModes.All);
  
  }
  <div id="Divxyz" style="display: none">

  Thanks folks for inclining my thoughts towards ajax paging ... I figured out my solution to do ajax Paging as above.

  BUT ..... My grid is at bottom of the poge and When I click on page number(It shows # as its linking page), it takes me to top of page moving grid to bottom of page for every page number click. Please help me on this.

   

  Thanks In Advance

  • Marked as answer by Young Yang - MSFT on May 17, 2012 09:06 AM