This is a migrated thread and some comments may be shown as answers.

Frozen Dynamic Columns

8 Answers 253 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 14 Jul 2010, 02:48 PM
Hello Telerik team! Your controls are amazing, they are helping out my project quite a bit...
I am having a serious problem with the RadGrid however.

Basically I have a RadGrid where I have 2 static columns whose header text is supposed to be horizontal. But I also dynamically insert BoundColumns from db, and that header text needs to be vertical. Unfortunately when I mess with the header text on the dynamic columns, the control goes haywire.

The scrollbar is not accurately scrolling the rest of the dynamic fields smoothly, it is extremely jumpy.
Also, the gridlines and column headers are not aligned.

I have attached a picture of what our UI wireframe is supposed to look like.

And I have attached a picture of what it looks like right now.

I have tried a TON of tweaks that I have seen in various places on the site (tablelayout = auto/fixed, autogeneratecolumns=true/false, wrapping in a table with fixed layout, etc.), but nothing is solving this issue with the vertical text in the grid headers. Any help is much appreciated!!

8 Answers, 1 is accepted

Sort by
0
Justin
Top achievements
Rank 1
answered on 14 Jul 2010, 09:14 PM
OK perhaps i should include some code snippets so you all can see whats up here.
ASPX side:
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" Skin="MicrobeNetSkin" EnableEmbeddedSkins="false" Gridlines="Both" OnItemCreated="RadGrid1_ItemCreated" OnPreRender="RadGrid1_PreRender" >
    <MasterTableView TableLayout="Auto">
     
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="True" ScrollHeight="300px" SaveScrollPosition="true" UseStaticHeaders="true" FrozenColumnsCount="2"/>
    </ClientSettings>
</telerik:RadGrid>

C# side:
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    string strColName = "";
    foreach (GridColumn col in RadGrid1.MasterTableView.RenderColumns)
    {
        strColName = col.UniqueName;
        foreach (GridHeaderItem headeritem in RadGrid1.MasterTableView.GetItems(GridItemType.Header))
        {
             
 
            if (strColName == "Zimmermannellafaecalis" || strColName == "Zimmermannellahelvola")
            {
                headeritem[strColName].CssClass = "SelectedRow_Web20";
                headeritem[strColName].VerticalAlign = System.Web.UI.WebControls.VerticalAlign.Bottom;
                //headeritem[strColName].Width = Unit.Pixel(400);
            }
            else
            {
            headeritem[strColName].CssClass = "verticaltextG";
            //    //headeritem[strColName].Width = Unit.Pixel(20);
            //    headeritem[strColName].VerticalAlign = System.Web.UI.WebControls.VerticalAlign.Middle;
 
                HyperLink hyplnk = new HyperLink();
                hyplnk.Text = strColName;
                hyplnk.NavigateUrl = "http://www.google.co.in/";
                headeritem[strColName].Controls.Clear();
                headeritem[strColName].Controls.Add(hyplnk);
                //headeritem[strColName].Width = Unit.Pixel(400);
            }
       }
    }
}

CSS side:
.verticaltextG
{
    font-weight:bold;
    writing-mode: tb-rl;
    filter: flipH() flipV();
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    max-height:60px;
    padding-bottom:5px;
 
    background-color: #D3D3D3;
    padding: 5px 5px 5px 5px;
     
}
th.verticaltextG
{
    color:Black;
    border: solid 1px LightSlateGray;
}
0
Dimo
Telerik team
answered on 15 Jul 2010, 09:06 AM
Hi Justin,

When using frozen columns, the scrolling is not smooth, because it is not a real scrolling at all - the non-frozen columns are actually hidden and shown.

As to the header/data cell misalignment - this is usually caused by incorrect padding and border styles in the skin - the sum of left paddings and left border widths of header cells should be equal to the sum of left paddings and left border widths of the data cells (for all kinds of rows - filter, item, alternating item, footer, group header, etc). The same rule applies for the right paddings and right border widths.

If you need further assistance, please send your custom RadGrid skin as well.

By the way, it is not correct to set column widths to the header cells directly. Column widths should be set with HeaderStyle-Width. For autogenerated columns this can be done in ColumnCreated.

All the best,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Bricton Perez
Top achievements
Rank 1
answered on 27 Jul 2010, 07:18 PM
Hi justin

I have a similar matter, but how can I create dynamic columns from a table data? for instance I have a table "dianostic" and in Diagnostic I have something like:

DiagnosticID = "1"
DianosticName = "Dianostic 1"

DiagnosticID = "2"
DianosticName = "Dianostic 2"

I want to make a column with each "DiagnosticName", Is that possible, where can I find a source code for it...

I appreciate your help
0
Justin
Top achievements
Rank 1
answered on 27 Jul 2010, 07:32 PM
i believe you can find better code snippets out there, but just in case, here is how I am doing it.
(I read somewhere you have to add the column to the mastertableview before you do the formatting, which is different from gridview)

foreach (DataColumn dcPhen in dtGenotype.Columns)
 {
     gbCol = new GridBoundColumn();
     RadGrid2.MasterTableView.Columns.Add(gbCol);
     gbCol.DataField = dcPhen.ColumnName;
 
     //gbCol.HeaderStyle.Width = Unit.Pixel(50);
     gbCol.HeaderStyle.Wrap = true;
     //gbCol.HeaderStyle.Height = Unit.Pixel(50);
     gbCol.HeaderStyle.CssClass = "verticaltextG";
     //gbCol.ItemStyle.Wrap = false;
                     
 }
0
Bricton Perez
Top achievements
Rank 1
answered on 27 Jul 2010, 07:55 PM
Justin thank u for Reply me

But really I'm newbie using this controls, when you say "you have to add the column to the mastertableview before you do the formatting, which is different from gridview",  what does mean?, do I have to construct the grid from a code behind or something like that...

Regards
0
chinmaya
Top achievements
Rank 1
answered on 26 Nov 2010, 12:08 PM
I AM New To RAD GRID .. CAN ANY ONE HELP TO GENERATE DYNAMIC GRID AS IN ATTACHMENT
0
Kiara
Top achievements
Rank 1
answered on 26 Nov 2010, 03:59 PM
For the first requirement you can think about using a template column with table inside its header template (see the last column here). For the second one consider a combination of RadGrid and RadWindow - see this integration sample for details:
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=grid

Moreover, you may find RadScheduler more useful for this presentation.

Hope my pointers help.

Kiara
0
chinmaya
Top achievements
Rank 1
answered on 27 Nov 2010, 05:54 AM
Hi Kiara ,

Thanks for your posting. I need excel like grid, each column in the grid is dynamic from db and on cell click i need to populate a window or modal to get user input. The modal/window contains set of coltrols. My requirement is exactly like a scheduler but with all dynamic columns.

Thanks in advance.

Chinmayananthan
Tags
Grid
Asked by
Justin
Top achievements
Rank 1
Answers by
Justin
Top achievements
Rank 1
Dimo
Telerik team
Bricton Perez
Top achievements
Rank 1
chinmaya
Top achievements
Rank 1
Kiara
Top achievements
Rank 1
Share this question
or