Two grids with side by side columns

[Vishal]

I have two grid with same number and type of columns. The number of rows are also same.
Only difference is the content of the grids.
Basically I want to show the difference in two grids for each column.
I want to show first column from both the grids, then second column from both the grids and so on.
How I can achieve this?

[Princy]

Hi,

I guess you want to combine the columns from different table.Please have a look at this DEMO.This shows combining columns with multiple headers.Try if this helps.

Thanks,
Princy

[Vishal]

Hi,

I want to combine the columns from different grids, not from different table.
I don't know the columns of these grids as they are dynamically build and can be different based on input.
But one thing is sure that both grids will have same number and type of columns.
I have to take each column from both the grids and show side by side.
Something like attached image.

[Princy]

Hi,

I'm not sure if you can do it that way using two grid,to combine columns. i have tried it but no hope, but i have tried setting each column in different grid,and apply CSS property to combine the view.The code is as below.I have attached a screenshot to what i have done.

ASPX:

<telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="SqlDataSource1" Width="100px">
            <MasterTableView AutoGenerateColumns="false">
                <Columns>
                    <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <br />
         <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" Width="100px" CssClass="style">
            <MasterTableView AutoGenerateColumns="false">
                <Columns>
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" UniqueName="CustomerID" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
         <telerik:RadGrid ID="RadGrid3" runat="server" DataSourceID="SqlDataSource1" Width="100px" CssClass="style1">
            <MasterTableView AutoGenerateColumns="false">
                <Columns>
                    <telerik:GridBoundColumn DataField="ShipRegion" HeaderText="ShipRegion" UniqueName="ShipRegion" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <br />
         <telerik:RadGrid ID="RadGrid4" runat="server" DataSourceID="SqlDataSource1" Width="100px" CssClass="style2" >
            <MasterTableView AutoGenerateColumns="false">
                <Columns>
                    <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

CSS:

<style type="text/css">
 .style
 {
  left: 110px;
  position:absolute;
  top: 8px;
  width: 100px;
 }
 .style1
 {
  left: 230px;
  position: absolute;
  top: 8px;
  width: 100px;
 }
 .style2
 {
  left: 332px;
  position: absolute;
  top: 8px;
  width: 100px;
 }
</style>

Thanks,
Princy