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

Bind Object with array of objects To DataSource

2 Answers 579 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Vincent
Top achievements
Rank 1
Vincent asked on 12 Aug 2015, 12:07 PM

Hello. I am trying to bind a an object with an array of objects to a kendo.data.DataSource. The array of objects will be for a dropdownlist and everything else outside of the array will be for other fields on the form. Is there a way to do this? I know that if I just had an array of objects I could easily bind the dropdownlist to that DataSource, but is it possible to do it with an object with a list (array) of objects? Below is my code.

 

HTML MARKUP

<input data-role='dropdownlist'
    data-option-label='-- Select One --'
data-auto-bind='true' data-text-field='ServingPeriod' data-value-field='AdmServingPeriodId' data-primitive-value='true' data-bind='value: SelectedItem, source: DailyEntries' />

2 Answers, 1 is accepted

Sort by
0
Vincent
Top achievements
Rank 1
answered on 12 Aug 2015, 12:20 PM

Sorry I hit the space bar and it posted the question??

At any rate the code is as follows:

<input data-role='dropdownlist'
    data-option-label='-- Select One --'
data-auto-bind='true' data-text-field='ServingPeriod' data-value-field='AdmServingPeriodId' data-primitive-value='true' data-bind='value: SelectedItem, source: DailyEntries' />

 

The JavaScript is as follows:

01.//View Model (data is retrieved from model)
02. var viewModel = kendo.observable({
03.     SaveDailyEntry: function () {
04. 
05.         if (updateDailyEntry) {
06.             solana.pos.dailyEntry.updateDailyEntry(viewModel);
07.         }
08.         else {
09.             //Save Daily Entry
10.             solana.pos.dailyEntry.saveDailyEntry(viewModel);
11.         }
12.     },
13. 
14.     //Selected Item (in dropdownList)
15.     SelectedItem: null,
16. 
17.     DailyEntries: new kendo.data.DataSource({
18.         transport: {
19.             read: {
20.                 url: '/DailyEntry/GetExistingServingPeriods',
21.                 dataType: 'json',
22.                 data: { serveDate: serveDate, admSiteId: admSiteId },
23.             }
24.         }
25.     })
26. });
27. 
28. //Bind the view model to the form
29. kendo.bind($('div#dailyEntryModal'), viewModel);

 

The Object is as follows:

01.public class PosDailyEntriesViewModel
02.{
03.    public PosDailyEntriesViewModel()
04.    {
05.        PosDailyEntryModal = new List<PosDailyEntryModal>();
06.    }
07. 
08.    /// <summary>
09.    /// Gets/sets AdmSiteId
10.    /// </summary>
11.    public string AdmSiteId { get; set; }
12. 
13.    /// <summary>
14.    /// Gets/sets ServeDate
15.    /// </summary>
16.    public string ServeDate { get; set; }
17. 
18.    /// <summary>
19.    /// Gets/sets ModalDeposit
20.    /// </summary>
21.    public string ModalDeposit { get; set; }
22. 
23.    /// <summary>
24.    /// Gets/sets CashOut1
25.    /// </summary>
26.    public decimal CashOut1 { get; set; }
27. 
28.    /// <summary>
29.    /// Gets/sets CashOut2
30.    /// </summary>
31.    public decimal CashOut2 { get; set; }
32. 
33.    /// <summary>
34.    /// Gets/sets CashIn
35.    /// </summary>
36.    public decimal CashIn { get; set; }
37. 
38.    /// <summary>
39.    /// Gets/sets Enrollment
40.    /// </summary>
41.    public int Enrollment { get; set; }
42. 
43.    /// <summary>
44.    /// Gets/sets ApprovedFree
45.    /// </summary>
46.    public int ApprovedFree { get; set; }
47. 
48.    /// <summary>
49.    /// Gets/sets ApprovedReduced
50.    /// </summary>
51.    public int ApprovedReduced { get; set; }
52. 
53.    /// <summary>
54.    /// Gets/sets ProgramEnrollment
55.    /// </summary>
56.    public int ProgramEnrollment { get; set; }
57. 
58.    /// <summary>
59.    /// Gets/sets AttendanceTotal
60.    /// </summary>
61.    public int AttendanceTotal { get; set; }
62. 
63.    /// <summary>
64.    /// Gets/sets ApprovedFreeTotal
65.    /// </summary>
66.    public int ApprovedFreeTotal { get; set; }
67. 
68.    /// <summary>
69.    /// Gets/sets ApprovedReducedTotal
70.    /// </summary>
71.    public int ApprovedReducedTotal { get; set; }
72. 
73.    /// <summary>
74.    /// Gets/sets PosDailyEntryModal object
75.    /// </summary>
76.    public List<PosDailyEntryModal> PosDailyEntryModal { get; set; }
77.}

0
Petyo
Telerik team
answered on 14 Aug 2015, 11:48 AM

Hello Vincent,

the datasource may operate with an object that has an array of objects. However, the rest of the object contents will be ignored. You can achieve that using the schema.data configuration option.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Vincent
Top achievements
Rank 1
Answers by
Vincent
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or