Asynchronously sort GridView in ASP.NET MVC using Ajax

Question

I'm using WebGrid to display data on client side, canSort: true is set.

The view code is:

@model UI.Models.TestModel

@if (Model.listTestModel != null)
{
    var grid = new WebGrid(Model.listTestModel,
    null,
    defaultSort: "ColumnA",
    rowsPerPage: 25,
    canPage: true,
    canSort: true
    );

    @grid.GetHtml(
     mode: WebGridPagerModes.All,

    columns: grid.Columns
            (
            grid.Column(columnName: "ColumnA", header: "ColumnA"),
            grid.Column(columnName: "ColumnB", header: "ColumnB")
            )
            )

}

I'm able to sort data by clicking column headers.

Problem:

How can someone asynchronously sort the WebGrid using Ajax?

Hi @Dean.DePue - The suggestion is nice because the ModelState is the problem for me as well, however in this particular case I'm concerned more with asynchronous loading — Mr.X
– Mr.X, Commented Nov 30, 2015 at 16:35
Maybe I'm misunderstanding the question, but isn't the answer to this in the MSDN magazine link you have used in your question? Under the heading AJAX: Client-Side Changes? — Jamie Dunstan
– Jamie Dunstan, Commented Nov 30, 2015 at 16:46
@JamieDunstan - I think you're right. I only saw the upper half. +2 for opening my eyes! — Mr.X
– Mr.X, Commented Nov 30, 2015 at 16:53
@student - you are welcome. If you get working, maybe you can write an answer here for future visitors so that they can quickly see the solution :) — Jamie Dunstan
– Jamie Dunstan, Commented Nov 30, 2015 at 16:59

Community · Accepted Answer · 2017-05-23 11:45:52Z

4

Thanks to Jamie Dunstan for pointing this out.

One need to make sure that the entire WebGrid code is inside a div with a unique id. Also, jQuery is referenced while Javascript is enabled.

 <div id='unique id goes here'>

@model UI.Models.TestModel

@if (Model.listTestModel != null)
{
    var grid = new WebGrid(Model.listTestModel,
    null,
    defaultSort: "ColumnA",
    rowsPerPage: 25,
    canPage: true,
    canSort: true,
    ajaxUpdateContainerId: "unique id goes here"
    );

    @grid.GetHtml(
     mode: WebGridPagerModes.All,

    columns: grid.Columns
            (
            grid.Column(columnName: "ColumnA", header: "ColumnA"),
            grid.Column(columnName: "ColumnB", header: "ColumnB")
            )
            )

}
<div>

<script>
    $(document).ready(function () {

  function updateGrid(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var grid = $(this).parents('.ajaxGrid');
    var id = grid.attr('id');
    grid.load(url + ' #' + id);
  };
  $('.ajaxGrid table thead tr a').on('click', updateGrid);
  $('.ajaxGrid table tfoot tr a').on('click', updateGrid);
 });
</script>

Notice that .live function is replaced with .on because of depreciation

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Dec 1, 2015 at 14:23

Mr.X

31.7k27 gold badges150 silver badges231 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr.X Over a year ago

Yeah, finally it works like a charm. Thanks for pointing that out :)

Collectives™ on Stack Overflow

Asynchronously sort GridView in ASP.NET MVC using Ajax

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related