Grid and ICollection<Interface> as DataSource | Blazor Forums

VN Vignesh Natarajan Syncfusion Team September 16, 2019 10:18 AM

Hi Manuel,

Thanks for contacting Syncfusion.

Query: “It would be nice, if the grid could support interfaces as a DataSource.”

EjsGrid will accept dataSource in form of List of objects and IENumerable objects (i.e) Collection of objects. Refer the below code example and UG documentation for you reference.

<EjsGrid DataSource="@Orders" AllowPaging="true">

……………………………..

</EjsGrid>

@code{

public List<Order> Orders { get; set; }

protected override void OnInitialized()

{

Orders = Enumerable.Range(1, 75).Select(x => new Order()

{

OrderID = 1000 + x,

. . . .

}).ToList();

}

public class Order

{

public int? OrderID { get; set; }

. . . .

}

UG: https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/#list-binding

As we are quite unclear about your requirement. So kindly share the following details.

Are facing any issue while binding the ICollections object?
Do you want to bind the dataSource in form of interfaces of two or more classes instead of class object?
Share the exact requirement in detail.
If possible share the issue reproducible sample.

Requested details will be helpful for us to validate the reported query at our end.

Regards,

Vignesh Natarajan.

BP Bernd Parchmann January 23, 2020 04:40 AM

Hello,

I am agree Manuel's suggestion:

A Grid and TreeGrid should be able to handle a list of generic items. This could be a base class or an interface.

Currently the TreeGrid is not working if the datasource is a List with objects of derivative objects AND of the base class or Interface!

Especially the TreeGrid should handle this! So you can have a hierachical structure of the tree according the class structure -> different parent and children classes!

@Manuel: actually Grid is working with Interfaces (or mixed content of derived classes and base classes)

Best Regards,

Bernd

VN Vignesh Natarajan Syncfusion Team January 23, 2020 07:32 AM

Hi Bernd,

Thanks for contacting Syncfusion support.

Query#:- Currently the TreeGrid is not working if the datasource is a List with objects of derivative objects AND of the base class or Interface!”.

Based on your query, we have prepared sample by binding TreeGrid dataSource with derived model class (derived from the base class). Refer to the code example:-

. . .

</TreeGridColumns>

</EjsTreeGrid>

@code{

public class BusinessObject

{

public int TaskId { get; set; }

public string TaskName { get; set; }

public int Duration { get; set; }

. . .

}

public List<BusinessObject> TreeData = new List<BusinessObject>();

public List<DerivedClass> DerivedData = new List<DerivedClass>();

protected override void OnInitialized()

{

DerivedData.Add(new DerivedClass() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });

DerivedData.Add(new DerivedClass() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });

}

public class DerivedClass : BusinessObject { } //derived class from base class BusinessObject

}

In the above code example we have bind the dataSource for TreeGrid with DerivedClass value for the Field as BusinessObject.TaskId from BusinessObject(base class).

Sample Link:- https://www.syncfusion.com/downloads/support/forum/147541/ze/Test1716139329_(2)-1564875690.zip

Please get back to us with more details if you have any other queries.

Regards,

Vignesh Natarajan.

RN Rnlalfred January 31, 2020 03:04 PM

How can more than one datasource be used ?

VN Vignesh Natarajan Syncfusion Team February 3, 2020 12:59 AM

Hi Rnlalfred,

Greetings from Syncfusion support.

Query: “How can more than one datasource be used ?”

From your query we understood that you want to bind the Grid with datasource which is derived from the base class. We have prepared a sample to render the Grid based on the derived class dataSource.

Grid datasource can be of any type (i.e.) List<baseclass> or List<derivedclass>. But Grid’s TValue must be base class. Because based on the TValue object only Grid schema / data will generated. (i.e) based on TValue class only datasource will be serialized and bound to Grid.

Refer the below code example.

<h2>Derived Class Data 1</h2>

<EjsGrid TValue="Order" DataSource="@DerivedData1" AllowPaging="true">

<GridPageSettings PageSize="5"></GridPageSettings>

<GridColumns>

. . . . . .. . .

</GridColumns>

</EjsGrid>

<h2>Derived Class Data 2</h2>

<EjsGrid TValue="Order" DataSource="@DerivedData2" AllowPaging="true">

<GridPageSettings PageSize="5"></GridPageSettings>

<GridColumns>

. . . . . . . ..

</GridColumns>

</EjsGrid>

@code{

public List<DerivedClass1> DerivedData1 { get; set; }

public List<DerivedClass2> DerivedData2 { get; set; }

protected override void OnInitialized()

{

DerivedData1 = Enumerable.Range(1, 75).Select(x => new DerivedClass1()

{

. . . . . .. .

}).ToList();

DerivedData2 = Enumerable.Range(1, 75).Select(x => new DerivedClass2()

{

. . . . . .

}).ToList();

}

public class Order

{

public int? OrderID { get; set; }

public string CustomerID { get; set; }

public DateTime? OrderDate { get; set; }

public double? Freight { get; set; }

}

public class DerivedClass1 : Order { }

public class DerivedClass2 : Order { }

}

For your convenience we have prepared a sample using our version (17.4.0.44) which can be downloaded from below

Sample: https://www.syncfusion.com/downloads/support/forum/147541/ze/BlazorApp1-2058507733

If above solution does not resolve your query, kindly get back to us with more details about your requirement.

Regards,
Vignesh Natarajan.

BP Bernd Parchmann February 4, 2020 08:42 AM

Hi,

sry, misunderstanding:

