style for the last column

[Vikas]

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

[Boris]

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

 

 

[Vikas]

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

[Boris]

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