composite property databinding

[SP]

Hello Syncfusion team,

How do I implement data binding with composite datasource in Syncfusion MVC 12.4.0.24.

[Balaji Marimuthu]

Hi Shane,

Thanks for using Syncfusion Products.

We have analyzed and achieved your requirement by using composite data source in the ejGrid. We have suggest you to use LINQ joint query to join two or more tables. Please find the below code snippet.

public static IList<ComplexGridViewModel> GetAllRecords()

        {

            using (var context = new NorthwindDataContext())

               

                return (from cust in context.Customers

                        join ord in context.Orders on cust.CustomerID equals ord.CustomerID

                        select new ComplexGridViewModel

                        {

                            OrderID = ord.OrderID,

                            OrderDate = ord.OrderDate,

                            EmployeeID = ord.EmployeeID,

                            Freight = ord.Freight,

                            CustomerID = cust.CustomerID,

                            Address = cust.Address,

                            City = cust.City,

                            Country = cust.Country

                        }).Take(20).ToList();

        }

    }

Please find the sample for your reference.

http://www.syncfusion.com/downloads/support/directtrac/118029/Databinding1977234846.zip

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

[SP]

Hello Balaji Marimuthu,

What if I have a customer who has a list of orders and I want to display all the order names with commas(or links to orders) in one column using a column template.

Thanks.

[Balaji Marimuthu]

Hi Shane,

We have analyzed and achieved your requirement by using column template. Please find the below code snippet.

<script id="template" type="text/x-jsrender">

        <ul style="list-style-type:none; display: inline-flex;">

            {{for Order}}

            <li> {{:color}}</li>

            {{/for}}

        </ul>

    </script>

<script id="template1" type="text/x-jsrender">

        <ul style="list-style-type:none; display: inline-flex;">

            {{for Order}}

            <li> <a rel='nofollow' href="{{:color}}" >{{:color}}</a></li>

            {{/for}}

        </ul>

    </script>

<script type="text/javascript">

           

            $(function () {// Document is ready.

                $("#Grid").ejGrid({

                    dataSource: window.gridData,

                   

                    columns: [

                           { headerText: "customer", template: true, templateID: "#template", textAlign: "center", width: 300 },

                           { headerText: "Orders", template: true, templateID: "#template1", textAlign: "center", width: 300 },

                          

                   . . . . . . .

                   ],

                });

            });

        </script>

In column template, we have displayed the list of names with commas and links using jsrender. We have attached the sample for your reference.

http://www.syncfusion.com/downloads/support/directtrac/118029/column_template1703888290.zip

Please let us know if you have any queries.

Regards,

Balaji Marimuthu