Grid Re-render

[FerrisChamp]

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?

 

[FerrisChamp]

Alternatively is there a way to freeze/unfreeze columns dynamically without refreshing the grid?

[svetoslav_borislavov]

Hi,

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 Borislavov

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

[FerrisChamp]

Hi,

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, 2 months ago by FerrisChamp.

[svetoslav_borislavov]

Hi,

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-columns

Best Regards,
Svetoslav Borislavov

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

[FerrisChamp]

Hi,

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,
Ferris

[svetoslav_borislavov]

Hi,

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 Borislavov

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

[FerrisChamp]

This 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, 2 months ago by FerrisChamp.
• This reply was modified 1 year, 2 months ago by FerrisChamp.
• This reply was modified 1 year, 2 months ago by FerrisChamp.

[ivanpeevski]

Hi 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 Peevski

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

[FerrisChamp]

Hi,

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” }
}
}
};

[svetoslav_borislavov]

Hi,

Thank you for the update, if you have any additional questions, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[Author]

Posts