Dynamic content in Dialog.

[Jakob Harper]

I have a Grid with a Column template containing a link to a javascript funcyion  opening up Html.EJ().Dialog defined in the cshtml file.

I want the content of the Dialog to be dynamic based on the primary key from the Grid. Is this possible and you can you provide me with a small sample ?

Regards
Jakob

 

[Farveen Sulthana Thameeztheen Basha]

Hi Jakob, 

Thanks for contacting Syncfusion Support. 

We have checked your query and by default Syncfusion Grid has the Custom Command property to display the unbound column and by using that property we can display the EJ Dialog and get the details of the corresponding row inside the Dialog. 

Please refer to the documentation Link:- 

https://help.syncfusion.com/aspnetmvc/grid/columns#custom-buttons 

https://mvc.syncfusion.com/demos/web/grid/customcommand 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Jakob Harper]

Maybe I was not  clear enough.

I get the primary key from the Grid, then I want to open Syncfusion Dialog with a different Dynamic dataset based on the primary key and lookup.

Basically is it possible to have proper dynamic content to the Dialog Component ?

[Farveen Sulthana Thameeztheen Basha]

Hi Jakob, 

As per your requirement, we have prepared sample by using command column. While clicking the button on command column, we have get the primarykey value of the corresponding record and send the value to the serverside. Based on primaryKey value, we have filtered the record from other table and update value while on opening the ejDialog.  

Please refer to the code example:- 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .Columns(col => 

        { 

            .  .  .  

 

            col.HeaderText("Employee Details").Commands(command => 

                      { 

                          command.Type("detail") 

                           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 

                              { 

                                  Text = "Details", 

                                  Width = "100px", 

                                  Click = "onClick" 

                              }).Add(); 

                      }) 

                 .TextAlign(TextAlign.Center) 

                 .Width(150) 

                 .Add(); 

 

 

        }) 

 

        ) 

        <script type="text/javascript"> 

            function onClick(args) { 

                var grid = $("#FlatGrid").ejGrid("instance"); 

                var index = this.element.closest("tr").index(); 

                var record = grid.getCurrentViewData()[index].EmployeeID; 

                $.ajax({ 

                    url: "/Grid/Data", 

                    type: "POST", 

                    datatype: 'json', 

                    contentType: "application/json", 

                    data: JSON.stringify({ value: record }), 

                    success: function (data) { 

                        $("#commanddialog").html($("#templateData").render(data[0])) 

                        $("#commanddialog").ejDialog("open"); 

                    }, 

                    error: function (xhr) { 

                       alert('error'); 

                    } 

                }); 

 

            } 

        </script>     

 

        <script id="templateData" type="text/x-jsrender"> 

            <table> 

                <tr> 

                     

                    <td> 

                        <table class="CardTable" cellpadding="3" cellspacing="2"> 

                            <tr> 

                                <td>Order ID</td> 

                                <td>: {{:OrderID}}</td> 

                            </tr> 

                            <tr> 

                                <td>Customer ID</td> 

                                <td>: {{:CustomerID}} </td> 

                            </tr>s 

                            <tr> 

                                <td>Employee ID</td> 

                                <td>: {{:EmployeeID}} </td> 

                            </tr> 

                            

                        </table> 

                    </td> 

                </tr> 

            </table> 

        </script> 

 

Serverside:- 

 

       public ActionResult Data(int value) 

        { 

            var data = new NorthwindDataContext().OrdersViews.Where(e => e.EmployeeID == value).Take(1).ToList(); 

            return Json(data, JsonRequestBehavior.AllowGet); 

        } 

Please refer to the sample link:- 

http://www.syncfusion.com/downloads/support/forum/136528/ze/SAMPLE~1-1400780887.zip 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Jakob Harper]

Perfect! Thank You

Regards
Jakob

[Farveen Sulthana Thameeztheen Basha]

Hi Jakob, 

  

Thanks for your update. Please get back to us if you need any further assistance. 

  

Regards, 

  

Farveen sulthana T