odata support for $expand command with Grid

4 posts, 0 answers
  1. Mark
    Mark avatar
    4 posts
    Member since:
    Jan 2012

    Posted 24 Jan 2012 Link to this post

    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.
  2. Mark
    Mark avatar
    4 posts
    Member since:
    Jan 2012

    Posted 24 Jan 2012 Link to this post

    its ok worked it out for myself, the completed example can be found at :
    http;//www.wsit.me.uk/odatakendo/
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Daniel avatar
    36 posts
    Member since:
    Apr 2009

    Posted 22 Dec 2012 Link to this post

    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;
           }
  5. Daniel
    Daniel avatar
    36 posts
    Member since:
    Apr 2009

    Posted 22 Dec 2012 Link to this post

    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>
Back to Top
Kendo UI is VS 2017 Ready