1. Home
  2. Forum
  3. Blazor
  4. Grid is not allowing editing

Grid is not allowing editing

I am loading my grid data from json file but I want to be able to edit the data in the grid. I have a boolean property in my class and I am representing that as a checkbox. I want to be able to edit this boolean property but the column does not allow editing even though I set the AllowEditing property to true. Is there something I need to do to my class to allow editing?

17 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team September 22, 2020 12:24 PM UTC

Hi Jim, 

Greetings from Syncfusion support. 

We tried to reproduce the reported problem by creating a sample based on this scenario. But we are not able to face the reported problem. We are able to edit a Boolean value column in Grid. We are attaching the sample for your reference. Please download the sample form the link below, 
 
Please refer the Boolean value column code below, 

 
<GridColumn Field="Verified" HeaderText="Verified" Type="ColumnType.Boolean" DisplayAsCheckBox="true" EditType="EditType.BooleanEdit"></GridColumn> 



Please refer the above sample and documentation. And if you are still facing difficulties, then the following details would be helpful for us to proceed further. 
  1. Share the sample which you have tried from your side. This would be helpful for us to validate the problem based on your scenario.
  2. Share the details of exception/error if any occurred while editing Grid.
  3. Share the video demo showing the problem you are facing.
  4. Share the exact scenario or proper replication procedure.
  5. Or if possible reproduce the problem with the attached sample and share with us for further analysis.

And also we suggest you to bind the “OnActionFailure” event to Grid. This event will be triggered for every failure in Grid. Please share the details you get in the “args” of this event handler for further analysis. 

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran 


Marked as answer
JY Jim Young September 23, 2020 02:36 AM UTC

Thank you for your reply. Using the sample code I was able to get editing to work with my grid. 

One issue - I would like to be able to edit without having to use a toolbar. In other words, if a row is selected then it will automatically go into edit mode.

I want the user to be able to check and uncheck a checkbox column with out having to constantly navigate to the toolbar.

RS Renjith Singh Rajendran Syncfusion Team September 23, 2020 09:24 AM UTC

Hi Jim, 

Thanks for your update. 

Based on this scenario, we have achieved single click editing in Grid by using the StartEdit method of Grid in RowSelected event handler. We have prepared a sample based on this scenario, please download the sample form the link below, 
 
Please refer the codes below, 

<GridEvents OnRecordClick="OnRecordClick" RowSelected="RowSelected" TValue="Player"></GridEvents>
 
public bool flag = false; 
SfGrid<Player> Grid { get; set; } 
... 
public void OnRecordClick(RecordClickEventArgs<Player> args) 
{ 
    flag = true; 
} 
public void RowSelected(RowSelectEventArgs<Player> args) 
{ 
    if (flag) 
    { 
        Grid.StartEdit(); 
        flag = false; 
    } 
} 



Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


JY Jim Young September 24, 2020 02:49 AM UTC

Thanks for the reply. This is very close to the behavior I need. But, I'm encountering a problem where only the first row I click on is editable. Clicking on any other row after the first one does not activate editing. 

After the first time a row is click the StartEdit() is called and then an exception is thrown. Attached is the stack dump of the exception. I am using Syncfusion.Blazor 18.2.0.54

Attachment: StartEditException_91ee83ad.zip

RS Renjith Singh Rajendran Syncfusion Team September 24, 2020 12:55 PM UTC

Hi Jim, 

Thanks for your update. 

Based on this scenario, we have prepared a wasm application to perform single click edit action in Grid. Please download the sample from the link below, 
 
We would like to inform you that, we have included several bug fixes with our latest release versions. So, we recommend you to upgrade to our latest version 18.2.0.59, for latest bug fixes and features. We have also prepared the above attached sample with our latest version.  

In the above sample we have added the below codes additional to the sample shared from previous update. We have used Microsoft JsInterop to bind click event for Grid and called the blur() method based on target. We have used the Created event of Grid to invoke the JS method. Please refer the codes below, 

[singleedit.js] 
 
function singleedit() { 
    document.getElementById("Grid").addEventListener("click", function (e) { 
        if (e.target.tagName == "TD") { 
            e.target.blur(); 
        } 
    }); 
} 

<GridEvents Created="Created" OnRecordClick="OnRecordClick" RowSelected="RowSelected" TValue="Order"></GridEvents>
public void Created(){    IJSRuntime.InvokeAsync<object>("singleedit");}


