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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

125093 Jul 21,2016 02:38 AM UTC Jul 22,2016 08:53 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Jeffrey Stone
Asked On July 21, 2016 02:38 AM UTC

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


Jeffrey Stone
Replied On July 22, 2016 02:35 AM UTC

Venkatesh - Worked great! Thanks! Jeff

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


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.

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

;