Search code examples
datagridblazorblazorise

Blazorise DataGrid to Add dropdown list

I'm Beginner to Blazorise and I'm usinf Blazorise DataGrid, but I faced some conflict anyone know how to add Operation label click and show Edit,View dropdown list Thanks

image description here

enter image description here

code here

<Div Class="mt-3">
            <DataGrid TItem="Employee"
              Data="@employeeList"
              @bind-SelectedRow="@selectedEmployee"
              PageSize="5"
              Responsive="true"
           ShowPager="true"
    
               Resizable
             Bordered="true"
             Striped="true"
             Hoverable="true"
             >
        <DataGridColumns>
            <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
            <DataGridColumn Field="@nameof(Employee.UserGroupName)" Caption="Group Name"  />
            <DataGridColumn Field="@nameof(Employee.UserName)" Caption="Last Name"  />
            <DataGridColumn Field="@nameof(Employee.PermissionType)" Caption="Permission Type"  />
            <DataGridColumn Field="@nameof(Employee.Operation)" Caption="Operation" >
                
            </DataGridColumn>
        </DataGridColumns>
     
    </DataGrid></Div>
      @* END TRUSTED USER LIST*@
    
        </CardBody></Card>
        </Column>
        </Row>
    </Div>
    
    @code{
    
        private List<Employee> employeeList;
        private Employee selectedEmployee;
    
        protected override async Task OnInitializedAsync()
        {
            employeeList = new List<Employee>()
            {
                new Employee{ Id="1",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},
                  new Employee{ Id="2",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},
                         new Employee{ Id="3",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},
                                new Employee{ Id="4",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},
                                       new Employee{ Id="5",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},
    
           new Employee{ Id="6",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},     
           new Employee{ Id="7",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},      
           new Employee{ Id="8",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},      
           new Employee{ Id="9",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},
    
                  new Employee{ Id="10",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com",Operation="Operation"},
            };
            await base.OnInitializedAsync();
        }
    
        public class  Employee
        {
            public string Id { get; set; }
            public string UserGroupName { get; set; }
            public string UserName { get; set; }
            public string PermissionType { get; set; }
            public string Operation { get; set; }
        }
    }
Solution

  • You can use <DisplayTemplate> to customize display cells

    <DataGridColumn Field="@nameof(Employee.Operation)" Caption="Operation">
    <DisplayTemplate>
        <Dropdown>
        ...
        </Dropdown>
    </DisplayTemplate>
</DataGridColumn>

    Official documentation: https://blazorise.com/docs/extensions/datagrid/templates

    Lots of DataGrid examples here