How to change backcolor of grid when adding record from external control

[KINS]

I have an sfdatagrid.I am adding record in grid from external control (textbox,combobox) without batch mode. I would like to know how to change backcolor of grid row when I add record from external control.

styleBomLeatherSetup.TempID = maxno + 1;

                    styleBomLeatherSetup.Mode = "N";

                    styleBomLeatherHeaderSetup.styleBomLeatherSetups.Add(styleBomLeatherSetup);

                    gridRef.Refresh();

Note:-

"styleBomLeatherHeaderSetup.styleBomLeatherSetups"  is an Grid Datasource

"styleBomLeatherSetup" is an Externam form model

[Rahul Narayanasamy]

Hi KINS, 

Greetings from Syncfusion. 

We have validated your query and we suspect that you want to change the background color of the newly added record. You can achieve your requirement by using OnActionBegin, RowDataBound and a variable. Here, we entered values in external controls and add the record using AddRecordAsync method. And changed the background color of the row using events. Find the below code snippets and sample for your reference. 

<div class="col-md-6"> 

        . . . 

        </div> 

        <SfButton @onclick="Save">Save</SfButton> 

    </div> 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowFiltering="true" 

        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings> 

    <GridEvents OnActionBegin="ActionBeginHandler" RowDataBound="RowBound" TValue="Order"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <. ..  

</SfGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

    SfNumericTextBox<int?> sfNumericTextBox1 { get; set; } 

    SfNumericTextBox<double?> sfNumericTextBox2 { get; set; } 

    SfDropDownList<string, Country> sfDropDownList { get; set; } 

    SfTextBox sfTextBox { get; set; } 

    SfGrid<Order> Grid; 

    int? AddedId { get; set; } 

    public void ActionBeginHandler(ActionEventArgs<Order> args) 

    { 

        if(args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) && args.Action == "Add") 

        { 

            AddedId = args.Data.OrderID; 

        } 

        // Here you can customize your code 

    } 

    public void RowBound(RowDataBoundEventArgs<Order> args) 

    { 

        if (args.Data.OrderID == AddedId) 

        { 

            args.Row.AddClass(new string[] { "added" }); 

        } 

    } 

 

    . . . 

    async Task Save() 

    { 

        if(sfNumericTextBox1.Value != null && sfTextBox.Value != null){ 

            await Grid.AddRecordAsync(new Order() 

            { 

                OrderID = sfNumericTextBox1?.Value, 

                CustomerID = sfTextBox.Value, 

                Freight = sfNumericTextBox2.Value, 

                ShipCountry = sfDropDownList.Value 

            }, 0); 

        } 

    } 

 

} 

 

<style> 

 

    .added { 

        background-color: greenyellow 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-214186770  

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/row#customize-rows  

https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin 

https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[KINS]

thanks got it...

the above code working fine for adding new record..

can I change cell color when updating record ?? (modified column only from model)

[Vignesh Natarajan]

Hi KINS, 

 

Thanks for the update.  

 

Query: “can I change cell color when updating record ?? (modified column only from model)” 

 

Yes, we can achieve your requirement using similar way. (i.e) OnActionBegin event handler will be triggered when saving the changes of edited record. At that time, we have stored the PrimaryKey column value and based on saved value we have added specific class "edited" name to record using RowDataBound event.  

 

Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowFiltering="true" 

        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings> 

    <GridEvents OnActionBegin="ActionBeginHandler" RowDataBound="RowBound" TValue="Order"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.ShipCountry) TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    public List<Order> Orders { get; set; } 

    SfNumericTextBox<int?> sfNumericTextBox1 { get; set; } 

    SfNumericTextBox<double?> sfNumericTextBox2 { get; set; } 

    SfDropDownList<string, Country> sfDropDownList { get; set; } 

    SfTextBox sfTextBox { get; set; } 

    SfGrid<Order> Grid; 

    int? AddedId { get; set; } 

    int? Edited { get; set; } 

    public void ActionBeginHandler(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save)) 

        { 

            if (args.Action == "Add") 

            { 

                AddedId = args.Data.OrderID; 

            } 

            else if (args.Action == "Edit") 

            { 

                Edited = args.Data.OrderID; 

            } 

        } 

        // Here you can customize your code 

    } 

    public void RowBound(RowDataBoundEventArgs<Order> args) 

    { 

        if (args.Data.OrderID == AddedId) 

        { 

            args.Row.AddClass(new string[] { "added" }); 

        } 

        if(args.Data.OrderID == Edited) 

        { 

            args.Row.AddClass(new string[] { "edited" }); 

        } 

    } 

 

 

Note: OnActionBegin event will be differentiated based on the Action (i.e.) either Edit or Add. Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11332242215.zip 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[KINS]

please check my comments in below link

https://www.screencast.com/t/AQn0a032

[Vignesh Natarajan]

Hi KINS, 

 

Query: “please check my comments in below link” 

 

