Custom Action on Double-Click of a Grid Cell

[Ekaterina Balaban]

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

[Balaji Sekar]

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 

 

Demo link: https://ej2.syncfusion.com/demos/#/material/grid/dialog-editing.html 

 

Please share more details when you want to show the row details like at normal click, editing, etc. 

 

Regards, 

Balaji Sekar. 

[Ekaterina Balaban]

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?

[Balaji Sekar]

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. 

 

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

 

UG: https://ej2.syncfusion.com/documentation/api/grid/#rowselected 

        https://ej2.syncfusion.com/documentation/api/grid/#getrowinfo 

        https://ej2.syncfusion.com/javascript/documentation/dialog/es5-getting-started/?no-cache=1#modal-dialog 

 

@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.