1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. more than one dropdownlist in grid-inline-template

more than one dropdownlist in grid-inline-template

Hello i have a Problem:

i have 4 Multiselect-Dropdownlists in a Inline-Temlate of a Grid - the Frontend works fine

Grid template works fine


But only the selected arguments of the first dropdown list are copied to codebehind.

--> HiddenEle are the selected Id from the first dropdown-list -- the next thee dropdownlist only return one id!

I'm desperate.... please help.


see hiddenIde

 <ej:Grid ID="ProzessLandschaft"  runat="server"
           AllowPaging="True" AllowGrouping="false"
           AllowTextWrap="true" AllowFiltering="true"
           ShowColumnChooser="false" AllowSorting="True"
           OnServerEditRow="EditEvents_ServerEditRow"
           OnServerAddRow="EditEvents_ServerAddRow"
           OnServerDeleteRow="EditEvents_ServerDeleteRow">
              
                <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit"  />
                <Columns>
                    <ej:Column Field="tblT_ProzessLandschaft_ID" ShowInColumnChooser="false" DataType="number"  IsPrimaryKey="true" Visible="false" IsIdentity="True"></ej:Column>
                      <ej:Column Field="pl_Nr" HeaderText="Nr" ShowInColumnChooser="false" DataType="string"></ej:Column>  
                      <ej:Column Field="pl_vorProzesse" DataType="string" HeaderText="vorgelagerte Prozesse"></ej:Column>
                      <ej:Column Field="pl_vorParteien" DataType="string" HeaderText="Supplier interess. Parteien"></ej:Column>
                      <ej:Column Field="pl_nachProzesse" DataType="string" HeaderText="Folgeprozesse"></ej:Column>
                      <ej:Column Field="pl_nachParteien" DataType="string" HeaderText="Customer interess. Parteien"></ej:Column>
                </Columns>
                      <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="InlineFormTemplate" InlineFormTemplateID="#template">
                       </EditSettings>
                   </ej:Grid>

        <script id="template" type="text/template">                             
                    <input id="tblT_ProzessLandschaft_ID" name="tblT_ProzessLandschaft_ID" value="{{:tblT_ProzessLandschaft_ID}}" style="width: 30px; height: 28px"" />
                
        <input id="pl_Nr" name="pl_Nr" value="{{:pl_Nr}}" class="e-field e-ejinputtext" style="width: 100px; height: 28px" />
            
             <br />vorgelagerte Prozesse<br />
                <input type="text" id="pl_vorProzesse" />
                 <br />Supplier interessierte Parteien<br />
                <input type="text" id="pl_vorParteien" />
             <br />Folge-Prozesse<br />
                <input type="text" id="pl_nachProzesse" />
                     <br />Customer interessierte Parteien<br />
                <input type="text" id="pl_nachParteien" />

                <br />
 </script>

    <script type="text/javascript">

        function endAdd(args) {
            $('#<%= ProzessLandschaft.ClientID %>').ejWaitingPopup("show");
        }
        function endDelete(args) {
            $('#<%= ProzessLandschaft.ClientID %>').ejWaitingPopup("show");
        }
        function endEdit(args) {
            $('#<%= ProzessLandschaft.ClientID %>').ejWaitingPopup("show");
        }
        function complete(args) {
         
            if (args.requestType == "refresh") {
                $('#<%= ProzessLandschaft.ClientID %>').ejWaitingPopup("hide");
            }

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

      
                $("#pl_vorProzesse").ejDropDownList({
                    dataSource: args.model.columns[2].dataSource,
                    fields: { text: "text", value: "value" },
                    targetID: "vPrLIST",
                    showCheckbox: true,
                    allowMultiSelection: true,
                    width: "500px",
                    multiSelectMode: "visualmode",
                    watermarkText: "Bitte Prozesse auswählen"
                });
                $("#pl_vorParteien").ejDropDownList({
                    dataSource: args.model.columns[3].dataSource,
                    fields: { text: "text", value: "value" },
                    targetID: "vPaLIST",
                    showCheckbox: true,
                    allowMultiSelection: true,
                    width: "500px",
                    multiSelectMode: "visualmode",
                    watermarkText: "Bitte Parteien auswählen"
                });
                $("#pl_nachProzesse").ejDropDownList({
                    dataSource: args.model.columns[4].dataSource,
                    fields: { text: "text", value: "value" },
                    targetID: "nPrLIST",
                    showCheckbox: true,
                    allowMultiSelection: true,
                    width: "500px",
                    multiSelectMode: "visualmode",
                    watermarkText: "Bitte Prozesse auswählen"
                });
                $("#pl_nachParteien").ejDropDownList({
                    dataSource: args.model.columns[5].dataSource,
                    fields: { text: "text", value: "value" },
                    targetID: "nPaLIST",
                    showCheckbox: true,
                    allowMultiSelection: true,
                    width: "500px",
                    multiSelectMode: "visualmode",
                    watermarkText: "Bitte Parteien auswählen"
                });
                $("#pl_vorProzesse").ejDropDownList("setSelectedValue", args.row.children().eq(2).text());
                $("#pl_vorParteien").ejDropDownList("setSelectedValue", args.row.children().eq(3).text());
                $("#pl_nachProzesse").ejDropDownList("setSelectedValue", args.row.children().eq(4).text());
                $("#pl_nachParteien").ejDropDownList("setSelectedValue", args.row.children().eq(5).text());
            }
   }
    </script>  

