Using data from model within dialog template of grid

[gwoo]

Hello,

I have one question in order to decide wether using Syncfusion Grid for editing details in dialog mode or redirecting to separate detail views.

My app/service layer is retrieving my data for the viewmodels, including related data (e.g. for dropdown lists). The grid gets it datasource from that model and now I want to use the included data for the dropdown lists within the template form of the dialog. Would be great if you have an example for that.

The JavaScript example here (https://help.syncfusion.com/aspnetmvc/grid/editing?cs-save-lang=1&cs-lang=js) is just using kind of static data for the dropdown. How can I use data from my model within tha JavaScript Template form?

Thanks and kind regards

[Thavasianand Sankaranarayanan]

Hi Gert, 

Thanks for contacting Syncfusion support. 

According to your query we suspect that you need to bind the data returned from the View Model to the Dropdownlist in the dialog template. We have achieved your requirement in the below code example. 

In the below code example we have returned the data from the model in the ViewBag to the view and serialized the data and assigned it as dataSource to the dropdownlist in the actionComplete event. 

[Index.cshtml] 

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

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

             

                                ------- 

 

           .Columns(col => 

            { 

                 

                           ------ 

 

           }) 

            .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 

) 

 

 

 

<script type="text/template" id="template"> 

     

                                    ----- 

 

       <td style="text-align: right;"> 

                Ship Country 

            </td> 

            <td style="text-align: left"> 

                <select id="ShipCountry" name="ShipCountry"></select> 

            </td> 

        </tr> 

    </table> 

</script> 

 

<script type="text/javascript"> 

 

    var data = @Html.Raw(Json.Encode(ViewBag.dropdata)); 

 

    function complete(args) { 

        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 

            $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 }); 

            $("#ShipCountry").ejDropDownList({ 

                dataSource: data, 

                fields: {text:"ShipCountry",value:"ShipCountry"}, 

                width: '116px' 

            }); 

            if (args.requestType == "beginedit") { 

                $("#OrderID").attr("disabled", "disabled"); 

                $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(3).text()); 

            } 

        } 

    } 

</script> 

 

[Controller.cs] 

 

public class HomeController : Controller 

    { 

        List<DropData> data = new List<DropData>(); 

        public ActionResult Index() 

        {           

            ViewBag.DataSource = OrderRepository.GetAllRecords().ToList(); 

 

 

            data.Add(new DropData("Argentina",12131)); 

            data.Add(new DropData("China",27564)); 

            data.Add(new DropData("Mexico",32365)); 

            data.Add(new DropData("Spain",442324)); 

            data.Add(new DropData("Japan",516434)); 

 

            ViewBag.dropdata = data; 

            return View(); 

        } 

 

 

 

        public class DropData 

        { 

            public DropData() 

            { 

 

            } 

 

            public DropData(string ShipCountry, int ShipNo) 

            { 

                this.ShipCountry = ShipCountry; 

                this.ShipNo = ShipNo; 

            } 

 

            public string ShipCountry { get; set; } 

            public int ShipNo { get; set; } 

        } 

 

    } 

} 

 

We have prepared a sample for your reference. Please refer the below link for the sample. 

Sample : http://www.syncfusion.com/downloads/support/forum/140253/7z/Grid_with_dropdown125375118.7z 

Regards, 

Thavasianand S.