having search bar inside grid with dropdown, how to get floating dropdown when entering last 3 digit

Question

inside grid click on add row it pop up a row contain 3 column 1 with search bar with dropdown where it store data from data base , when entering a digit it starts from first letter I wanted it to take any match from that dropdown .

some code related to above matter

header: "<b> Ac No</b>", width: 200, dataIndex: 'ac_no', sortable: true, editor: {
                   xtype: 'combo',
                   id: 'cmbAccountNo',
                   //store: storeAccNoa,
                   store: {
                       fields: ['id', 'name'],
                       proxy: {
                           type: 'ajax',
                           url: '../a/db.aspx?id=1&AccountNo=' + Ext.getCmp('cmbAccountNo').getValue(),
                       }
                   },
                   displayField: 'name',
                   valueField: 'id',
                   queryMode: 'local',
                   selectOnFocus: true,
                   triggerAction: 'all,
                   autoSearch: true,
                   multiSelect: true
}

it takes value as it store from database i want it to be like in mysql like operator '51%' or '%%' while searching floating dropdown show anymatch related to it. It would be kind enough if anyone can help. Thank you.

Answer 1

Well, it seems to me you have 2 VERY different parts here.

The first part, is we need a type as a you search text box. There is a "gazillion" examples and ways to do achieve this task.

So, you need to get a type-as you search combo box (drop down list), or even use one of many examples that work with a text box.

ONCE and ONLY once you have that code all wired up, and all working as you like?

then NEXT step is to adopt some kind of dialog system and helper to pop up a dialog display to allow entry of some values (3 in your case - including that search/type text box).

So, the first part, the first task, the first goal is to build + setup a working type/search box.

And, it not clear why you want a popup dialog for adding a row, and yet not use the SAME code and all that time + money to ALSO use that SAME code and system to edit a row? Why not integrate the pop dialog to do BOTH tasks. (edit and adding). That way, for all that time + effort, you have a solution that does double duty here. And MORE valuable then is you have the SAME UI for adding or editing! (users will have a smaller learning curve).

So, let's get that text box with "auto complete" working first.

I don't have your data, so let's assume our gridview going to edit hotels, and we have a city field.

So, let's setup a text box to "select" or search for city.

As noted, a billion examples exist on how to do this. You want to adopt ONE example, or ONE system that works, and one that you can use over and over.

So, since everyone has jQuery these days, then a good choice is to use jQuery.UI (so, add jQuery.UI to your project). And jQuery.UI is a great choice, since it has a FANTASTIC 2nd feature - a dialog pop ability!

So, first part, our working text box.

So, we have this markup:

        <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static">
        </asp:TextBox>


    <script>

            $(document).ready(function () {
                $("#<%=TextBox1.ClientID %>").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "AutoCompleteTest.aspx/CboSearch",
                            data: JSON.stringify({q : request.term, limit: '10' }),
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            dataFilter: function (data) { return data; },
                            success: function (data) {
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item.City
                                    }
                                }))
                            }
                        });
                    }
                });
            });

    </script>

and code behind for the auto-search is this:

jQuery, jQuery.UI

    [WebMethod]
    public static List<tdata> CboSearch(string q, int limit)
    {
        List<tdata> hCities = new List<tdata>();
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL =
                @"SELECT City FROM City
                WHERE City like @s + '%'
                ORDER BY City";

            using (SqlCommand cmd = new SqlCommand(strSQL, conn))
            {
                cmd.Parameters.Add("@s", SqlDbType.NVarChar).Value = q;
                conn.Open();
                DataTable dt = new DataTable();
                dt.Load(cmd.ExecuteReader());

                foreach (DataRow dr in dt.Rows)
                {
                    tdata OneItem = new tdata();
                    OneItem.City = dr["City"].ToString();
                    hCities.Add(OneItem);
                }
            }
        }
        return hCities;
    }

So, the result of above is this:

So, now next up is to build our pop dialog, and include the above as part of our design.

So, what pop dialog to use? Again, a billion examples via google, but SINCE we gone to ALL that effort and trouble to adopt jQuery.UI? Then use the dialog untility.

The jQuery.UI dialog utility allows you to take a "div" you placed on the page, and pop/create a dialog out of any content you place inside of that div.

So, since we going to spend all that time and effort to pop a dialog to "add" a new row, why not use that SAME time + effort to use that same work for editing the row from the grid view? (that way, the user does not have to learn 2 sets of UI to work with the data).

So, now, let's setup our grid view.

Nothing special, a simple grid view, and a button on the row called "edit".

So, our gv is this:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" Width="40%" GridLines="None"
    CssClass="table table-hover">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button ID="cmdEdit" runat="server" Text="Edit"
                    OnClick="cmdEdit_Click" Height="32px" CssClass="btn" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />

And our code to load that gv is this:

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

    void LoadGrid()
    {
        string strSQL = 
            @"SELECT * FROM tblHotelsA ORDER BY HotelName";

        GridView1.DataSource = General.MyRst(strSQL);
        GridView1.DataBind();
    }

And now we have this:

So, now we have our edit button (and we add the "add" button in a bit).

So, when we hit edit, all we have to do is fill out some controls (in a div), and then call the jQuery.UI pop div.

And inside of our div, we include our "search as we type" text box for the city field.

So, our div REALLY can be anything we want. Your case is the 3 columns, but I don't see why after going to all this trouble, that you include MORE then 3 values, but in fact include ALL values you want to edit. After all, the effort + time to setup edit of 3 values? Not really any more effort than to edit 10 values, right?

So, our markup can look like this:

(actually, I should JUST post a div with 1 or 2 controls. It does NOT matter what we put in the div, only that jquery.ui going to make this a dialog.

But, here is the markup for this div (our div to edit and add records).

 <div id="EditRecord" runat="server" style="float: left; display: normal; padding: 15px">
    <div style="float: left" class="iForm">
        <label>HotelName</label>
        <asp:TextBox ID="txtHotel" runat="server" Width="280" f="HotelName" /><br />
        <label>First Name</label>
        <asp:TextBox ID="tFN" runat="server" Width="140"  f="FirstName"/><br />
        <label>Last Name</label>
        <asp:TextBox ID="tLN" runat="server" Width="140" f="LastName" /><br />
        <label>City</label>
        <asp:TextBox ID="tCity" runat="server" Width="140" f="City" ClientIDMode="Static" /><br />
        <label>Province</label>
        <asp:TextBox ID="tProvince" runat="server" Width="75" f="Province" /><br />
    </div>
    <div style="float: left; margin-left: 20px" class="iForm">
        <label>Description</label>
        <br />
        <asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine"
            Height="150px" f="Description"></asp:TextBox><br />
        <asp:CheckBox ID="chkActive" Text=" Active" runat="server" 
            TextAlign="Right" f="Active" />
        <asp:CheckBox ID="chkBalcony" Text=" Has Balcony" runat="server" 
            TextAlign="Right" f="Balcony"/>
    </div>
    <div style="clear: both"></div>
    <button id="cmdSave" runat="server" class="btn myshadow" type="button"
        onserverclick="cmdSave_ServerClick">
        <span aria-hidden="true" class="glyphicon glyphicon-floppy-saved">Save</span>
    </button>

    <button id="cmdCancel" runat="server" class="btn myshadow" style="margin-left: 15px"
        type="button"
        onclick="$('#EditRecord').dialog('close');return false;" >
        <span aria-hidden="true" class="glyphicon glyphicon-arrow-left">Back/Cancel</span>
    </button>

    <button id="cmdDelete" runat="server" class="btn myshadow" style="margin-left: 15px"
        type="button"
        onserverclick="cmdDelete_ServerClick"
        onclick="if (!confirm('Delete Record?')) {return false};">
        <span aria-hidden="true" class="glyphicon glyphicon-trash">Delete</span>
    </button>

    </div>

Now, in above I used "button" in place of asp.net buttons, and ONLY reason was I wanted to use icons for the button. But, plain asp.net button, or a "button" with runat=server really amounts to just a simple button.

OK, so now we need to add code to our "edit" button.

That button will:

• Get the row data

• Fill out the div

• Call code to pop the div.

So, that code is this:

    protected void cmdEdit_Click(object sender, EventArgs e)
    {
        Button cmdEdit = (Button)sender;
        GridViewRow gRow = (GridViewRow)cmdEdit.NamingContainer;

        string PKID = GridView1.DataKeys[gRow.RowIndex]["ID"].ToString();
        ViewState["PKID"] = PKID;

        string strSQL
            = $"SELECT * FROM tblHotelsA WHERE ID = {PKID}";
        DataTable rstData = General.MyRst(strSQL);
        General.FLoader(EditRecord, rstData.Rows[0]);  // send table row to div

        // now call the jQuery.ui pop dialog routine.
        string MyJava = $"pophotel('{cmdEdit.ClientID}')";
        Debug.Print(MyJava);

        ClientScript.RegisterStartupScript(Page.GetType(), "mypop", MyJava, true);

    }

And our jQuery.UI code that above calls to pop the dialog is this:

    <script>
        function pophotel(sBtn) {
            var mydiv = $("#EditRecord")
            var btn = $('#' + sBtn)
            console.log('get btn done')
            mydiv.dialog({
                modal: true, appendTo: "form",
                title: "Edit Hotel", closeText: "",
                width: "44%",
                position: { my: 'right top', at: 'left bottom', of: btn },
                dialogClass: "dialogWithDropShadow"
            });
        }

So, now we get this effect:

So, now all we need is a "add button".

But, that add button will run the EXACT same code above. and the add button don't belong "in the" grid, but should be a simple Add button either above the GV, or below it.

but, as above shows, I written very little server side code. Most of this was drag + drop text box from the tool box onto the web form.

Ok, so NOW that we spent all that time to edit a row, then drop in a add button, and CALL the SAME code.

So, we now have this:

        </asp:GridView>
        <br />
        <asp:Button ID="cmdAdd" runat="server" Text="Add" 
            CssClass="btn"
            OnClick="cmdAdd_Click"
            />

So, we have a add button.

All that button will do is create a new blank row, and call the SAME edit routines above.

    protected void cmdAdd_Click(object sender, EventArgs e)
    {
        string PKID = "0";
        ViewState["PKID"] = PKID;
        DataTable rstData = General.MyRst("SELECT * FROM tblHotels WHERE ID = 0");
        DataRow MyNewRow = rstData.NewRow();
        General.FLoader(EditRecord,MyNewRow);
        // now call the jQuery.ui pop dialog routine.
        string MyJava = $"pophotel('{cmdAdd.ClientID}')";
        ClientScript.RegisterStartupScript(Page.GetType(), "mypop", MyJava, true);
    }

So, at the end of the day?

If you going to make all that effort to pop a dialog? Then might as well then pop a dialog to edit all of the data for that gv row.

and then, we might as well save world poverty, and thus use the SAME code and routines to edit or add data.

and this also means that the end user does not need to learn and absorb two ways, one to edit data, and one to add data. They have the same UI for both cases. So, a win win here, since we save developer coding time, and this also results in a single and better UI for the end user.