Update UI grid using response data from Ajax call

[Jason]

Hi,

I'm using the UI grid in ASP.NET Core using local data.  The grid is populated using the page model.

If the user wishes to delete a record, after confirmation, I use an Ajax call to the controller action to perform some magical work and delete the selected record.  The ajax call returns successfully, with the updated record set...minus the recently deleted record.

For the life of me, I can't get the newly updated json dataset to refresh the grid.  Is this even possible?

Page model

public class RoleListViewModel {
    public string GridTitle { get; set; }
    public IEnumerable<RoleGrid> RoleList { get; set; }
}

 

Page code with the grid.

@(Html.Kendo().Grid<RoleGrid>(Model.RoleList)

    .Name("roleGrid")

    .Columns(columns => {

        columns.Bound(m => m.RoleId).Hidden();

        columns.Bound(m => m.Name)

            .Width(100)

            .Title("Name");

        columns.Bound(m => m.Description)

            .Width(212)

            .Title("Description");

        columns.Command(command => {

            command.Custom("EditRole")

                .Text("Edit")

                .HtmlAttributes(new { @class = "ds-button", @style = "color: #000000; border: 1px solid #000000;" })

                .Click("editRole");

            command.Custom("CopyRole")

                .Text("Copy")

                .HtmlAttributes(new { @class = "ds-button", @style = "color: #000000; border: 1px solid #000000;" })

                .Click("copyRole");

            command.Custom("DeleteRole")

                .Text("Delete")

                .HtmlAttributes(new { @class = "ds-button", @style = "color: #000000; border: 1px solid #000000;" })

                .Click("deleteRole");

        })

            .Width(100);

    })

    .HtmlAttributes(new { style = "height: 517px; color: #323232; font-weight: 400; font-size: 14px;" })

    .Pageable(pageable => pageable

        .Input(true)

        .PreviousNext(true)

        .Refresh(true)

        .PageSizes(true)

    )

    .Filterable()

    .ToolBar(t => t.Search())

    .Selectable(select => select

        .Mode(GridSelectionMode.Single)

        .Type(GridSelectionType.Row)

    )

    .Sortable(s => s.AllowUnsort(false))

    .Search(s => {

        s.Field(c => c.Name);

        s.Field(c => c.Description);

    })

    .DataSource(dataSource => dataSource

        .Ajax()

        .ServerOperation(false)

        .Model(model => {

            model.Id(m => m.RoleId);

            model.Field(m => m.Name);

            model.Field(m => m.Description);

        })

        .PageSize(10)

    )

)

 

Controller delete method

public async Task<ActionResult> DeleteAjax([DataSourceRequest]DataSourceRequest request, string roleId) {
    if (roleId != null) {
        //do some magical code here after selected record is deleted.

        return Json(GetRoles().ToDataSourceResult(request));
    }
    else {
        return Json(GetRoles().ToDataSourceResult(request));
    }
}

 

And finally, the jquery code to handle deleting the selected record

function deleteRole(e) {
    e.preventDefault();

    var grid = this;
    var row = $(e.currentTarget).closest("tr");

    selectedRole = this.dataItem($(e.currentTarget).closest("tr"));
    $('#confirmDeleteItem').text('Delete the ' + selectedRole.Name + ' role?');
    wnd.center().open();

    $("#yes").click(function () {
        wnd.close();

        $.ajax({
            type: "POST",
            url: '@Url.Action("DeleteAjax", "Role")',
            data: { roleId: selectedRole.RoleId },
            dataType: "json",
            success: function (response) {
                var grid = $('#roleGrid').data('kendoGrid');
                grid.dataSource.read(response.data({ RoleID: roleId, Name: name, Description: description }));
            }
        });
    });

    $("#no").click(function () {
        wnd.close();
    });
}

 

Any suggestions on how to best load the response array after the ajax call?

 

I realize this is not ideal as it's not server or client side dedicated.

 

Thanks.

Jason

 

[Tsvetomir]

Hi Jason,

I have investigated the provided code snippets and I have noticed that within the success callback, the read() method of the data source is used. It is important to point out that this method internally would go ahead and trigger a Read request of the data source. Since the grid is bound to a local data source, the Read is not configured.  

Therefore, in this case, instead of the read() method, you would have to make use of the data() method and pass the collection of items there.

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data

Is there a specific reason why you would like to not make use of the built-in CRUD operations of the Kendo UI Grid?

 

Best regards,
Tsvetomir
Progress Telerik

[Jason]

Thanks Tsvetomir.  I'll check out the data() method.

I bailed on the built-in CRUD for the UI grid because the create and update methods require more data than I can provide in the grid row.  So separate page is required for the create and update.  As for the delete, I was exploring my options.

Jason