how to dinamycally create grid columns?

[Emilio]

Hi, 

using 17.3.17.

I've tried this to create grid columns dinamically.

@page "/gridDinamyc"

   

@code{

    EjsGrid grid;

    protected override void OnAfterRender()

    {

        List col = new List();

        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;    

    }

} 

But compiler throw errors

error CS0115: 'GridDinamyc.OnAfterRender()': no suitable method found to override

error CS0305:Using the generic type EjsGrid' requires 1 type arguments

[Renjith Singh Rajendran]

Hi Emilio, 

Query 1 : error CS0115: 'GridDinamyc.OnAfterRender()': no suitable method found to override 

We suggest you to pass the argument for the “OnAfterRender()” method to overcome this error. This is a default lifecycle method from blazor. And they have modified this lifecycle methods in their latest version to be used along with argument. Please refer the code below, 

 

    protected override void OnAfterRender(bool isrender) 

    { 

        ... 

   } 

 

Query 2 : error CS0305:Using the generic type 'generic type' EjsGrid<TValue>' requires 'number' type arguments 

We have provided Generic type support for our Syncfusion controls in our previous version 17.2.40, so all the versions following this will support generic type. As you are using our latest version(17.3.17), kindly refer the below release notes for your reference and do the necessary changes in your application. 

Release Notes : https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.40/  

Please use the code below, 

 

<EjsGrid @ref=@grid TValue="Order" AllowPaging="true" Width="100%" Height="100%"> 

    ... 

</EjsGrid> 

 

@code{ 

   EjsGrid<Order> grid; 

    ... 

} 

As like your code, you cannot directly assign the EjsDataManager to the DataSource property of EjsGrid. If you want to enable EjsDataManager in Grid after initial rendering then we suggest you to refer to the below documentation for more details regarding this, 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/?no-cache=1#enable-ejsdatamanager-after-initial-rendering 

We have also prepared a sample by modifying your codes, in which we have added the above mentioned suggestions and enabled the EjsDataManager by using the “OnDataBound” event of Grid. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11650938031 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Emilio]

Thank you for the working sample!

[Renjith Singh Rajendran]

Hi Emilio, 

Thanks for your update. 

We are glad to hear that our sample helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Stefan Limpert]

Hi there,

I'm wondering is there also a way to create dynamically columns to SFGrid?

I found out, this (maybe) the only way that is working, but there is always a compiler warning:

<SfGrid ID="Grid1" @ref="Grid" Columns="Cols" DataSource="Gdata" TValue="DataModel"></SfGrid>

