Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Cannot edit a numeric column in the grid

2 Answers 80 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chuen
Top achievements
Rank 1
Chuen asked on 03 May 2014, 12:51 AM
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 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 03 May 2014, 05:39 AM
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
0
Chuen
Top achievements
Rank 1
answered on 03 May 2014, 06:13 AM
Thank you, Jayesh.

Didn't realize that the problem was at the edit function.  You nailed it good!
Tags
Grid
Asked by
Chuen
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Chuen
Top achievements
Rank 1
Share this question
or