style for the last column

4 posts, 0 answers
  1. Vikas
    Vikas avatar
    64 posts
    Member since:
    May 2014

    Posted 06 Nov 2014 Link to this post

    Is there a way to change the background of the last column in GridView (attached image)

    I have to display different number of columns based on some properties so i can not use Data binding, I ma creating the columns in code behind and also setting the width of columns.
    In order to not have the last blank column i tried to set the width of last column to *, but when i do that the horizontal scroll bar do not appear if the content in the rows is bigger than the view can display

    Here is the code i am using
    /// <summary>
            /// Create the grid based on the list type
            /// </summary>
            private void InitializeGrid(csEnumListType listType)
            { 
                switch (listType)
                {
                    case csEnumListType.csLstAppointmentTypes:
                        AddColumn("Description", 250, "GridDescription");
                        AddColumn("Abbreviation", 100, "ColumnValue1");
                        AddColumn("Appointment Category", 100, "ColumnValue2", true);
                        break;                
                    case csEnumListType.csLstCollectors:
                    case csEnumListType.csLstOperators:
                        AddColumn("Name", 400, "GridDescription");                    
                        AddColumn("Abbreviation", 85, "ColumnValue1", true);
                        break;
                    case csEnumListType.csLstClmStyles:
                        AddColumn("Description", 300, "GridDescription");
                        AddColumn("Abbreviation", 100, "ColumnValue1");
                        AddColumn("Billing Media", 85, "ColumnValue2");
                        AddColumn("Claim Format", 100, "ColumnValue3", true, true);
                        break;
                    default:
                        AddColumn("Description", 300, "GridDescription");
                        AddColumn("Abbreviation", 100, "ColumnValue1", true);                    
                        break;
                }            
            }

    /// <summary>
            /// Add column with the header, width and binding
            /// </summary>
            /// <param name="col1Header"></param>
            /// <param name="col1Width"></param>
            private void AddColumn(string header, int width, string binding, bool isLastColumn = false, bool isClaimStyle = false)
            {
                GridViewDataColumn column = new GridViewDataColumn();
                column.DataMemberBinding = new Binding(binding);
                column.Header = header;
                column.TabStopMode = GridViewTabStop.Skip;
                column.Width = GridViewLength.Auto;

                this.RecordsGrid.Columns.Add(column);
            }

    private void RecordsGrid_SourceUpdated(object sender, DataTransferEventArgs e)
            {
                if (RecordsGrid.Columns.Count > 0)
                {
                    RecordsGrid.Columns[RecordsGrid.Columns.Count - 1].Width = new GridViewLength(100.123, GridViewLengthUnitType.Star);
                }
            }



  2. Boris
    Admin
    Boris avatar
    276 posts

    Posted 11 Nov 2014 Link to this post

    Hello Vikas,

    A possible approach is to set the Background property of the GridViewHeaderRow to your desired color,by using the HeaderRowStyle property of the GridView.

    <Window.Resources>
            <Style x:Key="CustomHeaderRowStyle" TargetType="telerik:GridViewHeaderRow">
                <Setter Property="Background" Value="#ECEEF0" />
            </Style>
    </Window.Resources>

    Please note that if you are using NoXAML binaries, you will need to specify the BasedOn property of the style like so:

    <Style x:Key="CustomHeaderRowStyle" TargetType="telerik:GridViewHeaderRow" BasedOn="{StaticResource GridViewHeaderRowStyle}">
        <Setter Property="Background" Value="#ECEEF0" />
    </Style>

    For some additional information about the header row, you can check the Styling the Header Row documentation article.

    I hope this helps.

    Regards,
    Boris
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Vikas
    Vikas avatar
    64 posts
    Member since:
    May 2014

    Posted 11 Nov 2014 in reply to Boris Link to this post

    Thanks that worked, But I am still not able to resolve the scroll bar problem

    if i set the width of last column to * when adding the column to the Grid I do not get scroll bar 
    But is i set the width to * in here then i do get the scroll bar but also an extra last column

    private void RecordsGrid_SourceUpdated(object sender, DataTransferEventArgs e)
            {
                if (RecordsGrid.Columns.Count > 0)
                {
                    RecordsGrid.Columns[RecordsGrid.Columns.Count - 1].Width = new GridViewLength(100.123, GridViewLengthUnitType.Star);
                }
            }

    Is it possible to have scrollbar and also not have the last extra empty column

    Thanks
    Vikas

  4. Boris
    Admin
    Boris avatar
    276 posts

    Posted 13 Nov 2014 Link to this post

    Hello Vikas,

    The so called "last column" is not actually a column (it might look like one thought), in fact it's a part of the GridViewVirtualizingPanel, which represents the available area in the viewport. In addition setting the Width property of the last column to "*" means that this column will get the extra space and it will try to fit into the viable area. 

    As for the horizontal ScrollBar, it will appear only when the viewable area is too small to display all the columns. 

    As for the described behavior of displaying both the ScrollBar and the extra space, might be due to the added code from your code snippet. However, without a sample project to debug this is only a guess.

    Regards,
    Boris
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top