Products

[TurricanDE]

You refer to this one, I guess:

https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=dynamic-columns

But in this demo you are showing all the columns and than you can remove columns or add. What if you set the grid without the column field e.g. “GDP_Total” first and then add this column later. All the cells for this added column are empty (but the data is already loaded in the data source)

And as I mentioned above there is also this strange line : grid.Columns = new List<GridColumn>() { }; //TODO: remove

[TurricanDE]

Another question from the example I mentioned above (GridDynamicColumsPage)

I didn’t understand the line in

private void AddColumn()
{

…..

grid.Columns = new List<GridColumn>() { }; //TODO: remove

….
}

When you comment out the line, now column will be added, but it should because of parameter binding.

<Grid @ref=”grid” DataSource=”dataRecords” Columns=”@columns”></Grid>

With this workaround you also lost some settings

e.g.

<Grid @ref=”grid” DataSource=”dataRecords” Columns=”@columns” Sorting=”@sorting”></Grid>

GridSorting sorting = new GridSorting { Enabled = true };

private void AddColumn()
{

GridColumn newColumn = new GridColumn(){ Label = columnsList[i], DataField = columnsList[i], SortOrder = GridColumnSortOrder.Desc };
columns.Add(newColumn);

grid.Columns = new List<GridColumn>() { }; //TODO: remove

}

This will add the column, but the sort order get lost.

 

[TurricanDE]

I could’t find a method “SortBy” (we are in Blazor)?

I could use an event callback “Sort” e.g.

private async Task Sort(Event ev)
{
GridSortEventDetail sortEventDetail = ev[“Detail”];

var sortIndex = sortEventDetail.Columns[0][“sortIndex”];

}

But the sortIndex is always “0”, but I know it must be somewhere, how does the grid know the sort index (sort indexes are shown in the columns 😉

The problem is when the user does a multiple sort and I want to save these settings there is no way to set the sort indexes correctly again.

For example we have three columns

ID [SortOrder DESC, SortIndex = 2] Name [SortOrder ASC, SortIndex = 1] Address [SortOrder ASC, SortIndex =3]

I want to set the colums array programmatically when the user chooses a specific setting. I can reproduce all sort orders for the columns but not the sort indexes

GridColumn newColumn = new GridColumn()
{
Label = …..,
SortOrder = GridColumnSortOrder.Asc,
SortIndex = …. <= I need this

}….

 

[TurricanDE]

I used the example from the GitHub repository (I’ve updated the Smart.Blazor NuGet to the current version 10.2.2)

GitHub – HTMLElements/smart-blazor: Blazor UI Components & Examples

(GridDynamicColumnsPage.razor)

There is a Id column.

Could you check this example please?

 

 

[TurricanDE]

I figured it out, you have to set the selected indexes explicitly in the event callback method:

 

private void OnSelectedIndexChanged(int[] selIndexes)
{

selectedIndexes = selIndexes;

}

 

 

[TurricanDE]

I’m using the current version 10.2.2

Should the example above display the hamburger menu button on the right of a column when you hover it?

I use the example above (change the dataservice to fetch data, but that doesn’t matter). Nothing happens.

When I set a filter in the header for a specific column, then a filter symbol is shown in that column (but I guess there should be

both buttons the filter button and the hamburger menu button?

A click on the filter button opens the column menu and if I try to resize the column, than that triggers to open up the menu again.

and it is impossible to resize the column.

It doesn’t work also in one of your blazor demos (GridColumnMenuPage.razor) for me.

Tested in Edge or Chrome.

My example:

@page “/smartdatagrid”

@using SmartUITest.Data

@inject WeatherForecastService ForecastService

<style>
body,
html,
app {
height: 100%;
}

app {
overflow: auto;
}

.content {
height: calc(100% – 70px);
}
/* This is the CSS used in the demo */
smart-grid {
width: 100%;
height: auto;
}
</style>
<div>
<h1>DataGrid Column menu</h1>
<p>
Move the cursor over a column header and click the “hamburger” menu button to open the Datagrid column menu. With that menu, you can sort, filter, edit column description and name, customize column cells alignment, group by the column. The Column menu can be customized
to fit to your web application’s needs.
</p>

@if (forecasts == null)
{
<p>Loading…</p>
}
else
{
<Grid DataSource=”@forecasts” Header=”@header” ColumnMenu=”@columnMenu” Selection=”@selection” Grouping=”@grouping”
Sorting=”@sorting” Filtering=”@filtering” Editing=”@editing” Behavior=”@behavior” Layout=”@gridLayout”>
<Columns>
<Column DataField=”Date” Label=”Date” DataType=”date” CellsFormat=”dd.MM.yyyy”></Column>
<Column DataField=”TemperatureC” Label=”TemperatureC Name” ShowDescriptionButton=”true”></Column>
<Column DataField=”TemperatureF” Label=”TemperatureF” ShowDescriptionButton=”true”></Column>
<Column DataField=”Summary” Label=”Summary” ShowDescriptionButton=”true”></Column>
</Columns>
</Grid>
}
</div>

@code
{
GridHeader header = new GridHeader()
{
Visible = true
};

GridColumnMenu columnMenu = new GridColumnMenu()
{
DataSource = new GridColumnMenuDataSource()
{
ColumnMenuItemRename = new GridCommand() { Visible = true },
ColumnMenuItemEditDescription = new GridCommand() { Visible = true },
ColumnMenuItemHide = new GridCommand() { Visible = true },
ColumnMenuItemDelete = new GridCommand() { Visible = true }
}
};

GridSelection selection = new GridSelection()
{
Enabled = true,
AllowCellSelection = true,
Mode = GridSelectionMode.Extended
};

GridGrouping grouping = new GridGrouping() { Enabled = true };

GridFiltering filtering = new GridFiltering() { Enabled = true };

GridSorting sorting = new GridSorting()
{
Enabled = true,
Mode = GridSortingMode.Many
};

GridEditing editing = new GridEditing() { Enabled = true };

GridBehavior behavior = new GridBehavior() { ColumnResizeMode = GridResizeMode.GrowAndShrink };

GridLayout gridLayout = new GridLayout() { RowHeight = 50 };

private WeatherForecast[] forecasts;

protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}

 

 

[TurricanDE]

Thank you for the quick response. Great to hear there is a fix coming.

[Author]

Posts