Bind Object with array of objects To DataSource

3 posts, 0 answers
  1. Vincent
    Vincent avatar
    10 posts
    Member since:
    May 2015

    Posted 12 Aug 2015 Link to this post

    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. Vincent
    Vincent avatar
    10 posts
    Member since:
    May 2015

    Posted 12 Aug 2015 Link to this post

    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.}

  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Aug 2015 Link to this post

    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!
     
Back to Top