This is a migrated thread and some comments may be shown as answers.

odata support for $expand command with Grid

3 Answers 316 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 24 Jan 2012, 04:47 PM
does the odata transport for the grid support the odata $expand command. if yes do you have an example i can have, as I cannot get it working.

3 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 24 Jan 2012, 11:17 PM
its ok worked it out for myself, the completed example can be found at :
http;//www.wsit.me.uk/odatakendo/
0
Daniel
Top achievements
Rank 2
answered on 23 Dec 2012, 12:41 AM
Can you share your datasource and grid code?

I have the $expand to work but I don't know how to add the related fields to mydatasource and grid.

Thanks,
Dan

Edit:  I was able to view your source code it works great!  Just add your related field to your datagrid not the model, by convention
RelatedEntity.field as in Price.Price1
Here it is.


                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                        serverPaging: true,
                            serverSorting: true,
                            type: "odata",
     transport: {
         read: "http://odata.spws.me.uk/spwcfef.svc/Companies?$expand=Price&$filter=indexid eq 1"
     },
 
                            schema: {
                                model: {
                                    fields: {
                                        Symbol: { type: "string" },
                                        Company1: { type: "string" },
                                        indexid: { type: "number" }
                                         
                                    }
                                },
                                 
                                 
                            },
                            pageSize: 10
                        },
                        height: 400,
                        scrollable: true,
                       sortable: true,
                        filterable: true,
                        pageable: true,
                        columns: [
                            {
                                field: "Symbol"
                            },
                            {
                                field: "Company1",
                                title: "Company"
                            },
                            {
                                field: "indexid",
                                title: "Index"
                            },
                         
                            {
                                field: "Price.Price1",
                                title:"Price"
                            }
                            ,
                             {
                                field: "Price.Last_Trade_date",
                                title: "Last Trade",
                                template: '#= kendo.toString(toDate(Price.Last_Trade_date),"dd/MM/yyyy") #'
                            }
                            ,
                             {
                                field: "Price.change",
                                title: "Price Change"
                            }
                        ]
                    });
 



Also if you do no want to put $expand and $filter parameters in your service url explicitly you can use the data: paramater of transport like this

var crudServiceBaseUrl = "http://localhost:59453/SimplyFundraisingSvc.svc/ContactTypes"
           var MyDataSource = new kendo.data.DataSource({
               type: "odata",
               transport: {
                   read: {
                       url: crudServiceBaseUrl
                   }
               },
                   schema: {
                       model: MyModel
                   }
           });
           return MyDataSource;
       }
0
Daniel
Top achievements
Rank 2
answered on 23 Dec 2012, 12:47 AM
Can you share your datasource and grid code?

I have the $expand to work but I don't know how to add the related fields to mydatasource and grid.

Thanks,
Dan

Edit:  I was able to view your source code, thanks very much!

Also if you don't want to set the $expand $filter parameter in your url you can just add them to the data: in your data source
var crudServiceBaseUrl = "http://localhost:59453/SimplyFundraisingSvc.svc/ContactTypes"
           var MyDataSource = new kendo.data.DataSource({
               type: "odata",
               transport: {
                   read: {
                       url: crudServiceBaseUrl
                   }
               },
                   schema: {
                       model: MyModel
                   }
           });
           return MyDataSource;
       }


Here is his code works great!
<!doctype html>
<html>
    <head>
        <title>Binding to remote odata WCF Service (using $expand command)</title>
        <link href="shared/styles/examples.css" rel="stylesheet"/>
        <link href="shared/styles/examples-offline.css" rel="stylesheet"/>
        <link href="styles/kendo.common.min.css" rel="stylesheet"/>
        <link href="styles/kendo.default.min.css" rel="stylesheet"/>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.core.min.js"></script>
        <script src="js/kendo.fx.min.js"></script>
        <script src="js/kendo.model.min.js"></script>
        <script src="js/kendo.data.odata.min.js"></script>
        <script src="js/kendo.data.min.js"></script>
        <script src="js/kendo.pager.min.js"></script>
        <script src="js/kendo.sortable.min.js"></script>
        <script src="js/kendo.popup.min.js"></script>
        <script src="js/kendo.list.min.js"></script>
        <script src="js/kendo.dropdownlist.min.js"></script>
        <script src="js/kendo.calendar.min.js"></script>
        <script src="js/kendo.datepicker.min.js"></script>
        <script src="js/kendo.numerictextbox.min.js"></script>
        <script src="js/kendo.filtermenu.min.js"></script>
        <script src="js/kendo.grid.min.js"></script>
    </head>
 
        <div class="description"><center><b>Share Prices for Companies in FTSE100</b></center></div>
        <div id="example" class="k-content">
            <div id="grid"></div>
            <script>
            var dateRegExp = /^\/Date\((.*?)\)\/$/;
  
    function toDate(value) {
        var date = dateRegExp.exec(value);
        return new Date(parseInt(date[1]));
    }
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                        serverPaging: true,
                            serverSorting: true,
                            type: "odata",
     transport: {
         read: "http://odata.spws.me.uk/spwcfef.svc/Companies?$expand=Price&$filter=indexid eq 1"
     },
 
                            schema: {
                                model: {
                                    fields: {
                                        Symbol: { type: "string" },
                                        Company1: { type: "string" },
                                        indexid: { type: "number" }
                                         
                                    }
                                },
                                 
                                 
                            },
                            pageSize: 10
                        },
                        height: 400,
                        scrollable: true,
                       sortable: true,
                        filterable: true,
                        pageable: true,
                        columns: [
                            {
                                field: "Symbol"
                            },
                            {
                                field: "Company1",
                                title: "Company"
                            },
                            {
                                field: "indexid",
                                title: "Index"
                            },
                         
                            {
                                field: "Price.Price1",
                                title:"Price"
                            }
                            ,
                             {
                                field: "Price.Last_Trade_date",
                                title: "Last Trade",
                                template: '#= kendo.toString(toDate(Price.Last_Trade_date),"dd/MM/yyyy") #'
                            }
                            ,
                             {
                                field: "Price.change",
                                title: "Price Change"
                            }
                        ]
                    });
                });
            </script>
        </div>
    </body>
</html>
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Daniel
Top achievements
Rank 2
Share this question
or