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?