How to display data in child tables when Highlight from Master Table Rows using Bootstrap

Question

I am Developing Template using Bootstrap. I am currently pursuing to develop some bootstrap concepts. I have the below requirement and i want some guidance from the expert team.
I have the master table and it contains master Records like (EmpNo,Name,Address, Gender, Country, DOB, Qualification, EmpDetails, SalaryDetails,ProjectDetails,MedicalDetails,etc)
When i click some row from the master rows, that corresponding details should appear in the child record which is in the right side.
Let us consider, i have 3 child table (1. EmpDetails, 2. SalaryDetails, and 3. ProjectDetails).
How we can elaborate all the child records from master row click.
I used SQL Server for Data storing and front end is .NET

How to achieve this without using asp.net controls and using only bootstrap controls...?

Answer 1

Ok, the advice by AgaveJoe in your comments?

Pots of gold! - I give him the best year of the advice award!!!

Bootstrap does not by magic write the code and logic for you.

Bootstrap does not pull data for you.

All bootstrap does is format your controls.

And THAT includes the standard web form controls.

It can though some “class” settings in the markup do some cool things (such as pop up a div), but it will not layout, nor will it do the code logic for you.

And keep in mind that asp.net web forms for a good 10 years by default DOES include bootstrap.

They play VERY nice together.

What this means?

You can drop in standard controls (list view, grid view) into your form, and then just “set them” to use bootstrap.

They will as a result?

Look nice!!!

Re-size nice!!!

And look like ANY OTHER application that used bootstrap.

I mean, if you just drop in a gridview?

I was going to post a few screen shots of the grid without boot strap formats, but I’ll just skip onto using bootstrap.

Without boostrap grids and listview really looks “bad”

They don’t re-size very nice etc.

But, do ONE magic thing?

Just set the gv CssClass = "table" and that amazing bootstrap GOES to work for you!!!

And I mean REALLY goes to town!!!

Just try it!!!

Now I don’t have your tables handy, but I do have this:

So, let’s say the grid on the left side – we select a row (Hotel booking) and then on the right side, we display the data from the two child tables
one table is payments, and other is room (hotel options).
rows?

So, drop in the grid in a div.

And the above is in a div, so just float another div to the right

And inside of that floated div, drop in two more for the two grids.

Ok, so the total markup for this is this:

(Unfortantly I can’t past html here)

Hey, it fits in one screen full - not a lot!!!

Note VERY careful for each grid we bootstrapped by setting

Cssclass = table

In fact toss in this:

Table table-hover

You get a beauty cursor row hover effect.

And if you want alternating shaded rows, do this:

Table table-hover table-striped

That’s it – and it now REALLY nice.

So, our main code to load this up is this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        If Not IsPostBack Then  
            GridView1.DataSource = MyRst("SELECT TOP 12 * FROM tblHotels ORDER BY HotelName")  
            GridView1.DataBind()  
        End If  
    End Sub  
  

We now have this:

Click on a row, and we get this:

Now, lets add the row click code - you can see the button in the markup, we have this code:

    Protected Sub cmdView_Click(sender As Object, e As EventArgs)  
  
        Dim btn As Button = sender  
        Dim gRow As GridViewRow = btn.Parent.Parent  
  
        If ViewState("MySelRow") <> gRow.RowIndex Then  
            GridView1.Rows(ViewState("MySelRow")).CssClass = ""  
        End If  
  
        gRow.CssClass = " alert-info"  
        ViewState("MySelRow") = gRow.RowIndex  
  
        Dim hID As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")  
  
        GHotelOptions.DataSource = MyRst("SELECT * FROM HotelOptions WHERE Hotel_ID = " & hID)  
        GHotelOptions.DataBind()  
  
        GPayments.DataSource = MyRst("SELECT * FROM HotelPayments WHERE Hotel_ID = " & hID)  
        GPayments.DataBind()  
  
  
    End Sub  

So, we just fill the two child grids based on that row click

