Question posted in
The official documentation can be found here.

Asp.net – Set tr color dynamically in blazor application

I have table which create by dynamically (store procedure return Datatable) and create successfully but when I click click event getTrnDetails(batchno) then I want to color <tr> for show separate other row. How can I do this?

Razor Template

@foreach (DataRow row in opType.Rows) { 
sl = 1;
<tr>
  @foreach (DataColumn column in opType.Columns) { 
    string batchno = @row[column.ColumnName].ToString();
    <td>
      @if (sl == 1) {
         <i class="fas fa-eye mr-1" 
           @onclick="(()=>getTrnDetails(batchno))"  
           style="cursor: pointer;"></i> 
      } @row[column.ColumnName]
    </td>
    sl = sl + 1; 
  }
</tr>
}
Tags:

2

Answers


  1. 0

    You can work with JavaScript code.

    1. Provide a unique id to each <tr> element.

    2. Pass the <tr> id when calling the getTrnDetails function.

    3. Call the JavaScript function via JS.InvokeVoidAsync function with the rowIndex parameter.

    4. Implement your JS function in the index.html or separate JS file(s) (but make sure you need to attach to the index.html). Add the CSS class to the <tr> element

    @inject IJSRuntime JS;

<table class="table">
    @foreach (DataRow row in opType.Rows)
    {
        sl = 1;
        string rowId = "row_" + rowIndex;
        <tr id="@rowId">
            @foreach (DataColumn column in opType.Columns)
            {
                string batchno = @row[column.ColumnName].ToString();

                <td>
                    @if (sl == 1)
                    {

                        <i class="fas fa-eye mr-1" @onclick="(()=>getTrnDetails(batchno, rowId))" style="cursor: pointer;">
    </i>
                    }
                    @row[column.ColumnName]
                </td>
                sl = sl + 1;
            }
        </tr>

        rowIndex++;
    }
</table>

    int rowIndex = 1;

public async Task getTrnDetails(string batchno, string rowId)
{
    await JS.InvokeVoidAsync("app.toggleTrColor", rowId);
}

    <style>
    app { }

    .bg-yellow {
        background: yellow;
    }
</style>

<script type="text/javascript">
    window.app = {
         toggleTrColor: (rowId) => {
            var element = document.querySelector("tr#" + rowId);
            element.classList.toggle("bg-yellow");
        }
    };
</script>
    Login or Signup to reply.
  2. 0

    You could try using a dictionary to store the selected state of the row.

    You can create a dictionary where the key is the unique identifier of the row and the value is a boolean value indicating whether the row is selected, and then initialize it to the unselected state.Here is an example you can use as a reference:

    protected override async Task OnInitializedAsync()
{
     opType = new DataTable();

        
     opType.Columns.Add("BatchNo", typeof(string));
     opType.Columns.Add("Column1", typeof(string));
     opType.Columns.Add("Column2", typeof(string));

        
  opType.Rows.Add("Batch1", "Data11", "Data12"); 
  opType.Rows.Add("Batch2", "Data21", "Data22");                                                         

     selectedRows = new Dictionary<string, bool>();
     foreach (DataRow row in opType.Rows)
     {
         string batchNo = row["BatchNo"].ToString(); 
         selectedRows[batchNo] = false; 
     }

     await base.OnInitializedAsync();
}
Dictionary<string, bool> selectedRows;

    Change selected status:

    void getTrnDetails(string batchNo)
{
       
     if (selectedRows.ContainsKey(batchNo))
     {
         selectedRows[batchNo] = !selectedRows[batchNo];
     }
}

    Return to selected state:

    bool IsRowSelected(string batchNo)
{
        
     return selectedRows.ContainsKey(batchNo) && selectedRows[batchNo];
}

    foreach:

    @foreach (DataRow row in opType.Rows)
        {
             string batchNo = row["BatchNo"].ToString();
             <tr style="background-color: @(IsRowSelected(batchNo) ? "lightgray" : "white")">
                 @foreach (DataColumn column in opType.Columns)
                 {
                     <td>
                         @if (column.ColumnName == "BatchNo")
                         {
                             <i class="fas fa-eye mr-1" @onclick="() => getTrnDetails(batchNo)" style="cursor: pointer;"></i>
                         }
                         @row[column.ColumnName]
                     </td>
                 }
             </tr>
        }

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search