JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Grid Re-render
Tagged: blazor grid
- This topic has 10 replies, 3 voices, and was last updated 1 year ago by svetoslav_borislavov.
-
AuthorPosts
-
September 14, 2023 at 5:35 pm #108682FerrisChampParticipant
I am trying to re-render my grid. I used both grid.Refresh(); and grid.Render(); but neither seem to be working. Is there something else I am supposed to do to re-render the grid?
September 14, 2023 at 7:28 pm #108683FerrisChampParticipantAlternatively is there a way to freeze/unfreeze columns dynamically without refreshing the grid?
September 15, 2023 at 9:29 am #108686svetoslav_borislavovParticipantHi,
What are you trying to achieve and face problems with the re-rendering?
To freeze and unfreeze a column, you can use the setColumnProperty.Example:
const grid = document.querySelector(‘smart-grid’);
grid.setColumnProperty(“firstName”,”freeze”,true);Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/September 18, 2023 at 2:28 pm #108706FerrisChampParticipantHi,
I am trying to freeze/unfreeze columns dynamically. My issue is that all my columns are in groups from what I test you can’t seem to freeze a column in a group unless you freeze the entire group. My idea was to temporary create a “Frozen” group for all the items need to be frozen. However, the html doesn’t seem to be running again when I call grid.Render() thus I can’t refresh the grid to show the updated frozen columns. I put a break point in the html but it doesn’t hit it even when grid.Render() or grid.Refresh() is called.
<Columns>
@foreach (var column in Document.DocumentFields)
{
if(frozenColumns.Contains(column.FieldName))
{
<Column DataField=”@column.FieldName” Label=”@column.AliasName” ColumnGroup=”Frozen” Freeze=”near”
ValidationRules=”@column.DataType.ValidationRules” DataType=”@column.DataType.GetSmartType()” Width=”100″>
</Column>
}
else
{
<Column DataField=”@column.FieldName” Label=”@column.AliasName” ColumnGroup=”@column.GroupName”
ValidationRules=”@column.DataType.ValidationRules” DataType=”@column.DataType.GetSmartType()” Width=”100″>
</Column>
}
}
</Columns>- This reply was modified 1 year ago by FerrisChamp.
September 18, 2023 at 3:54 pm #108709svetoslav_borislavovParticipantHi,
Could you try setting the columns via the Columns property, not with the HTML?
Please, see this example to see how:
https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=dynamic-columnsBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/September 18, 2023 at 9:46 pm #108711FerrisChampParticipantHi,
Thanks to that I was able to solve my problem mostly. However now, when I try to unfreeze a column, the header unfreezes but the cells remain frozen until I freeze a new column.
Thank you,
FerrisSeptember 19, 2023 at 7:02 am #108713svetoslav_borislavovParticipantHi,
May you share your component?
The following function correctly freezes and unfreezes the column:
private void handleClick()
{
gridColumns[0].Freeze = gridColumns[0].Freeze == “near” ? “false” : “near”;
}Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/September 19, 2023 at 1:50 pm #108717FerrisChampParticipantThis is how I am freezing and unfreezing the columns. I also tried to attach an image of my issue, but I am not sure it attached properly.
GridColumn column = columns.SingleOrDefault(x => x.DataField.Equals(columnName));
column.ColumnGroup = “Frozen”;
column.Freeze = “near”;GridColumn column = columns.SingleOrDefault(x => x.DataField.Equals(frozenColumn));
column.ColumnGroup = fieldToGroup[frozenColumn];
column.Freeze = “false”;https://drive.google.com/file/d/15STQmJUqb2pj89Qd1hBnXODfEm28IYA-/view?usp=sharing
- This reply was modified 1 year ago by FerrisChamp.
- This reply was modified 1 year ago by FerrisChamp.
- This reply was modified 1 year ago by FerrisChamp.
September 19, 2023 at 4:22 pm #108725ivanpeevskiParticipantHi Ferris,
Can you please make sure you are using the latest version of Smart.Blazor? If yes, please also share all properties you have set to the Grid.
In the example below you can see that the code you shared should be working correctly:
@page “/”
<Grid @ref=”grid” DataSource=”@Clients” ColumnGroups=”@columnGroups”>
<Columns>
<Column DataField=”Name” Label=”Client Name” ColumnGroup=”Details”></Column>
<Column DataField=”Balance” Label=”Acccount Balance” DataType=”number”
ColumnGroup=”Details”></Column>
<Column @ref=”cityColumn” DataField=”City” Label=”City” ColumnGroup=”Address”></Column>
<Column DataField=”Country” Label=”Country”
ColumnGroup=”Address”></Column>
<Column DataField=”LastOrder” Label=”Last Order” DataType=”date” CellsFormat=”dd/MM/yyyy”
Align=”HorizontalAlignment.Center”></Column>
</Columns>
</Grid><Button OnClick=”FreezeColumn”>Freeze City</Button>
<Button OnClick=”UnfreezeColumn”>Unfreeze City</Button>@code{
Grid grid;
Column cityColumn;private void FreezeColumn()
{
cityColumn.ColumnGroup = “Frozen”;
cityColumn.Freeze = “near”;
}private void UnfreezeColumn()
{
cityColumn.ColumnGroup = “Address”;
cityColumn.Freeze = “false”;
}class Client
{
public string Name { get; set; }
public double Balance { get; set; }
public string City { get; set; }
public string Country { get; set; }
public DateTime LastOrder { get; set; }public Client(string name, double balance, string city, string country, DateTime lastOrder)
{
Name = name;
Balance = balance;
City = city;
Country = country;
LastOrder = lastOrder;
}
}
Client[] Clients = new Client[]
{
new Client(“Maria Anders”,130.00,”Berlin”, “Germany”, DateTime.Now),
new Client(“Ana Trujillo”,230,”Mxico D.F.”, “Mexico”, DateTime.Now),
new Client(“Antonio Moreno”,-3500,”Mxico D.F.”, “Mexico”, DateTime.Now),
new Client(“Thomas Hardy”,55,”London”, “UK”, DateTime.Now),
};List<GridColumnGroup> columnGroups = new List<GridColumnGroup>()
{
new GridColumnGroup()
{
Label = “Customer Details”,
Align = HorizontalAlignment.Center,
Name = “Details”
},
new GridColumnGroup()
{
Label = “Customer Address”,
Align = HorizontalAlignment.Center,
Name = “Address”
},
new GridColumnGroup()
{
Label = “Frozen”,
Align = HorizontalAlignment.Center,
Name = “Frozen”
}
};
}Best Regards,
Ivan PeevskiSmart UI Team
https://www.htmlelements.com/September 20, 2023 at 5:17 pm #108737FerrisChampParticipantHi,
I updated to the latest version, but it still wasn’t working. However, I ended up getting it to work by calling
grid.StateHasChanged();
await Task.Delay(1);
grid.Render();These are my grid properties just in case. Thank you so much for your help!
<Grid @ref=”grid” id=”io-page-grid” DataSource=”@expandoAssets” Appearance=”@appearance” Selection=”@selection” Header=”@header”
Grouping=”@grouping” ColumnGroups=”@columnGroups” Behavior=”@behavior” OnCommand=”@OnCommand” Columns=”columns” Layout=”@gridLayout”
Editing=”@editing” OnEndEdit=”@EditRow” OnRowRemoved=”@RemoveRow” ColumnMenu=”@columnMenu” Messages=”@columnMenuMessages”>
</Grid>GridAppearance appearance = new GridAppearance() { ShowColumnGroupsInColumnPanel = true, ShowRowHeaderNumber = true, ShowColumnIcon = true };
GridSelection selection = new GridSelection() { Enabled = false };
GridBehavior behavior = new GridBehavior() { AllowColumnReorder = true, AllowColumnFreeze = true };
GridGrouping grouping = new GridGrouping() { Enabled = true, GroupIndent = 0, SummaryRow = new GridGroupingSummaryRow() { Visible = false } };
GridHeader header = new GridHeader() { Visible = true, Buttons = new string[] { “search”, “format” } };
GridLayout gridLayout = new GridLayout() { ColumnWidth = “auto”, RowHeight = “auto” };GridEditing editing = new GridEditing()
{
Enabled = true,
Mode = GridEditingMode.Cell,
CommandColumn = new GridEditingCommandColumn()
{
Visible = true,
DataSource = new GridEditingCommandColumnDataSource()
{
CommandColumnCustom = new GridCommand()
{
Icon = “smart-icon-star”,
Command = “notify”,
Visible = true,
Label = “Notify Me”
}
}
}
};GridColumnMenu columnMenu = new GridColumnMenu()
{
Enabled = true,
DataSource = new GridColumnMenuDataSource()
{
ColumnMenuCustomizeType = new GridCommand() { Visible = true },
ColumnMenuItemHide = new GridCommand() { Visible = true },
ColumnMenuItemDelete = new GridCommand() { Visible = true },
ColumnMenuItemGroupBy = new GridCommand() { Visible = false }
}
};Dictionary<string, object> columnMenuMessages = new()
{
{
“en”, new Dictionary<string, object>()
{
{“columnMenuCustomizeType”, “Edit Column” },
{“columnMenuItemHide”, “Option B” },
{“columnMenuItemDelete”, “Option C” }
}
}
};September 21, 2023 at 5:54 am #108739svetoslav_borislavovParticipantHi,
Thank you for the update, if you have any additional questions, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.