CODEWITHSUNDEEP
kendo-uikendo-grid
user50977
user50977

Reputation: 41

Kendo UI grid (inline edit) update and cancel not working

i create grid with data by javascript. when i click edit button at first time on any row and click update button. values in first row are null and then i edit other row i can't update or cancel, both button are not working. when i refresh then click edit and then click cancel that row has removed i don't know why? What's happend? How to fix?

Data

var detail = new Array();

for (var i = 1; i < 6; i++) {
     detail.push({
        Score: i,
        Condition: 0,
        ValueStart: 0,
        ValueEnd: 0,
      });
}

Grid

for (var i = 0; i < 3; i++) {
$("#GridScoreRangeContent").append("<div id='scoreRangeGrid_"+i+"'></div>");



$("#scoreRangeGrid_"+i).kendoGrid({
     dataSource: {
         data: detail,
         batch: true,
         schema: {
            model: {
              fields: {
                 Score: { editable: false },
                 Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
                 ValueStart: { type: "number", validation: { required: true, min: 1 } },
                 ValueEnd: { type: "number", validation: { required: true, min: 1 } },
               }
            }
         }
      },
columns: [{ field: "Score", title: "Score" }},
         { field: "Condition", title: "Condition", editor: ScoreRangeDropDownList, template: "#=Condition#" },
         { field: "ValueStart", title: "Start" },
         { field: "ValueEnd", title: "End" },
         { command: ["edit", "destroy"], title: "&nbsp;", width: "180px" }
        ],
        editable: "inline"
 });
}

Load Dropdownlist

function ScoreRangeDropDownList(container, options) {
    $.ajax({
        url: GetUrl("Admin/Appr/LoadDropdownlist"),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        traditional: true,
        cache: false,
        success: function (data) {
            $('<input required data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: data,
                    dataTextField: "Text",
                    dataValueField: "Value",
                });
        }
    });
}

Upvotes: 4

Views: 10688

Answers (2)

Will
Will

Reputation: 1150

What dmathisen is suggesting is definitely important but in addition it is important that the <input/> you create has a name attribute equal to the name of the column. You can use the value of options.field again as in the code from the Kendo Demos page example:

// create an input element
var input = $("<input/>");
// set its 'name' to the field to which the column is bound
input.attr("name", options.field);
// append it to the container
input.appendTo(container);
// initialize a Kendo UI Widget
input.kendoDropDownList({
.
.

Upvotes: 0

dmathisen
dmathisen

Reputation: 2342

Kendo seems to rely on a model ID when saving/updating. So in your dataSource, you have to specify an id:

model: {
    id: "Id",
    fields: {
        Id: { type: "number" },
        Score: { editable: false },
        Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
        ValueStart: { type: "number", validation: { required: true, min: 1 } },
        ValueEnd: { type: "number", validation: { required: true, min: 1 } },
  }
}

Upvotes: 3

Related Questions