Frozen Dynamic Columns

9 posts, 0 answers
  1. Justin
    Justin avatar
    5 posts
    Member since:
    Jun 2010

    Posted 14 Jul 2010 Link to this post

    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!!
  2. Justin
    Justin avatar
    5 posts
    Member since:
    Jun 2010

    Posted 14 Jul 2010 Link to this post

    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;
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 15 Jul 2010 Link to this post

    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
  5. Bricton Perez
    Bricton Perez avatar
    12 posts
    Member since:
    Aug 2009

    Posted 27 Jul 2010 Link to this post

    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
  6. Justin
    Justin avatar
    5 posts
    Member since:
    Jun 2010

    Posted 27 Jul 2010 Link to this post

    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;
                         
     }
  7. Bricton Perez
    Bricton Perez avatar
    12 posts
    Member since:
    Aug 2009

    Posted 27 Jul 2010 Link to this post

    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
  8. chinmaya
    chinmaya avatar
    3 posts
    Member since:
    Nov 2010

    Posted 26 Nov 2010 Link to this post

    I AM New To RAD GRID .. CAN ANY ONE HELP TO GENERATE DYNAMIC GRID AS IN ATTACHMENT
  9. Kiara
    Kiara avatar
    309 posts
    Member since:
    Jul 2006

    Posted 26 Nov 2010 Link to this post

    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
  10. chinmaya
    chinmaya avatar
    3 posts
    Member since:
    Nov 2010

    Posted 26 Nov 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017