We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

GenericDropDown DataSource MulitpleSelection Checkboxes

I am trying to implement GenericDropDown DataSource MulitpleSelection Checkboxes but ran into some difficulties.  Here is my code which is working with regular checkboxes in my view chtml:
<div class="editor-field">
                @{
                    List<gThiraMetrix.ViewModel.AssociatedThreatData> associatedThreatList = ViewBag.AssociatedThreats;
                    foreach (var th in associatedThreatList)
                    {
                        @: <div>
                            <input type="checkbox"
                                name="selectedThreats"
                                value="@th.ThreatID"
                                @(Html.Raw(th.Assigned ? "checked=\"checked\"" : "")) />
                                @th.ThreatID @: @th.Name
                        @: </div>  
                    }
                   
                 }
         </div>
 
Here is my code using Syncfusion.GenericDropDown but I dont see the checkboxes.
<div class="edit-field" >
            @{
                List<gThiraMetrix.ViewModel.AssociatedThreatData> associatedThreatList = ViewBag.AssociatedThreats;
                Html.Syncfusion().GenericDropDown("selectedThreats")
                    .DataSource(associatedThreatList)
                    .AllowMultipleSelection(true)
                    .Text("[Select]")
                    .Width(200)
                    .BindTo(bind =>
                        bind.Text("Name")
                        .Id("ThreatID")
                        .Selected("Name")
                        .IsChecked("Assigned")                       
                        .SpriteCSS("SpriteClass")
                        .ImageUrl("Icon")
                        .ImageAttributes("Imageattributes")).Render();
              }
        </div>
 
I am not sure what is wrong with this. Got any Idea?
 
Thanks
 

1 Reply

VR Varalakshmi R.S Syncfusion Team February 25, 2013 09:13 AM UTC

Hi Marie,

 

Currently, we do not provide support to generate check box during data bind. However, this could be achieved by manually adding checkboxes to the GenericDropdown. We have prepared a simple sample to exhibit the check box list in Data bind and the sample can be downloaded from the link given below,

GDD_Checkboxlist.zip

In the attached sample, we have dynamically added the checkboxes in the “ClientSideOnLoaded” event as given in the below code snippet,

<code>

[View]

@{Html.Syncfusion().GenericDropDown("myGenericDropDown", new { style = "display:inline-block;" })

            .DataSource((System.Collections.IEnumerable)Model)

            .BindTo(fields => fields

                .Id("ToolbarItemId")

                .Text("ToolbarItemText")

                .ImageUrl("ImageUrl")

                            ).AllowMultipleSelection(true)

            .ClientSideOnClick("OnClick1").ClientSideOnLoaded("ClientSideOnLoaded")

                            .Render();

        }

[Script]

function ClientSideOnLoaded(sender, args) {

        //Adding checkbox dynamically to GDD control

        $("#myGenericDropDown_DropDownContainer").find(".gddChildItem").each(function (i, item) {

            var html = '<input type="checkbox" name="' + $(item).text() + '" value="' + $(item).text() + '" />';

            $(this).prepend(html);

        });

    }

</code>

Note:  AllowMultipleSelection  should be enabled to allow multiple selection.

 

The values of the checked items will be updated in the textbox using ClientAPI “setText” and this value can be passed to controller during post by including the GenericDropDown control inside Html.BeginForm. the retrieved values then splitted based on the separators to get the selected items collection. Please refer the below code,

<code>

[Controller]

[HttpPost]

        public ActionResult Index(string myGenericDropDown)

        {

            //myGenericDropDown refers the value in the Textbox then split it using separator to retrieve the selected items collection

            IList<string> selectedItems = myGenericDropDown.Split(';').ToList();

            var data = SqlCE.Flags;

            return View(data);

        }

</code>

 

Kindly try the attached sample or modify your sample based on the solution we provided and let us know if this helps.

 

Regards,

Varalakshmi


Loader.
Live Chat Icon For mobile
Up arrow icon