Grid and ICollection<Interface> as DataSource

Manuel Reinacher

Asked On September 15, 2019 01:48 PM UTC

Hello,

This is just an suggestion:

It would be nice, if the grid could support interfaces as a DataSource.

I think the creation of a new value could be done with an Func<Interface> as a parameter or similar.

regards Manuel

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On September 16, 2019 03:18 PM UTC

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.

Reply | Reply with quote

Bernd Parchmann

Replied On January 23, 2020 09:40 AM UTC

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

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On January 23, 2020 12:32 PM UTC

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.

Reply | Reply with quote

Rnlalfred

Replied On January 31, 2020 08:04 PM UTC

How can more than one datasource be used ?

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On February 3, 2020 05:59 AM UTC

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.

Reply | Reply with quote

Bernd Parchmann

Replied On February 4, 2020 01:42 PM UTC

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!

Reply | Reply with quote

Farveen Sulthana Thameeztheen Basha [Syncfusion]

Replied On February 5, 2020 03:41 PM UTC

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

Reply | Reply with quote

Bernd Parchmann

Replied On February 6, 2020 07:47 AM UTC

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

Reply | Reply with quote

Farveen Sulthana Thameeztheen Basha [Syncfusion]

Replied On February 7, 2020 01:07 PM UTC

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

Reply | Reply with quote

Bernd Parchmann

Replied On February 10, 2020 02:56 PM UTC

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

Reply | Reply with quote

Farveen Sulthana Thameeztheen Basha [Syncfusion]

Replied On February 14, 2020 04:26 PM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147541	Sep 15,2019 01:48 PM UTC	Feb 14,2020 04:26 PM UTC	Blazor	11

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US