0

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?

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
7
  • same output result is showing. If I add runat="server" to the select dropdownlist then editable features is not working.
    – s.k.Soni
    Commented Dec 26, 2023 at 5:32
  • Hum, using the first example (raw HTML with "select") seems to work the same for me. It not clear what "editing" is supposed to do here? In the first (working) example, the dropdown works, but is there more options or ability to edit or add? I guess I not clear what the first exmaple does, since it looks and works the same as my 2nd example when I tag "select" with a runat server. Both look and work the same... (perhaps I better google or play a bit more.....).
    – Albert D. Kallal
    Commented Dec 26, 2023 at 5:35
  • See my 2nd edit, it sure seems to work just fine for me. So the idea here is that the drop down list (select) is converted into a text box with typing + matching. And the above posted 2nd example shows the same behavior's as the 1st posted example. I mean, obviously the content delivery script and css does require the https:// in front, and my first example was missing as such. Try the 2nd example (edit) again
    – Albert D. Kallal
    Commented Dec 26, 2023 at 6:02
  • Nope didn't work for me. Is it possible that I am working on content page of MasterPageFile in asp.net that's why it is not working?
    – s.k.Soni
    Commented Dec 26, 2023 at 6:22
  • 1
    $('#<%=cmb_year.ClientID%>').editableSelect(); this is working for me. Thank you Sir. Thank You So Much. :)
    – s.k.Soni
    Commented Dec 26, 2023 at 6:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.