And also, we would like to inform you that, the shared exception occurred due to @onblur event of Blazor and it’s not related to Syncfusion components alone, it is a Framework issue. Please find the below Github issue which is reported by Blazor team.  

Also above error will not affect the default functionality of Grid Editing. Please get back to us if you have further queries.      

Regards,  
Renjith Singh Rajendran 


JY Jim Young September 24, 2020 11:12 PM UTC

Thank you for your reply. I implemented the changes you described and I am still getting the exception, and I am still only able to edit the first row that is selected.

I have also noticed that with Syncfusion framework 18.2.0.59 that clicking the dropdown arrow on the master row of a master-detail grid no longer fires the RowSelected event for the master row. Only when the contents of the master row are selected is the event fired. In my application it is important that if the grid with the detail is dropped down that some code is executed. I had to move that call to the DetailDataBound handler for the grid.

RS Renjith Singh Rajendran Syncfusion Team September 28, 2020 01:58 PM UTC

Hi Jim, 

Thanks for your update. 

Query 1 : and I am still only able to edit the first row that is selected. 
We tried to reproduce the reported problem by adding Detail Row in Grid with our sample form previous update. But we could not face the reported problem, we are able to edit both the rows in Grid and perform update action in Grid. We are attaching the sample which we have tried for your reference, please download the sample from the link below, 
 
Kindly refer the above attached sample. And if you still face difficulties, then the following details would be helpful for us to proceed further. 
  1. Share the complete details of the exception your are facing.
  2. Share your complete Grid rendering codes. We need to analyze the properties you have enabled in Grid.
  3. Share the Grid model class codes.
  4. Share the video demo showing the problem you are facing.
  5. If possible, share the with us an issue reproducing sample or reproduce the problem with the attached sample and share with us for further analysis.
  6. Share the exact scenario you are facing the reported problem.
 
Query 2 : I had to move that call to the DetailDataBound handler for the grid. 
Yes, the DetailDataBound event of Grid will be triggered each time you click the expand row icon in Grid row. You can use this event to execute the code you need when expanding the detailed row in Grid. Please refer the documentation below, 

Regards, 
Renjith Singh Rajendran 


JY Jim Young September 30, 2020 12:02 AM UTC

I have the source code for the project in Github


You should be able to reproduce the error from it.

RS Renjith Singh Rajendran Syncfusion Team September 30, 2020 04:52 PM UTC

Hi Jim, 

Thanks for sharing the sample. 

We suggest you to ensure to set the IsPrimaryKey to an unique value column in Grid to perform editing in Grid. To perform editing in Grid, it is a must to set IsPrimaryKey for an unique value column. Please refer the below documentation and codes for more details. 

Please add the below highlighted code in your application to overcome the reported problem. 

<DetailTemplate>   @{      var pcb = (context as PCB);      <SfGrid DataSource="@pcb.Components" AllowSorting="true" GridLines="GridLine.Both" AllowResizing="true" ID="ComponentGrid" @ref="ComponentGrid">           <GridEditSettings AllowEditing="true"/>           <GridEvents Created="OnComponentGridCreated" RowSelected="@ComponentRowSelected" TValue="PCB_Component" OnRecordClick="OnComponentRecordClicked" />           <GridColumns>                @*Set IsPrimaryKey property for any one of the unique value column in Grid*@                <GridColumn Field=@nameof(PCB_Component.Name) IsPrimaryKey="true" HeaderText="Component" Width="100" />                ...           </GridColumns>      </SfGrid>    }</DetailTemplate>

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


JY Jim Young September 30, 2020 07:54 PM UTC

Thanks for the reply. That does solve the editing problem, although I still get the exception thrown. Fortunately the exception does not crash the app.

I'm finding the when I have a grid with many rows that performance really slows down, selecting rows takes a very long time, sometimes a second or two. One grid has around 200 detail lines and selecting it takes several seconds to finish.

RS Renjith Singh Rajendran Syncfusion Team October 7, 2020 01:47 PM UTC

Hi Jim, 
 
Query 1 : although I still get the exception thrown. Fortunately the exception does not crash the app. 
We would like to inform you that, the exception occurred due to @onblur event of Blazor and it’s not related to Syncfusion components alone, it is a Framework issue. Please find the below Github issue which is reported by Blazor team.  
 
Also above error will not affect the default functionality of Grid Editing.  
 
