Dropdown List with dynamic datasource in Inline Form Template

[CLAUDIO RICCARDI]

Hi,

how can I build a template for inline form editing with a dropdown list control that has a list of values taken from an array?

In other words:

JAVASCRIPT:

    var cLocs = @Html.Raw(Json.Encode(@ViewBag.ContractLocations));

    var contractLocations = [];

    for (var i = 0; i < cLocs.length; i++) {

        contractLocations.push({ id: cLocs[i].LocationId, desc: cLocs[i].ShortDes });

    }

TEMPLATE:

...

            <td>

                <select id="LocationId" name="LocationId">

                    {{for contractLocations}}

                        {{:desc}}

                    {{/for}}

                </select>

            <td>

...

the highlighted part doesn't work...

Thank you.

Claudio

[Seeni Sakthi Kumar Seeni Raj]

 

Hi Claudio,  

 

Thanks for contacting Syncfusion Support.  

 

We can bind dataSource to the DropDown in the ActionComplete event of the Grid as shown in the following code example.  

 

@(Html.EJ().Grid<OrdersView>("Editing") 

        .AllowPaging() 

        .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add(); 

            col.Field("CustomerID").HeaderText("Customer ID"). Add(); 

            col.Field("Freight").HeaderText("Freight")..Format("{0:C}").Add(); 

           col.Field("EmployeeID").HeaderText("Employee ID").Width(85).Add(); 

        }) 

             .ClientSideEvents(events => 

             { 

                 events.ActionComplete("complete"); 

             }) 

 

) 

 

 

 

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

    <b>Order Details</b> 

    <table cellspacing="10"> 

               . .  

                   . .  

        <tr> 

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

                Employee ID 

            </td> 

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

 

                <input type="text" id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /> 

            </td> 

        </tr> 

    </table> 

</script> 

 

<script> 

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

    function complete(args) { 

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

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

            $("#EmployeeID").ejDropDownList({ width: '116px', dataSource: cLocs, fields: { value: "EmployeeID", text: "FirstName" } }); 

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

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

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

            } 

            $(".e-field").css({ 'width': '116px', 'text-align': 'left' }); 

        } 

    } 

</script> 

 

Here dataSource has been bind to the dropdown without any conversion. Since, we have used the text/value pair DropDownList Fields, we didn’t need to convert them. Please make a note that the eq(3) in the ActionComplete event denotes the Column index of the EmployeeID.  

 

Regards,  

Seeni Sakthi Kumar S.