Datasource error event does not fire

[Tim]

I've read many Telerik and stack overflow responses to this issue that still don't cover the answer to my question. Yes my error event handler is declared as part of my datasource configuration along with my requestEnd and change event handlers and they work. So my question is this, does the error event get canceled when the requestEnd event is declared?

My datasource is defined below for any critique you may have

<script>
    var model;
    var dataSource;

    $(document).ready(function () {

        dataSource = new kendo.data.DataSource({
            transport: {
                cache: false,
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                read: {
                    url: '/Telecom/Read',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        
                        //$j('#message').text('Successful Read');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                    }
                },
                create: {
                    url: '/Telecom/Create',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        //refreshGrid();
                        //$j('#message').text('Successful Create');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                         
                    }
                },
                update: {
                    url: '/Telecom/Update',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        //refreshGrid();
                        //$j('#message').text('Successful Update');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                        
                    }
                },
                destroy: {
                    url: '/Telecom/Destroy',
                    type: 'POST',
                    complete: function (jqXHR, textStatus) {
                        //refreshGrid();
                        //$j('#message').text('Successful Delete');
                        //$j('#dialog').dialog("option", "title", textStatus);
                        //$j('#dialog').dialog('open');
                        
                    }
                },
            },
            error: onError,
            requestEnd: onRequestEnd,
            change: onChange,
            serverPaging: false,
            autoSync: false,
            schema: {
                model: {
                    id: 'Id',
                    fields: {
                        Id: { editable: false },
                        Name: { type: 'string', validation: { required: true } },
                        Category: { type: 'string', validation: { required: true } },
                        EquipmentType: { type: 'string', validation: { required: true } },
                        Description: { type: 'string' },
                        Length: { type: 'number', validation: { required: true } },
                        Height: { type: 'number', validation: { required: true } },
                        Width: { type: 'number', validation: { required: true } },
                        CanEditLength: { type: 'boolean', validation: { required: true } },
                        CanEditHeight: { type: 'boolean', validation: { required: true } },
                        CanEditWidth: { type: 'boolean', validation: { required: true } },
                        IsObsolete: { type: 'boolean', validation: { required: false } },
                        SortOrder: { type: 'number', validation: { required: false } }
                        // SortOrder: { type: 'number', validation: { min: 1, required: false } }
                    }
                }
            }
        });

        $('#grid').kendoGrid({
            dataSource: dataSource,
            sortable: true,
            //excel: {
            //    fileName: 'Telecommunication Data.xlsx',
            //    allPages: true
            //},
            save: onSave,
            dataBound: onDataBound,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: [10, 25, 50, 100],
                pageSize: 25,
                page: 1,
            },
            scrollable: true,
            filterable: true,
            batch: false,
            height: 725,
            width: 800,
            toolbar: [{ name: 'add', text: 'Add New Telecom Record' }],
            columns: [
                { field: 'Id', title: 'Id', hidden: true },
                { field: 'Name', title: 'Name', width: '260px' },
                { field: 'Category', title: 'Category', width: '130px' },
                { field: 'EquipmentType', title: 'Type', width: '100px' },
                { field: 'Description', title: 'Description', width: '220px' },
                { field: 'Length', title: 'Length', width: '100px' },
                { field: 'Width', title: 'Width', width: '80px' },
                { field: 'Height', title: 'Height', width: '100px' },
                { field: 'CanEditLength', title: 'Can Edit Length', width: '160px' },
                { field: 'CanEditHeight', title: 'Can Edit Height', width: '160px' },
                { field: 'CanEditWidth', title: 'Can Edit Width', width: '160px' },
                { field: 'IsObsolete', title: 'Is Obsolete', width: '120px' },
                { field: 'SortOrder', title: 'Sort Order', width: '120px' },
                { command: { name: 'edit', text: "Edit", width: "160px", click: onEdit, change: onChange }, title: " ", width: "110px" },
                { command: ['destroy'], title: 'Delete', width: '110px' }],
            editable: {
                mode: 'popup',
                template: kendo.template($('#TelecommunicationsTemplate').html()),
                window: { title: 'Edit Power Equipment Details', width: 450, height: 550 }
            },
        });

        $('[class*=k-grid-add]').addClass('k-grid-edit')
        $(".k-pager-refresh").trigger('click');

        if ( $('#grid').data('kendoGrid').dataSource._page === undefined )
        {
            $('#grid').data('kendoGrid').dataSource._page = 1;
        }
            
    });

    function onDataBound(e) {
        $('.k-grid-Edit').find('span').addClass('k-icon k-edit');
        $('.k-grid-Delete').find('span').addClass('k-icon k-delete');
        //$('.k-grid-View').find('span').addClass('k-icon km-view');
    }

    //function onError(e, status) {
    //    if (e.errors) {
    //        var message = 'Errors:\n';
    //        $.each(e.errors, function (key, value) {
    //            if ('errors' in value) {
    //                $.each(value.errors, function () {
    //                    message += this + '\n';
    //                });
    //            }
    //        });

    //        // alert(message);
    //        $j('#message').text(message);
    //        $j('#dialog').dialog('option', 'title', 'Error');
    //        $j('#dialog').dialog('open');
    //    }
    //}

    function onError(e, status) {

        // Cancel changes on any grids on the page that are using this data source
        $('.k-grid').each(function (item) {
            var grid = $(this).data("kendoGrid");
            if (e.sender === grid.dataSource) {
                grid.cancelChanges();
            }
        });

        if (e.status === "customerror") {
            alert(e.errors);
        }
        else {
            alert("Generic server error.");
        }

    }

    function onSave(e) {
        e.model.Category = $('#Category option:selected').text();
        //if (e.model.Id === undefined || e.model.Id === null || e.model.Id === '') {
        //    e.model.Id = 0;
        //}

        if (e.model.Id === '') {
            e.model.Id = 0;
        }
    }

    function onChange(e) {

        var mye = e;
    }

    function onRequestEnd(e) {

        if (e.type !== "read") {

            e.sender.read();

            if (e.response.Errors !== undefined && e.response.Errors !== null && e.response.Errors !== '') {
                $j('#message').html(e.response.Errors);
                $j('#dialog').dialog("option", "title", 'Error');
                $j('#dialog').dialog('open');
            }

        }
    }

    function refreshGrid(e) {

        e.preventDefault = true;

        var mygrid = $("#grid").data("kendoGrid");
        //mygrid.dataSource.read(e.response.Data);
        e.sender.read();
        mygrid.refresh();
    }

</script>

[Kiril Nikolov]

Hello Timothy, 

The error event is not getting canceled when requestEnd event is declared. Please note that the requestEnd event will be fired even if there is an error with the request, however the error information is only available as part of the error event handler

Regards,
Kiril Nikolov
Telerik

 

 

[Ben]

I'm having a similar problem.  I have declared a Datasource error handler and would like it to trigger when there is an error in the controller function.  I have looked all over the this forum and am yet to find a good answer.  I am using ASP.Net MVC with the default insert and edit functionality for the grid. There are some fields that are required by the SQL procedure I use and an error is thrown when they are submitted blank.  I am looking for a way to inform the user of the problem while still using the default insert and edit methods. Some sample code for my grid is below:

@(Html.Kendo().Grid<Intra.Common.Menu>()
            .Name("gridMenus")
            .ToolBar(tb => tb.Create())
            .Columns(columns =>
            {
                columns.Bound(mvm => mvm.MenuItemId).Hidden(true);
                columns.Bound(mvm => mvm.MenuName).Title("Menu Name").Width(200);
                columns.Bound(mvm => mvm.MenuPath).Title("Menu Path").Width(200);
                columns.Bound(mvm => mvm.MenuDescription).Title("Menu Description").Width(200);
                columns.Bound(mvm => mvm.MenuParentID).Title("Menu Parent ID").Width(200);
                columns.Bound(mvm => mvm.LowerLevelMenuParentID).Title("Lower Level Menu Parent ID").Width(200);
                columns.Bound(mvm => mvm.SortOrder).Title("Sort Order").Width(200);
                columns.Bound(mvm => mvm.IsDisplayed).Title("Is Displayed").Width(200);
                columns.Command(command => 
                {
                    command.Edit();
                }).Width(200);
            })
            .Pageable()
            .Reorderable(r => r.Columns(true))
            .Groupable()
            .Filterable()
            .Sortable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(50)
                        .Events(events => events.Error("error_handler").RequestEnd("onRequestEnd"))
                .Model(model => model.Id(mvm => mvm.MenuItemId))
                .Read(read => read.Action("getMenuItems", "Menu").Type(HttpVerbs.Get))
                .Create(create => create.Action("AddItem", "Menu"))
                .Update(update => update.Action("UpdateItem", "Menu"))
            )
        )

I am aware that the onRequestEnd function will still run when there is an error, I am just looking for a way to take the error into account.

If you need any additional information please let me know, and thank you for your time.

[Tsvetina]

Hi Ben,

In the MVC Grid scenario, the response returned from the server has to contain the error message in an Errors field in order for the DataSource to recognize that there are any errors and to throw the Error event. It is best to construct a DataSourceResult object containing the error information:

var result = new DataSourceResult() {
    Errors = new { error = "fail", message="An error occurred..." }
};

Then, based on the content of the errors object, you can write your custom handling of the Error event:

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            $.each(e.errors, function (key, value) {
                if (key == "message") {
                    alert(value);
                }
            });
        }
    }
</script>

Regards,
Tsvetina
Progress Telerik