retrieve dropdown list value to write in a column

[amir haddoud]

Good mourning ,

I want to retrieve the value of dropdownlist and write in a column.

@{

    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = @ViewBag.articles, Query = "new ej.data.Query()", AllowFiltering = true,Enabled=true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Value", Text = "Text" },Change= "onChange" };

    var DropDownList2 = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = @ViewBag.articles_prix, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Value", Text = "Text" } };

    }

    <ejs-grid id="Grid" height="272" allowPaging="true" allowSorting="true" allowResizing="true" allowGrouping="true" toolbar="@(new List<string>() { "Search", "Add", "Edit", "Delete","Update","Cancel" })" allowFiltering="true" allowSelection="true">

        <e-data-manager url="/Ligne/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Ligne/Insert" updateUrl="/Ligne/Update" removeUrl="/Ligne/Delete"></e-data-manager>

        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>

        <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>

        <e-grid-columns>

            <e-grid-column type="checkbox" width="50"></e-grid-column>

            <e-grid-column field="EtbCode" headerText="Etablissement" isPrimaryKey="true" defaultValue="@ViewBag.etb"></e-grid-column>

            <e-grid-column field="DocNumero" headerText="DocNumero" defaultValue="@ViewBag.docnumero"></e-grid-column>

            <e-grid-column field="ArtCode" headerText="ArtCode"  id="ArtCode"  editType="dropdownedit" edit=" new {@params = DropDownList }" valueAccessor="@("onChange")" ></e-grid-column>

            

            <e-grid-column field="ArtGamme" headerText="Gamme"></e-grid-column>

            <e-grid-column field="LigLib" headerText="Designation"></e-grid-column>

            <e-grid-column field="LigQte" headerText="Quantité"></e-grid-column>

            <e-grid-column field="LigQCmde" headerText="Quantité commandé"></e-grid-column>

            <e-grid-column field="LigQRel" headerText="Quantité reste à livré"></e-grid-column>

            <e-grid-column field="LigQLivr" headerText="Quantité livré"></e-grid-column>

            <e-grid-column field="LigQFact" headerText="Quantité facturé"></e-grid-column>

            <e-grid-column field="LigPPrv" headerText="Prix de  vente "  id="LigPPrv" ></e-grid-column>

            <e-grid-column field="LigRemise" headerText="Remise"></e-grid-column>

            <e-grid-column field="NatTvatx" headerText="Taux TVA"></e-grid-column>

            <e-grid-column field="LigTotal" headerText="Total HT Net" defaultValue="0"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

    <script>

thank you

Attachment: aspnetcore_a32223c5.rar

[Manivel Sellamuthu]

Hi Amir, 

Greetings from Syncfusion support. 

From your explanation we suspect that you want to provide custom datasource to dropdown list and save the value to the dataSource.  We have prepared the same sample as like you have shared code example. Which is working fine. It retrieves the value from the viewbag and saves the selected value to the datasource. 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

@{ 

      var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = @ViewBag.DataSource, Query = "new ej.data.Query()", AllowFiltering = true,Enabled=true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ShipCountry", Text = "ShipCountry" },Change= "onChange" }; 

} 

 

 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID"  headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit' edit=" new {@params = DropDownList }" ></e-grid-column> 

        <e-grid-column field="Freight" width="150" editType='numericedit'></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    function onChange(args) { 

        console.log(args); 

    } 

 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/152796-dropdown-UrlAdptor_-_Sample-1449286232.zip 

If this is not your exact  requirement, please explain more about the requirement with video demo or screenshot. 

Regards, 

Manivel 

[amir haddoud]

hello,

I want to have a drop-down list from a data source and retrieve the value and place it in another column

Attachment: article_c6fb89f6.rar

[Manivel Sellamuthu]

Hi Amir, 

Thanks for your update. 

Based on your update we suspect that you want to retrieve the value of a dropdown and apply the value to the another field. So, we have prepared the sample based on that.  

Please refer the below code example and screenshot for more information. 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

@{ 

      var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = @ViewBag.DataSource, Query = "new ej.data.Query()", AllowFiltering = true,Enabled=true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ShipCountry", Text = "ShipCountry" },Change= "onChange" }; 

} 

 

 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit' edit=" new {@params = DropDownList }"></e-grid-column> 

 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="Freight" width="150" editType='numericedit'></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    function onChange(args) { 

        var grid = document.getElementById('Grid').ej2_instances[0]; 

                                                                //grid id + field name 

        var customerIDele = document.querySelector('#' + grid.element.id + 'CustomerID'); 

// here we have retrieved the value of the shipcountry dropdown and applied the value on customerID field 

        customerIDele.value = args.value; 

    } 

 

</script> 

Screenshot:  

 

If the above does not meet your requirement, Please get back to us for further assistance. 

Regards, 

Manivel