Best way to store row index from a grid with the batch editing grid

[steve]

I am using java script and the client template to calculate and display the row index for the grid, which is working just fine.  A new requirement came in and now I have to actually store the int into the database.  I tried binding the column to the object but since it is client side the object doesn't get the value from the grid.  I also tried use the default when adding a new row but I could not find a way to increment the variable, it is always "1".  

Is there a way to get the client template value into the cell so I can submit the value to the database?

@model DetailsViewModel
@{
    var case = Model.Case;
}

@(Html.Kendo().Grid<GridViewModel>()
      .Name("Grid")
      .Columns(columns =>
          {
              columns.Bound(m => m.ProductId)
                  .Visible(false);
              columns.Bound(m => m.Label)
                  .ClientTemplate("#= renderNumber() #")
                  .Title("#");
              columns.Bound(m => m.PerceivedProblem)
                  .Title("Perceived Problem")
                  .Width(100);
              columns.Bound(m => m.Site)
                  .ClientTemplate("#= Site ? Site.LabName : '' #")
                  .Title("Location")
                  .Width(150);
              columns.Bound(m => m.DateOpened)
                  .Title("Date Opened");
              columns.Bound(m => m.DateReceived)
                  .Title("Date Received");
              columns.Command(command => command.Destroy())
                  .Width(150);
          })
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .ToolBar(toolBar =>
          {
              toolBar.Create();
              toolBar.Save();
          })
      .Navigatable()
      .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(15)
            .Events(events =>
                {
                    events.Error("error_handler");
                    events.Change("resetRowNumber");
                })
            .Batch(true)
            .ServerOperation(false)
            .Model(model =>
                {
                    model.Id(m => m.Id);
                    model.Field(m => m.ProductId);
                    model.Field(m => m.Label).Editable(false);
                    model.Field(m => m.Site).DefaultValue(new Site { LabName = string.Empty });
              })
            .Read(read => read.Action("GridAjaxRead", "Home", new { case}))
            .Create(create => create.Action("GridAjaxCreate", "Home", new { case }))
            .Update(update => update.Action("GridAjaxUpdate", "Home"))
            .Destroy(destroy => destroy.Action("GridAjaxDestroy", "Home"))
      )
      .Resizable(resize => resize.Columns(true)))

<script type="text/javascript">
    function error_handler(e) {
        alert("Server error");
    }
    var rowNumber = 0;

    function resetRowNumber() {
        rowNumber = 0;
    }

    function renderNumber() {
        return ++rowNumber;
    }
</script>

[steve]

I just decided to go with saving the counts of the existing items plus what ever is add to the grid when saving the batch items.  So if the there are five records previously to saving two newly created items, then the count from the database is 5 and then I increment each new item to that count.  Unfortunately, the use will not see the row count until it is returned to the UI. 

[Daniel]

Hello Steve,

Could you clarify this sentence:
I tried binding the column to the object but since it is client side the object doesn't get the value from the grid From the description it seemed that the field will be included in the model so you it should only be necessary to bind the column to the database field. To maintain the correct row numbers in this scenario you could use the dataSource change event e.g.

columns.Bound(m => m.RowNumber);

function change(e) {
    if (e.action == "add" || e.action == "remove") {
        var data = this.data();
        for (var i = 0; i < data.length; i++) {
            data[i].RowNumber = i + 1;
            data[i].dirty = true;
        }
    }
}

Regards,
Daniel
Telerik

[steve]

the property label is bound to the grid but since i was returning the row number to the client template, the value was not actually stored in the cell of the grid.  Therefore, the my ViewModel could not get the row number and kept returning 1.  If I handle it on the server and just increment  the row count from what is currently returning from the DB i don;t have to do any dirty bits or flags.  I prefer that approach.

columns.Bound(m => m.Label)
    .ClientTemplate("#= renderNumber() #")
    .Title("#");