DxGridColumn.VisibleIndex Property

Specifies a column’s position among other columns.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(-1)]
[Parameter]
public int VisibleIndex { get; set; }

Property Value

Type	Default	Description
Int32	-1	The column’s visible index.

Remarks

The Grid layout can include multiple zones with columns. The display order of zones is as follows:

1. Columns fixed to the left edge.
2. Regular columns.
3. Columns fixed to the right edge.

In a zone, the Grid displays columns based on their visible indexes in the following order:

1. Columns with non-negative visible indexes. The smaller the index, the more to the left the Grid displays the column.

2. Columns with unset and negative visible indexes. The display order of these columns corresponds to the column order in the grid markup.

Grouped columns are invisible unless you set the Grid’s ShowGroupedColumns property to true.

Note

A column’s Visible, GroupIndex, and FixedPosition properties do not affect the column’s VisibleIndex property value.

The example below demonstrates how to set the column’s order:

Razor

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" VisibleIndex="0"/>
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" VisibleIndex="2"/>
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" VisibleIndex="1"/>
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}

WeatherForecastService

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;

    public class WeatherForecastService {
        private List<WeatherForecast> Forecast { get; set; }

        private static string[] CloudCover = new[] {
            "Sunny", "Partly cloudy", "Cloudy", "Storm"
        };

        Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
            Tuple.Create( 22 , "Hot"),
            Tuple.Create( 13 , "Warm"),
            Tuple.Create( 0 , "Cold"),
            Tuple.Create( -10 , "Freezing")
        };

        public WeatherForecastService() {
            Forecast = CreateForecast();
        }

        private List<WeatherForecast> CreateForecast() {
            var rng = new Random();
            DateTime startDate = DateTime.Now;
            return Enumerable.Range(1, 15).Select(index => {
                var temperatureC = rng.Next(-10, 30);
                return new WeatherForecast {
                    Date = startDate.AddDays(index),               
                    TemperatureC = temperatureC,
                    CloudCover = CloudCover[rng.Next(0, 4)],
                    Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                    Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
                };
            }).ToList();
        }

        public IEnumerable<WeatherForecast> GetForecast() {
            return Forecast.ToArray();
        }
        // ...
}

Program.cs

// ...
builder.Services.AddSingleton<WeatherForecastService>();

When a user moves a column in the Grid or Column Chooser, the Grid component updates the column’s VisibleIndex property and reorders columns. Handle a column’s VisibleIndexChanged event to respond to column position changes.

Call the Grid’s GetVisibleColumns() method to get a collection of visible columns sorted based on their display order. To get a collection of all columns, call the GetColumns() method.

Watch Video: Grid - Column Types, Column Resize and Visibility

Implements

VisibleIndex