Programatically create/change columns on the fly.

[Brice FROMENTIN]

Hello,

Currently, I am failing to create/change columns of a Grid on the fly. Here's what I am trying to do :

@inherits ComponentBase
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Navigations
@using Kairos.Models.OData

@inject ApplicationState application
@inject HttpClient httpClient

@if (@configurations == null)
{
    <div on="kairos.layout.showProgress()">Loading</div>
}
else
{
    <div class="grid-odq" onload="kairos.layout.hideProgress()">
        <div>
            <EjsToolbar ID=@("toolbar" + Identifier)>
                <ToolbarItems>
                    <ToolbarItem Type="ItemType.Input" Align="ItemAlign.Left">
                        <template>
                            <EjsDropDownList ID=@("odqName" + Identifier) @Ref=@ddlConfigurations Index="@index" DataSource="@configurations" OnValueSelect="@OnConfigurationValueSelect" Width="150px">
                                <DropDownListFieldSettings Text="Name" Value="Id" />
                            </EjsDropDownList>
                        </template>
                    </ToolbarItem>
                    <ToolbarItem Type="ItemType.Separator" Align="ItemAlign.Left" />
                </ToolbarItems>
            </EjsToolbar>
        </div>
        <div>
            <EjsGrid ID=@("grid" + Identifier) @Ref=@grid AllowPaging="true" Width="100%" Height="100%" Created="@OnGridCreated">
                <GridPageSettings PageSize="5" />
            </EjsGrid>
        </div>
    </div>
}

@functions
{
    [Parameter]
    public string Identifier { get; set; }

    [Parameter]
    public string EntryPoint { get; set; }

    [Parameter]
    public string Location { get; set; }

    // UI Components
    EjsDropDownList ddlConfigurations;
    EjsGrid grid;


    string odqConfigurationsUrl;
    List<ODataConfigurationModel> configurations;
    int index = 1;

    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();
        var restClient = new RestClient(httpClient);
        this.odqConfigurationsUrl = RestClient.RootUrl + "odata/configurations";
        this.configurations = await restClient.GetAsync<List<ODataConfigurationModel>>("odata/configurations");
        index = 0;
    }

    protected void OnConfigurationValueSelect(Syncfusion.EJ2.Blazor.DropDowns.SelectEventArgs args)
    {
        // Get New Index
        var idParts = args.Item.ID.Split('-');
        var itemIndex = Convert.ToInt32(idParts[1]);

        this.BuildGridColumns(configurations[itemIndex]);
    }

    public void OnGridCreated(object args)
    {
        this.BuildGridColumns(configurations[index]);
    }

    void BuildGridColumns(ODataConfigurationModel configuration)
    {
        var columns = grid.Columns as List<GridColumn> ?? new List<GridColumn>();

        columns.Clear();

        foreach (var field in configuration.DisplayFields)
        {
            var column = new GridColumn
            {
                HeaderText = field.DisplayName,
                Field = field.DataName,
                Width = field.Width,
                Format = field.Format,
                Visible = field.Visible
            };

            columns.Add(column);
        }

        grid.Columns = columns;
        grid.RefreshColumns();
        BuildDataManager(configuration);
    }

    void BuildDataManager(ODataConfigurationModel configuration)
    {
        Console.WriteLine("BuildDataManager - URL : " + RestClient.RootUrl + "odata/configurations/" + Guid.Empty.ToString() + "/data");
        var dataManager = new EjsDataManager();

        dataManager.CrossDomain = true;
        dataManager.Adaptor = Adaptors.WebApiAdaptor;
        dataManager.EnableCaching = false;
        dataManager.Url = RestClient.RootUrl + "odata/configurations/" + Guid.Empty.ToString() + "/data";
        dataManager.Offline = false;

        grid.DataSource = dataManager;
        grid.DataBind();
        grid.Refresh();
    }
}

Thanks in advance for your help.

Brice.

[Vignesh Natarajan]

Hi Brice,  

Thanks for contacting Syncfusion forums.  

Query: “ I am failing to create/change columns of a Grid on the fly. Here's what I am trying to do :” 

We suggest you to achieve your requirement (create column dynamically) using OnAfterRender lifecycle event in Blazor. Instead of Created event we suggest you to use OnAfterRender event to create columns and push the values to Columns property of Grid.  

Refer the below code example 

<EjsGrid @Ref=@grid AllowPaging="true" Width="100%" Height="100%"> 

    <GridPageSettings PageSize="5" /> 

</EjsGrid> 

 

@code{ 

    EjsGrid grid; 

    protected override void OnAfterRender() 

    { 

        List<GridColumn> col = new List<GridColumn>(); 

        col.Add(new GridColumn() { Field = "OrderID", HeaderText = "ID" }); 

        col.Add(new GridColumn() { Field = "CustomerID", HeaderText = "Name" }); 

        grid.Columns = col; 

        var dataManager = new EjsDataManager(); 

        dataManager.CrossDomain = true; 

        dataManager.Adaptor = Adaptors.WebApiAdaptor; 

        dataManager.EnableCaching = false; 

        dataManager.Url = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; 

        dataManager.Offline = false; 

        grid.DataSource = dataManager; 

    } 

} 

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/146129/ze/addcolumns1181555875  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Gerald Peng]

Hi Syncfusion,

I tried the solution below using version 18.1.0.42 and the assignment to grid.Columns = col; does not work anymore. Could you please confirm?

Thanks!

[Brice FROMENTIN]

I have change my solution and user RenderFragment instead

[Vignesh Natarajan]

Hi Gerald,  

 

Thanks for contacting Syncfusion forums.  

 

Query: “I tried the solution below using version 18.1.0.42 and the assignment to grid.Columns = col; does not work anymore” 

 

We are not able to reproduce the reported issue at our end while using our latest version (18.1.0.42). To validate the reported issue, we have prepared to sample to update the column in the DataBound event of grid. Please find the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/146129/ze/BlazorApp11077621452  

 

Kindly get back to us with issue reproducible sample if you are still facing the issue. 

 

Regards, 

Vignesh Natarajan 

[Gerald Peng]

Hi Vignesh,

Do you have a sample that uses async data loads and column data loads? 

I have tried to wire in your sample into my code and get an exception. The only difference I can see is the async. Other potential one is that I assign the toolbar objects in code, which has worked before I have programmatically assigned the columns.

Exception is:

System.NullReferenceException

  HResult=0x80004003

  Message=Object reference not set to an instance of an object.

  Source=Syncfusion.Blazor

  StackTrace:

   at Syncfusion.Blazor.Grids.Internal.PropertyInfoHelper.CreateAccessor(PropertyInfo propertyInfo)

[Vignesh Natarajan]

Hi Gerald,  

Thanks for the update.  

Query: “Do you have a sample that uses async data loads and column data loads?” 

As per your suggestion we have modified the sample to load data asynchronously. But still we are not able to reproduce the reported issue at our end. Please find the modified sample from below  

Sample: https://www.syncfusion.com/downloads/support/forum/146129/ze/BlazorApp1_Async8147579  

Kindly share the following details to validate the reported issue and provide the solution as soon as possible.  

1. Grid code example.
2. If possible try to reproduce the reported issue in provided sample and revert back to us.  

Regards, 

Vignesh Natarajan. 

[Brice FROMENTIN]

Thanks,

I created a sample for you illustrating the problem, no columns created even if i change the dropdown.

Attachment: DynamicGrid_a16ec7b4.7z

[Vignesh Natarajan]

Hi Brice, 

 

Thanks for the sample.  

 

Currently we are validating your query. We will update you the further details by 21^st April 2020.  

 

Till then we appreciate your patience.  

 

Regards, 

Vignesh Natarajan. 

[Vignesh Natarajan]

Hi Brice,  

Thanks for the patience.  

As we face difficulties in running your sample, we have prepared a Blazor hosted application using model controller and model class. We are able to reproduce the reported issue while preparing a sample using your code example. For WebAPI adaptor, data source has to returned in form of Items and Count. But you have not returned the data in that form in WeatherForecast controller. And also you have changed the column in the DropDownList ValueChange event (i.e) Grid is being rendered. 

Hence the reported issue has occurred. We have modified the sample and achieved your requirement using DataBound event and Columns property of the Grid to change the column on the fly.  

Refer the below code example.  

[HttpGet]        public async Task<object> Get()        {            var rng = new Random();            var data = Enumerable.Range(1, 5).Select(index => new WeatherForecast            {                Date = DateTime.Now.AddDays(index),                TemperatureC = rng.Next(-20, 55),                Summary = Summaries[rng.Next(Summaries.Length)]            }).ToList().AsQueryable();            return new { Items = data, Count = 5 };        }

