Triple click to edit a checkbox column

Hello,

I certainly miss something in documentation, but actually my grid checkbox's columns require one double click to enter edit mode and another to change value.

Is there a way to have only a single click fir this kind of columns ?

Brice.                            

12 Replies

RN Rahul Narayanasamy Syncfusion Team May 11, 2020 03:53 PM UTC

Hi Brice, 
 
Greetings from Syncfusion. 
 
We have validated your query and you want to edit the checkbox columns on single click. Here, we have prepared a sample based on your requirement. We have achieved your requirement by using EditTemplate and Grid events(CellSelected, OnCellEdit, OnCellSave). Find the below sample for your reference. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 



BF Brice FROMENTIN May 12, 2020 08:44 PM UTC

Thanks, it's crystal clear.

While I was generalizing the code to match my full use case, I see that some information in OnCellEdit arguments are null : 
  • Cell
  • Column
  • ColumnObject
  • Row
At least I miss one column object to define if column is "DisplayAsCheckBox".




BF Brice FROMENTIN replied to Brice FROMENTIN May 12, 2020 08:49 PM UTC

Thanks, it's crystal clear.

While I was generalizing the code to match my full use case, I see that some information in OnCellEdit arguments are null : 
  • Cell
  • Column
  • ColumnObject
  • Row
At least I miss one column object to define if column is "DisplayAsCheckBox".



Same issue with OnCellSave.


RS Renjith Singh Rajendran Syncfusion Team May 13, 2020 01:45 PM UTC

Hi Brice, 
 
Thanks for your update. 
 
Based on your requirement, we suggest you to use the GetColumnIndexByField and GetColumns methods of Grid to get the column information. Please use the codes below, 
 
 
    public async Task OnCellEdit(CellEditArgs<OrdersDetails> args) 
    { 
        var ColIndex = await grid.GetColumnIndexByField(args.ColumnName); 
        var Column = await grid.GetColumns(); 
        var ColumnObject = Column.ElementAt(Convert.ToInt32(ColIndex)); 
        ... 
   } 
 
 
Please refer the screenshot below, 
 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith Singh Rajendran 



BF Brice FROMENTIN May 13, 2020 03:47 PM UTC

Thanks you, I open another ticket for the null values.


RN Rahul Narayanasamy Syncfusion Team May 14, 2020 02:47 PM UTC

Hi Brice, 
 
Greetings from Syncfusion. 
 
Query: Null values in OnCellEdit and OnCellSave 
 
We have validated your query and we have logged this “need to improve the arguments property value in OnCellEdit and OnCellSave events” as an usability improvement and added this feature request to our database. This feature will be included in our upcoming Volume 2, 2020 release which is expected to be rolled out on in the month of June. Until then we appreciate your patience. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
 
 
Until then we suggest you to use previously provided solution to achieve your requirement.                                                                                                                                                                              
 
Regards, 
Rahul 




BF Brice FROMENTIN May 14, 2020 09:08 PM UTC

Sorry to come back,

I modified your grid in the project, the code works well except that when I center the checkbox, during the click, the checkbox move a little bit.

On the counter page I report my own grid and that's nor working well:
  • The first click leave an empty cell.
  • Others clicks seems to work well but new value is not saved correctly.
I joined you the code.

Regards

Attachment: ToSyncfusion_f1945a22.7z


RN Rahul Narayanasamy Syncfusion Team May 15, 2020 12:10 PM UTC

Hi Brice, 

Thanks for the update. 

