Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

SfGrid Custom Dynamic Styling

$
0
0

I am trying to add colours to a row or the cell based on the selection. I can't seem to find any solution online. Below is the approach I have applied

<SfGrid @ref="SfInventoryGrid" AllowTextWrap="false" AllowExcelExport="true" AllowPdfExport="true"            AllowSorting="true" DataSource="inventoryData" Toolbar="@toolbar" class="rounded-lg custom-grid" RowDataBound="OnRowDataBound"><GridEditSettings Mode="EditMode.Normal" AllowAdding="true" AllowEditing="true" AllowDeleting="true"><HeaderTemplate><span>@(GetDialogHeaderText(context as InventoryModel))</span></HeaderTemplate><FooterTemplate><SfButton OnClick="@Save" IsPrimary="true">@DialogButtonCaption</SfButton><SfButton OnClick="@Cancel">Cancel</SfButton></FooterTemplate></GridEditSettings><GridEvents OnToolbarClick="OnToolbarClick" OnActionBegin="ActionBeginHandler"                        OnActionComplete="ActionCompleteHandler" TValue="InventoryModel"></GridEvents><GridToolbar><GridToolBarItems>                    @if (hasAddingAccessPermission || hasFullAccessPermission)                    {<GridToolBarItem Text="Add" PrefixIcon="e-add" Id="Add"                                         Class="hover:bg-blue-500 hover:text-white text-black"></GridToolBarItem>                    }                    @if (hasEditingAccessPermission || hasFullAccessPermission)                    {<GridToolBarItem Text="Edit" PrefixIcon="e-edit" Id="Edit"                                         Class="hover:bg-blue-500 hover:text-white text-black"></GridToolBarItem><GridToolBarItem Text="Update" PrefixIcon="e-update" Id="Update"                                         Class="hover:bg-blue-500 hover:text-white text-black"></GridToolBarItem>                    }                    @if (hasDeletingAccessPermission || hasFullAccessPermission)                    {<GridToolBarItem Text="Delete" PrefixIcon="e-delete" Id="Delete"                                         Class="hover:bg-blue-500 hover:text-white text-black"></GridToolBarItem>                    }<GridToolBarItem Text="Excel Export" PrefixIcon="e-excel-export" Id="ExcelExport"                                     Class="hover:bg-blue-500 hover:text-white text-black"></GridToolBarItem><GridToolBarItem Text="PDF Export" PrefixIcon="e-pdf-export" Id="PdfExport"                                     Class="hover:bg-blue-500 hover:text-white text-black"></GridToolBarItem><GridToolBarItem Text="Search" PrefixIcon="e-search" Id="Search"                                     Class="hover:bg-blue-500 hover:text-white text-black"></GridToolBarItem></GridToolBarItems></GridToolbar><GridColumns><GridColumn AllowAdding="false" IsPrimaryKey="true" Field="@nameof(InventoryModel.Id)" Width="50px"></GridColumn><GridColumn Field="@nameof(InventoryModel.Images)" HeaderText="Images" Width="230px"><Template>                        @{                            var inventoryModel = context as InventoryModel;                            var imageUrls = inventoryModel?.Images?.Split(',') ?? new string[0];                        }<div class="flex space-x-4">                            @foreach (var imageUrl in imageUrls)                            {<div class="image"><img style="width:50px; height:50px;" src="@imageUrl" /></div>                            }<button @onclick="() => OpenCarousel(imageUrls)" class=""><i class="fa-solid fa-expand text-blue-500 text-md hover:scale-110 ease-in transition-all duration-300"></i></button></div></Template><EditTemplate><div class="flex flex-col py-4 space-y-4">                            @{                                var inventoryModel = context as InventoryModel;                                var imageUrls = inventoryModel?.Images?.Split(',') ?? new string[0];                            }<div class="flex justify-center items-center space-x-4">                                @foreach (var imageUrl in imageUrls)                                {<div class="flex flex-col justify-center items-center space-y-2"><img style="width:50px; height:50px;" src="@imageUrl" /><button type="button" @onclick="@(async () => await RemoveImage(imageUrl))"><i class="fa-solid fa-xmark text-blue-500 text-lg hover:scale-105 ease-in transition-all duration-300"></i></button></div>                                }</div>                            @if (imageUrls.Length >= 3)                            {<p class="text-xs flex flex-wrap text-red-500">You can only upload up to 3 images. <br> Please delete existing images before <br> adding new ones.</p>                            }                            else                            {<SfUploader ID="uploadFiles" AllowedExtensions=".jpg,.png,.jpeg" Multiple="true" AutoUpload="true" @ref="Uploader" ValueChange="OnChange"></SfUploader>                            }</div></EditTemplate></GridColumn><GridColumn HeaderText="Manufacturer & Description" Field="@nameof(InventoryModel.Name)" Width="220px"></GridColumn><GridColumn HeaderText="Location" Field="@nameof(InventoryModel.Location)" Width="120px"></GridColumn><GridColumn HeaderText="Quantity" Field="@nameof(InventoryModel.Qty)" Width="100px"></GridColumn><GridColumn HeaderText="PN, SN, MODEL, ITEM #" Field="@nameof(InventoryModel.Pin)" Width="220px"></GridColumn><GridColumn HeaderText="MRITS" Field="@nameof(InventoryModel.MRITS)" Width="120px"></GridColumn><GridColumn HeaderText="TAG" Field="@nameof(InventoryModel.TagFirstPart)" Width="150px"><EditTemplate Context="context">                        @if (context is InventoryModel inventory)                        {<div class="flex flex-col space-y-4 flex-wrap"><SfTextBox TValue="string" @bind-Value="inventory.TagFirstPart"></SfTextBox><SfDropDownList TValue="string" TItem="string" Placeholder="Tag colour" DataSource="@colour" @bind-Value="inventory.SelectedColour"><DropDownListFieldSettings Value="colour" Text="Text"></DropDownListFieldSettings></SfDropDownList><SfDropDownList TValue="string" TItem="string" Placeholder="Tag scope" DataSource="@scope" @bind-Value="inventory.SelectedScope"><DropDownListFieldSettings Value="scope" Text="Text"></DropDownListFieldSettings></SfDropDownList></div>                        }</EditTemplate></GridColumn><GridColumn HeaderText="BARCODE" Field="@nameof(InventoryModel.BarCode)" Width="120px"></GridColumn><GridColumn HeaderText="STATUS / NOTES" Field="@nameof(InventoryModel.Status)" Width="120px"></GridColumn></GridColumns></SfGrid>    @code{    private void OnRowDataBound(RowDataBoundEventArgs<InventoryModel> args)    {        var inventoryModel = args.Data;        if (inventoryModel != null)        {            var selectedColour = inventoryModel.SelectedColour;            var selectedScope = inventoryModel.SelectedScope.ToLower();            if (selectedScope == "row")            {                args.Row.AddClass(new string[] { selectedColour.ToLower() });            }            else if (selectedScope == "cell")            {                // Loop through cells and apply class to the TAG column cell                foreach (var cell in args.Row.Cells)                {                    if (cell.Column.HeaderText == "TAG")                    {                        cell.AddClass(new string[] { selectedColour.ToLower() });                    }                }            }        }    }}

I am getting the following errors:

error CS1061: 'CellDOM' does not contain a definition for 'Cells' and no accessible extension method 'Cells' accepting a first argument of type 'CellDOM' could be found (are you missing a using directive or an assembly reference?)

is there any other approach i can use?


Viewing all articles
Browse latest Browse all 4839

Trending Articles