<SfGrid TValue="ExpandoObject" @ref="@grid" Columns="@Cols" EnableAltRow="true" Width="500px" Height="250px"> 

       <SfDataManager Adaptor="Adaptors.WebApiAdaptor" Url="/WeatherForecast" /> 

       <GridEvents DataBound="Data" TValue="ExpandoObject"></GridEvents> 

   </SfGrid> 

. . . . . ..   

// Configuration changed   protected void OnValueChanged(ChangeEventArgs<Guid> args)   {       json = (JObject)args.ItemData;       configuration = json.ToObject<OdqConfigurationModel>();       displayFields = configuration.DisplayFields;       // will be triggered only after Grid is rendered       if (Created)       {           var columns = new List<GridColumn>();           Cols = columns; // clearing the existing column           grid.RefreshColumns();            foreach (var field in displayFields)           {               var column = new GridColumn               {                   HeaderText = field.DisplayName,. . . . . . . . .               };                columns.Add(column);           }           Cols = columns; // assigning the columns to Grid           grid.RefreshColumns();       }   }   protected void Data()   {       if (!Created) // to be triggered only during initial rendering       {           var columns = new List<GridColumn>();           Cols = columns;           grid.RefreshColumns();           foreach (var field in displayFields)           {               var column = new GridColumn               {                   HeaderText = field.DisplayName,. . . . . .. . .                };                columns.Add(column);           }            Cols = columns;           grid.RefreshColumns();           Created = true;       }   }

Kindly download the sample from below  

Sample: https://www.syncfusion.com/downloads/support/forum/146129/ze/BlazorApp1-1216748073  

Kindly get back to us if you have any other queries.  

Regards, 

Vignesh Natarajan 

[Brice FROMENTIN]

Thanks for the answer, I finally succeed to implement it in my solution.

But I found another problem, when I change the value of the dropdown, 2 queries are triggered instead of only one.

[Vignesh Natarajan]

Hi Brice,  

 

Query: “But I found another problem, when I change the value of the dropdown, 2 queries are triggered instead of only one.” 

 

In the provided sample, we could see that GET request is sent multiple times during the initial rendering and while changing the values in dropdown. If you are referring to that issue, then we have modified the solution to hide and show the grid while updating the column. Previously we have used RefreshColumn method to refresh the column, where entire Grid is refreshed on switching the columns. Now we have modified the solution to show / hide the Grid using a Boolean variable. 

 

Refer the below code example.   

 

@if (showGrid || configuration != null) 

{ 

    <SfGrid TValue="ExpandoObject" @ref="@grid" Columns="@Cols" EnableAltRow="true" Width="500px" Height="250px"> 

        <SfDataManager Adaptor="Adaptors.WebApiAdaptor" Url="/WeatherForecast" /> 

        <GridEvents DataBound="Data" TValue="ExpandoObject"></GridEvents> 

    </SfGrid> 

} 

 

 

We have enabled a Boolean variable and we have updated the values of Boolean while updating the column.  

 

@code{    public bool showGrid = false;    public bool Created = false;    List<OdqDisplayFieldModel> displayFields = new List<OdqDisplayFieldModel>();    Guid currentId = Guid.Empty;     SfGrid<ExpandoObject> grid;    OdqConfigurationModel oldConfiguration;    OdqConfigurationModel configuration;    JObject json;    public List<GridColumn> Cols = new List<GridColumn>();     // Configuration changed    protected void OnValueChanged(ChangeEventArgs<Guid> args)    {        json = (JObject)args.ItemData;        configuration = json.ToObject<OdqConfigurationModel>();        displayFields = configuration.DisplayFields;        // will be triggered only after Grid is rendered        if (Created)        {            showGrid = false; // hided the Grid            var columns = new List<GridColumn>();            Cols = columns; // clearing the existing column             foreach (var field in displayFields)            {. . . . . . .            }            Cols = columns;             showGrid = true; // displyed the Grid with udpated columns.        }    }    protected void Data()    {        if (!Created) // to be triggered only during initial rendering        {            showGrid = false;            var columns = new List<GridColumn>();            foreach (var field in displayFields)            {. . . . . ..             }             Cols = columns;            Created = true;             showGrid = true; // displyed the Grid with udpated columns.         }    }}

 

 

Please find the modified sample from below  

Sample: https://www.syncfusion.com/downloads/support/forum/146129/ze/BlazorApp1_-_Modified-750319467  

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan