jQuery UI Widgets Forums Scheduler Switching views: Cannot read property cells

This topic contains 3 replies, has 2 voices, and was last updated by  hf 7 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • hf
    Participant

    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.

    • This topic was modified 7 years, 6 months ago by  hf.

    Peter Stoev
    Keymaster

    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


    hf
    Participant

    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?


    hf
    Participant

    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
                });
            }
    
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.