@code {

    public SfGrid<DataModel> Grid { get; set; }

    public List<GridColumn> Cols = new List<GridColumn>();

    public IEnumerable<DataModel> Gdata = new List<...>();

    protected override async Task OnInitializedAsync()

    {

        Gdata = getData();

    }

    protected override void OnAfterRender(bool isRender)

    {

        Cols.Add(new GridColumn() { Field = "Field1", HeaderText = " Field1", Template="????"});

        Cols.Add(new GridColumn() { Field = "Field2", HeaderText = " Field2 " });

Warning (active) BL0005 Component parameter 'Field' should not be set outside of its component. 

Warning (active) BL0005 Component parameter 'HeaderText' should not be set... 

    }

    private List<BewohnerModel> getData()...

1. How can i avoid the warning??
2. How can i set a template dynamically this way?
3. Is there any other better way to avoid the Tag Helper for SFGrid?

Regards

S

[Vignesh Natarajan]

Hi Stefan,  

 

Greetings from Syncfusion support.  

 

Query: “How can i avoid the warning??” && “How can i set a template dynamically this way?”” 

 

We suggest you to resolve the warning error message using the below solution. We have disabled and restored the pragma warning error. Also we suggest you to achieve your requirement to define the Template column by defining the Template property with RenderFragment value.  

 

Refer the below code example  

 

     protected override void OnInitialized()    {         var gridcol = new List<GridColumn>();        var lists = new List<string>() { "OrderID", "CustomerID", "Freight", "OrderDate" };#pragma warning disable BL0005        foreach (var col in lists)        {            if (col != "CustomerID")            {                gridcol.Add(new GridColumn() { Field = col, Width = "100px", IsPrimaryKey = col == "OrderID" ? true : false });            }            else            {                gridcol.Add(new GridColumn() { Field = col, Width = "100px", Template = Edit });            }        }        Cols = gridcol;#pragma warning restore BL0005         Gdata = Enumerable.Range(1, 75).Select(x => new DataModel()        {            OrderID = 1000 + x,            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],            Freight = 2.1 * x,            OrderDate = DateTime.Now.AddDays(-x),        }).ToList();    }     RenderFragment<object> Edit = (value) =>    {    return b =>    {    b.AddContent(0,@<div>Template Column : @((value as DataModel).OrderID)</div>);};};

 

 

Query: “Is there any other better way to avoid the Tag Helper for SFGrid? 

 

If you want to avoid the Tag helper, we can achieve your requirement using RenderBuilderTree concept. Refer the below public forum response for your reference  

 

https://www.syncfusion.com/forums/162797/buildrendertree-export-to-excel-grid?reply=NH8ZPr 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Stefan Limpert]

Thanks Vignesh for your reply

it helps me a lot. The warning is gone and columns setting worked.

The setting of a template works also great in your example.

I tried to realise the template setting in my custom gridcolumn class, but it doesnt work here

public class gridcolumns<T>() where T : class,new()

{ 

props...

public static RenderFragment<object> DetailTemplate => (value) => { return b => { b.AddContent(0,"@<a  rel='nofollow' href=\"@((value as "+typeof(T).Name+").DetailsLink)\" title=\"Details\"><i class=\"fal fa-info-circle fa-2x\"></i></a>");};};

Result: the content of that column is the correct html but as clear text

what did i wrong?

regards

Stefan

[Vignesh Natarajan]

Hi Stefan,  

 

Thanks for the update.  

 

Query: “I tried to realise the template setting in my custom gridcolumn class, but it doesnt work here && the content of that column is the correct html but as clear text” 

 

We have analyzed your query and we are able to reproduce the reported issue at our end also while preparing a sample using your code example. This is because you have defined the RenderFragment inside the “” (which is considered as a string). We request you to define the content properly in RenderFragment to resolve your query. 

 

Refer the below modified code example.  

 

RenderFragment<object> DetailTemplate => (value) => 

{ 

    return b => 

   { 

    b.AddContent(0,@<a rel="nofollow" rel='nofollow' href='@(((value as DataModel).CustomerID + "DetailsLink"))' title="Details"><i class="fa fa-info-circle"></i></a>); 

   }; 

}; 

 

 

Kindly share more details (how you have defined all properties) about your custom grid column class, if you are still facing the issue. It will be very helpful for us to validate the reported query at our end and provide solution as early as possible.  Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

[Stefan Limpert]

Hi Vignesh,

thanks for the reply, sorry now i can see my request wasnt clear enough. What i wanted to say is that your last example works perfectly in a code block of a razor component (.razor/.razor.cs), but not inside a standard class (.cs).  And that's where i needed it. Just try your code example above in a basic class and you will see my issue.

Regards

Stefan

[Vignesh Natarajan]

Hi Stefan,  

 

Query: “ but not inside a standard class (.cs).  And that's where i needed it. Just try your code example above in a basic class and you will see my issue.” 

 

We understand that you are facing issue while defining the Template column in a public class. We need some more details about the issue you are facing. So kindly share the following details.  

 

1. Share the Grid code example.
2. Also share details how you have defined grid column along with gridcolumn class.
3. If possible share a simple issue reproducible sample.
4. Also share your Syncfusion Blazor NuGet package version details.

 

Above requested details will be very helpful for us to validate the reported query at our end and provide solution as early as possible.    

 

Regards, 

Vignesh Natarajan 

[Stefan Limpert]

Hallo Vignesh,

thats aint necessary anymore, because the error was in my mind. :-)

I've understand now: RenderFragment is unable to recognize Blazor-Code outside a blazor file.

For example this code works perfect in *.razor:

RenderFragment<object> TemplateForDetailsLink => (value) => {return b =>

        {

            var data = value as DataModel;

            var url = data.GetType().GetProperty(nameof("myUrlField")).GetValue(data, null).ToString();

            b.AddContent(0,@<a rel='nofollow' rel='nofollow' href='@((url))' title="Details"><i class="fal fa-info-circle></i></a>);

        };

    };

but it doesnt in a c# class, even if i try to assign the code part as MarkupString there is no chance. So my Workaraound is now to set the code above in a component class and set the SFGrid.Gridcolumn.Template inside of it.

If you know a solution to set the above code in a classic c class, i'm all ears. otherwise consider it's done.

Regards

Stefan

[Vignesh Natarajan]

Hi Stefan,  

Thanks for the update.  

We understand your requirement to define the RenderFragment in a separate C# class file and define the values inside. We afraid it is not possible to achieve your requirement directly, because we can achieve your requirement by modifying anchor tag inside the AddContent() method with a new separate component and pass argument value as parameter to display in it as URL link.  

If you are not satisfied with your current approach and want to achieve your requirement by defining a separate component, kindly get back to us. We will prepare a sample solution and update you.  

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan  

[Stefan Limpert]

HI vignesh, i'm always interested in perfect solutions. So my current solution isnt perfect. As i written before, if you have a solution in mind that would make it perfect, please share it. i would be very grateful. :-)

Regards 

Stefan

[Vignesh Natarajan]

Hi Stefan,  

Sorry for the inconvenience caused.  

Alternative approach we suggested required the GridColumn to be defined as part of razor code using GridColumn tag or its inherited class name. Once implemented, Templates can be defined as component or any using the below documentation  

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template  

But previous you have requested to achieve this requirement using a separate class. So kindly confirm whether it is fine for your achieve your requirement using razor code (tag helpers) to achieve your requirement.   

Regards, 

Vignesh Natarajan  

[Stefan Limpert]

Hi Vignesh,

i think were going to running around in circles now, so let us stop this at this point. Your suggestions were very helpful and i totaly can live with the razor code solution at least.

So thanks a lot for your time and your support.

Have a nice day

Stefan

[Vignesh Natarajan]

Hi Stefan,  

Thanks for the update.  

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan