We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Bind GridColumn field to indexed element

Bind GridColumn field to indexed element

Hi, 

With the Blazor EjsGrid control is it possible to bind a GridColumn to an indexed value like you can with the WPF version?

e.g. 

<GridColumn Field="Values[0]" HeaderText="Values[0]" />

Thanks, John

7 Replies
VN Vignesh Natarajan Syncfusion Team September 23, 2019 01:48 AM

Hi John, 

Greetings from Syncfusion support.  

Query: “With the Blazor EjsGrid control is it possible to bind a GridColumn to an indexed value” 

Yes. We can render the GridColumns by dynamically building them based on the list of strings. We have already documented this topic in our UG documentation which can be referred below  


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan.

JO John September 24, 2019 01:51 AM

Thank you for the response, but it does not explain how/whether it is possible to bind to indexed values (https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/indexers/).  I know you support this in the WPF version  (https://help.syncfusion.com/wpf/datagrid/data-binding#binding-indexer-properties)

Thanks, John

VN Vignesh Natarajan Syncfusion Team September 25, 2019 07:14 AM

 
Query: “but it does not explain how/whether it is possible to bind to indexed values” 
  
We have prepared a sample as per your requirement (to render Grid columns based on index value of an array). Kindly refer the below code example.  
  
<EjsGrid DataSource"@OrderData"> 
    <GridColumns> 
        @for (var I = 0; I < Cols.Length; I++) 
        { 
            <GridColumn Field="@Cols[I]" IsPrimaryKey="@(Cols[I] == "OrderID")" HeaderText="@Header[I]"></GridColumn> 
        } 
    </GridColumns> 
</EjsGrid> 
 
@code{ 
    public string[] Cols = { "OrderID", "CustomerID", "EmployeeID" }; 
    public string[] Header = { "ID", "Name", "Batch ID" }; 
 
Refer the below screenshot for the output 
 
 
   
Also download the sample from below  
 
 
Kindly confirm whether above solution satisfy your requirement. If not share more details about your requirment along with the index value properties.   
 
Regards, 
Vignesh Natarajan. 


JO John September 26, 2019 01:42 AM

Thank you for the response, but it is not the headers or fixed fields I am worried about, but binding to indexed values.  I have included an example below, but please also see the link to the same functionality in your WPF version at (https://help.syncfusion.com/wpf/datagrid/data-binding#binding-indexer-properties).  Thank you


@page "/"
@using Syncfusion.EJ2.Blazor.Grids

   
       
   

@code {

    private List rows = new List() { new Row() };

    private class RowValues : IList
    {
        public double this[int index]
        {
            get
            {
                return ...;
            }
        }
...
    }

    private class Row
    {
        public RowValues RowValues { get; } = new RowValues();
        
    }



}


VN Vignesh Natarajan Syncfusion Team September 27, 2019 07:28 AM

Hi John,  

Sorry for the inconvenience caused.  

Query: “but it is not the headers or fixed fields I am worried about, but binding to indexed values.” 
 
We do not have support to bind the indexer property values to EjsGrid. But you can achieve your requirement (to display data based on Indexer values) using Column Template feature of EjsGrid.  However we will not be able to perform Data Operations like filtering, sorting, CRUD etc in Grid.  

Refer the below code example  

<EjsGrid ModelType="@RowValue[0]" DataSource="@RowValue"> 
    <GridColumns> 
        <GridColumn Field=@nameof(RowValues.ID)></GridColumn> 
        <GridColumn HeaderText="Names"> 
            <Template> 
                @{ 
                    var index = (context as RowValues)[0]; 
                    <span>@index</span> 
                } 
            </Template> 
        </GridColumn> 
    </GridColumns> 
</EjsGrid> 
@code{ 
    public class RowValues 
    { 
        private List<string> rows = new List<string>() { "VINET" }; 
        public string this[int index] 
        { 
            get 
            { 
                return rows[index]; 
            } 
        } 
        public int ID { get; set; } 
    } 
    public List<RowValues> RowValue = new List<RowValues>() 
    { 
     new RowValues(){ ID = 1 } 
    }; 
} 

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


Refer our UG documentation for your reference 


Please get back to us if you have further queries.   

Regards, 
Vignesh Natarajan. 


JO John October 1, 2019 12:16 PM

Thank you for the response, but we need the ability to sort, filter & group.

1.  Is this something you are likely to support soon?
2. In the absence of this, is there any other way to bind the grid to elements that are not known at compile time?  e.g. DataTable, dynamic object, implementing some interface etc..

In 50% of our uses of grid, we do not have a fixed class to bind to at compile time.  I can't image this is an unusual request, and you support various mechanisms in your WPF version.



Regards, John



VN Vignesh Natarajan Syncfusion Team November 5, 2019 05:07 AM

Hi John,  
 
Query: “In the absence of this, is there any other way to bind the grid to elements that are not known at compile time?” 

As mentioned in the previous update, we are not able to perform data operation while binding the data using indexer property or using ExpandoObject / anonymous object. But we would like to inform you that, we have considered this (data operations using ExpandoObject / dynamic object) requirement as feature and it will be included in any of our upcoming release.  

You can track the status of these features using the below feedback links, 
 
 

Till then we appreciate your patience.  

Regards, 
Vignesh Natarajan. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon