Loading a list data into existing WebGrid in JQuery method

Question

I have a list of custom objects which is received by AJAX call's success function as follows.

$.ajax({
        type: 'POST',
        url: '@Url.Action("DeleteAdmin", "UserAdmin")',
        cache: false,
        dataType: 'json',
        data: { userId: $('#hdnDeleteItem').val() },
        success: function (data) {
            if (data != null) {
                $('#MainGrid').html(data.GridData); // this does not work                    
            }                
        }
    });

The WebGrid is as follows:

@grid.GetHtml(
        htmlAttributes: new { id = "MainGrid", width = "700px" },
        tableStyle: "table table-bordered table-responsive",
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: "< Prev",
        nextText: "Next >",
        lastText: "Last >>",

        columns: grid.Columns(
            grid.Column("UserId", "User ID"),
            grid.Column("User Role", format: (item) => item.SelectedUserRole.UserRoleName),
            grid.Column("Action",
                format: @<text>
                <a href="#" class="link-delete" id="@item.UserId" onclick="SetSelectedUserId(this)">Delete</a>
                </text>)
        )
    )

Following is the action method that passes JSon result.

public JsonResult UpdateDetails()
    {
        IList<UserModel> userModels = GetUserModels();
        return Json(new { GridData = userModels }, JsonRequestBehavior.AllowGet);
    }

Though "data.GridData" in "success" function contains the list of objects passed by this method, it doesn't set them into WebGrid. Instead, the webgrid becomes invisible/empty.

Is there any way to set the list to WebGrid?

Eliellel · Accepted Answer · 2017-10-05 19:24:12Z

1

You need to append the actual data into the table, not the returning object itself. Something like:

data.GridData.map(function(item){
    var row = "<tr>";
        row += "<td>" + item.UserId + "</td>";
        row += "<td>" + item.UserRole + "</td>";
        row += "<td>" + item.Action + "</td>";
        row += "</tr>";
    $('#MainGrid').find('tbody').append(row);

});

answered Oct 5, 2017 at 19:24

Eliellel

1,4561 gold badge11 silver badges15 bronze badges

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

3 Comments

Watz Over a year ago

Thanks for the solution. It works!! This led me to another solution which is removing the deleted rows from WebGrid instead of appending all the rows again (otherwise, i have to clear the WebGrid). But I need to keep track of the deleting row's index to remove them. Do you think this is possible with WebGrids?

Eliellel Over a year ago

If you know the ID of the record you want to remove, you can assign that ID as data attribute to each <tr> when you insert the row, then later if you want to remove it, just call $("tr[data-id={id}]").remove();

Watz Over a year ago

Thanks Eliellel. I kept the row index saved and did this: document.getElementById('MainGrid').deleteRow(data.deleteRowIndex);

Collectives™ on Stack Overflow

Loading a list data into existing WebGrid in JQuery method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related