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

Trying to understand the DataSource part II

5 Answers 79 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 29 Aug 2012, 03:38 PM
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

5 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 30 Aug 2012, 08:43 AM
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!
0
Paul
Top achievements
Rank 1
answered on 30 Aug 2012, 12:09 PM
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
0
Atanas Korchev
Telerik team
answered on 30 Aug 2012, 12:25 PM
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!
0
Paul
Top achievements
Rank 1
answered on 11 Sep 2012, 11:32 AM
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.
0
Atanas Korchev
Telerik team
answered on 12 Sep 2012, 07:54 AM
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!
Tags
General Discussions
Asked by
Paul
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Paul
Top achievements
Rank 1
Share this question
or