1. Home
  2. Forum
  3. Blazor
  4. RowSelectedEvent conflict with ContextMenuOpen

RowSelectedEvent conflict with ContextMenuOpen

Hi,

In the DataGrid component, only the Rowselected event occurs when we use the RowSelected and ContextMenuOpen events.

I want to enable or disable the controls I designed per click on each row of the Datagrid, and I also need the ContextMenu.

Thank you


22 Replies
JP Jeevakanth Palaniappan Syncfusion Team November 19, 2021 06:24 AM UTC

Hi Sarah, 

Greetings from Syncfusion support. 

We have validated your query and we suspect that when opening the contextmenu, you are reporting that only RowSelected event gets triggered and the ContextMenuOpen event is not triggered. Is this the problem you are reporting? If so we  would like to inform you that to open context menu, the row will be first selected and based on the row selection only, we will handle the context menu. This is the default behavior of the grid. 



Incase if we misunderstood your query then kindly share us the below details, 

  1. Share us the Syncfusion NuGet version details.
  2. Share us more information on the problem you are facing.
  3. Kindly share us the video demo showing the problem you are facing.

The above requested details will be helpful for us to validate your query and to provide you with a better solution as early as possible. 

Regards, 
Jeevakanth SP. 


SA Sarah November 20, 2021 05:58 PM UTC

Hi Jeevakanth Palaniappan,

Share us the Syncfusion NuGet version details.

I have downloaded latest trial version from Nuget

Share us more information on the problem you are facing

In the Datagrid Toolbar, I needed to set styles such as icons, titles, fonts, text colors, background colors, etc., which apparently had some limitations, so I created the my toolbar. The buttons in the my toolbar must be activated or deactivated based on the selected row. On the other hand, I use the context menu for other purposes.

Thank you for the sample sent, and this sample caused me to change the source code as follows, and this method apparently fixed the bug.

1-Source Code:

 <GridEvents RowSelected="RowSelected"  TValue="Users"></GridEvents> 

 <GridEvents ContextMenuOpen="ContextMenuOpened"  TValue="Users"></GridEvents> 

 <GridEvents  ContextMenuItemClicked="ContextMenuItemClickedHandler" TValue="Users"></GridEvents> 

2-Modified source code:

 <GridEvents RowSelected="RowSelected" ContextMenuOpen="ContextMenuOpened" ContextMenuItemClicked="ContextMenuItemClickedHandler" TValue="Global_Users"></GridEvents>  



For example, in the last sample I checked, I put a DataGrid with search toolbax, but I encountered this error when searching.

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

Unhandled exception rendering component: Object reference not set to an instance of an object.

System.NullReferenceException: Object reference not set to an instance of an object.

..

Thank you

 



JP Jeevakanth Palaniappan Syncfusion Team November 22, 2021 07:14 AM UTC

Hi Sarah, 
 
We have checked your query and found that you are facing problem while searching in grid. We have tried to reproduce the reported problem in the WASM application in our latest NuGet version but unfortunately we are unable to reproduce the reported problem from our end. We have attached the video demo and the sample for your reference. Please find it below. 
 
  1. Kindly share us the complete grid code with your model class and datasource.
  2. Kindly share us the runnable issue reproducing sample or reproduce the issue in the above provided sample.
The above requested details will be helpful for us to validate your query and to provide you with a better solution as early as possible. 
 
Regards, 
Jeevakanth SP. 


SA Sarah November 22, 2021 08:12 AM UTC

Hi Jeevakanth Palaniappan,

I spent a lot of time searching for error in the Datagrid and found the cause of the error. I had made the data source one of the database models that was related to other models. I used DTO for data source for testing and the bug was fixed. Is it not possible to use models related to other models as data sources?

Another question is that When a user uses theme High Contrast in Windows, when he selects the Datagrid row, there is no symbol indicating the row selected by the user. For example, in some softwares, a more colorful border is placed around the selected row or the background color of the selected row changes.

Another question is that I used the ‍contextmenu in the Datagrid component and added a Custom item. Is it not possible to style items? For example, change the color of the icon.


Thank you for posting


JP Jeevakanth Palaniappan Syncfusion Team November 23, 2021 02:44 PM UTC

Hi Sarah, 

Query : Is it not possible to use models related to other models as data sources? 
 
We would like to inform you that the grid is a strongly typed component so you have to use the same model for both datasource and gridcolumn fields. 
 
Query : When a user uses theme High Contrast in Windows, when he selects the Datagrid row, there is no symbol indicating the row selected by the user 
 
We are currently validating the reported problem and so we will update the further details in two business days. Until then we appreciate your patience. 
 
Query : I used the ‍contextmenu in the Datagrid component and added a Custom item. Is it not possible to style items? 
 
We suggest you to override the styles based on your scenario as like in the below code. 
 
 
<SfGrid Toolbar=@(new List<string>(){"Search"}) DataSource="@Orders" AllowSorting="true" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" ContextMenuItems="@(new List<Object>() { "Copy", new ContextMenuItemModel { Text = "Copy with headers", Target = ".e-content", Id = "copywithheader" } })"> 
 
<style> 
    #copywithheader{ 
    background-color: blue; 
    } 
</style> 
 
 
Regards, 
Jeevakanth SP 
 


JP Jeevakanth Palaniappan Syncfusion Team November 25, 2021 08:51 AM UTC

Hi Sarah, 

Query : When a user uses theme High Contrast in Windows, when he selects the Datagrid row, there is no symbol indicating the row selected by the user  
 
Thanks for your patience. 
 
We have validated your query and we would like to inform you that if you refer high contrast theme for the grid then when you select a row, the corresponding row background will be changed. Please refer the below screenshot for your reference. 
 
 
Host.cshtml 
<head> 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/highcontrast.css" rel="stylesheet" /> 
</head> 
 

 
But if you turn on the Windows High Contrast theme, then the browser is overriding the grid theme. To resolve this, you have to change the browser settings. We found a stackoverflow link and the solution is working. So we suggest you to refer the below stackoverflow link for your reference. 

Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 



SA Sarah replied to Jeevakanth Palaniappan November 27, 2021 06:22 AM UTC

Hi Jeevakanth Palaniappan,


We would like to inform you that the grid is a strongly typed component so you have to use the same model for both datasource and gridcolumn fields.

Yes you are right


We suggest you to override the styles based on your scenario as like in the below code.

I checked the link. Is it possible to change the color of the icon (example: IconCss="fa fa-plus ")? 


We have validated your query and we would like to inform you that if you refer high contrast theme for the grid then when you select a row, the corresponding row background will be changed. Please refer the below screenshot for your reference.


Thank you so much .

I saw a case in Microsoft Excel . In Excel software, when the Windows theme is high contrast, it puts a border for the selected cell. It would be great if we could have such a feature in the Datagrid.



JP Jeevakanth Palaniappan Syncfusion Team November 29, 2021 12:18 PM UTC

Hi Sarah, 

Please find the details of your queries below. 

Query: Is it possible to change the color of the icon 
 
We have validated your query and we suggest you to override the corresponding icon class by using the below code snippet. Also we suggest you to refer the below documentation to override the grid styles. 
 
 
<style> 
    span.e-menu-icon.e-icons.e-copy{ 
    color: blue; 
    } 
</style> 


 


Query : I saw a case in Microsoft Excel . In Excel software, when the Windows theme is high contrast, it puts a border for the selected cell. It would be great if we could have such a feature in the Datagrid. 
 
We would like to inform you that based on SelectionMode, the row/cell will be selected in the grid and if you navigate the cells, then the focus will be set to the corresponding cells like a box. So we suggest you to use any of the below suggestions based on your scenario. 

Row Selection: 
 


Cell Selection 
 

AutoFill 

 

Regards, 
Jeevakanth SP. 


SA Sarah replied to Jeevakanth Palaniappan December 4, 2021 06:14 AM UTC

Hi Jeevakanth Palaniappan,

In the last answer:

We would like to inform you that based on SelectionMode, the row/cell will be selected in the grid and if you navigate the cells, then the focus will be set to the corresponding cells like a box. So we suggest you to use any of the below suggestions based on your scenario. 

I checked the suggested items, but unfortunately these items in the case that Windows user is in high contrast mode and the user selects a cell or row, there is no symbol such as border or background, etc. that the user can understand which row or cell he has selected Is.

Thank you


JP Jeevakanth Palaniappan Syncfusion Team December 6, 2021 10:38 AM UTC

Hi Sarah, 

We have validated your scenario but unfortunately we are unable to reproduce the reported problem from our end. We have used the highcontrast theme for both grid and windows. Please find the below sample and the video demo for your reference. 


To set Highcontrast theme for grid: 
 

Incase if you are still facing the problem then kindly share us the below details. 

  1. Have you changed the browser settings as said in the below link?
  1. Kindly reproduce the reported problem in the above provided sample.
  2. Kindly share us a video demo showing the problem you are facing.

The above requested details will be helpful for us to validate your query and to provide you with a better solution as early as possible.  
  
Regards,  
Jeevakanth SP. 


SA Sarah December 11, 2021 09:05 AM UTC

Hi Jeevakanth Palaniappan,

Yes, you are right and thank you for your time. The point I have to make is that we can not ask the user to change the browser settings. I thought it could be done without browser settings.

Is there a row header for the data grid to display the row number on? If this feature exists, we can give a special style to the row number per user click on a specific row, such as under row, etc., so that the user notices the clicked row.

Thank you.


JP Jeevakanth Palaniappan Syncfusion Team December 13, 2021 11:25 AM UTC

Hi Sarah, 

We have checked your query and we would like to inform you that if you apply/customize styles for the grid or any HTML element without changing the browser settings then it is not applying in the UI. You can see the below screenshot. In the first screenshot, we set background color for the button as yellow and we didn’t set windows highcontrast theme. Now the background color is properly visible in the UI. But when we set windows highcontrast theme, then the button background is not visible in the UI. So we suspect that without changing browser settings, it is not possible to achieve your scenario by customizing styles for the elements. 

We have attached the validated sample for your reference below, 

Without windows High contrast theme: 

 


With windows High contrast theme: 

 

Regards, 
Jeevakanth SP. 


SA Sarah December 13, 2021 11:44 AM UTC

Hi Jeevakanth Palaniappan,

Yes you are right. Do you think that the way I suggested is not appropriate? Forget the style method

After the user selects a row, place a character like * in the row header that represents the selected row. A similar method is to add a checkbox column. User By selecting a row we make the value of the same row true

Thank you


JP Jeevakanth Palaniappan Syncfusion Team December 14, 2021 06:09 AM UTC

Hi Sarah, 

We already have checkbox selection feature. On clicking the row, the checkbox will be selected/deselected. Please refer the below documentation and the demo link for your reference. 


Get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


SA Sarah December 14, 2021 07:38 AM UTC

Hi  Jeevakanth Palaniappan,

very good. Unfortunately, I did not see this feature. In the grid, I want the user to select a maximum of one row. I used the following settings, but the user can select more than one row by clicking on the checkboxes . Also, the user can not select more than one row with the mouse by holding down the ctrl key.

 <GridSelectionSettings CheckboxOnly="false" PersistSelection="false" Mode="SelectionMode.Row" CheckboxMode="CheckboxSelectionType.ResetOnRowClick" EnableSimpleMultiRowSelection="false" Type="Syncfusion.Blazor.Grids.SelectionType.Single" ></GridSelectionSettings>


Thank you


JP Jeevakanth Palaniappan Syncfusion Team December 15, 2021 12:35 PM UTC

Hi Sarah, 

We have validated your query and found that you want to select only one row at a time. So we suggest you to clear the previously selected records in the RowSelecting event by using the ClearSelectionAsync method. Please refer the below code snippet for your reference. 

@using Syncfusion.Blazor.Grids 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" AllowPaging="true"> 
     <GridSelectionSettings  Mode="SelectionMode.Row" 
CheckboxMode="CheckboxSelectionType.ResetOnRowClick"  
Type="Syncfusion.Blazor.Grids.SelectionType.Single" ></GridSelectionSettings> 
<GridEvents RowSelecting="RowSelectingHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    SfGrid<Order> Grid { get; set; } 
    public async Task RowSelectingHandler(RowSelectingEventArgs<Order> args) 
    { 
        await Grid.ClearSelectionAsync();         
    } 
 
    protected override void OnInitialized() 
    { 
        Orders = Enumerable.Range(1, 75).Select(x => new Order() 
        { 
            OrderID = 1000 + x, 
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], 
            Freight = 2.1 * x, 
            OrderDate = DateTime.Now.AddDays(-x), 
        }).ToList(); 
    } 
 
    public class Order { 
        public int? OrderID { get; set; } 
        public string CustomerID { get; set; } 
        public DateTime? OrderDate { get; set; } 
        public double? Freight { get; set; } 
    } 
} 

Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


SA Sarah December 22, 2021 09:57 AM UTC

Hi  Jeevakanth Palaniappan,

Thank you for the code you provided. The bug was fixed. There is a small error. When the user clicks on the checkbox in the column header, it is possible to select all rows.

Thank you




JP Jeevakanth Palaniappan Syncfusion Team December 23, 2021 10:49 AM UTC

Hi Sarah, 

We have validated your query and on clicking the checkbox at the header, we are able to select all the records. Also incase if you have selected a record and then clicking on the header checkbox, it will clear the selection. If you  again click the header checkbox, then it will select all the records. This is the default behavior of the checkbox selection. Please find the validated sample and the video demo for your reference. 


Get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


SA Sarah replied to Jeevakanth Palaniappan December 23, 2021 05:16 PM UTC

Hi  Jeevakanth Palaniappan,

Thank you for the video you provided. Is it not possible to prevent the selection of all rows? For example, hide or disable the checkbox header so that not all rows can be selected

Thank you


JP Jeevakanth Palaniappan Syncfusion Team December 27, 2021 09:49 AM UTC

Hi Sarah, 

We suggest you to use empty HeaderTemplate in the GridColumn to achieve your requirement. Please find the below code snippet and the sample for your reference. 

@using Syncfusion.Blazor.Grids  
  
<SfGrid @ref="Grid" DataSource="@Orders" AllowSelection="true" AllowPaging="true">  
     <GridSelectionSettings  Mode="SelectionMode.Row"  
CheckboxMode="CheckboxSelectionType.ResetOnRowClick"   
Type="Syncfusion.Blazor.Grids.SelectionType.Single" ></GridSelectionSettings>  
<GridEvents RowSelecting="RowSelectingHandler" TValue="Order"></GridEvents>  
    <GridColumns>  
        <GridColumn Type="ColumnType.CheckBox" Width="50"> 
            <HeaderTemplate>                 
            </HeaderTemplate> 
        </GridColumn>  
    </GridColumns>  
</SfGrid> 



Regards, 
Jeevakanth SP. 


SA Sarah replied to Jeevakanth Palaniappan May 22, 2022 09:37 AM UTC

Hi Jeevakanth Palaniappan,


I upgraded to version 20.1.0.56 , but despite the highlighted lines below, the data is no longer displayed in the DataGrid , and when I delete these lines, the data is displayed.


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

            <HeaderTemplate>                 
            </HeaderTemplate> 
        </GridColumn>  

 @foreach (var col in lstSource)

        {

//add column

        }


Thank you




MS Monisha Saravanan Syncfusion Team May 23, 2022 01:11 PM UTC

Hi Sarah,


Thanks for the update.


We have checked your query and we are quite unclear about the exact issue you are facing. So kindly share the below kindly share the below details to validate the issue further from our end.


  1. Share us the entire Grid code snippet along with model class.
  2. Share us whether you are facing issue with checkbox column or other columns.
  3. Share us whether you have used persistence in DataGrid.
  4. Share us the video demonstration of the issue.
  5. If possible share us the simple issue reproduceable sample or try to reproduce the issue on the  mentioned sample.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11956053010.zip


The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.


Regards,

Monisha



Loader.
Up arrow icon