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

4 posts, 0 answers
  1. steve
    steve avatar
    83 posts
    Member since:
    Oct 2009

    Posted 22 Oct 2013 Link to this post

    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>
  2. steve
    steve avatar
    83 posts
    Member since:
    Oct 2009

    Posted 24 Oct 2013 Link to this post

    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. 
  3. Daniel
    Admin
    Daniel avatar
    2214 posts

    Posted 24 Oct 2013 Link to this post

    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!
  4. steve
    steve avatar
    83 posts
    Member since:
    Oct 2009

    Posted 24 Oct 2013 Link to this post

    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("#");
Back to Top