ObservableArray bound Grid source and InLine editing don't update view model

2 posts, 1 answers
  1. guga
    guga avatar
    12 posts
    Member since:
    Mar 2012

    Posted 04 Jun 2013 Link to this post


    I defined a ViewModel with an ObservableArray as "items". Then I bound "items" to the grid with data-bind="source: items".
    The grid is data-editable="inline" and there are edit and destroy commands defined.

    Data from ObservableArray displays ok in the grid.
    Delete button works ok.
    But when I edit a row, after any action ("update" or "cancel") the grid became empty and no data is shown anymore.

    This is the grid configuration:

    <div id="gridMediciones" data-role="grid"
        data-bind="source: items"
            {command: ['destroy'], title:' '}
    and this is the viewmodel configuration:

    var viewActions = function ($grid) {
        var data = {
            items: [
                { Id: 1, Nombre: "Medidor 1", VolumenEstandar: 100, Volumen: 200 },
                { Id: 2, Nombre: "Medidor 2", VolumenEstandar: 200, Volumen: 300 },
                { Id: 3, Nombre: "Medidor 3", VolumenEstandar: 300, Volumen: 400 },
        viewModel = kendo.observable(data);
        return {
            viewModel: viewModel
    //inicialización de la vista
    $(function () {

    Is it anything wrong?

    Thanks in advance
  2. Answer
    guga avatar
    12 posts
    Member since:
    Mar 2012

    Posted 05 Jun 2013 Link to this post

    I have got the answer from Telerik Support (less than 24hs!!):

    You should use dataSource bound to the grid, not the ObservableArray.  "items" should be values of dataSource's "data" property. You must define model id in the data source.
    viewModel's "items" property set as the dataSource defined above.
    then kendo.bind(...)

Back to Top