GaniTPT avatar image
0 Votes"
GaniTPT asked AlbertKallal-4360 edited

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

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 controls and using only bootstrap controls...?


image.png (37.1 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

How we can elaborate all the child records from master row click.

Typically, the master table has foreign keys relationships to the child tables. Use the keys found in the master record to fetch the child records.

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

I strongly recommend using ASP.NET Web Forms controls in a Web Forms application. It is possible to achieve this task using web methods, JavaScript/JQuery, JSON, and AJAX in a single page application style. AJAX and the web methods work together to send and receive JSON data. The JavaScript/JQuery application will contain code to render HTML, the UI, according to whatever version of Bootstrap you are using. It is up to you to design and write the JavaScript/JQuery application.

I would use the Web Forms GridView to render the tables rather than writing a JavaScript/JQuery application. All you have to do is design code in the the selected row handler that reads the child keys in the selected row then uses these keys in queries to populate the child tables. What I'm describing is the standard Web Forms page life cycle. All that's left is adding Bootstrap table classes to style the GridView however you like.

1 Vote 1 ·

Hi @GaniTPT ,
Bootstrap could design with css style. If you want to show like the table with your data, you could use Bootstrap Table. However, I suggest you could use gridview control. It has rowdatabound event, and then you could get the current row to select the detail information.You could refer to below article:

Best regards,
Yijing Sun

0 Votes 0 ·
GaniTPT avatar image GaniTPT YijingSun-MSFT ·

Thanks for your help...
can i have some rich design (using bootstrap design) with grdiview examples (with child controls)...??

0 Votes 0 ·
AlbertKallal-4360 avatar image
0 Votes"
AlbertKallal-4360 answered AlbertKallal-4360 commented

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 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).

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")
         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)
         GPayments.DataSource = MyRst("SELECT * FROM HotelPayments WHERE Hotel_ID = " & hID)
     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????


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, HAS to crank out valid 100% PURE legal HTML.

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

Turns out?

Bootstrap WORKS on that HTML output, NOT the markup!!!

So, bootstrap does NOT care if this is,, 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 controls, and just setting the cssclass for those controls.

Do that, and it pure magic.


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");
     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);
         GPayments.DataSource = MyRst("SELECT * FROM HotelPayments WHERE Hotel_ID = " + hID);
     public DataTable MyRst(string strSQL)
         DataTable rstData =  new DataTable();
         using (SqlCommand cmdSQL = new SqlCommand(strSQL,
             new SqlConnection(Properties.Settings.Default.TEST3)))
         return rstData;

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

image.png (20.4 KiB)
image.png (96.0 KiB)
image.png (63.5 KiB)
image.png (74.1 KiB)
· 9
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for your great story and it is definitely helps to Microsoft for marketing their product.

Anyhow, i used gridview controls in many projects and same logic will be executing in many places.

But we feel that, when we have the large data (Millions of records) and loading into page through gridview then it's taking long time to display into the screen.

particularly when we select on row in grid view, it is deeply thinking to display the data in child controls. (that much time it is taken).

even if i use html controls (using run at server) designed by bootstrap, loading the data has faster( in html) as compared than gridview.

if the below points would give more proper guidance, then my problem will be solved.

1.Gridview controls should accept and give more rich design through Bootstrap.

2.How to avoid more time to load data if millions of records.

3.If millions of records, then handling the paging is difficult. especially to highlight the selected row.

4.when we use paging, then showing the highlighting rows is not proper order.

if i get the correct answer for the above points, then my problem will be solved..

0 Votes 0 ·

Just one more follow up.

You can now use what is called SQL server paging here. In other words, create your own pager routine. It would work instant even if you wanted to have say 5 million rows from the table that drives the list/grid view.

In other words, I don't recommend the data page for more then say 300 records tops.

However, what you can now do is dump the data pager, and build your own next/previous buttons. SQL server since version 2012 has now what we call OFFSET AND FETCH NEXT - this is real data paging!!!
Ti looks like this:

 DECLARE @PageNumber AS INT, @RowspPage AS INT
 SET @PageNumber = 2
 SET @RowspPage = 10 
 OFFSET ((@PageNumber - 1) * @RowspPage) ROWS

So, you can have a off-set, and number of rows.

The above approach would thus work instant even against a table of 5 million rows. There are a number of examples floating around even for, in which one can cobbled together a custom pager - one that would work instant even against 5 million rows. And it in fact would work faster then a lv/gv data pager pulling 300 rows!!!

I don't have a good example (yet!!!), but here is one:


0 Votes 0 ·
GaniTPT avatar image GaniTPT AlbertKallal-4360 ·

Yes. It is incredible explanation.

can we have sample paging in gridview with highlighted row (all pages highlighted row with child tables)..?

0 Votes 0 ·
Show more comments

can you pls. give us the complete c# code which is showing your example.

0 Votes 0 ·

2.How to avoid more time to load data if millions of records.

How, there is no solution on planet earth for that problem.
Don't do that!!!

What application needs and will load millions of records into a browser? This is a case of bad design from the get go, and then trying to blame listview/gridview?

the problem is not "any" control you use, the problem is to limit the data in the first place. ANY solution, I repeat ANY solution that runs faster and better will simple not pull that much data. I mean, what application have you ever used in which you present a user will 1 million rows of data, and then say "have at it?". What then?

Show me a faster working solution and you be showing me that the developer made MORE efforts to not pull so much data in the first place.

I mean, such data needs some criteria to limit the data. I can't see how any user can deal with, a crawl their way though so much data.

when we use paging, then showing the highlighting rows is not proper order.

Paging, and that of a simple row select are TWO very different things, and TWO very different issues.

As my post code shows, selecting a grid row is trivial to highlight and select that row. That's 100% separate from limiting the data you pulled.

The layout of that grid is bootstrapped. For better control, I suggest listview, You can drag + drop standard controls into that list view, and you don't have the messy "template" tags around each control. (so after about 4-5 controls, listview is MUCH less markup.

1 Vote 1 ·

Well using Ajax, or JavaScript or code behind to pull data is the SAME speed.

One approach will not out of the blue say:

 hello Mr. SQL server, will you please dish out data faster?

SQL server does not know or care if this is ms-access for the desktop or some web page - it still pulls data at the same speed.

So, speed of a a Gridview/listview will be as fast as ANYTHING else you decide to use. The only issue then becomes how much data are you going to pull from the server into that grid?

I mean, obviously for anything more then say a 100 rows, you can't display that on a page anyway (so introduce a data pager to that grid/list view, right?).

So once again, speed of listview/gridview tends to be as fast as anything else - in fact often faster, since OH so often those other approaches involve all kinds of code looping, and all kinds of hand-stands.

In other words, in most cases the less code you write, the faster it will perform. And in most cases hand coding some loops etc. compared to databind of a grid/listview? No contest - the built in controls work MUCH faster. And they are boatloads of less work to code out.

I mean, think of Google, or even any desktop program. You enter a city, or some criteria, and THEN display the results. We don't for example say download the whole internet into the browser and THEN let you hit say control-f to search that whole huge result.

0 Votes 0 ·

can you pls. give us the complete c# code which is showing your example.

Sure, I am fluent in both. Let me edit the original and post c# code.

0 Votes 0 ·
AlbertKallal-4360 avatar image
0 Votes"
AlbertKallal-4360 answered AlbertKallal-4360 edited

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
             ' highlight with alert color
             GridView1.Rows(gRow.RowIndex).CssClass = "alert-warning"
             ' user just un-checked this button
             ' remove from list
             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
         If strSQL <> "" Then
             strSQL = "Select HotelName From tblHotels WHERE ID IN (" & strSQL & ") ORDER BY HotelName"
             GridChoice.DataSource = MyRst(strSQL)
         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
             ViewState("MySelList") = MySelList
             MySelList = ViewState("MySelList")
         End If
     End Sub
     Sub LoadGrid()
         GridView1.DataSource = MyRst("SELECT TOP 50 * FROM tblHotels ORDER BY HotelName")
     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
             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.

image.png (25.9 KiB)
image.png (14.3 KiB)
image.png (6.8 KiB)
image.png (72.2 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.