Trying to understand the DataSource part II

6 posts, 0 answers
  1. Paul
    Paul avatar
    8 posts
    Member since:
    Aug 2012

    Posted 29 Aug 2012 Link to this post

    Hi,

    A seconde question about the DataSource is how can we get the Data of a subset into f.i. a grid. Here's the code we use for our JSON services.

    [DataContract]
    public partial class VMProject : VMRoot
    {
    public VMProject() {}
    public static VMProject GetById(object sender, int id)
    {
    return CallGetVMById<VMProject>("", id);
    }
    public static VMEntitySet<VMProject> AllVMProjectList(object sender)
    {
    return (VMEntitySet<VMProject>)CallGetVMAllList<VMEntitySet<VMProject>>(sender);
    }
    [DataMember]
    public String Name
    {
    get { return CallGetData<String>("Name"); }
    set { CallSetData ("Name", value); }
    }
    [DataMember]
    public VMEntitySet<VMProjectRegel> ProjectRegelList
    {
    get { return CallGetData<VMEntitySet<VMProjectRegel>>("ProjectRegelList"); }
    // set { CallSetData ("ProjectRegelList", value); }
    }
    }

    The consumed class VMRoot looks like this:
    [DataContract]
    public partial class VMRoot : Viewmodel
    {
    public VMRoot() {}
    public static VMRoot GetById(object sender, int id)
    {
    return CallGetVMById<VMRoot>("", id);
    }
    public static VMEntitySet<VMRoot> AllVMRootList(object sender)
    {
    return (VMEntitySet<VMRoot>)CallGetVMAllList<VMEntitySet<VMRoot>>(sender);
    }
    [DataMember]
    public Int32 Id
    {
    get { return CallGetData<Int32>("Id"); }
    set { CallSetData ("Id", value); }
    }
    [DataMember]
    public DateTime CreatedOn
    {
    get { return CallGetData<DateTime>("CreatedOn"); }
    set { CallSetData ("CreatedOn", value); }
    }
    [DataMember]
    public Int32 CreatedBy
    {
    get { return CallGetData<Int32>("CreatedBy"); }
    set { CallSetData ("CreatedBy", value); }
    }
    [DataMember]
    public DateTime ChangedOn
    {
    get { return CallGetData<DateTime>("ChangedOn"); }
    set { CallSetData ("ChangedOn", value); }
    }
    [DataMember]
    public Int32 ChangedBy
    {
    get { return CallGetData<Int32>("ChangedBy"); }
    set { CallSetData ("ChangedBy", value); }
    }
    }

    The VMEntitySet is an ObservableCollection which contains VMProjectRegel objects. These are defined like so:
    [DataContract]
    public partial class VMProjectRegel : VMRoot
    {
    public VMProjectRegel() {}
    public static VMProjectRegel GetById(object sender, int id)
    {
    return CallGetVMById<VMProjectRegel>("", id);
    }
    public static VMEntitySet<VMProjectRegel> AllVMProjectRegelList(object sender)
    {
    return (VMEntitySet<VMProjectRegel>)CallGetVMAllList<VMEntitySet<VMProjectRegel>>(sender);
    }
    [DataMember]
    public Int32 Aantal
    {
    get { return CallGetData<Int32>("Aantal"); }
    set { CallSetData ("Aantal", value); }
    }
    [DataMember]
    public Decimal Prijs
    {
    get { return CallGetData<Decimal>("Prijs"); }
    set { CallSetData ("Prijs", value); }
    }
    [DataMember]
    public Decimal BTW
    {
    get { return CallGetData<Decimal>("BTW"); }
    set { CallSetData ("BTW", value); }
    }
    }

    The JSON we receive looks like this:
    [
    {
    "DatumAanvang": "\/Date(1345732135057+0200)\/",
    "DatumFaktuur": "\/Date(1345732135059+0200)\/",
    "Name": "Project onderhoud",
    "ProjectRegelList": [
    {
    "Aantal": 99,
    "Prijs": 99.000000000000,
    "BTW": 1.000000000000,
    "Id": 101,
    "CreatedOn": "\/Date(1345732135085+0200)\/",
    "CreatedBy": 10,
    "ChangedOn": "\/Date(1345732135085+0200)\/",
    "ChangedBy": 10
    }
    ],
    "Id": 1,
    "CreatedOn": "\/Date(1345732135060+0200)\/",
    "CreatedBy": 10,
    "ChangedOn": "\/Date(1345732135060+0200)\/",
    "ChangedBy": 10
    }
    ]

    The DataSource is defined like so:

    var dataSourceprojecten = new kendo.data.DataSource(
    {
    // the transport tells the datasource what endpoints
    // to use for CRUD actions
    schema:
    {
    model:
    {
    id: "Id",
    fields:
    {
    DatumAanvang:
    {
    type: "date"
    },
    DatumFaktuur:
    {
    type: "date"
    },
    Name:
    {
    type: "string"
    },
    CreatedOn:
    {
    "type": "date"
    },
    CreatedBy:
    {
    "type": "number"
    },
    ChangedOn:
    {
    "type": "date"
    },
    ChangedBy:
    {
    "type": "number"
    }
    }
    }
    },
    transport:
    {
    read:
    {
    url: "../api/projectonderhoud/get",
    dataType: "json"
    }
    }
    });

    after executing the dataSourceprojecten.read() the data is available for the main list but how do we specify the fetch for the ProjectRegelsList in f.i. a grid?

    This is what I have tried (among many other attempts) to get it to work:

                          $("#projectregels").kendoGrid(
                    {
                        dataSource:
                        {
                        schema:
                        {
                            model: ProjectRegel
                        },
                        data: dataSourceprojecten.ProjectRegelList
                        },                       
                        groupable: true,
                        sortable: true,
                        pagesize: 10,
                        columns:
                        [
                            {
                                field: "Id",
                                title: "Id"
                            },
                            {
                                field: "Aantal",
                                title: "Aantal"
                            },
                            {
                                field: "Prijs"
                            },
                            {
                                field: "BTW"
                            },
                            {
                                field: "CreatedOn",
                                title: "Created on",
                                template: '#= kendo.toString(CreatedOn,"dd MM yyyy") #'
                            },
                            {
                                field: "CreatedBy"
                            }
                        ]
                    });


    Regards
    Paul

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Aug 2012 Link to this post

    Hi Paul,

     It looks that this data is already available:

    [
    {
    "DatumAanvang""\/Date(1345732135057+0200)\/",
    "DatumFaktuur""\/Date(1345732135059+0200)\/",
    "Name""Project onderhoud",
    "ProjectRegelList": [
    {
    "Aantal": 99,
    "Prijs": 99.000000000000,
    "BTW": 1.000000000000,
    "Id": 101,
    "CreatedOn""\/Date(1345732135085+0200)\/",
    "CreatedBy": 10,
    "ChangedOn""\/Date(1345732135085+0200)\/",
    "ChangedBy": 10
    }
    ],
    "Id": 1,
    "CreatedOn""\/Date(1345732135060+0200)\/",
    "CreatedBy": 10,
    "ChangedOn""\/Date(1345732135060+0200)\/",
    "ChangedBy": 10
    }
    ]

    How do you want to use that field?

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Paul
    Paul avatar
    8 posts
    Member since:
    Aug 2012

    Posted 30 Aug 2012 Link to this post

    Atanas,

    Ah, ok I will try and clarify. In fact the data represents a master detail page. We would like to use the Project data in page and on the same page a grid that shows the ProjectRegel collection. How do we go about that?

    Regards
    Paul
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Aug 2012 Link to this post

    Hi,

     It is still not clear how the ProjectRegel collection is going to be used from the grid data source. Please clarify.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Paul
    Paul avatar
    8 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2012 Link to this post

    Please take a close look at the VMProject class at the top of this post. You will see there is a VMEntitySet<ProjectRegel> collection in that class. So what I want is to use 1 datasource that fetches the data from the server via a controller. The JSON returned will be a list within a list. Each 'Project' has many 'ProjectRegel' entities. We would like to show the first project in the list as the master and the list of ProjectRegel as a grid.
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 12 Sep 2012 Link to this post

    Hi Paul,

     I created a sample which shows how to do the same: http://jsbin.com/uwipad/1/edit 

    I hope this helps,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top