Frozen Dynamic Columns

[Justin]

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!!

[Justin]

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;
}

[Dimo]

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

[Bricton Perez]

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

[Justin]

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;

 }

[Bricton Perez]

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

[chinmaya]

I AM New To RAD GRID .. CAN ANY ONE HELP TO GENERATE DYNAMIC GRID AS IN ATTACHMENT

[Kiara]

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

[chinmaya]

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