[solved] Edittype Dropdown multiselect

[Jens Langen]

Hi,
in the post https://www.syncfusion.com/forums/137305/grid-inline-editing-multiselect-dropdown-mode-checkbox-not-displaying-values is a working sample for Core EJ2.
Thats works fine. 

So my question: Is there a working sample for ASP.NET Web Forms?

Kind regards
Jens 

[Farveen Sulthana Thameeztheen Basha]

Hi Jens, 

Thanks for contacting Syncfusion Support. 

Query#:- Is there a working sample for ASP.NET Web Forms?(MultiSelect DropdownList). 

 

As per your requirement we have prepared sample with MultiSelect dropdownList using EditTemplate property of Grid columns in WebForms.  

Refer to the code example:- 

<ej:Grid ID="Grid" runat="server" AllowPaging="True" > 

          <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></EditSettings> 

           <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 

            <Columns> 

                 <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"></ej:Column> 

                 <ej:Column Field="CustomerName" HeaderText="Customer Name"  Width="90" /> 

                 <ej:Column Field="OrderList" HeaderText="OrderList" Width="90"> 

                   <EditTemplate Create="create" Read="read" Write="write" /> 

                </ej:Column>  

            </Columns> 

       </ej:Grid> 

 

 

<script type="text/javascript"> 

    

    function create(args) { 

        return "<input>"; 

    } 

    function read(args) { 

        return args.ejDropDownList("getValue").split(","); 

    } 

    function write(args) { 

        var dropData = args.column[2].dataSource;  

        var selIndex = []; 

        if (args.rowdata != undefined) { 

            for (i = 0; i < args.rowdata["OrderList"].length; i++) 

                for (j = 0; j < dropData.length; j++) { 

                    if (args.rowdata["OrderList"][i] == dropData[j].value) { 

                        selIndex.push(j); 

                        break; 

                    } 

                } 

        }                                                                    //Render multiSelect DropdownList 

        args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "text", text: "text", value: "value" }, showCheckbox: true, allowMultiSelection: true, selectedItems: args.rowdata !== undefined ? selIndex : "" }); 

    } 

</script> 

 

Serverside:- 

 

protected void Page_Load(object sender, EventArgs e) 

        { 

            BindDataSource(); 

            var drop = list.ToList(); 

            var dropData = new List<object>(); 

            foreach (var li in drop) 

            { 

                dropData.Add(new { value = li, text = li }); 

            } 

            this.Grid.Columns[2].DataSource = dropData;   //Bind DataSource for the Dropdownlist column in the form of text and value pair 

            this.Grid.DataSource = order.ToList();     

            this.Grid.DataBind(); 

      } 

 

 

public static List<OrderData> BindDataSource() 

        { 

             

            list.Add("Cream"); 

            list.Add("Milk"); 

            list.Add("Eggs"); 

            list.Add("Butter"); 

            list.Add("Curd"); 

            list.Add("yogurt"); 

            List<string> list1 = new List<string>(); 

            list1.Add("Cream"); 

            list1.Add("Eggs"); 

            list1.Add("Curd"); 

            List<string> list2 = new List<string>(); 

            list2.Add("Cream"); 

            list2.Add("Milk"); 

            list2.Add("Butter"); 

            list2.Add("yogurt"); 

            var ordID = 100; 

            var cusID = 200; 

            for (int i = 1; i < 9; i++) 

            { 

   order.Add(new OrderData(cusID + 1, "Sam", ordID + 2, list)); 

                order.Add(new OrderData(cusID + 2, "Mercy", ordID + 4, list1)); 

                ordID += 1; 

                cusID += 6; 

            } 

            

              

            return order; 

           

        } 

 

        public class OrderData 

        { 

            public OrderData() 

            { 

 

            } 

            public OrderData(int CustomerID, string CustomerName, int OrderID, List<string> OrderList) 

            { 

                .   .     . 

                this.OrderList = OrderList; 

 

            } 

 

            public int? OrderID { get; set; } 

            public int CustomerID { get; set; } 

            public List<string> OrderList { get; set; } 

            public string CustomerName { get; set; } 

        } 

Refer to the Screenshot:- 

 

Refer to the sample Link:- 

https://www.syncfusion.com/downloads/support/forum/154021/ze/Sample-2033364684.zip 

Refer to the Demo and Documentation Link for more information about EditTemplate:- 

https://asp.syncfusion.com/demos/web/grid/edittemplate.aspx 

https://help.syncfusion.com/aspnet/grid/editing#cell-edit-template 

You can use MultiSelect dropdownlist on Editing in Webforms as like suggested above. If you have any specific requirement, please get back to us with further details. 

 

Regards, 

Farveen sulthana T 

[Jens Langen]

Your solution works fine for me and solved so many problem in my project.

Thank you so much.

[Farveen Sulthana Thameeztheen Basha]

 Hi Jens,  

 Thanks for your update. We are glad to know that your reported problem has been resolved. Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T