Search code examples
javascriptjqueryasp.netdrop-down-menuhtml-select

jquery-editable-select is not working in asp.net dropdownlist

I am trying to implement jquery-editable-select in asp.net dropdownlist tools but its not working while the same thing is working in html select dropdownlist

Here is the code of Html Select Dropdownlist which is working perfect

<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<select id="cmb_year">
    <option>Alfa Romeo</option>
    <option>Audi</option>
    <option>BMW</option>
    <option>Citroen</option>
</select>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
    $('#cmb_year').editableSelect();
</script>

Now the same code for asp.net dropdownlist is not working. Here is the code.

<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">

<asp:DropDownList id="cmb_year" runat="server"></asp:DropDownList>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
    $('#cmb_year').editableSelect();
</script>

Here is the aspx.cs code (from where the dropdownlist is dynamic bind)

service.BindDropdownList(cmb_year, "tbl_year", "year", "Id", "order by Id desc");

Is there any way to convert html select dropdownlist to asp.net editable dropdownlist?

Solution

  • With many of the jQuery utilities such as jQuery multi-select and a few others?

    They often don't play nice with the asp.net DropDropdown list control.

    However, (thankfully), most of the asp.net controls are simply sub-classed HTML controls anyway.

    All you require is to add a runat="server" to the HTML select control, and it now behaves very much the same as the asp.net DropDownList control anyway. This includes the ability to data bind, and also includes both DataValueField, and DataTextField (so, you can even have a display column, and a hidden database PK column upon selection of the drop-down list.

    So, try this markup:

        <title></title>

    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
    <link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet" />


</head>
<body>
    <form id="form1" runat="server">
        <div>

        <select id="cmb_year" runat="server"
            datatextfield="AutoMaker"
            >
        </select>

        <script>
            $('#cmb_year').editableSelect();
        </script>


        </div>
    </form>
</body>

    And code behind:

        protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadData();
    }


    void LoadData()
    {
        // fake a data source
        DataTable rstData = new DataTable();
        rstData.Columns.Add("AutoMaker");

        DataRow MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Alfa Romeo";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Audi";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "BMW";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Citroen";
        rstData.Rows.Add(MyRow);

        cmb_year.DataSource = rstData;  
        cmb_year.DataBind();    


    }

    You can see and note that data bind, and both data Text and Data Value options thus become available for the HTML select control when you add the runat="server" tag.

    Above thus results in this:

    enter image description here

    Edit: Addtional edit, and test

    Ok, so let's clean this up a bit, make sure we on the same page:

    markup:

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

            <title></title>

    <link href="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>


        </head>
        <body>
            <form id="form1" runat="server">
                <div>

                    <select id="cmb_year" runat="server"
                        datatextfield="AutoMaker"
                        >
                    </select>

                    <script>
                        $('#cmb_year').editableSelect();
                    </script>


                </div>
            </form>
        </body>
    </html>

    Code behind:

        void LoadData()
    {
        // fake a data source
        DataTable rstData = new DataTable();
        rstData.Columns.Add("AutoMaker");

        DataRow MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Alfa Romeo";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Audi";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "BMW";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Citroen";
        rstData.Rows.Add(MyRow);

        cmb_year.DataSource = rstData;
        cmb_year.DataBind();
    }

    Working result:

    enter image description here