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

Display Dialog On Clicking on Cell In ASP.NET MVC Grid

I am trying to display a dialog box when the user clicks on a cell in a grid. I also need to pick up

I have the field defined as follows:
col.Field(r => r.Symbol).Format("<a class='symbol'>{Symbol}</a>").Add(); 
col.Field(r => r.StartDate).Add();
col.Field(r => r.EndDate).Add();
In the Create event for the grid I have the following code:

function onGridCreate(args) {
    this.element.find(".e-gridcontent")
        .on("click",
            "a",
            function(e) {               
                e.preventDefault();
                $("#basicDialog").ejDialog("open");               
            });
}

Here is the code used for the dialog:

@{Html.EJ().Dialog("basicDialog").Title("Test Title").ContentTemplate(@<div>
    <h1>My Test</h1>
        <div class="cnt">
            Test content
        </div>
    </div>).Width(550).MinWidth(315).MinHeight(215).IsResponsive(true).ClientSideEvents(evt => evt.Close("onDialogClose"));}

However, nothing displays.

How can I get this to work?  Also, when the user clicks on the link I need 3 values from the row: The Symbol, the StartDate and the EndDate. How can I get these additional fields?
(I plan on displaying a chart of stock prices in the dialog box and I plan on having the user click on the ticker symbol and there are 2 other fields on the row where there is a start date and and an end date for the chart).

Thanks in advance!

Regards, Jeff


3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team July 21, 2016 11:00 AM UTC

Hi Jeffrey, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement by using RecordCilck event in the Grid. This event triggers when the record is clicked. In this event, we can get the row data, cell details, etc. We can render the Dialog when the condition of formatted cell is checked. Please refer to the code example, sample and Help document,   

Code example: 
<Grid> 
@(Html.EJ().Grid<object> 
                ("FlatGrid") 
                        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource)) 
                    .AllowScrolling() 
                    .AllowPaging()    /*Paging Enabled*/ 
                     
 . . .  
                    .ClientSideEvents(e=>e.RecordClick("recordClick")) 
                    .Columns(col => 
                    { 
                    col.Field("ID").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                    col.Field("Email").HeaderText("Email").Width(80).Add(); 
                    col.Field("Symbol").HeaderText("Symbol").Format("<a class='symbol'>{Symbol}</a>").TextAlign(TextAlign.Right).Width(75).Add(); 
                    col.Field("startDate").HeaderText("startDate").TextAlign(TextAlign.Right).Width(75).Add(); 
                    col.Field("EndDate").HeaderText("EndDate").ForeignKeyField("Status").TextAlign(TextAlign.Right).Width(75).Add(); 
                     
 
                    })) 
<Dialog> 
 
@{Html.EJ().Dialog("basicDialog").Title("Dialog").Containment(".control").ContentTemplate( 
        @<div> 
 
             <h1>My Test</h1> 
             <div class="cnt"> 
                 Test content 
             </div> 
 
             StartDate:<br> 
             <input type="text" id="startDate"><br><br> 
             EndDate:<br> 
             <input type="text" id="EndDate"><br> 
              
              
 
        </div>).Width(550).MinWidth(315).MinHeight(215).IsResponsive(true).ShowOnInit(false).ClientSideEvents(evt => evt.Close("onDialogClose")).Render();} 
 
Note: The Dialog was open by default when initialization. We can stop the default dialog rendering on initialization using ShowOnInit property. 
 
<RecordClick event> 
 
function recordClick(args) { 
                
               var startDate = args.data.startDate; // Get the value of start date 
               var EndDate = args.data.EndDate; // Get the value of end date  
 
               if (args.cell.find('a').hasClass("symbol")) { 
 
                   $("#basicDialog").ejDialog("open"); // Open the Dialog 
                   $("#startDate").val(startDate); //  Set the value of start date 
                   $("#EndDate").val(EndDate);//Set the value of End date 
               } 
 
           } 






Regards, 
Venkatesh Ayothiraman. 



JS Jeffrey Stone July 22, 2016 02:35 AM UTC

Venkatesh - Worked great! Thanks! Jeff


VA Venkatesh Ayothi Raman Syncfusion Team July 22, 2016 08:53 AM UTC

Hi Jeffrey, 

Thank you for your feedback. 

We are happy to hear that your requirement is achieved. 

Thanks, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon