I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their <divs>
I have created a stripped down JsFiddle that shows the problem:
http://jsfiddle.net/drysg/Rh7cL/ Full Browser version:
http://jsfiddle.net/drysg/Rh7cL/embedded/result/
I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.
I am looking for a pure CSS solution that:
1. Expands Grid, Chart, and Map to fill the screen at outset
2. Browser Resize will dynamically resize the Grid, Map, and Chart
(they will shrink to available space like any good WPF or Silverlight app!
3. If needed, I would tolerate a JQuery approach that responded to window resize events.
If you look closely you will see there are actually 4 issues:
1. The map height is not 100% of the needed space
2. The TabStrip that holds the Chart & Grid is not filling 100% of the height
2. There is a scrollbar on the TabStrip that holds the Chart
and Grid (I want that removed since they should be filling the space)
3. What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)
The layout hierarchy is as follows:
I. Top Window
1. Title DIV
2. Splitter
A. Map
B. TabStrip
i. Table DIV
a. Menu
b. Grid
ii. Chart
How to make Gridview control to group in each column of data?
Hi, I have a web project which uses webform with Gridview to display the SQL server table data,
Data in Gridview Control is as this grid format:
Data 1 | Data 2 | Data 3 Amount1 Amount2 Amount3
Data 1 | Data 2 | Data3 Amount1 Amount2 Amount3
Data 1 | Data 2 | Data 3 Amount1 Amount2 Amount3
Data 1 | Data 2 | Data 3 Amount1 Amount2 Amount3
Ground Total: Gtotal1 Gtotal2 Gtotal3
I expact the data to be shown in the report in this way:
+Data1 Subtotal1 Subtotal2 Subtotal3
Ground total Gtotal1 Gtotal2 Gtotal2
Click +Data1 to expand it, it should be:
-Data1 Subtotal1 Subtotal2 Subtotal3
+Data2 SecondSubtotal1 SecondSubtotal2 SecondSubtotal3
Gtotal1 Gtotal2 Gtotal3
Click +Data2 to expand it, it should be:
-Data1 Subtotal1 Subtotal2 Subtotal3
-Data2 SecondSubtotal1 SecondSubtotal2 SecondSubtotal3
+Data3 ThirdSubtotal1 ThirdSubtotal2 ThirdSubtotal3
Gtotal1 Gtotal2 Gtotal3
Click +Data3 to expand it, it should be:
-Data1 Subtotal1 Subtotal2 Subtotal3
-Data2 SecondSubtotal1 SecondSubtotal2 SecondSubtotal3
-Data3 ThirdSubtotal1 ThirdSubtotal2 ThirdSubtotal3
DetailsAmt1 DetailsAmt2 DetailsAmt3
Ground Total Gtotal1 Gtotal2 Gtotal3
Of cause, the + and - sign in the report will be able to expand and collapse.
After did some search from the internet, somebody mention Jqgrid, or telirik tool, etc. but most of them are only works on first level of group, not more than one group, I appricate anybody can provide any solution to achieve this goal. Some examples will be helpful