As per your requirement we have prepared a sample to perform the perform add and edit operation in Grid using Grid toolbar buttons and highlighted the record correspondingly. Please find the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/171510/ze/WebApplication1586795158.zip 

 

We have achieved this requirement using OnToolbarClicked event of Grid to prevent the default action and send the selected record detail to external form. While saving the changes we have differentiated the add and edit operation in button click.  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick 

 

Please get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan  

[KINS]

Thanks for reply 

It works fine 

But in edit mode I need to change backcolor of cell which is modified 

For example 

I have changed freight value.so I need to change only freight cell color instead of row color

[Rahul Narayanasamy]

Hi KINS, 

Thanks for the update. 

Query: But in edit mode I need to change backcolor of cell which is modified For example I have changed freight value.so I need to change only freight cell color instead of row color 

You want to change the background for the edited cell alone instead of changing the entire row color. You can achieve your requirement by using QueryCellInfo, DataBound event and the particular control ValueChange event with boolean variable. Find the below code snippets and sample for your reference. 

<div class="col-md-6"> 

    <div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <label for="orderedit">OrderID</label> 

                <SfNumericTextBox @ref="sfNumericTextBox1" ID="OrderID" Enabled="@enable" @bind-Value="@SelectedData.OrderID" TValue="int?"></SfNumericTextBox> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <label for="customeredit">CustomerID</label> 

                <SfTextBox @ref="sfTextBox" @bind-Value="@SelectedData.CustomerID" ValueChange="@ValueChangeHandler" ID="CustomerID"></SfTextBox> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <label for="freightedit">Frieght</label> 

                <SfNumericTextBox @ref="sfNumericTextBox2" @bind-Value="@SelectedData.Freight" ID="Freight" TValue="double?" 

                                  > 

                    <NumericTextBoxEvents TValue="double?" ValueChange="@NumValueChangeHandler"></NumericTextBoxEvents> 

                </SfNumericTextBox> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <label for="countryedit">ShipCountry</label> 

                <SfDropDownList @ref="sfDropDownList" ID="ShipCountry" @bind-Value="@SelectedData.ShipCountry" TItem="Country" TValue="string" DataSource="@Dropdown"> 

                    <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings> 

                    <DropDownListEvents TItem="Country" TValue="string" ValueChange="@ValueChangeHandler"></DropDownListEvents> 

                </SfDropDownList> 

            </div> 

        </div> 

    </div> 

    <SfButton @onclick="Save">Save</SfButton> 

</div> 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowFiltering="true" 

        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings> 

    <GridEvents OnToolbarClick="ToobarClicked" OnActionBegin="ActionBeginHandler" RowDataBound="RowBound" 

                QueryCellInfo="CustomizeCell" DataBound="DataBoundHandler" TValue="Order"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        . . . 

</SfGrid> 

 

@code{ 

 

    public List<Order> Orders { get; set; } 

    . . . 

    int? AddedId { get; set; } 

    int? Edited { get; set; } 

    bool IsCustomerIDChange { get; set; } 

    bool IsFreightChange { get; set; } 

    bool IsShipCountryChange { get; set; } 

    public bool enable { get; set; } 

 

    . . . 

    public void CustomizeCell(QueryCellInfoEventArgs<Order> args) 

    { 

        if (args.Column.Field == "CustomerID" && (Edited == args.Data.OrderID && IsCustomerIDChange)) 

        { 

            args.Cell.AddClass(new string[] { "edited" }); 

        } 

        if (args.Column.Field == "Freight" && (Edited == args.Data.OrderID && IsFreightChange)) 

        { 

            args.Cell.AddClass(new string[] { "edited" }); 

        } 

        if (args.Column.Field == "ShipCountry" && (Edited == args.Data.OrderID && IsShipCountryChange)) 

        { 

            args.Cell.AddClass(new string[] { "edited" }); 

        } 

    } 

 

    private void ValueChangeHandler(ChangedEventArgs args) 

    { 

        if(args.Value != args.PreviousValue && args.PreviousValue != null && args.IsInteracted) 

        { 

            IsCustomerIDChange = true; 

        } 

    } 

    private void NumValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<double?> args) 

    { 

        IsFreightChange = true; 

    } 

    private void ValueChangeHandler(ChangeEventArgs<string, Country> args) 

    { 

        if(args.PreviousItemData != null && args.IsInteracted) 

        { 

            IsShipCountryChange = true; 

        } 

    } 

    public void DataBoundHandler() 

    { 

        IsCustomerIDChange = false; 

        IsFreightChange = false; 

        IsShipCountryChange = false; 

    } 

    . 

    . . . 

 

} 

 

<style> 

 

    .added { 

        background-color: greenyellow; 

    } 

 

    .edited { 

        background-color: yellow; 

    } 

</style> 

Sample:  https://www.syncfusion.com/downloads/support/forum/171510/ze/Sample737394835  

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/events#querycellinfo 

https://blazor.syncfusion.com/documentation/datagrid/events#databound 

Please let us know if you have any concerns. 

Regards, 

Rahul