Query 2 : performance really slows down, selecting rows takes a very long time 
We would like to inform you that, the selection performance issues of Grid in wasm application, occurs due to component re-rendering, when callback method is assigned to grid events. We have already documented a topic for improving the performance of Syncfusion Grid when using wasm application.  
 
We suggest you to refer the below documentation for more details regarding improving wasm performance. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith Singh Rajendran 
 


JY Jim Young October 8, 2020 07:33 PM UTC

I tried setting PreventRender = true but I am still experiencing the same performance degradation with a grid with many rows. What I am observing is that the there is a long delay for the RowSelected callback to be invoked if AllowEditing = true for the grid. It looks like the GC is being invoked every time I select a row.

RS Renjith Singh Rajendran Syncfusion Team October 9, 2020 12:20 PM UTC

Hi Jim, 

We have analyzed this scenario. While performing editing, selecting the next row will save the previously selected edit row. So, a save action will occur to save edited values for the previously selected rows. We would like to inform you that, during saving entire grid will refresh to update the changes in Grid. For saving and loading 200 records in Grid while selecting other row will require some time.  

To overcome this, we suggest you to use Paging feature for the particular Grid and reduce the records count in Grid to have reduced set of records in view. Reducing the display records count in Grid will reduce the delay in performing change detection on large number of cell components. 

We have also modified the sample based on this scenario. Please download the sample from the link below, 
 
Please refer the codes below, 

 
<SfGrid DataSource="@pcb.Components" AllowSorting="true" AllowPaging="true" ... @ref="ComponentGrid">      <GridEditSettings AllowEditing="true"/>      <GridEvents Created="OnComponentGridCreated" RowSelected="@ComponentRowSelected" TValue="PCB_Component" OnRecordClick="OnComponentRecordClicked" />      ...</SfGrid>
 
 
public void OnComponentGridCreated() 
    { 
        ComponentGrid.PreventRender(); 
        Debug.WriteLine("OnComponentGridCreated"); 
        js.InvokeAsync<object>("singleedit"); 
    } 
 
    public void OnComponentRecordClicked(RecordClickEventArgs<PCB_Component> args) 
    { 
        args.PreventRender = true; 
        flag = true; 
    } 
 
    public async Task ComponentRowSelected(RowSelectEventArgs<PCB_Component> args) 
    { 
        args.PreventRender = true; 
        if (flag) 
        { 
            Debug.WriteLine("ComponentGrid: StartEdit()"); 
            await ComponentGrid.StartEdit(); 
            flag = false; 
        } 
 
        Debug.WriteLine(string.Format("Component selected:{0}", args.Data.Name)); 
        await AppState.DrawComponentRect(args.Data); 
    } 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


JY Jim Young October 14, 2020 03:25 AM UTC

I implemented paging on the grid and that did improve performance greatly. I was not able to use the OnLoad event to set the PageSize, as shown in the paging code example, because the grid height was always 0 when that event was fired. So, setting the page size dynamically was not possible. Is there a solution to this? Having to hardcode the page size is not going to be viable.

RS Renjith Singh Rajendran Syncfusion Team October 14, 2020 09:36 AM UTC

Hi Jim, 

Query :because the grid height was always 0 when that event was fired. So, setting the page size dynamically was not possible. Is there a solution to this? 
We suggest you to ensure to set the Height property for Grid, to achieve dynamic calculating of page size as shown in our below documentation. 

Please add the below Height property in your application. 

 
<SfGrid DataSource="@pcb.Components" AllowSorting="true" Height="200" ... ID="ComponentGrid" @ref="ComponentGrid"> 
      ... 
</SfGrid> 


Query : I implemented paging on the grid and that did improve performance greatly. 
When restricting the rendering of number of records in Grid by using paging, we are not able to face any performance delays(as updated in our previous update sample). Enabling Paging in Grid is the suggested way to improve the performance based on this scenario. Please refer the documentation below, 

If you are still facing difficulties even after enabling paging in Grid, then kindly share with us a video demo explaining the problem you are facing for further analysis. 

Regards, 
Renjith Singh Rajendran 


JY Jim Young October 14, 2020 07:27 PM UTC

Thank you for the reply. I find that I can set the grid height to 75%, not used any OnLoad event handler and paging seems to work okay.

RS Renjith Singh Rajendran Syncfusion Team October 15, 2020 02:15 PM UTC

Hi Jim, 

Thanks for your update. 

We are glad to hear that you have achieved your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Loader.
Up arrow icon