This is a migrated thread and some comments may be shown as answers.

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

3 Answers 248 Views
Grid
This is a migrated thread and some comments may be shown as answers.
steve
Top achievements
Rank 1
steve asked on 22 Oct 2013, 11:49 PM
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>

3 Answers, 1 is accepted

Sort by
0
steve
Top achievements
Rank 1
answered on 24 Oct 2013, 05:39 PM
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. 
0
Daniel
Telerik team
answered on 24 Oct 2013, 07:52 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
steve
Top achievements
Rank 1
answered on 24 Oct 2013, 08:04 PM
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("#");
Tags
Grid
Asked by
steve
Top achievements
Rank 1
Answers by
steve
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or