CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3kendo-uikendo-grid
SantyEssac
SantyEssac

Reputation: 809

Adding new row to the kendo grid with the value in it clears the value of the previously added rows

I am using kendoGrid and adding new row on button click,but my problem is that when i am adding 2nd row the value of the first row gets clear and same again when i add third row the value of the first and second gets clear. here is my code.

<script type="text/javascript">
  $(".AddNewRemark").click(function () {
    //grid.addRow();
    var dataSource = grid.dataSource;
    var total = dataSource.data().length;
    dataSource.insert(total + 1, {});
    var it = $(this).text().trim();
    $(".RemarkDescription")[total].value = it;
    $(".RemarkDescription").attr('readonly', 'readonly');
  })
</script>

        @(Html.Kendo().Grid<Invoice.Models.ViewModels.RemarkViewModel>()
                .Name("RemarkAdd")
                .TableHtmlAttributes(new { style = "height:20px; " })
                .Columns(columns =>
                {
                    columns.Bound(p => p.RemarkID).Hidden(true).ClientTemplate("#= RemarkID#" + "<input type='hidden' class='RemarkID' value='#=RemarkID#' />");

                    columns.Bound(p => p.RemarkDescription).Title("Type").Width(10).ClientTemplate("#= RemarkDescription#" + "<input type='text' class='RemarkDescription' value='#data.RemarkDescription#' />");
                    columns.Bound(p => p.Remark).Title("Remark").Width(50).ClientTemplate("#= Remark#" + "<input type='hidden' class='Remark' value='#=Remark#' />");

                })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Navigatable()
                .Sortable()
                .Scrollable(scr => scr.Height(200))
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.RemarkID))
                    .Create("Editing_Create", "Grid")
                    .Read("Remark_Read", "Document")
                                .Update("Editing_Update", "Grid")//.Events(e=>e.Change("Edit"))
                    .Destroy("Editing_Destroy", "Grid")
                    )
            )
            <button class="AddNewRemark">Add Remark</button>

Upvotes: 0

Views: 4511

Answers (1)

Petur Subev
Petur Subev

Reputation: 20193

This is because the Grid is rebound each time you modify the dataSource, ans since you do not update the underlying model (you just modify the html).

Better have a look at this example:

when data-bound:

function editAll() {
  var theGrid = $("#grid").data("kendoGrid");
  $("#grid tbody").find('tr').each(function () {
     var model =  theGrid.dataItem(this); 
      kendo.bind(this,model);
  }); 
  $("#grid").focus();
}

Upvotes: 1

Related Questions