Your example is working just with the derived class! I want a TreeGrid with a list of the base class (has id, parentid and name, ...). And I want to add some derived objects.

List<BaseClass> allEntries

allEntries.add(new DerivedClass1(...));

allEntries.add(new DerivedClass2(...));

allEntries.add(new DerivedClass3(...));

allEntries.add(new BaseClass(...));

And I expect the possibility that the TreeGrid can differentiate the different derived classes (should be defined in the razor file of the control) to can show differnt data of the different child nodes!

The EjsGrid can handle this (Interfaces too). But the EjsTreeGrid does not woking -> is just empty!

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 5, 2020 10:41 AM

Hi Bernd,

I want a TreeGrid with a list of the base class (has id, parentid and name, ...). And I want to add some derived objects. But the EjsTreeGrid does not woking -> is just empty!

We can reproduce the reported problem at our end while defining the properties inside the Derived class as like public class DerivedClass : BusinessObject { public int? ParentId { get; set; } . In TreeGrid, we can only access the Field values from the provided class. Since the property "parentId" is defined in the derived class, we couldn't access it. In general, derived class properties are not accessible from the base class. To overcome this, we suggest you to access the derived class model like in previous update.

Refer to the code example:-

<EjsTreeGrid DataSource="@DerivedData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" TValue="BusinessObject">

<TreeGridColumns>

<TreeGridColumn Field="@nameof(BusinessObject.TaskId)" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn>

<TreeGridColumn Field="@nameof(BusinessObject.TaskName)" HeaderText="Task Name" Width="160"></TreeGridColumn>

. . .

</TreeGridColumns>

</EjsTreeGrid>

@code{

public class BusinessObject

{

public int TaskId { get; set; }

public string TaskName { get; set; }

public int Duration { get; set; }

public int? ParentId { get; set; }

. . .

}

public List<BusinessObject> TreeData = new List<BusinessObject>();

public List<DerivedClass> DerivedData = new List<DerivedClass>();

protected override void OnInitialized()

{

DerivedData.Add(new DerivedClass() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });

DerivedData.Add(new DerivedClass() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });

}

public class DerivedClass : BusinessObject { } //derived class from base class BusinessObject

}

Also please share us the details about purpose of accessing derived class property from base class.

Regards,

Farveen sulthana T

BP Bernd Parchmann February 6, 2020 02:47 AM

Hi and thx for your example!

Your example is working! Already tested this before!

But again: that's not what I need/expect! And yes, it's clear that you can just access the properties of the Base Class you defined for the TreeGrid (TValue).

I expect that the TreeGrid is containing (multiple) derived objects. Just one derived class is unnecessary!

If just one derived class is added to the list, the TreeGrid is working! But if I add another derived class to the list, the TreeGrid is empty!

Please change your example with this to reproduce:

...

public List<BusinessObject> TreeData = new List<BusinessObject>();
protected override void OnInitialized()
   {
      TreeData.Add(new DerivedClass1() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
      TreeData.Add(new DerivedClass1() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
      TreeData.Add(new DerivedClass2() { TaskId = 3, TaskName = "Parent Task 2", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
      TreeData.Add(new DerivedClass2() { TaskId = 4, TaskName = "Child task 2", Duration = 4, Progress = 80, ParentId = 3, Priority = "Normal" });
   }

...

public class DerivedClass1 : BusinessObject { }
public class DerivedClass2 : BusinessObject { }

Best regards!

Bernd

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 7, 2020 08:07 AM

Hi Bernd,

Sorry for the inconvenience caused.

We doesn’t have support for defining base class with (multiple) derived objects in TreeGrid.

Regards,

Farveen sulthana T

BP Bernd Parchmann February 10, 2020 09:56 AM

This is a pity! The Grid can handle this... Actually I expect this other way around ;)

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 14, 2020 11:26 AM

Hi Bernd,

Sorry for the inconvenience caused.

While on further analyzing, TreeGrid handles more complex data than Data Grid. In Tree Grid we have built dynamic class internally as bridge between grid and treegrid. So it is not feasible to achieve in Tree Grid.

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T

WW Wayne Wilcox February 19, 2021 08:07 PM

I have a similar problem and to the original title of the post, am looking to use interfaces in my data binding.

So instead of List<Customer> customers

I want to use List<ICustomer> customers where customers is the datasource.

Also ICustomer customer = new DisplayCustomer() where DisplayCustomer also implements the interface.

A simple dropdown list for example has the TItem and datasource does not allow me to ise customer as TItem and customers as datasource. Not sure how to correctly cast/convert to get the correct values for TItem and datasource.

(For the defat Select control this works)

PM Ponmani Murugaiyan Syncfusion Team February 22, 2021 07:42 AM

Hi Wayne,

Thanks for the update.

We have prepared sample as per your requested requirement with Interfaces. Please find the code snippet and sample below for reference.

<SfDropDownList TValue="string" TItem="ITestItem" DataSource="@AllItems" @bind-Value="@PropertyValue">

<DropDownListFieldSettings Text="Value" Value="Value"></DropDownListFieldSettings>

</SfDropDownList>

@code

{

public string PropertyValue { get; set; }

public interface ITestItem

{

}

public class TestItem<T> : ITestItem

{

public T Value { get; set; }

}

public List<ITestItem> AllItems

{

get

{

return new List<ITestItem>() {

new TestItem<string>() { Value = "a" },

new TestItem<string>() { Value = "b" }

};

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp-784769418

Please get back us if you need further assistance.

Regards,

Ponmani M