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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

125093 Jul 20,2016 10:38 PM Jul 22,2016 04:53 AM ASP.NET MVC 3
loading
Tags: Grid
Jeffrey Stone
Asked On July 20, 2016 10:38 PM

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 07:00 AM

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 21, 2016 10:35 PM

Venkatesh - Worked great! Thanks! Jeff

Venkatesh Ayothi Raman [Syncfusion]
Replied On July 22, 2016 04:53 AM

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.

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.

;