locked
Lightswitch HTML Binding Kendo Grid RRS feed

  • Question

  • AM attempting to use Kendo Grid with Lightswitch.

    I can get data binding working with local data.

    When I bind to lightswitch data, nothing shows up.

    Code looks like this

    myapp.BrowsePeople.People_render = function (element, contentItem) {
    
    var localPeople = [{ FirstName: "John", LastName: "Smith", email: "john.smith@kendoui.com" },
                       { FirstName: "Jane", LastName: "Smith", email: "jane.smith@kendoui.com" },
                       { FirstName: "Josh", LastName: "Davis", email: "josh.davis@kendoui.com" },
                       { FirstName: "Cindy", LastName: "Jones", email: "cindy.jones@kendoui.com" }];
    
    var grdPeople = $('<div id="KendoPeopleDiv"></div>').appendTo(element);
    
    
    var lsPeople = contentItem.screen.People;
    
    lsPeople.addChangeListener("state", function () {
        if (lsPeople.state === msls.VisualCollection.State.idle)
        {
            grdPeople.kendoGrid({
                columns: [{ title: "First Name", field: "FirstName" }, { title: "Last Name", field: "LastName" }],
                dataSource: lsPeople.data
                //dataSource: localPeople
            });      
        }
    });

    };

    As indicated if I use "dataSource: localPeople" it displays the static list. If I use "dataSource: lsPeople.data" the headers sho, but no records.

    I have checked "lsPeople.data" in the debugger and it has 2 records with FirstName and LastName.

    Thanks in advance

    Tuesday, May 7, 2013 4:35 AM

Answers

  • i'm using the following code in "DoctorsOffice" Sample:

     var grid = $("<div id='grid' style='height: 380px'></div>");
        grid.appendTo($(element));

        var doctors = contentItem.screen.Doctors;

        function loadgrid(doctors)
        {
            var data = [];
            doctors.forEach(function (doctor) {
                data.push({
                    FirstName : doctor.Firstname,
              
                    LastName:doctor.Lastname
                });
            })
            grid.kendoGrid({
                dataSource: {
                    data: data,
                    pageSize: 10
                },

                
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                },
                columns: [
                    { field: "FirstName", title: "First Name", width: "130px" },
                    { field: "LastName", title: "Last Name", width: "130px" },
                ]

            });
           }
        doctors.addChangeListener("state", function () {
            loadgrid(doctors.data);
        });


    That works properly!



    Tuesday, May 7, 2013 6:54 AM
  • Disclaimer: I haven't used kendoUI's grid specifically but I suggest looking closely at the differences between what worked in the Doctor's office sample code and yours to see if they differ significantly enough to cause a problem.

    In the Doctor's office sample, the grid data starts as an empty array variable "data" that you populate by iterating through the Doctor visual collection and assigning the FirstNames and LastNames to string literal elements in the data array object.  So KendoUI has no difficulty finding FirstName and LastName in the data array to bind to the Field parameter since that is all that the array contains.

    In your code, you say your datasource (screen.People.data) has 2 records with FirstName and LastName, but in my experience the Visual Collection array elements are more complex than the localPeople example or the Doctor's office data array, and so KendoUI may have trouble sifting through lsPeople.data to really pull out FirstName and LastName.

    Perhaps try the following:

    var lsPeople= contentItem.screen.People;

    lsPeople.addChangeListener("state", function () { if (lsPeople.state === msls.VisualCollection.State.idle)

    { function loadgrid(lsPeople) { var data = []; lsPeople.forEach(function (person) { data.push({ FirstName : person.Firstname, LastName:person.Lastname }); }) ...... etc.


    Tuesday, May 7, 2013 8:28 AM

All replies

  • i'm using the following code in "DoctorsOffice" Sample:

     var grid = $("<div id='grid' style='height: 380px'></div>");
        grid.appendTo($(element));

        var doctors = contentItem.screen.Doctors;

        function loadgrid(doctors)
        {
            var data = [];
            doctors.forEach(function (doctor) {
                data.push({
                    FirstName : doctor.Firstname,
              
                    LastName:doctor.Lastname
                });
            })
            grid.kendoGrid({
                dataSource: {
                    data: data,
                    pageSize: 10
                },

                
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                },
                columns: [
                    { field: "FirstName", title: "First Name", width: "130px" },
                    { field: "LastName", title: "Last Name", width: "130px" },
                ]

            });
           }
        doctors.addChangeListener("state", function () {
            loadgrid(doctors.data);
        });


    That works properly!



    Tuesday, May 7, 2013 6:54 AM
  • Disclaimer: I haven't used kendoUI's grid specifically but I suggest looking closely at the differences between what worked in the Doctor's office sample code and yours to see if they differ significantly enough to cause a problem.

    In the Doctor's office sample, the grid data starts as an empty array variable "data" that you populate by iterating through the Doctor visual collection and assigning the FirstNames and LastNames to string literal elements in the data array object.  So KendoUI has no difficulty finding FirstName and LastName in the data array to bind to the Field parameter since that is all that the array contains.

    In your code, you say your datasource (screen.People.data) has 2 records with FirstName and LastName, but in my experience the Visual Collection array elements are more complex than the localPeople example or the Doctor's office data array, and so KendoUI may have trouble sifting through lsPeople.data to really pull out FirstName and LastName.

    Perhaps try the following:

    var lsPeople= contentItem.screen.People;

    lsPeople.addChangeListener("state", function () { if (lsPeople.state === msls.VisualCollection.State.idle)

    { function loadgrid(lsPeople) { var data = []; lsPeople.forEach(function (person) { data.push({ FirstName : person.Firstname, LastName:person.Lastname }); }) ...... etc.


    Tuesday, May 7, 2013 8:28 AM
  • This makes perfect sense. And of course works.

    Having said that it feels like a kludge to me. I just cant understand why the visualcollection cant be bound directly. Because by doing this you are missing out on alot of the built in functionalitty (ie eveniting) from the visualcollection.

    Tuesday, May 7, 2013 1:49 PM
  • Having said that it feels like a kludge to me. I just cant understand why the visualcollection cant be bound directly. Because by doing this you are missing out on alot of the built in functionalitty (ie eveniting) from the visualcollection.

    The kendoUI API provides for binding to complex data sources, and this is how a visual collection (which is a type of observable collection more generically) that has multiple dot-delimited fields can be bound to.  See:

    kendo.data.DataSource

    kendo.data.ObservableObject

    ..with special attention to the get() method of nested fields.



    Tuesday, May 7, 2013 3:32 PM