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

[Jeffrey Stone]

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

[Venkatesh Ayothi Raman]

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 

               } 

 

           } 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/MVCSample975236726 

Help document: http://help.syncfusion.com/js/api/ejgrid#events:recordclick 

Regards, 

Venkatesh Ayothiraman. 

[Jeffrey Stone]

Venkatesh - Worked great! Thanks! Jeff

[Venkatesh Ayothi Raman]

Hi Jeffrey, 

Thank you for your feedback. 

We are happy to hear that your requirement is achieved. 

Thanks, 

Venkatesh Ayothiraman.