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>

In short I have replicated the following example:
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/window/KendoWindow-Ajax-Form

And it works just fine. Only difference is the new row is added in it's correct spot in the grid, and not on the top as per usual. How can I, using the example linked to, place the new row on the top?

 

I'd like to use a shared DataSource control that encapsulates a complex data object with several enumerable properties. I'd like to bind each property to a separate drop down list. Is it possible to define one data source but several schemas, one for each drop down list? Values of each drop down list affect the state of the data object and it take 1 server operation to obtain the data, that is why I want to use a single shared DataSource.

Hi,

 

Is there a simple way to view more detail around what is causing an issue with a client template?

 

I have a situation where I have a grid, and I want a child grid in the detail, but when i call render all i get is an error in Chrome saying "Invalid Template" and a bunch of gumpf after that.

 

Thanks,

Bruce

Hi,

In my MVC project, I copied sample code(See below example) in my Index.cshtml file. I did not write server side function Excel_Export_Save() anywhere. Why below setting still worked in my project?
Furthermore, I changed "Excel_Export_Save" to other things, it still worked.

What  is the meaning of  “.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))”  then? Thanks.

…

.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))

Hi,

im using mvc to bind my autocomplete list and use it,to do so,my controller is like:

 public Jsonresult Index()
        {
            //List of parks and turbines while searching

            
            var turbineWindparkList=(from d in DB.Accessinfo
                                     select new OverViewAutoComeplete {

                                         ParkName=d.windpark_name,
                                         TurbineName=d.turbine_name
                                     }).Take(10).ToList();
           
            return Json(turbineWindparkList, JsonRequestBehavior.AllowGet);

           
        }

 

in my view :

 

<div><input id="inputAutoComplete" /></div>
 
        
          <script   type="text/javascript">
                 @(Html.Kendo().AutoComplete()
      .Name("inputAutoComplete") //The name of the AutoComplete is mandatory. It specifies the "id" attribute of the widget.
      .DataTextField("ParkName") //Specify which property of the Product to be used by the AutoComplete.
      .DataSource(source =>
       {
          source.Read(read =>
          {
              read.Action("Index", "Overview"); //Set the Action and Controller names.
          })
          .ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
       })
    )

 

i dont know whats wrong with my controller which i cant reach to view on page load,and even if i use Actionresult to reach view,i get javascript error on the part razor command

Is there any way to detect an event AFTER an item has been added to a ListBox? The existing add event fires before the item is added.

My use case is that I have two connected ListBoxes. The second listbox contains a template that I need to run some jQuery in to modify the contents based on the item data, so the item needs to have been created before the script is run?

I have a drop down that responds to type-ahead. If I have a list of items 'Aitem, Bitem, Citem' and I type in the dropdown 'C' I get the input box filled in with 'Citem'. That works just fine. Is what I want is if 'Citem' is in the drop down list and focus is lost an 'automatic' selection occurs. From various documentation I have come up with

        var wrapper = kendoDropDownList.wrapper;
        wrapper.blur(function (e) {

// What goes here?

        });

I have found that this function does get called when I lose focus and the argument 'e' is not undefined. But I am not sure how to get what is in the input box currently or a reference to the dropdown options. Any idea how I would do that?

 

Thank you.

How can I set a field in the popup editor to use a multiline textarea instead of an input tag?

Right now the scrollbar is only visible on the bottom of the grid page. So this means if there are more columns that can be displayed (needs to scroll) the user must scroll down to the bottom of the page and move the horizontal scrollbar then scroll back up to see the additional columns. Is there a way to allow for horizontal scrolling at the top AND bottom of the page?