[Solved] How to change the color of a cell that has been updated by a user during InCell mode?

[Rob]

Objective: show different color (say Green Text) for any grid cell the user has modified in "real-time" (as the user navigates cell to cell in the grid).

I can get the field name from the OnUpdate event:

var nameOfField = args.Field;

But this isn't of much use in that event handler.  I set the model property "WasEdited" to true:

item.WasEdited = true;

 

The OnCellRender fires but for every column that is editable ... so rather than having a single cell's text color change ALL cells set as Editable will have their color changed.  So I created a unique OnCellRender handler for each column/field/cell that can be edited (Editable=true):

    void OnFirstIncrementDaysNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
            item.WasEdited = false;
        }

    }

    void OnFirstIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
            item.WasEdited = false;
        }

    }

    void OnSecondIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
            item.WasEdited = false;
        }

    }

However, this doesn't work?  I trace thru the code and single per field/colum onCellRender is fired once (an only once) as expected for the appropriate event.   However, the cell text color doesn't change?  If I remove item.WasEdited = false (basically don't reset model was edited state).

    void OnFirstIncrementDaysNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
        }

    }

    void OnFirstIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
        }

    }

    void OnSecondIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
        }

    }

Then ALL 3 cells render green text, rather than just the one cell ... this is not what I want.  I don't understand why this is happening since the other OnCellRender events are NOT being called (verified with breakpoint), just the single OnCellRender event that should update the cell color for just that one cell (NOT all cells).

It looks to me like there is some issue with Grid cell render where setting the args.Class in a OnCellRender gets applied to ALL editable cells rather than the single cell?

Is this a bug or am I missing something?

Rob.

[Dimo]

Hello Rob,

Using a row-specific flag for cell-specific changes will hardly help. See how we achieve the same behavior in our Batch Grid Editing demo.

Regards,
Dimo
Progress Telerik

[Rob]

Hi Dimo,

Thanks for the response, perhaps I need to provide more code context as I didn't understand your response as I am doing "cell-specific" changes.  Here is the UI part:

                   <GridColumn Title="1st Incr">
                       <Columns>
                           <!-- Editable needs to be data drive -->
                           <GridColumn Field=@nameof(RateCyItem.FirstIncrementDays) TextAlign="ColumnTextAlign.Center" Title="Days" Width="5rem" Editable="false"/>
                           <GridColumn Field=@nameof(RateCyItem.FirstIncrementDaysNext) TextAlign="ColumnTextAlign.Center" Title="Next" Width="5rem" Editable="true" OnCellRender="@OnFirstIncrementDaysNextCellRender" />
                       </Columns>
                   </GridColumn>
                   <GridColumn Title="Daily Storage">
                       <Columns>
                           <!-- Editable needs to be data drive -->
                           <GridColumn Field=@nameof(RateCyItem.FirstIncrementRate) Title="1st Rate" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:C}" Width="6rem" Editable="false"/>
                           <GridColumn Field=@nameof(RateCyItem.FirstIncrementRateNext) Title="Next" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:C}" Width="6rem" Editable="true" OnCellRender="@OnFirstIncrementRateNextCellRender" />
                           <GridColumn Field=@nameof(RateCyItem.SecondIncrementRate) Title="2nd Rate" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:C}" Width="6rem" Editable="false"/>
                           <GridColumn Field=@nameof(RateCyItem.SecondIncrementRateNext) Title="Next" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:C}" Width="6rem" Editable="true" OnCellRender="@OnSecondIncrementRateNextCellRender" />
                       </Columns>
                   </GridColumn>

As you can see have a unique handler for each column (OnFirstIncrementDaysNextCellRender, OnFirstIncrementRateNextCellRender, ...) these are specific to the column/cell NOT the row.

I'll take a look at the Batch Grid Editing demo .

Rob

[Dimo]

@Rob - yes, you have column-specific OnCellRender handlers, but the flag that tracks user changes is one for the whole row - item.WasEdited. Instead, you need to maintain change information for each field (column) on each row. This is what we do in the Grid batch editing demo.

[Rob]

Thanks Dimo, I misunderstood how OnCellRender worked.  Tracking the fields that were edited works fine per your demo code.

Rob