Blazor Grid, CommandColumn icons

[oliver.aldrian]

hi,

 

when I use the command column in a blazor grid via GridEditing some icons work, but others are not displayed.

eg:

• smart-icon-clock is displayed
• smart-icon-arrow-left is not displayed, and just blank in the rendered grid

 

Is this a bug? And if not, where can I find a list of the icons that work.

 

KR

 

code to reproduce

GridEditing GridEditing = new()
{
Mode = GridEditingMode.Cell,
Enabled = true,
CommandColumn = new GridEditingCommandColumn()
{
Visible = true,
DataSource = new GridEditingCommandColumnDataSource()
{
CommandColumnEdit = new GridCommand() { Visible = true, Command=”customEditCommand”, Icon = “smart-icon-arrow-left”,},
CommandColumnDelete = new GridCommand() { Visible = true },
CommandColumnMenu = new GridCommand() { Visible = true },
CommandColumnRowMenu = new GridCommand() { Visible = true, Icon = “smart-icon-clock”, Label = “History”, }
}
}
};

[ivanpeevski]

Hi Oliver,

 

Here is how to apply a custom icon to a command button:

.smart-grid-icon.smart-icon-arrow-left::before {
content: var(–smart-icon-arrow-left);
}

You can find all icons that display automatically in the smart.grid.css file. Search in the page for “.smart-grid-icon.smart-icon-”

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com

[oliver.aldrian]

to be curious: what is the Icon Property for, if it is not the right way to set an icon?

[oliver.aldrian]

so I added the icon here

 

CommandColumnEdit = new GridCommand() { Visible = true, Command=”customEditCommand”, Icon = “smart-icon-arrow-left”,  Label=”Verlauf”, },

 

and in the css of my project

 

.smart-grid-icon.smart-icon-arrow-left::before {
content: var(-smart-icon-arrow-left);
}

 

and I also tried

 

.smart-grid-icon.smart-icon-arrow-left::before {
content: var(–smart-icon-arrow-left);
}

 

but the icon is still not showing

 

the class seems to be applied to the div

 
<div>
<div><span title=”Verlauf” class=”smart-grid-icon smart-icon-arrow-left”></span></div>
</div>

[svetoslav_borislavov]

Hi,

The CSS style that should be added is this:

.smart-grid-icon.smart-icon-arrow-left:before {
content: var(–smart-icon-arrow-left);
}

Also, make sure that you are adding it to a place where the CSS is not scoped!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts