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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Action on Double-Click of a Grid Cell

Thread ID:

Created:

Updated:

Platform:

Replies:

150807 Jan 20,2020 11:37 PM UTC Jan 23,2020 07:18 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Ekaterina Balaban
Asked On January 20, 2020 11:37 PM UTC

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 [Syncfusion]
Replied On 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. 


Ekaterina Balaban
Replied On 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?

Balaji Sekar [Syncfusion]
Replied On 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.          


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon