Modifications to the default behavior in Blazor Grid

[Juan Pablo]

I have a grid that is working for me, but my Customer has a requirement pretty different to the default behavior. I'm now very pressed to perform this changes ASAP.

The grid has a checkbox column and multiselection is enabled. The user can select a row only through the checkboxes. For the sake of brevity, I'll copy here the settings.

<SfGrid @ref="Grid" DataSource="Coberturas" Width="100%"  EnablePersistence="true">
    <GridSelectionSettings Type="SelectionType.Multiple" CheckboxMode="CheckboxSelectionType.Default" CheckboxOnly="true"></GridSelectionSettings>
    <GridEditSettings AllowAdding="false" AllowDeleting="false" AllowEditing="true" AllowEditOnDblClick="false" AllowNextRowEdit="false"></GridEditSettings>

It has no toolbar. You can't add rows, nor deleting them. EnablePersistence is needed for reasons out of this question. There is a Primary Key column, but it is hidden (Visible is false). About the rest of the columns, they are text columns.

The customer has asked to change the default behavior in the following way:

• When the user clicks a checkbox, the row must both select and open for editing. 
• After changing values, the edition boxes must remain open, even if the user press Enter or clicks another row.
• If the user clicks another row, this new row must both select and open for editing. Even if it's not possible to kept the previous row with the boxes open (I'm in doubt about if this is possible in the Syncfusion grid), the previous selection must be kept. All selections must not be lost, even if the user confirms the edition or moves to another row.

I'm pretty new to Syncfusion controls and I have no idea how to perform this requirement. I suppose I must create handlers for some Grid Events (maybe RowSelected or OnRecordClick?) but I also may have to interrupt the default Selection and Editing behavior and I don't know how to do this. Because the pressure I have, any idea would be highly apprecit

[Juan Pablo]

As far as I've seen, one of the problems is that, in the Save event after editing, all of the previous rows appears as deselected. I'm tracking the selected indexes through a variable. Say I've selected three rows. Checkboxes are checked and the three rows are visibly different. I store the current state:

var SelectedRowIndexes = await this.Grid.GetSelectedRowIndexes();
        selectedArray = SelectedRowIndexes.Distinct().ToList();

Now, I pretend to edit. From the code I perform the following operations:

Grid.StartEdit();
        Grid.EndEdit();
        Grid.SelectRows(selectedArray.ToArray());

After the EndEdit() method has finished (that is, the Save event), all the previous rows looks deselected. I use SelectRows to restore and to select them again, without results. Seems SelectRows is not doing his work. 

The behaviour I'm looking for is that after EndEdit() all the formerly selected rows and checkboxes remain selected.

[Renjith Singh Rajendran]

Hi Juan, 

Greetings from Syncfusion support. 

We have achieved this requirement by using the RowSelected and OnActionComplete events of Grid. We have called the StartEdit method in RowSelected event handler to enable edit in a single click. And in the OnActionComplete event handler based on the RequestType as BeginEdit we have selected the rows. We have stored the selected rows indexes in a variable and used this indexes to select the rows during editing. We have prepared a sample based on this requirement, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-614805550 

 

Please refer the codes below, 

 

<GridEvents RowSelected="RowSelected" OnActionComplete="OnActionComplete" TValue="Order"></GridEvents>

 

public List<double> SelectIndexes = new List<double>(); 

SfGrid<Order> Grid; 

public bool flag { get; set; } = true; 

public async Task RowSelected(RowSelectEventArgs<Order> args) 

{ 

    if (flag) 

    { 

        await Grid.StartEdit(); 

        SelectIndexes.Add(args.RowIndex); 

    } 

    flag = true; 

} 

 

public async Task OnActionComplete(ActionEventArgs<Order> args) 

{ 

    if (args.RequestType.Equals(Action.BeginEdit) && SelectIndexes.Count != 0) 

    { 

        flag = false; 

        await Grid.SelectRows(SelectIndexes); 

    } 

} 

References :  

https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEdit 

https://blazor.syncfusion.com/documentation/datagrid/editing/#event-trace-while-editing 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Juan Pablo]

Thank you for the sample and explanations. 

- Clicking on a chcckbox opens the row for editing - Right!

- Clicking on another checkbox preserves the previous selections - Right!

Is there a manner to:

- Visually indicating that the current row is selected (the rows opens for editing, but the checbox is not checked, so the user thinks it's not selected)

- Closing the row after pressing the Enter key (currently, the only way for closing the edition is to click in another row)

[Renjith Singh Rajendran]

Hi Juan, 

We have modified the sample based on this scenario, please download and refer the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1551967736 

 

Please find the suggestions for the queries below, 

Query 1 : - Visually indicating that the current row is selected (the rows opens for editing, but the checbox is not checked, so the user thinks it's not selected) 

We suggest you to use the EditTemplate feature of Grid. With this we have rendered a SfCheckBox component with Checked property as true.  

 

<GridColumn Type="ColumnType.CheckBox" Width="140"> 

    <EditTemplate> 

        <SfCheckBox Checked="true"></SfCheckBox> 

    </EditTemplate> 

</GridColumn> 

Query 2 : - Closing the row after pressing the Enter key (currently, the only way for closing the edition is to click in another row) 

We have used Microsoft JSInterop to find the Enter key press in Grid’s edit form. And with this we have made customizations in RowSelected and OnActionComplete event handlers to achieve this requirement. Please refer the codes below, 

<GridEvents RowSelected="RowSelected" DataBound="Data" OnActionComplete="OnActionComplete" TValue="Order"></GridEvents>public async Task RowSelected(RowSelectEventArgs<Order> args){    await Runtime.InvokeAsync<object>("StartEditAction");    if (EnterKeyPress && SelectIndexes.LastOrDefault().Equals(args.RowIndex))    {        if (!flagSave)        {            EnterKeyPress = false;            return;        }        flagSave = false;        await Grid.SelectRows(SelectIndexes);    }    else if (!EnterKeyPress)    {        if (flag)        {            await Grid.StartEdit();            if (!SelectIndexes.Contains(args.RowIndex))                SelectIndexes.Add(args.RowIndex);        }        flag = true;    }}public bool firstrender = true;public async Task Data(){    if (firstrender)    {        var dotNetReference = DotNetObjectReference.Create(this);        await Runtime.InvokeAsync<string>("keyevent", dotNetReference);        firstrender = false;    }}public bool flagSave = false;public async Task OnActionComplete(ActionEventArgs<Order> args){    if (args.RequestType.Equals(Action.BeginEdit) && SelectIndexes.Count != 0)    {        flag = false;        await Runtime.InvokeAsync<object>("StartEditAction");        await Grid.SelectRows(SelectIndexes);    }     if (EnterKeyPress && args.RequestType.Equals(Action.Save))    {        flagSave = true;    }}public bool EnterKeyPress = false; [JSInvokable("EnterKeyPressMethod")]public async Task EnterKeyPressMethod(bool EnterKeyState)    //c# method called from JS{    EnterKeyPress = EnterKeyState;}[enterkey.js]var dotnetInstance;function keyevent(dotnet) {    dotnetInstance = dotnet; // dotnet instance to invoke C# method from here }function StartEditAction() {    var gridform = document.getElementsByClassName("e-gridform")[0];    if (gridform) {        gridform.onkeydown = function (e) {            if (e.code == "Enter") {                dotnetInstance.invokeMethodAsync('EnterKeyPressMethod', true); // call C# method from javascript function            }        }    }}

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran