How to display Gridview data with select option in pop up on change of text box inside table structure

Question

Hi All,

Requirement:

• I have a html table which allows to add rows dynamically on click of button.
• First column of table have a textbox in which i will be typing item name (coming from Product Table) using jquery ajax.=>Done
• As soon as select an item and hit tab, it should ask open the pop up (if more than 1 entry exist in inventory table) with first column as "Select".=>Not done.
• 

• What I am doing is, on change of textbox(having a class name) calling web method which is returning a JSON string.
• If length is greater than 1 then convert it to table (javascript function).
• Isn't there any easy way jsut like c# to directly bind the source to gridview so I can control the columns and other options using gridview?
• Or any better approach we can use rather than this pop up?
• Why I am choosing pop up => user should be able to read other column content easily.

Please guide.

Answer 1

A good question!

So, enter value into text box, hit tab.

If ONE value, then probably return some values and information, let user keep typing and working.

If MORE then one value, then we need to pop up a dialog with the ability to select a row.

Hence, your question:

"any easy way jsut like c# to directly bind the source to gridview so I can control the columns and other options using gridview?"

Yes, and I suggest you do actually pop up a gridview!!

The trick is formatting.

Now, there are a dozen ways to do this.

However, the best so far?

Pop a web page with a gridview, since your already using a jQuery.UI dialog as your screen shot shows.

So, a few assumptions:

That gv you pop is NOT to have any post-backs. Now, keep in mind, it is possbile to have post-backs, but for now, since we don't have to post-back, then we don't. This also means we don't have to adopt a update panel. I find that the "big" issue with using a update panel is that you still doing a post-back, and that OFTEN means the control focus is messed up.

So, we will pop a gridview.

The GridView can and even should be a 100% seperate page.

The Gridview row click or selecting will run JavaScript code, and that code is in the CURRENT page!

Upon selecting the row, then things like the PK value, or even some of the other column data can be returned.

I don't have your data, but lets assume a simple text box, in place of your part number, I going to enter a City. (say for hotel selection).

If I type in a City with ONE hotel match only, then I don't pop the dialog, and just allow the user to continue working.

If upon enter of a city with more then one match, then we pop that grid.

So, our simple markup is this:

            <div style="float:left">
                Enter City: <br />
                <asp:TextBox ID="txtCity" runat="server" ClientIDMode="Static"
                    onchange="citychange(this);return false;">
                </asp:TextBox>
            </div>

            <div style="float:left;margin-left:10px">
                Hotel <br />
                <asp:TextBox ID="txtHotel" runat="server" ClientIDMode="Static"  >
                </asp:TextBox>
            </div>

            <div style="float:left;margin-left:10px">
                Hotel PK
                <asp:TextBox ID="txtPK" runat="server" ClientIDMode="Static"  >
                </asp:TextBox>
            </div>

            <div style="float:left;margin-left:10px">
                <asp:Textbox ID="txtDesc" runat="server" ClientIDMode="Static" 
                    TextMode="MultiLine"
                    width="250px" Height="85px"
                    >
                </asp:Textbox>
            </div>

            <div id="mygrid" runat="server">

            </div>

and right below is our JavaScript code to pop the grid, and setup values.

This code:

        <script>
            function showgrid(btn) {
                var myDialog = $("#mygrid");
                var sCity = $(btn).val()

                myDialog.dialog({
                    title: "Select Hotel",
                    modal: true,
                    position: { my: "left top", at: "right bottom", of: btn },
                    dialogClass: "dialogWithDropShadow",
                    buttons: {
                        Cancel: function () {
                            myDialog.dialog('close')
                        }
                    },
                    autoOpen: false,
                    closeText: "",
                    width:"45%"
                });
                myDialog.load("../Controls/HotelSel.aspx?City=" + sCity)
                myDialog.dialog('open')

            }

            function mysel(btn) {
                var myDialog = $("#mygrid");
                myDialog.dialog('close')
                $('#txtHotel').val($(btn).attr("HotelName"))
                $('#txtPK').val($(btn).attr("PK"))
                $('#txtDesc').val($(btn).attr("Description"))
            }

            function citychange(tBox) {
                // get/check how many rows for given city.
                var sCity = $(tBox).val()
                $.ajax({
                    type: "POST",
                    url: "PopGridControl.aspx/GetCityCount",
                    data: JSON.stringify({City : sCity}),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (retInfo) {
                        myinfo = retInfo.d
                        if (myinfo.RowCount == 1) {
                            $('#txtHotel').val(myinfo.HotelName)
                            $('#txtPK').val(myinfo.PK)
                            $('#txtDesc').val(myinfo.Description)
                        }
                        if (myinfo.RowCount > 1) {
                            showgrid(tBox)
                        }
                        if (myinfo.RowCount == 0) {
                            alert("no rows")
                        }
                    },
                    error: function (xhr, status, error) {
                        var errorMessage = xhr.status + ': ' + xhr.statusText
                        alert('Error - ' + errorMessage)
                    }
                });
            }

        </script>

Note how we load a 100% Gridview here.

that other page is this:

    <asp:GridView ID="GridView1" runat="server"
        CssClass="table table-hover" AutoGenerateColumns="false"
        DataKeyNames="ID">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="First" />
            <asp:BoundField DataField="LastName" HeaderText="Last" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="HotelName" HeaderText="City" />
            <asp:BoundField DataField="Description" HeaderText="Description" />
            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:Button ID="cmdRowSel" runat="server" Text="Select"
                        CssClass="btn"
                        OnClientClick="mysel(this);return false"
                        PK='<%# Eval("ID") %>'
                        HotelName='<%# Eval("HotelName") %>'
                        Description='<%# Eval("Description") %>' />

                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

so, just a plain jane web page. Just a gv.

Code behind for above:

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

        void LoadGrid()
        {
            string sCity = "";
            SqlCommand cmdSQL =
                    new SqlCommand(@"SELECT * FROM tblHotelsA ORDER BY HotelName");

            if (Request.Params["City"] != null)
            {
                sCity = Request.Params["City"].ToString();
                cmdSQL.CommandText  = @"SELECT * FROM tblHotelsA 
                                       WHERE City = @City ORDER BY HotelName";
                cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = sCity;
            }

            GridView1.DataSource = General.MyRstP(cmdSQL);
            GridView1.DataBind();   

        }

So, the result is this:

One row match, we get this:

However, if more then one row, then we get and see this:

So, as long as the jQuery.UI does not post-back, then we can use mostly server side code, and pop a gridview, and still use ajax, and still not have any post-backs

Edit: So, this example is a proof of concpet.

the summary is:

We created a web method to call in the text box onchange event (client) side. That method returns the row count, and if count = 1, then take the returned values, shove into other columns (or controls) or continue. If more then one match, we pop that OTHER page, and let user select from the GV.

So, the code behind (web method) used was this:

        [WebMethod()]
        public static Dictionary<string, string> GetCityCount(string City)
        {
            // query city table, get hotel count for city

            SqlCommand cmdSQL = new
                SqlCommand(@"SELECT ID, HotelName, Description 
                            FROM tblhotelsA WHERE City = @City");
            cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = City;

            DataTable rstCity = General.MyRstP(cmdSQL);
            Dictionary<string, string> myinfo = new Dictionary<string, string>();
            if (rstCity.Rows.Count == 1)
            {
                myinfo.Add("RowCount", rstCity.Rows.Count.ToString());
                myinfo.Add("PK", rstCity.Rows[0]["ID"].ToString());
                myinfo.Add("HotelName", rstCity.Rows[0]["HotelName"].ToString());
                myinfo.Add("Description", rstCity.Rows[0]["Description"].ToString());

            }
            else
            {
                myinfo.Add("RowCount", rstCity.Rows.Count.ToString());
            } 

            return myinfo;

        }

Note how I used a dictionary to return values with above web method.

And note how I return values from the gridview.

So, all of this rough code, but is a working proof of concept.