Now, I never was a big fan of the built in grid events, and things like alternation row template? (please!!!).

So, I just hard coded into viewstate the last row click, and shove in a bootstrap css.
And I pick up the grid row from the button .parent.parent
We now get this:

We are done!

Wait? Really? That’s it????

Yup!!!

Now note how I did use in-line sql, but I NEVER concatenate user input. (the data key is 100% server side.

What does this mean?

99% of what boot strap does is style and make things look pretty.

And they REALLY make the grids and listviews gorgeous.

So, there no need to change much of your world.

Remember, asp.net HAS to crank out valid 100% PURE legal HTML.

If asp.net did not do that? Then it would not work with any browser etc.

Turns out?

Bootstrap WORKS on that HTML output, NOT the asp.net markup!!!

So, bootstrap does NOT care if this is asp.net, vb.net, or web forms – it does NOT matter!!!
Just drop in your buttons, grids etc.,

So don’t dump the built in controls – they will save you boatloads of work, boatloads of looping code, and they 100% will make hugs and love to both you and bootstrap.

In fact, using bootstrap is a fantastic way to upgrade your look and feel, and do so with VERY little efforts on your part.

I mean I count a total of less then what 20 lines of code for a 3 grids and a relational database drill down to two child tables?

Ok, Bob is your uncle on this one!!!

So, you can’t really beat the setup you have, and that includes using standard asp.net controls, and just setting the cssclass for those controls.

Do that, and it pure magic.

Edit:-----------------------------

The poster asked for a c# version. They are much the same, but of course in c# you spend a wee bit more time having to type cast - but here is the same code as c#:

    protected void Page_Load(object sender, EventArgs e)  
    {  
        if (!IsPostBack)  
        {  
            GridView1.DataSource = MyRst("SELECT TOP 12 * FROM tblHotels ORDER BY HotelName");  
            GridView1.DataBind();  
        }  
    }  
  
  
    protected void cmdView_Click(object sender, EventArgs e)  
    {  
        Button btn = (Button)sender;  
        GridViewRow gRow = (GridViewRow)btn.Parent.Parent;  
  
        if ( (ViewState["MySelRow"] != null) &&    
                ((int)ViewState["MySelRow"] != gRow.RowIndex) )  
        {  
            GridView1.Rows[(int)ViewState["MySelRow"]].CssClass = "";  
        }  
        gRow.CssClass = "alert-info";  
  
        int hID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];  
        ViewState["MySelRow"] = gRow.RowIndex;  
  
        GHotelOptions.DataSource = MyRst("SELECT * FROM HotelOptions WHERE Hotel_ID = " + hID);  
        GHotelOptions.DataBind();  
  
        GPayments.DataSource = MyRst("SELECT * FROM HotelPayments WHERE Hotel_ID = " + hID);  
        GPayments.DataBind();  
    }  
  
    public DataTable MyRst(string strSQL)  
    {  
        DataTable rstData =  new DataTable();  
        using (SqlCommand cmdSQL = new SqlCommand(strSQL,  
            new SqlConnection(Properties.Settings.Default.TEST3)))  
        {  
            cmdSQL.Connection.Open();  
            rstData.Load(cmdSQL.ExecuteReader());  
        }  
        return rstData;  
    }  
    }  
  

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Answer 2

Ok, the add on to this question was we want to select lots of rows - page around - select some more rows.

So, we need a way to manage this selecting. Just drop in a check box right after the "view" button to the markup like this:

note how we bound that check box to a CUSTOM function we will write.

So, when we check the box, we need to add the database PK id to a custom row selection.

The code is NEAR identical to the view button, but we now just persist a "select collection" in our code.

Say like this:

   Protected Sub chkSel_CheckedChanged(sender As Object, e As EventArgs)  
  
        Dim ckbtn As CheckBox = sender  
        Dim gRow As GridViewRow = ckbtn.Parent.Parent  
  
        Dim hID As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")  
        Debug.Print("ck box row cick = " & hID)  
  
        If ckbtn.Checked Then  
            ' user just checked this button  
            ' add to list  
            MySelList.Add(hID)  
            ' highlight with alert color  
            GridView1.Rows(gRow.RowIndex).CssClass = "alert-warning"  
        Else  
            ' user just un-checked this button  
            ' remove from list  
            MySelList.Remove(hID)  
            GridView1.Rows(gRow.RowIndex).CssClass = ""  
        End If  
  
        ' show the selection list in another grid!!!  
  
  
        Dim strSQL As String  
        For Each MyPK In MySelList  
            If strSQL <> "" Then strSQL &= ","  
            strSQL &= MyPK  
        Next  
        If strSQL <> "" Then  
            strSQL = "Select HotelName From tblHotels WHERE ID IN (" & strSQL & ") ORDER BY HotelName"  
            GridChoice.DataSource = MyRst(strSQL)  
            GridChoice.DataBind()  
  
  
        End If  
    End Sub  

And beside our two hotel options and payments grid, we drop in this:

So, we have to add to the base page class our "list" to hold the PK id

Like this:

   Dim MySelList As New List(Of Integer)  
  
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
  
        If Not IsPostBack Then  
            LoadGrid()  
            ViewState("MySelList") = MySelList  
        Else  
            MySelList = ViewState("MySelList")  
        End If  
  
    End Sub  
  
    Sub LoadGrid()  
  
        GridView1.DataSource = MyRst("SELECT TOP 50 * FROM tblHotels ORDER BY HotelName")  
        GridView1.DataBind()  
  
    End Sub  
  

so we just have a simple list of "pk" values. And note how we BOUND the check box to that above list with the function called MySelect(); (returns true or false for selected rows).
that code is this:

   Public Function MySelect(iRow As Integer) As Boolean  
  
        Dim hID As Integer = GridView1.DataKeys(iRow).Item("ID")  
        If MySelList.Contains(hID) Then  
            Return True  
        Else  
            Return False  
        End If  
  
    End Function  
  

So, that function just returns true/false for a given PK id from the custom "list"

Now, the above will thus re-set and show the check box selected regardless of paging used.

But, we can set this grid to page, and of course toss in the pager code.

But, might as well make the grid ALSO highlight in a different color for the selected rows (the ones with check box. We don't' have to do this, but lets do it

   Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound  
  
        If e.Row.RowType = DataControlRowType.DataRow Then  
  
            Dim ckBox As CheckBox = e.Row.FindControl("chkSel")  
  
            If ckBox.Checked Then  
                e.Row.CssClass = "alert-warning"  
            End If  
        End If  
  
    End Sub  
  
  

Add pager class to gridview eg this:

And now we have this:

So I can data page around as much as I want. I am free to check off any check boxes on ANY page I want. and when we page, it will keep (persist) the check boxes, and as noted, I tossed in the cool row highlight as a bonus (no real need to do this). Also note how I pass (shove) the selected list of ID's into that 3rd grid to show the current selection. If I un-select (un-check) a check box, then the row will un-highlight the yellow, and that selection will disappear from the 3rd grid view.

As noted, you never really explained what you want to do with the final selection of each rows. But that selection code is VERY much 100% independent of the page we view, how many pages we have.

As noted, I just set the gv to have datapaging, but as noted, if this was a HUGE list for some reason? Then we would use our new-found knowledge, and dump the built in data pager, put in our own buttons to page the data, and use the new SQL server 2012 (or later feature) that is REAL TRUE paging, and thus thi could work just fine against 200 rows, or 2 million rows.

As noted, not at all clear what is to be done with the selected rows? but, as above shows, its easy to build up and maintain our own custom list of PK database id's for this purpose. I think the selecting would be ok for about 50-100 rows. If a larger type of selecting process is required, then I might create a temp table for some such, since that sql for ID IN (1,2,3,4,5,6 etc.) would start to get a bit long in length. But, for up to say 50 or so, I think that would work just fine.
If more, then I would probably pass that "list" to some sql server store procedure.