We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Custom Action on Double-Click of a Grid Cell

Guys,

I looked through the ASP.NET MVC documentation for the Grid component, but I have not been able to find how I can achieve the following:

(1) Display a grid control populated with data - DONE!
(2) Disable editing grid data - DONE!
(3) Enable a behavior that calls a custom JavaScript function when a user clicks (or double-clicks) on a particular cell in the grid - HOW TO DO THIS??

I want to be able to display an informational "window" (really, a Bootstrap modal) when a user clicks on a name field in any row.  The content of that modal will differ based on which row was clicked on.

Many thanks!

Ekaterina

3 Replies

BS Balaji Sekar Syncfusion Team January 21, 2020 12:38 PM UTC

Hi Ekaterina, 
 
Thanks for contacting Syncfusion support. 
 
Query : Enable a behavior that calls a custom JavaScript function when a user clicks (or double-clicks) on a particular cell in the grid - HOW TO DO THIS? 
                                                                                                                                                                                                                          
By default when you double click the cell it automatically edit the target row. At that time it triggers the actionBegin and actionComplete event with the requestType as beginEdit. When you save the edited record it again triggers the  actionBegin and actionComplete event but with the requestType as save.  
 
Query : I want to be able to display an informational "window" (really, a Bootstrap modal) when a user clicks on a name field in any row.  The content of that modal will differ based on which row was clicked on. 
 
We suspect that you want to show the row details of the currently clicked row in the modal. By default in dialog edit mode, when you edit the row it shows current row data only in the dialog. Please refer the screenshot shown below. Is this is your expected behavior? 
 
 
 
For your reference we have shared a demo sample with Dialog editing 
 
 
Please share more details when you want to show the row details like at normal click, editing, etc. 
 
Regards, 
Balaji Sekar. 



PG Pranav Gaikwad January 22, 2020 02:53 PM UTC

Thank you, Balaji. I need to display a window that's not an edit form - I will just need to take the ID of the record that is clicked/double-clicked and then make a custom call to a method on the backend that will retrieve the data about that record - that will be something more than what's in the grid, and is not going to be editable.  So, essentially, I need to know how to initiate that call - are you saying that I will need to set an actionBegin property on the grid and then write a JS function that corresponds to that property?


BS Balaji Sekar Syncfusion Team January 23, 2020 07:18 AM UTC

Hi Ekaterina, 
 
Thanks for contacting Syncfusion support. 
 
Query : I need to display a window that's not an edit form - I will just need to take the ID of the record that is clicked/double-clicked and then make a custom call to a method on the backend that will retrieve the data about that record 
 
We have validated the provided details. we have prepared a sample, it shows the row information in the dialog when you click the cell. When you click the cell it triggers the rowSelected event. Now we are able to get current target cell using rowSelected event args. With the help of target cell you can get the row information using getRowInfo method. and finally we created a dialog and bound the row info as content for that dialog in the rowSelected event. Please refer the below code example and sample for more information. 
 
 
 

@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(400).Columns(col => 
----}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }). RowSelected("RowSelected").Render() 
 
<script> 
    var dialog; 
    function RowSelected(args){ 
        var gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
// get the rowInfo using target cell 
        var rowInfo = gridObj.getRowInfo(args.target); 
// shows the row info in the console 
        console.log(rowInfo); 
        console.log(rowInfo.rowData) 
// create the dialog 
         dialog = new ej.popups.Dialog({ 
            // Enables modal dialog 
            isModal: true, 
            // overlayClick event handler 
            overlayClick: onOverlayClick, 
             // Dialog content – bind the row info 
             content: JSON.stringify(rowInfo), 
            // The Dialog shows within the target element 
             target: gridObj.element.getElementsByClassName("e-gridcontent")[0] 
         }); 
        var x = document.createElement('div'); 
        x.setAttribute('id', 'dialogrowinfo'); 
        gridObj.element.appendChild(x) 
        dialog.appendTo(x); 
       
    } 
    function onOverlayClick() { 
// hide the dialog 
        dialog.hide(); 
    } 
</script> 

 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar.          


Loader.
Live Chat Icon For mobile
Up arrow icon