Spreadsheet more than one validation causing javascript "IndexOf" error in "kendo.all.js"

7 posts, 1 answers
  1. Jignesh
    Jignesh avatar
    7 posts
    Member since:
    Jul 2017

    Posted 16 Aug Link to this post

    Validation is working for one range. Adding another validation in range causes javascript error.

    01.$(document).ready(function () {
    02.        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    03.        var sheet = spreadsheet.activeSheet();
    04. 
    05.        sheet.batch(function () {
    06.            sheet.hideColumn(0);
    07.        }, { layout: true });
    08. 
    09.        sheet.range("E1:E200").format(kendo.spreadsheet.formats.dateTime);
    10.        sheet.range("F1:F200").format(kendo.spreadsheet.formats.dateTime);
    11. 
    12.        var range1 = sheet.range("D2:D200");
    13. 
    14.        range1.validation({
    15.            dataType: "list",
    16.            from: "{ \"AUTO\", \"BRK ALT\", \"BRK HR\" }",
    17.            allowNulls: true,
    18.            type: "reject",
    19.            titleTemplate: "Invalid segment code",
    20.            messageTemplate: "Invalid segment code",
    21.            showButton: true,
    22.        });
    23. 
    24.        var range2 = sheet.range("G2:G200");
    25. 
    26.        range2.validation({
    27.            dataType: "list",
    28.            from: "{ \"Add\", \"Modify\", \"Remove\" }",
    29.            allowNulls: true,
    30.            type: "reject",
    31.            titleTemplate: "Invalid aspect entry type.",
    32.            messageTemplate: "Invalid aspect entry type.",
    33.            showButton: true,
    34.        });
    35.    });
  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 18 Aug Link to this post

    Hello Jignesh,

    I added your code to a dojo example and the exception was not reproduced. Could you modify it accordingly so that it demonstrates the issue and link it back for further review? 

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jignesh
    Jignesh avatar
    7 posts
    Member since:
    Jul 2017

    Posted 18 Aug Link to this post

    Trying to upload sample project of 17 MB, but it gives error after status percentage reached 100%.

    Is there any other way I can send zip file to you?

    Error is still occuring.

  4. Jignesh
    Jignesh avatar
    7 posts
    Member since:
    Jul 2017

    Posted 18 Aug Link to this post

    Dojo code copied to Index.cshtml and it works. 

    The moment I change below line to Asp.Net HTML Helper, it gives error.

    <div id="spreadsheet"></div>

     

     

    @(Html.Kendo().Spreadsheet()
            .Name("spreadsheet")
            .HtmlAttributes(new { style = "width:100%" })
            .Toolbar(false)
            .Sheetsbar(false)
            .Sheets(sheets =>
            {
                sheets.Add()
                    .Name("Exceptions")
                    .DataSource<TelerikMvcApp1.Models.Exceptions>(ds => ds
                        .Ajax()
                        .Batch(true)
                        .Read(read => read.Action("SpreadsheetRead", "Home"))
                        .Model(m =>
                        {
                            m.Id(p => p.ExceptionID);
                        })
                    )
                    .Columns(columns =>
                    {
                        columns.Add().Width(100);
                        columns.Add().Width(100);
                        columns.Add().Width(100);
                        columns.Add().Width(100);
                        columns.Add().Width(100);
                    })
                    .Rows(rows =>
                    {
                        rows.Add().Height(30).Cells(cells =>
                        {
                            cells.Add()
                                .Bold(true)
                                .Background("#9c27b0")
                                .TextAlign(SpreadsheetTextAlign.Center)
                                .Color("white");

                            cells.Add()
                                .Bold(true)
                                .Background("#9c27b0")
                                .TextAlign(SpreadsheetTextAlign.Center)
                                .Color("white");

                            cells.Add()
                                .Bold(true)
                                .Background("#9c27b0")
                                .TextAlign(SpreadsheetTextAlign.Center)
                                .Color("white");

                            cells.Add()
                                .Bold(true)
                                .Background("#9c27b0")
                                .TextAlign(SpreadsheetTextAlign.Center)
                                .Color("white");

                            cells.Add()
                                .Bold(true)
                                .Background("#9c27b0")
                                .TextAlign(SpreadsheetTextAlign.Center)
                                .Color("white");
                        });
                    });
            })
    )

  5. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 22 Aug Link to this post

    Hello Jignesh,

    I checked the behavior of the MVC wrapper and the exception is caused by setting the value of the ranges in document.ready while they are populated from the DataSource:
    var range1 = sheet.range("D2:D200");
    range1.value("Test1");
    //...
    var range2 = sheet.range("G2:G200");
    range2.value("Test2");
    //...

    So for instance calling the logic with a slight delay (with the setTimeout method) avoids the exception, or setting only validation to the range without adding data through the value method also works without throwing an exception:
    range1.validation({
        dataType: "list",
        from: "{ \"AUTO\", \"BRK ALT\", \"BRK HR\" }",
        allowNulls: true,
        type: "reject",
        titleTemplate: "Invalid segment code",
        messageTemplate: "Invalid segment code",
        showButton: true,
    });

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Jignesh
    Jignesh avatar
    7 posts
    Member since:
    Jul 2017

    Posted 25 Aug in reply to Ivan Danchev Link to this post

    Hi,

    "setTimeout" method worked for validation, but created new issue with saving data.

    If we change values in existing loaded data, then it calls 'Update', ideally it should call 'Create' method.

    Regards,

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 29 Aug Link to this post

    Hi Jignesh,

    The Create method is called when the data is loaded initially. After the data is loaded, further modifications to the initial data lead to the Update method being called. This is the expected behavior. For instance check the following demo. Modifying a cell that contains data and pressing the "Save changes" button calls the Product_Update action, whereas modifications to cells that do not initially contain data calls the Product_Create action.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top