We have validated your query with the provided code snippets and you have defined same Boolean value for both checkbox controls. We have modified your codes and its working fine. Here, we have binded Boolean variable for both Checkbox separately and changed some modification in OnCellEdit and OnCellSave events. Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="grid" TValue="CollectiviteTypeOperation" DataSource="@datasource"   //changed DataSource property instead of dataSource 
        AllowSorting="true" AllowResizing=true EnableAltRow="true" 
        Width="100%" Height="100%"> 
    . . . 
       <GridColumn Field="@nameof(CollectiviteTypeOperation.RevalorisationAutomatique)" Width="105px" DisplayAsCheckBox="true" TextAlign="@TextAlign.Center"> 
            <EditTemplate> 
                <SfCheckBox ID="RevalorisationAutomatique" @bind-Checked=@CheckboxChecked /> //should be provide ID property as Field property. And binded separate bool variable 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field="@nameof(CollectiviteTypeOperation.PresenceTypeRevalorisation)" Width="150px" DisplayAsCheckBox="true" TextAlign="@TextAlign.Center"> 
            <EditTemplate> 
                <SfCheckBox ID="PresenceTypeRevalorisation" @bind-Checked=@CheckboxChecked2></SfCheckBox>//should be provide ID property as Field property. And binded separate bool variable 
            </EditTemplate> 
        </GridColumn> 
        . . . 
   </GridColumns> 
</SfGrid> 
 
 
@code { 
 
    . . . 
   public bool CheckboxChecked; 
    public bool CheckboxChecked2;   //added bool property 
 
    public async void CellSelectHandler(CellSelectEventArgs<CollectiviteTypeOperation> args) 
    { 
        . . . 
   } 
 
    public async void OnCellEdit(CellEditArgs<CollectiviteTypeOperation> args) 
    { 
        var index = await grid.GetColumnIndexByField(args.ColumnName); 
        var columns = await grid.GetColumns(); 
 
        if (columns[(int)index].DisplayAsCheckBox && columns[(int)index].Field == "RevalorisationAutomatique") 
        { 
            if (args.Value == "true") 
            { 
                CheckboxChecked = false;   //Based on the value of the "Verified" column set the value for "bind-Checked" property 
            } 
            else 
            { 
                CheckboxChecked = true; 
            } 
        } 
        if (columns[(int)index].DisplayAsCheckBox && columns[(int)index].Field == "PresenceTypeRevalorisation") 
        { 
            if (args.Value == "true") 
            { 
                CheckboxChecked2 = false;   //Based on the value of the "Verified" column set the value for "bind-Checked" property 
            } 
            else 
            { 
                CheckboxChecked2 = true; 
            } 
        } 
    } 
 
    public async void OnCellSave(CellSaveArgs<CollectiviteTypeOperation> args) 
    { 
        var index = await grid.GetColumnIndexByField(args.ColumnName); 
        var columns = await grid.GetColumns(); 
 
        if (columns[(int)index].DisplayAsCheckBox && columns[(int)index].Field == "RevalorisationAutomatique") 
        { 
            if (CheckboxChecked) 
            { 
                args.Value = "true"; 
            } 
            else 
            { 
                args.Value = "false"; 
            } 
        } 
        if (columns[(int)index].DisplayAsCheckBox && columns[(int)index].Field == "PresenceTypeRevalorisation") 
        { 
            if (CheckboxChecked2) 
            { 
                args.Value = "true"; 
            } 
            else 
            { 
                args.Value = "false"; 
            } 
        } 
    } 
 
} 


Note: We have placed modified codes in FetchData.razor page and its working fine after editing the checkbox columns 


Please get back to us if you need further assistance. 

Regards,
Rahul 



BF Brice FROMENTIN May 15, 2020 03:21 PM UTC

Thanks for the help.

But in my case some grid are 100% generated on th fly, So it would be great to have the sender of the event within the arguments' event. In my case, no more need to bindings.


RN Rahul Narayanasamy Syncfusion Team May 18, 2020 03:32 PM UTC

Hi Brice, 

Thanks for the update. 

We have validated your query and for your case, it can be achieved by using the above feature. So we request you to wait for the feature to be completed. Until then we appreciate your patience. 

Regards, 
Rahul 



BF Brice FROMENTIN May 19, 2020 08:21 AM UTC

No problem,; I will be patient :)


RN Rahul Narayanasamy Syncfusion Team May 20, 2020 05:13 AM UTC

Hi Brice, 

Thanks for the update. 

We will notify you once the release is successfully rolled out. 

Regards,
Rahul 




Loader.
Up arrow icon