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

Update all rows in column and add k-dirty-cell class for batch inclusion

1 Answer 486 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 23 Sep 2015, 03:18 PM

I have a grid that is in batch edit mode and I'm including the ability to mass update the current filtered view.  What I can't seem to get to work is the addition of the css class k-dirty-cell to those changed cells and even the previously adjusted batch edit cells lose their red triangle as well.  Any ideas?

The grid:

   @(Html.Kendo().Grid<AELIS3.ShuttleCust.Entities.ActivePlan>()
        .Name("ActivePlan")
        .Columns(columns =>
        {
            columns.Bound(p => p.Account)
                .Filterable(filterable => filterable.UI("accountFilter").Extra(false))  
                .Width(100);
            columns.Bound(p => p.Origin)
                .Filterable(filterable => filterable.UI("originFilter").Extra(false))                
                .Width(85);
            columns.Bound(p => p.CustomerName)
                .Filterable(filterable => filterable.UI("customerFilter").Extra(false))
                .Width(250);
            columns.Bound(p => p.City)
                .Filterable(filterable => filterable.UI("citiesFilter").Extra(false))                
                .Width(125);
            columns.Bound(p => p.State)
                .Filterable(filterable => filterable.UI("statesFilter").Extra(false))
                .Width(85);
            columns.Bound(p => p.Sun)
                .Filterable(filterable => filterable.UI("warehouseFilter").Extra(false))
                .ClientTemplate("#if(SunLock === true){#<span class='red'>#: Sun #</span>#} else {#<span class='black'>#: Sun#</span>#}#")
                .EditorTemplateName("_WRHS_Sunday");
            columns.Bound(p => p.Mon)
                .Filterable(filterable => filterable.UI("warehouseFilter").Extra(false))
                .ClientTemplate("#if(MonLock === true){#<span class='red'>#: Mon #</span>#} else {#<span class='black'>#: Mon#</span>#}#")
                .EditorTemplateName("_WRHS_Monday");
            columns.Bound(p => p.Tue)
                .Filterable(filterable => filterable.UI("warehouseFilter").Extra(false))
                .ClientTemplate("#if(TueLock === true){#<span class='red'>#: Tue #</span>#} else {#<span class='black'>#: Tue#</span>#}#")
                .EditorTemplateName("_WRHS_Tuesday");
            columns.Bound(p => p.Wed)
                .Filterable(filterable => filterable.UI("warehouseFilter").Extra(false))
                .ClientTemplate("#if(WedLock === true){#<span class='red'>#: Wed #</span>#} else {#<span class='black'>#: Wed#</span>#}#")
                .EditorTemplateName("_WRHS_Wednesday");
            columns.Bound(p => p.Thu)
                .Filterable(filterable => filterable.UI("warehouseFilter").Extra(false))
                .ClientTemplate("#if(ThuLock === true){#<span class='red'>#: Thu #</span>#} else {#<span class='black'>#: Thu#</span>#}#")
                .EditorTemplateName("_WRHS_Thursday");
            columns.Bound(p => p.Fri)
                .Filterable(filterable => filterable.UI("warehouseFilter").Extra(false))
                .ClientTemplate("#if(FriLock === true){#<span class='red'>#: Fri #</span>#} else {#<span class='black'>#: Fri#</span>#}#")
                .EditorTemplateName("_WRHS_Friday");
            columns.Bound(p => p.Sat)
                .Filterable(filterable => filterable.UI("warehouseFilter").Extra(false))
                .ClientTemplate("#if(SatLock === true){#<span class='red'>#: Sat #</span>#} else {#<span class='black'>#: Sat#</span>#}#")
                .EditorTemplateName("_WRHS_Saturday");
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
              .Ajax()
              .Batch(true)
              .ServerOperation(false)
              .PageSize(18)                 
              .Group(groups => groups.Add(p => p.WeekBegin))
              .Read(read => read.Action("ActivePlan_Read", "ShuttleCustomer").Data("weekReturn"))
              .Update(update => update.Action("ActivePlan_Update", "ShuttleCustomer"))
              .Model(model =>
              {
                    model.Id(p => p.AccountID);

                    model.Field(p => p.Account).Editable(false);
                    model.Field(p => p.Origin).Editable(false);
                    model.Field(p => p.CustomerName).Editable(false);
                    model.Field(p => p.City).Editable(false);
                    model.Field(p => p.State).Editable(false);
                    model.Field(p => p.WeekBegin).Editable(false);
                    model.Field(p => p.WeekNo).Editable(false);
                    model.Field(p => p.Sun).Editable(true);
                    model.Field(p => p.SunLock).Editable(false);
                    model.Field(p => p.Mon).Editable(true);
                    model.Field(p => p.MonLock).Editable(false);
                    model.Field(p => p.Tue).Editable(true);
                    model.Field(p => p.TueLock).Editable(false);
                    model.Field(p => p.Wed).Editable(true);
                    model.Field(p => p.WedLock).Editable(false);
                    model.Field(p => p.Thu).Editable(true);
                    model.Field(p => p.ThuLock).Editable(false);
                    model.Field(p => p.Fri).Editable(true);
                    model.Field(p => p.FriLock).Editable(false);
                    model.Field(p => p.Sat).Editable(true);
                    model.Field(p => p.SatLock).Editable(false);
              })
           )
          .Pageable(pageable => pageable.ButtonCount(5))
          .Events(e => e.FilterMenuInit("FilterMenuFunc"))
          .ToolBar(toolbar => {
                toolbar.Save();     
            })
          .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
          .Filterable(filtering => filtering.Enabled(true))
          .Groupable(grouping => grouping.Enabled(true))
          .Sortable(sorting => sorting.Enabled(true))
          .Scrollable(scrolling => scrolling.Enabled(true).Height("auto"))
 ) 

 

The mass batch update function:

function iterateAll()
    {
        var col = document.getElementById('dow').value;
        var value = document.getElementById('warehouses').value;

        var grid = $('#ActivePlan').data('kendoGrid');
        grid.select(grid.tbody.find(">tr"));
        
        var selected = grid.select();
        var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        var colIdx = days.indexOf(col);
        for (var i = 0, max = selected.length ; i < max ; i++) {          
            grid._data[i].set(col, value); //works perfects
            grid.tbody.find('td:nth-child(' + (colIdx + 7) + ')').addClass('k-dirty-cell'); //I can add other classes here but they're only temporary additions and the k-dirty-cell doesn't work at all
        }
    }

 

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 28 Sep 2015, 09:09 AM

Hello Steve,

 

In order to show a dirty indicator for specific cell a span element with 'k-dirty' class value should be added to the cell element. Please refer to Preserve the dirty indicator in incell editing and client operations article for a demo.  

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or