JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Blazor Grid, CommandColumn icons
- This topic has 4 replies, 3 voices, and was last updated 11 months, 2 weeks ago by
svetoslav_borislavov.
-
AuthorPosts
-
September 15, 2023 at 12:47 pm #108696
oliver.aldrian
Participanthi,
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”, }
}
}
};September 15, 2023 at 1:35 pm #108697ivanpeevski
ParticipantHi 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.comSeptember 15, 2023 at 2:05 pm #108698oliver.aldrian
Participantto be curious: what is the Icon Property for, if it is not the right way to set an icon?
September 15, 2023 at 3:17 pm #108699oliver.aldrian
Participantso 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>September 18, 2023 at 2:24 am #108702svetoslav_borislavov
ParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.