This project is read-only.

Ajax Paging, sorting etc

Jul 4, 2013 at 8:48 AM
Hi

Is there any way to sort, page, and filter with ajax?

Thanks.
Jul 4, 2013 at 11:45 AM
Hi,

There is no built-in ajax features. I am work on grid.mvc 3.0 and ajax paging. You can see how it works in sample app in the repository.
Also I am planing to create other ajax features like sort and filtering.

You can use Ajax.Form to create some ajax functionallity - https://gridmvc.codeplex.com/discussions/394312
Nov 6, 2013 at 2:50 PM
Hello all,

Does anyone have any code examples of Ajax sorting and filtering?

Thanks.
Nov 19, 2013 at 12:37 PM
Edited Nov 19, 2013 at 12:43 PM
Here is the code that I use to ajaxify the grid (it ajaxifies sorting and paging, I don't use filtering, so can't comment on ajaxifying that):

markup:
   <div id="mylists" data-source-url="@Url.Action("MyListIndexPartial")">
        @{Html.RenderAction("MyListIndexPartial");}
    </div>
where MyListIndexPartial actions renders a partial view with GridMvc in it.

then in your document.ready:
ajaxifyGridMvc("#mylists");
and finally the function:
function ajaxifyGridMvc(gridContainerSelector, successCallback) {
    $(gridContainerSelector).on("click", ".grid-header a, .grid-pager li a",
        function (event) {
            var $grid_container = $(event.delegateTarget);
            var baseUrl = $grid_container.attr("data-source-url");
            var link = $(this).attr("href");
            $.get(baseUrl+link, function (data) {
                if (data.Status <= 0) {
                    alert(data.Message);
                    return;
                }
                $grid_container.html(data);
                if ($.isFunction(successCallback))
                    successCallback();
            });

            return false;
        });
}
data-source-url attribute can also be used to say refresh the grid through the Ajax call.
Mar 10, 2014 at 4:45 PM
I've created a NuGet package that adds Ajax paging, sorting, and column filtering (http://www.nuget.org/packages/Grid.Mvc.Ajax).
Mar 18, 2014 at 1:28 PM
Had a peek at the grid.Mvc.Ajax application,

can that be packaged togheter with grid.mvc?

becuase what i am seeing is its just interfeering with the origial grids which are not Ajax grids. stop working.

So if the original component can provide some additional behaviour for Ajax Filter and Ajax updates that will be awsome.

The grid is good as it stands but it will be excellent if we can get it to the next level up. Thank you very much for the grid.

Thank you very much.
Oct 14, 2014 at 4:44 PM
I will attest that Dyadenka's post above works very well for sorting. One important note I ran across is that the function "ajaxifyGridMvc" had to be added to the bottom of my page. I'm assuming it is something specific to my setup but that is the only way that I got it to work. Hopefully that helps someone else.
Nov 3, 2014 at 9:20 PM
Edited Nov 3, 2014 at 9:31 PM
Can anyone help me in getting Filtering work with Ajax calls? My problem is that the Filter popup does not appear when I click the Filter icon.
Nov 24, 2014 at 5:56 PM
Just as a quick addition to Dyadenka's solution (which btw works like a charm!) to get the filter buttons to work after the grid has been refreshed through ajax add

$grid_container.gridmvc(); right below $grid_container.html(data); to reinitialise the grid.
Jan 20, 2015 at 9:34 AM
Can anyone tell me how to implement pagination without causing full page refresh ? When I click on the number for the next page full page gets reloaded, this should not happen.
Jan 26, 2015 at 2:59 PM
SagarSuvarna wrote:
Can anyone tell me how to implement pagination without causing full page refresh ? When I click on the number for the next page full page gets reloaded, this should not happen.
I would recommend you using grid mvc alternative http://mvc-grid.azurewebsites.net/, it has in built ajax support and is very similar to grid mvc.
Feb 4, 2015 at 11:30 PM
Hi Dyadenka, i did test your method for making ajax calls for paging which works fine thx however once the call is done pageGrids.MyGrid.onRowSelect this event doesn't seems to be working i did register it in the $(document).ready function, how can we re bind the even? I need the row click event to work as i have to perform some tasks based on the row selection. Can you pls let me know how re bind the row select event?
Feb 4, 2015 at 11:31 PM
Dyadenka wrote:
Here is the code that I use to ajaxify the grid (it ajaxifies sorting and paging, I don't use filtering, so can't comment on ajaxifying that):

markup:
   <div id="mylists" data-source-url="@Url.Action("MyListIndexPartial")">
        @{Html.RenderAction("MyListIndexPartial");}
    </div>
where MyListIndexPartial actions renders a partial view with GridMvc in it.

then in your document.ready:
ajaxifyGridMvc("#mylists");
and finally the function:
function ajaxifyGridMvc(gridContainerSelector, successCallback) {
    $(gridContainerSelector).on("click", ".grid-header a, .grid-pager li a",
        function (event) {
            var $grid_container = $(event.delegateTarget);
            var baseUrl = $grid_container.attr("data-source-url");
            var link = $(this).attr("href");
            $.get(baseUrl+link, function (data) {
                if (data.Status <= 0) {
                    alert(data.Message);
                    return;
                }
                $grid_container.html(data);
                if ($.isFunction(successCallback))
                    successCallback();
            });

            return false;
        });
}
data-source-url attribute can also be used to say refresh the grid through the Ajax call.
Hi Dyadenka, i did test your method for making ajax calls for paging which works fine thx however once the call is done pageGrids.MyGrid.onRowSelect this event doesn't seems to be working i did register it in the $(document).ready function, how can we re bind the even? I need the row click event to work as i have to perform some tasks based on the row selection. Can you pls let me know how re bind the row select event?
Feb 4, 2015 at 11:32 PM
mlrivera27 wrote:
Just as a quick addition to Dyadenka's solution (which btw works like a charm!) to get the filter buttons to work after the grid has been refreshed through ajax add

$grid_container.gridmvc(); right below $grid_container.html(data); to reinitialise the grid.
Hi how do we re bind the row select event , it seems to be not working after grid is loaded with the next page however sorting and paging is working.