Forums Home / ComponentOne / Blazor Edition
Posted by: pkillick on 26 January 2023, 7:17 am EST
pkillick
Posted 26 January 2023, 7:17 am EST
I’m using in Flex grid. Is there an event or Razor parameter that will tell me when any of the item selections change? The existing SelectionChanged and related properties and events appear to be for the cell/column/row style of selection only.
manish.gupta
Posted 30 January 2023, 5:47 am EST
Hi,
Thank you for your patience, by default there is no such event, we are investigating on this and we will update you soon on this.
Regards,
Manish Gupta
ankit.kumar
Posted 31 January 2023, 5:08 am EST
Hi Paul,
When the CheckList is checked or unchecked, there is no event by default. However, you could customise the Grid Column and use the C1CheckBox for your custom column for your use case.
Create a Custom Column that inherits the GridColumn Class, then overwrite the “GetCellContentRenderFragment” method to use the C1CheckBox instead of a Text Editor. Bind the C1CheckBox’s “IsCheckedChanged” property and use the EventCallBack to pass the checked/unchecked status from the C1CheckBox to the Grid.
Please see the attached sample and the code below to see how this is done:
public class CustomCheckBoxColumn : GridColumn
{
[Parameter]
public EventCallback<bool> OnCheckedChange { get; set; }
protected override RenderFragment GetCellContentRenderFragment(GridCellType cellType, GridRow row)
{
if (cellType == GridCellType.Cell)
{
return new RenderFragment(builder =>
{
var value = Grid[row, this];
builder.OpenComponent<C1CheckBox>(0);
builder.AddAttribute(2, nameof(C1CheckBox.IsCheckedChanged), new EventCallback<bool?>(null, CheckedChanged));
builder.CloseComponent();
});
}
return base.GetCellContentRenderFragment(cellType, row);
}
private async void CheckedChanged(bool e)
{
await OnCheckedChange.InvokeAsync(e);
}
}
You may download the sample using the following link: https://drive.google.com/file/d/1p0wppX2oUM9XfIwhByrZpt4yY3LABAkG/view?usp=share_link
References:
GridColumn Class: https://www.grapecity.com/componentone/docs/blazor/online-blazor/C1.Blazor.Grid~C1.Blazor.Grid.GridColumn.html
IsCheckedChanged Property: https://www.grapecity.com/componentone/docs/blazor/online-blazor/C1.Blazor.Core~C1.Blazor.Core.C1CheckBox~IsCheckedChanged.html
GridColumnCustomization Demo: https://www.grapecity.com/componentone/demos/blazor/blazorexplorer/FlexGrid/CustomDropDownColumn
Regards,
Ankit
daniel.koffler
Posted 5 April 2023, 7:42 pm EST - Updated 5 April 2023, 7:44 pm EST
How can I find out for which row CheckedChanged() was called? The underlying data object has a property “IsSelected”. I would like to update it if checkbox is checked/unchecked.
ankit.kumar
Posted 11 April 2023, 9:26 pm EST - Updated 11 April 2023, 9:31 pm EST
Hi Daniel,
By default, there is no event for checked/unchecked action of the checkbox. However, you could create your own custom Column and check if the checkbox has been checked/unchecked.
To get the rowIndex for which the check operation was performed, while defining the CellContent’s RenderFragement, you could add unique attribute to the custom checkbox, that can be used to check the row index.
Following the above sample that I shared, I have made the following modifications to get the RowIndex:
protected override RenderFragment GetCellContentRenderFragment(GridCellType cellType, GridRow row)
{
if (cellType == GridCellType.Cell)
{
return new RenderFragment(builder =>
{
var value = Grid[row, this];
builder.OpenComponent<C1CheckBox>(0);
builder.AddAttribute(2, nameof(C1CheckBox.IsCheckedChanged), new EventCallback<bool?>(null, CheckedChanged));
builder.AddAttribute(3, "class", $"cbx-row-{row.Index}");
builder.CloseComponent();
});
}
return base.GetCellContentRenderFragment(cellType, row);
}
let isEventHandlerPresent = false;
window.addClickHandler = function () {
let flexGridContainerElement = document.getElementById("flexgrid-container");
if (flexGridContainerElement && !isEventHandlerPresent) {
isEventHandlerPresent = true;
flexGridContainerElement.addEventListener("click", function (ev) {
let item = ev.target;
for (var i = 0, l = item.classList.length; i < l; ++i) {
if (/cbx-row-.*/.test(item.classList[i])) {
checkedHandler(item)
break;
}
}
})
}
}
checkedHandler = function (element) {
let rowIndex = element.classList[0].split('-')[2];
if (element.checked) {
console.log("Checked: " + "Row: " + rowIndex);
} else {
console.log("Unchecked: " + "Row: " + rowIndex);
}
}
You could update your object property upon getting the row index.
Please refer to the attached sample and let us know if you face any problems.
Regards,
Ankit
Sample: FlexGrid_CheckList.zip
daniel.koffler
Posted 15 April 2023, 6:42 pm EST
Thanks