Greetings Jens


1 Reply
KR Keerthana Rajendran Syncfusion Team February 21, 2018 03:15 PM UTC

Hi Jens, 
 
Thank you for using Syncfusion products. 
 
While using inlineForm Template, we have placed the multiselect dropdownList in the action-complete event of the Grid. In the action-complete event of the Grid, we have rendered the multiselect dropdownList and get the corresponding selected values in the change event of the dropdownlist and update the values in action-begin event of the Grid.  
 
In the actionBegin we can get the  selected data object from the multiselect dropdownlist  and the data has been send to the serverside as array of strings or objects. So that we can get the value at the server side as Key and value pairs.  On that OnServerEditRow, if you want the value as list of data you need to  parse the key and value pairs and bind to the column datasource.  
 
Please refer to the code example:-  
 
<ej:Grid ID="Grid"  runat="server"  AllowPaging="True" >  
         <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#template" ></EditSettings>  
        <ClientSideEvents ActionComplete ="complete" QueryCellInfo="query" ActionBegin="begin" />  
        <Columns>  
            <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75" >  
                  
            </ej:Column>  
              
                
        </Columns>  
    </ej:Grid>  
    <script type="text/javascript">  
        var drpData = [];  
        function query(args) {  
            if (args.column.field == "EmployeeID") {  
                args.cell.innerText = ej.dataUtil.distinct(args.data.EmployeeID, "empID");  
            }  
        }  
        function begin(args) {  
            if (args.requestType == "save") {  
                args.data.EmployeeID = drpData;  
            }  
        }  
        function complete(args) {  
  
            if (args.requestType == "beginedit") {  
                   $('#EmployeeID').ejDropDownList({  
                    width: "100%",  
                    change: function (args) {  
                        var txt = args.selectedText;  
                        for (var t = 0; t < txt.length; t++) {  
                            //creating a list of objects for newly saving records  
                            var obj = {};  
                            ej.createObject("empID", txt[t], obj);  
                            ej.createObject("ID", ej.parseInt(txt[t]), obj);  
  
                            drpData.push(obj);  
                        }  
                    },  
                    multiSelectMode: ej.MultiSelectMode.Delimiter,  
                    showCheckbox: true,  
                    text: ej.dataUtil.distinct(args.model.columns[1].dataSource, "ID").toString(),  
                    fields: { text: "empID", value: "ID" },  
                });  
            }  
        }  
    </script>  
  
  
Serverside:-  
  
    private void BindDataSource()  
        {  
            if (order == null)  
            {  
                order = new List<Orders>();  
                int orderId = 10000;  
                int empId = 0;  
  
                for (int i = 1; i < 9; i++)  
                {  
                    List<EmpID> emp1 = new List<EmpID>() { new EmpID() { ID = 1, empID = "1" }, new EmpID() { ID = 2, empID = "2" } };  
                    List<EmpID> emp2 = new List<EmpID>() { new EmpID() { ID = 2, empID = "2" }, new EmpID() { ID = 3, empID = "3" } };  
                       .    .  
                    order.Add(new Orders(orderId + 1, "VINET", emp1, 32.38, new DateTime(2014, 12, 25), "Reims"));  
                    orderId += 5;  
                    empId += 5;  
                }  
                for (int i = 0; i < 9; i++) {  
                    emp.Add(new EmpID() { empID = (i + 1).ToString(), ID = i + 1 });  
                }  
            }  
  
            this.Grid.DataSource = order;  
            this.Grid.Columns[1].DataSource = emp;  
            this.Grid.DataBind();    
  
        }  
        protected void EditEvents_ServerEditRow(object sender, GridEventArgs e)  
        {  
  
            //Add your comments  
        }  
  
Refer to the screenshot:-  
  
 
Please refer to the sample Link:-  
 
Regards, 
Keerthana. 


Loader.
Up arrow icon