Cannot edit a numeric column in the grid

3 posts, 0 answers
  1. Chuen
    Chuen avatar
    7 posts
    Member since:
    Oct 2013

    Posted 02 May 2014 Link to this post

    I was creating a Kendo grid that contains several column.  There is one numeric column called 'Length".  When I clicked on this column, I would expect it to invoke the editor, but unfortunately it crashed in kendo.all.js.  I have no idea what I did wrong.  I am hoping someone here could take a look at it and give me some advice on how to fix my code.

    Here is a sample of my code:
    http://jsbin.com/wikav/1/edit


    Thanks in advance.





  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 03 May 2014 in reply to Chuen Link to this post

    Hello,


    I have updated your EDIT function.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).ready(function () {
     
                var workTasks = [
           { "Id": 1, "TaskName": "Test1",
               "TaskType": "PowershellTask", "Length": 2, "Data": "Some Data"
           },
           { "Id": 2, "TaskName": "Test2",
               "TaskType": "BuildTask", "Length": 1, "Data": "Some Data"
           },
           { "Id": 3, "TaskName": "Test3",
               "TaskType": "PowershellTask", "Length": 3, "Data": "Some Data"
           },
           { "Id": 4, "TaskName": "Other",
               "TaskType": "BuildTask", "Length": 5, "Data": "Some Data"
           }
         ];
     
                var taskTypes = ['PowershellTask', 'BuildTask'];
     
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: function (o) {
                            o.success(workTasks);
                        },
                        update: function (o) {
                            o.success(workTasks);
                        },
                        destroy: function (o) {
                            o.success();
                        },
                        create: function (o) {
                            o.success(workTasks);
                        },
                        parameterMap: function (data, operation) {
                            if (operation != "read") {
                                var result = {};
     
                                for (var i = 0; i < data.models.length; i++) {
                                    var setting = data.models[i];
     
                                    for (var member in setting) {
                                        result["tasks[" + i + "]." + member] = setting[member];
                                    }
                                }
                                return result;
                            } else {
                                return JSON.stringify(data);
                            }
                        },
                        serverPaging: false,
                        serverFiltering: false
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                TaskName: { editable: true },
                                TaskType: {
                                    editable: true,
                                    defaultValue: "BuildTask",
                                    validation: { required: true }
                                },
                                Length: {
                                    type: "number",
                                    editable: true
                                },
                                Data: { editable: true },
                                ToDelete: { type: "boolean" }
                            }
                        }
                    },
                    error: function (e) {
                        if (e.errors !== false) {
                            $("#apiResult").text("Error from server: " + res.Error).css("color", "red");
     
                            // This will keep the popup open
                            grid.one("dataBinding", function (e) {
                                e.preventDefault();   // cancel grid rebind
                            });
                        }
                    }
                });
     
                var grid = $("#WorkTasksGrid").kendoGrid({
                    dataSource: dataSource,
                    scrollable: false,
                    editable: {
                        mode: "incell",
                        confirmation: false
                    },
                    resizable: true,
                    toolbar: kendo.template($("#template").html()),
                    sortable: true,
                    pageable: {
                        numeric: false,
                        previousNext: false,
                        messages: {
                            display: "Total: {2}"
                        }
                    },
                    columns: [
                    { field: "Id" },
                    { field: "TaskName", title: "Name" },
                    { field: "TaskType", title: "Type", editor: taskTypeDropDownEditor },
                    { field: "Length" },
                    { field: "Data" },
                    {
                        field: "ToDelete", title: "Delete",
                        width: "7%",
                        template: '<input name="ToDelete" class="check_row" type="checkbox" #=(ToDelete)?"checked":""# /><div style="float: right; width: 100%" />',
                        sortable: false
                    }
                ],
                    edit: function (e) {
                        var fieldName;
                        if (e.container.find("input").length > 1) {
                            for (var i = 0; i < e.container.find("input").length; i++) {
     
                                fieldName = e.container.find("input")[i].attr("name");
                                if (typeof fieldName == 'undefined' || fieldName === 'ToDelete') {
                                }
                                else {
                                    break;
                                }
                            }
                        }
                        else {
                            fieldName = e.container.find("input").attr("name");
                        }
     
     
                        if (typeof fieldName == 'undefined' || fieldName === 'ToDelete') {
                            this.closeCell();
                        }
                        // set the default Id when adding a new row
                        if (e.model.isNew()) {
                            if (e.model.Id <= 0) {
                                var maxId = Math.max.apply(Math, dataSource.data().map(function (o) { return o.Id; }));
                                e.model.set("Id", maxId + 1);
                            }
                        }
                    },
                    saveChanges: function (e) {
                        // find all the deleted rows
                        var updatedRowCount = GetUpdatedRowCount(dataSource);
                        var checkedRows = GetCheckedRow();
                        var numChanges = updatedRowCount + checkedRows.length;
     
                        if (numChanges <= 0) {
                            alert('No pending change is found');
                        }
                        else {
                            if (confirm(numChanges + ' pending change(s) found.  Do you want to submit them?')) {
                                // delete checked rows
                                if (checkedRows.length > 0) {
                                    checkedRows.forEach(function (val) {
                                        grid.removeRow(val);
                                    });
                                }
                            }
                            else {
                                e.preventDefault();
                            }
                        }
                    }
                }).data("kendoGrid");
     
                var nameFilterTextBox = $(".toolbar #NameFilter");
                nameFilterTextBox[0].oninput = function () {
                    ApplyFilters(dataSource);
                };
     
                var showUpdadtedCheckBox = $(".toolbar #ShowUpdatedCheckBox");
                showUpdadtedCheckBox.click(function () {
                    ApplyFilters(dataSource);
                });
     
                grid.tbody.on("change", ".check_row", function (e) {
                    var row = $(e.target).closest("tr");
                    var item = grid.dataItem(row);
                    item.ToDelete = ($(e.target).is(":checked") ? true : false);
                });
     
                // Apply all existing filters
                function ApplyFilters(ds) {
                    var mainFilter = [];
                    var textFilter = [];
                    var deleteFilter = { field: "ToDelete", operator: "eq", value: true };
     
                    // Construct the text filter
                    $text = nameFilterTextBox.val();
                    if ($text.length > 0) {
                        textFilter = { logic: "or", filters: [] };
                        textFilter.filters.push({ field: "TaskName", operator: "contains", value: $text });
                        textFilter.filters.push({ field: "TaskType", operator: "contains", value: $text });
                    }
                    // Show updated rows only
                    var toShowUpdated = showUpdadtedCheckBox.is(':checked');
                    if (toShowUpdated) {
                        GetCheckedRow();
                        mainFilter = { logic: "or", filters: [] };
                        mainFilter.filters.push(deleteFilter);
                        mainFilter.filters.push(textFilter);
                    }
                    else {
                        mainFilter = textFilter;
                    }
                    ds.filter(mainFilter);
                }
     
                // Get the number of updated rows
                function GetUpdatedRowCount(ds) {
                    var updateCount = 0;
                    $.each(ds._data, function () {
                        this.ToUpdate = this.dirty;
                        if (this.ToUpdate) {
                            updateCount++;
                        }
                    });
                    return updateCount;
                }
     
                // Get the number of checked rows
                function GetCheckedRow() {
                    var checkedRows = [];
                    var checkBoxs = $("#WorkTasksGrid").find("input.check_row");
     
                    checkBoxs.each(function () {
                        var row = $(this).closest('tr');
                        if (this.checked) {
                            checkedRows.push(row);
                        }
                    });
                    return checkedRows;
                }
     
                function taskTypeDropDownEditor(container, options) {
                    var fieldName = options.field;
                    $('<input name="' + fieldName + '" data-bind="value:' + fieldName + '"/>')
                  .appendTo(container)
                  .kendoDropDownList({
                      dataSource: taskTypes
                  });
                }
            });
        </script>
        <script type="text/x-kendo-template" id="template">
        <div class="toolbar k-toolbar k-grid-toolbar">
            <span>
                <label class="filter-label">Filter:</label>
                <input id="NameFilter" class="k-textbox" style="width: 250px" type="text" />
                   
            </span>
            <span style="float: right; clear: both">
                <button class="k-button k-button-icontext k-grid-add"><span class="k-icon k-add"></span>Add New Task</button>
                <button class="k-button k-button-icontext k-grid-save-changes"><span class="k-icon k-update"></span>Submit Changes</button>
            </span>
        </div>
        </script>
    </head>
    <body>
        <div>
            <span id="apiResult"></span>
            <h2>
                WorkTasks</h2>
            <p>
                *Click cell to edit</p>
            <div id="WorkTasksGrid">
            </div>
            <br />
            <div id="Message">
            </div>
        </div>
    </body>
    </html>


    Let me know if any concern.

    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chuen
    Chuen avatar
    7 posts
    Member since:
    Oct 2013

    Posted 03 May 2014 in reply to Jayesh Goyani Link to this post

    Thank you, Jayesh.

    Didn't realize that the problem was at the edit function.  You nailed it good!
Back to Top