Switching views: Cannot read property cells

[hfParticipant]

Hi,

Switching from dayView to timelineDayView works well, but switching from timelineDayView back to dayView results in an error ‘Cannot read property cells of undefined..’

        $('#SchedulePersons').on('viewChange', function (event)
        {
            var args = event.args;
            var date = args.date;
            var from = args.from;
            var to = args.to;
            var oldViewType = args.oldViewType;
            var newViewType = args.newViewType

            ScheduleFrom = new $.jqx.date(from).toString();
            ScheduleTo = new $.jqx.date(to).toString();

            SetViews(newViewType);

            var AdapterSchedulePersons = GetAppointments();
            $("#SchedulePersons").jqxScheduler({ source: AdapterSchedulePersons });
        });

Function SetViews must ensure that orientation is vertical on timeline views and horizontal by the other views.

        function SetViews(newViewType) {
            if (newViewType == 'timelineDayView' || newViewType == 'timelineWeekView' || newViewType == 'timelineMonthView') {
                resourcesSettings = {
                    colorScheme: 'scheme05',
                    dataField: 'Naam',
                    orientation: 'vertical',
                    source: GebruikersService.data
                }
            }
            else {
                resourcesSettings = {
                    colorScheme: 'scheme05',
                    dataField: 'Naam',
                    orientation: 'horizontal',
                    source: GebruikersService.data
                }
            }

            $("#SchedulePersons").jqxScheduler({
                resources: resourcesSettings
            });
        }

The error appears even before the viewChange event is fired.

[Peter StoevKeymaster]

Hi hf,

It’s wrong approach to change the data source of the Scheduler within its ‘viewChange’ event. Such issue most probably comes from that fact.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hfParticipant]

Hi Peter,

Okay, but what I would like to achieve is data from webservice is loaded depending on the selected date and view (because of big mysql table).

So I supposed to refresh the data I’d to set data source in the changeView event. Can you point me in the right direction?

[hfParticipant]

It works! I removed set data source in changeView event. Setting the resource was already triggering rebinding source..

Maybe helpfull for others.. this is how I’ve got it finally.

Get appointments

        function GetAppointments() {
            var Datafields = [
                { name: 'PlanningId', type: 'string' },
                { name: 'Description', type: 'string' },
                { name: 'Location', type: 'string' },
                { name: 'Opdrachtbon', type: 'int' },
                { name: 'Subject', type: 'string' },
                { name: 'UserNaam', type: 'string' },
                { name: 'Start', type: 'date' },
                { name: 'End', type: 'date' },
                { name: 'Kleur', type: 'string' },
                { name: 'Source', type: 'string' },
                { name: 'Readonly', type: 'bool' },
                { name: 'resizable', type: 'bool' },
                { name: 'draggable', type: 'bool' },
                { name: 'Actcode', type: 'int' },
            ]

            var SourceAppointments = {
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                datatype: 'json',
                id: 'PlanningId',
                datafields: Datafields,
                url: 'getData.asmx/GetPlanning',
                async: false,
                beforeprocessing: function (data) {
                    var returnData = {};
                    data = data.d;
                    totalrecords = data.count;
                    returnData.totalrecords = data.count;
                    returnData.records = data.data;
                    return returnData;
                },
                formatdata: function (data) {
                    //var view = $("#SchedulePersons").jqxScheduler('view');
                    //var date = $("#SchedulePersons").jqxScheduler('date');

                    if (typeof (ScheduleFrom) != 'undefined') dateFrom = ScheduleFrom
                    else dateFrom = convertdate(new Date().setDate(1 - 7), 'shortUS');
                    if (typeof (ScheduleTo) != 'undefined') dateTo = ScheduleTo
                    else dateTo = convertdate(new Date().setDate(30 + 14), 'shortUS');

                    //dateFrom = new $.jqx.date(2016, 1, 1).toString();
                    //dateTo = new $.jqx.date(2017, 11, 1).toString();

                    data.filterscount = "3"
                    data.groupscount = "0"
                    data.pagenum = "1"
                    data.pagesize = "1000"
                    data.sortdatafield = "Start"
                    data.sortorder = "asc"

                    data.filtervalue0 = "0"
                    data.filtercondition0 = "EQUAL"
                    data.filteroperator0 = "1"
                    data.filterdatafield0 = "Historisch"

                    data.filtervalue1 = dateFrom,
                    data.filtercondition1 = "GREATER_THAN_OR_EQUAL"
                    data.filteroperator1 = "1"
                    data.filterdatafield1 = "End"

                    data.filtervalue2 = dateTo
                    data.filtercondition2 = "LESS_THAN_OR_EQUAL"
                    data.filteroperator2 = "0"
                    data.filterdatafield2 = "Start"

                    formatedData = buildQueryString(data);
                    return formatedData;
                }
            }

            var AdapterAppointments = new $.jqx.dataAdapter(SourceAppointments, {
                contentType: 'application/json; charset=utf-8',
                downloadComplete: function (data, textStatus, jqXHR) {
                    return data;
                },
                loadError: function (xhr, status, error) {
                    BuildErrorWindow(xhr.responseText);
                }
                
            });

            return AdapterAppointments;
        }

Build schedule

function BuildSchedulePersons() {

            GebruikersService = GetUsersServicePlanbaar();

            var view = getCookie('PlanningViewType');
            if (view == "") view = "timelineDayView";

            var AdapterSchedulePersons = GetAppointments();

            $("#SchedulePersons").jqxScheduler({
                theme: theme,
                width: '100%',
                height: '100%',
                source: AdapterSchedulePersons,
                localization: localizationobj,
                dayNameFormat: 'full',
                view: view,
                showLegend: true,
                editDialogDateTimeFormatString: 'dd-MM-yyyy HH:mm',
                editDialogDateFormatString: 'dd-MM-yyyy',
                ready: function () {
                    
                },
                resources:
                {
                    colorScheme: "scheme05",
                    dataField: "Naam",
                    orientation: "horizontal",
                    source: GebruikersService.data
                },
                appointmentDataFields:
                {
                    planningId: "PlanningId",
                    from: "Start",
                    to: "End",
                    id: "PlanningId",
                    description: "Description",
                    location: "Opdrachtbon",
                    subject: "Subject",
                    status: "Actcode",
                    resourceId: "UserNaam",
                    background: "Kleur",
                    readOnly: "Readonly",
                    resizable: "resizable",
                    draggable: "draggable",
                    actcode: "Actcode",
                },
                views:
                    [
                        { type: 'dayView', timeRuler: { scale: 'hour', formatString: 'HH:mm' }, appointmentsRenderMode: "exactTime" },
                        { type: 'weekView', timeRuler: { scale: 'hour', formatString: 'HH:mm' }, appointmentsRenderMode: "exactTime" },
                        { type: 'monthView', timeRuler: { scale: 'hour', formatString: 'HH:mm' }, appointmentsRenderMode: "exactTime" },
                        { type: 'timelineDayView', timeSlotWidth: 50, timeRuler: { formatString: "HH:mm" } },
                        {
                            type: 'timelineWeekView', timeSlotWidth: 30, timeRuler: { scaleStartHour: 7, scaleEndHour: 17, formatString: "HH:mm" }, 
                            workTime:
                            {
                                fromDayOfWeek: 1,
                                toDayOfWeek: 5,
                                fromHour: 8,
                                toHour: 17
                            }
                        },
                        {
                            type: 'timelineMonthView', timeSlotWidth: 80, timeRuler: { scaleStartHour: 7, scaleEndHour: 17, formatString: "d-M" }, 
                            workTime:
                            {
                                fromDayOfWeek: 1,
                                toDayOfWeek: 5,
                                fromHour: 8,
                                toHour: 17
                            }

                        }
                    ]
            });

            debugger;
            SetViews(view);
        };

viewChange event

        $('#SchedulePersons').on('viewChange', function (event)
        {
            debugger;            
            var args = event.args;
            var date = args.date;
            var from = args.from;
            var to = args.to;
            var oldViewType = args.oldViewType;
            var newViewType = args.newViewType

            ScheduleFrom = new $.jqx.date(from).toString();
            ScheduleTo = new $.jqx.date(to).toString();

            SetViews(newViewType);

            AddCookie('PlanningViewType', newViewType)
        });

        function SetViews(newViewType) {
            resourcesSettings = {
                colorScheme: 'scheme05',
                dataField: 'Naam',
                source: GebruikersService.data
            }

            if (newViewType == 'timelineDayView' || newViewType == 'timelineWeekView' || newViewType == 'timelineMonthView') {
                resourcesSettings['orientation'] = 'vertical';

            }
            else {
                resourcesSettings['orientation'] = 'horizontal';
            }

            $("#SchedulePersons").jqxScheduler({
                resources: resourcesSettings
            });
        }

[Author]

Posts