CODEWITHSUNDEEP
telerikkendo-uikendo-grid
chamara
chamara

Reputation: 12709

Kendo Grid Destroy Command Not Refreshing Grid

In below grid i have implemented Destroy method to delete records, but the issue is when an error occurred during deletion on server side, kendo grid still remove the record from grid. when i refresh the page record appears again as expected. how can i prevent kendo grid from removing a record if server side error occurred and show a error message to user? 

 @(Html.Kendo().Grid((IEnumerable<RealEstateApp.Models.propertyOwenerModel>)Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.id).Visible(false);

            columns.Bound(o => o.name).Width("150px");
            columns.Bound(o => o.email).Width("100px");
            columns.Bound(o => o.address).Width("200px");
            columns.Bound(o => o.telephone).Width("100px");
            columns.Bound(o => o.mobile).Width("100px");

            columns.Template(o => Html.ActionLink("Edit", "Edit", new { o.id })).ClientTemplate("<a class='k-button k-button-icontext' href=\"" + Url.Action("Edit", "propertyOwner") + "/#= id#\"><span class='k-icon k-edit'></span>Edit</a>").Width(80).Title("Edit");
            if (Roles.IsUserInRole(User.Identity.Name, "admin"))
            {
                columns.Command(commands =>
                {

                        commands.Destroy(); // The "destroy" command removes data items


                }).Title("Delete").Width(90);
            }
            //columns.Template(o => Html.ActionLink("Delete", "Delete", new { o.id })).ClientTemplate("<a class='blue' href=\"" + Url.Action("Details", "propertyOwner") + "/#= id#\"><i class='icon-zoom-in bigger-130'>Delete</i></a>").Width(65).Title("Details");
        })
        .ToolBar(toolbar =>
        {

            toolbar.Template(@<text>
    <a class="k-button" href="/propertyOwner/Create"><span class="k-icon k-si-plus"></span></a>
    </text>);


        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Groupable()
        .HtmlAttributes(new { style = "height:900px;" })

         .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("AjaxGrid", "propertyOwner"))
            .Destroy(destroy => destroy.Action("Destroy", "propertyOwner"))

                .Model(model =>
                {
                    model.Id(m=>m.id); // Specify the property which is the unique identifier of the model
                    model.Field(m => m.id).Editable(false); // Make the ProductID property not editable
                })
                 )


    )

Upvotes: 0

Views: 1151

Answers (1)

OnaBai
OnaBai

Reputation: 40887

You should define an errors function or field in you Schema definition, this is the field where your server sends the notification to the UI.

Then, in the DataSource define an error event handler that displays the alert message (or whatever you want to do).

Example of a DataSource definition using errors field definition and error event handler:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/twitter/search",
            dataType: "jsonp",
            data: { q: "#" }
        }
    },
    schema: {
        errors: "error" // twitter's response is { "error": "Invalid query" }
    },
    error: function(e) {
        console.log(e.errors); // displays "Invalid query"
    }
});

EDIT: If you need to do some complex validation and not just saying which field contains the error, you might define an errors function in you schema that returns true for error and false for ok!.

Example:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/twitter/search",
            dataType: "jsonp",
            data: { q: "#" }
        }
    },
    schema: {
        errors: function (d) {
            // twitter's response is { "error": "Invalid query" }
            return (d.error && d.error !== "ok") ? true : false;
        }
    },
    error: function(e) {
        ...
    }
});

Upvotes: 1

Related Questions