[hfParticipant]

Hi Peter,

Your demo is showing the exact same result, as soon as I set chrome in device mode and refresh the page.

[hfParticipant]

Data is loaded from webservice when change event of jqxdatetimeinput is fired and with interval.

        $("#dateInput").on('change', function (event) {
            var selection = $("#dateInput").jqxDateTimeInput('getRange');
            if (selection.from != null) {
                Refresh()
            }
        });

        function Refresh() {
            // (re)load data
            $('#jqxLoader').jqxLoader('open');
            AdapterData = GetData();
            grid.jqxGrid({ source: AdapterData });

            // config refresh interval
            var interval = 300
            setTimeout(Refresh, interval * 1000);

        }

        function GetData() {
            var formatedData = '';
            var totalrecords = 0;

            source = {
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                datatype: 'json',
                datafields: [
                    { name: 'Id', type: 'string' },
                    { name: 'Datetime', type: 'date' },
                    { name: 'Validity', type: 'string' },
                    { name: 'TimeToPrevRow', type: 'float' },
                    { name: 'BgProductie', type: 'float' }
                ],
                url: 'getData.asmx/GetData',
                sort: function () {
                    $("#grid").jqxGrid('updatebounddata', 'sort');
                },
                filter: function () {
                    $("#grid").jqxGrid('updatebounddata', 'filter');
                    rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
                },
                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 selection = $("#dateInput").jqxDateTimeInput('getRange');

                    firstdate = new Date(selection.from);
                    lastdate = new Date(selection.to);

                    ScheduleFrom = new $.jqx.date(firstdate).toString();
                    ScheduleTo = new $.jqx.date(lastdate).toString();

                    data.filterscount = "3"
                    data.groupscount = "0"
                    data.pagenum = "1"
                    data.pagesize = "1000"
                    data.sortdatafield = "Datetime"
                    data.sortorder = "desc"

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

                    data.filtervalue1 = ScheduleFrom,
                    data.filtercondition1 = "GREATER_THAN_OR_EQUAL"
                    data.filteroperator1 = "1"
                    data.filterdatafield1 = "Datetime"

                    data.filtervalue2 = ScheduleTo
                    data.filtercondition2 = "LESS_THAN_OR_EQUAL"
                    data.filteroperator2 = "0"
                    data.filterdatafield2 = "Datetime"

                    formatedData = buildQueryString(data);
                    return formatedData;
                },
                deleterow: function (rowid, commit) {
                },
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    debugger;
                    $.ajax({
                        type: 'GET',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        url: 'getData.asmx/UpdateData',
                        cache: false,
                        data: { Id: newdata.Id, Historisch: newdata.Historisch, Notes: newdata.Notes },
                        success: function (data, status, xhr) {
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            commit(false);
                        }
                    });
                }
            };

            adapter = new $.jqx.dataAdapter(source, {
                contentType: 'application/json; charset=utf-8',
                loadError: function (xhr, status, error) {
                    $('#jqxLoader').jqxLoader('close');
                    alert(error);
                },
                downloadComplete: function (data, textStatus, jqXHR) {
                    $('#jqxLoader').jqxLoader('close');
                    return data;
                }
            });

            return adapter;
        }

Other strange behavior is when I set aggregates to avg and sum (aggregates: [‘avg’, ‘sum’]) only the (wrong) avg appears.

        function BuildGrid() {
            AdapterData = GetData();
            grid = $("#grid");

            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var meterstanden = null;
                var notes = null;
                tabsdiv = $($(parentElement).children()[0]);
                if (tabsdiv != null) {
                    meterstanden = tabsdiv.find('.meterstanden');
                    var title = tabsdiv.find('.title');
                    title.html('<i class="fa fa-tachometer" aria-hidden="true"></i> Meterstanden'); //'
                    var container = $('<div style="margin: 5px;"></div>')
                    container.appendTo($(meterstanden));
                    var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
                    var rightcolumn = $('<div style="float: left; width: 40%;"></div>');
                    container.append(leftcolumn);
                    container.append(rightcolumn);

                    $(leftcolumn).append(
                        '<dl class="dl-horizontal">' +
                           
                        '</dl>');
                    
                    $(tabsdiv).jqxTabs({ theme: theme, width: 750, height: 180 });
                }
            }

            grid.jqxGrid({
                width: '100%',
                theme: theme,
                localization: localizationobj,
                editable: true,
                columnsresize: true,
                columnsreorder: true,
                autoheight: true,
                rowsheight: 30,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li></ul><div class='meterstanden'></div></div>", rowdetailsheight: 200 },
                initrowdetails: initrowdetails,
                autoshowloadelement: true,
                virtualmode: true,
                rendergridrows: function (args) {
                    return args.data;
                },
                filterable: true,
                showfilterrow: false,
                sortable: true,
                altrows: true,
                enabletooltips: false,
                selectionmode: 'multiplerowsextended',
                showaggregates: true,
                showstatusbar: true,
                statusbarheight: 30,
                showtoolbar: false,
                toolbarheight: 50,
                autoshowfiltericon: false,
                showfiltercolumnbackground: false,
                showfiltermenuitems: false,
                columns: [
                    { text: 'Id', datafield: 'Id', editable: false, width: 80, hidden: true },
                    { text: 'S', datafield: 'Validity', pinned: true, filtertype: 'bool', sortable: false, filterable: false, cellsalign: 'center', cellsrenderer: CellsRenderer, editable: false, width: 25, minwidth: 25, hidden: false },
                    { text: '', datafield: 'TimeToPrevRow', filtertype: 'number', cellsformat: 'f0', cellsalign: 'right', editable: false, width: 50, minwidth: 50, hidden: true },
                    {
                        text: 'Datum en tijd', pinned: true, datafield: 'Datetime', filterable: false, filtertype: 'date', sortable: false, filterable: false, cellsformat: 'ddd d MMMM yyyy HH:mm:ss', editable: false, menu: false, width: 200, minwidth: 200, aggregatesrenderer: function (aggregates, column, element) {
                            var total = BuildGridStatusbar('DatetimeAggregate');
                            return RenderAggregateStyle('DatetimeAggregates', total);
                        }
                    },
                    {
                        text: 'Productie', datafield: 'BgProductie', sortable: false, filterable: false, cellsformat: 'f1', cellsalign: 'right', editable: false, width: 75, minwidth: 75, aggregates: ['avg']
                    }
                ],
                
            });

            grid.on('rowselect', function (event) {
                var args = event.args;
                // row's bound index.
                boundIndex = args.rowindex;
                // row's visible index.
                var visibleIndex = args.visibleindex;
                // right click.
                var rightclick = args.rightclick;
                // original event.
                var ev = args.originalEvent;

                OptionsDependingOnRowSelection();
                BuildGridStatusbar();
            });

            grid.on('rowunselect', function (event) {
                var args = event.args;
                // row's bound index.
                boundIndex = args.rowindex;
                // row's visible index.
                var visibleIndex = args.visibleindex;
                // right click.
                var rightclick = args.rightclick;
                // original event.
                var ev = args.originalEvent;

                OptionsDependingOnRowSelection();
                BuildGridStatusbar();
            });

            grid.on("bindingcomplete", function (event) {
                if (ChartsFirstTimeRun == false) {
                    LoadChart();
                    ChartsFirstTimeRun = true;
                }

                BuildCharts();
            });

        }

[hfParticipant]

Indeed, only a matter of boolean Thnx, works like a charm!

[hfParticipant]

Hi Peter,

Thanks for your quick response. The navigateTo method triggers the dateChange so I can’t use the method in dateChange and bindingComplete events, because that causes an endless loop..

[hfParticipant]

Hi Peter,

So when I use the calendar or the next/prev buttons it affects the calendar AND the schedule. But when I set the date property it only affects the schedule. Would it not be more logical, that the date is selected when navigating through the scheduler?

Is there another way to set the selected date in the calendar on dateChange?

[hfParticipant]

Hi Peter,

Same result.. Shows the correct data in the schedule and displays the correct date above the schedule but still todays date selected in the calendar.

The awkward thing about this, that when I want to go back to todays date.. I can’t select it in the calendar cause it’s already selected.

        $('#SchedulePersons').on('bindingComplete', function (event) {

            $("#SchedulePersons").jqxScheduler({
	            date: new $.jqx.date(2017, 1, 11)
            })

        });

[hfParticipant]

Hi Hristo,

It doesn’t make a difference.

$("#SchedulePersons").on('dateChange', function (event) {
            // is not functioning correct in IE; mixes end and start.
            var args = event.args;
            var date = args.date;
            var from = args.from;
            var to = args.to;

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

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

            $("#SchedulePersons").jqxScheduler({
                date: date
            })

        });

By the way.. I was expecting by setting the date property in the dateChange event would cause a never ending loop, but it didn’t.

[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
            });
        }

[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]

Hi Peter,

I need to refresh the data in the scheduler after selecting a date or navigate with the calendar in the toolbar. How can I accomplish this without having the calendar jump back to todays date?

[hfParticipant]

When I set the date property after changing the source, the selected date in the calendar still jumps back to the date of today.

        $("#SchedulePersons").on('dateChange', function (event) {
            var args = event.args;
            var date = args.date;
            var from = args.from;
            var to = args.to;

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

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

[hfParticipant]

Solution:

        .jqx-popup {
            position:absolute;
            cursor:default;
            z-index:4000 !important
        }

[hfParticipant]

Is this problem already solved? This probleem appears within the editDialogCreate as well.

              editDialogCreate: function (dialog, fields, editAppointment) {
                    debugger;
                    // hide repeat option
                    fields.repeatContainer.hide();
                    // hide status option
                    fields.statusContainer.hide();
                    // hide timeZone option
                    fields.timeZoneContainer.hide();
                    // hide color option
                    fields.colorContainer.hide();
                    // hide repeat option
                    fields.repeatContainer.hide();
                    // hide all day option
                    fields.allDayContainer.hide();

                    fields.subjectLabel.html("Onderwerp");
                    fields.locationLabel.html("Locatie");
                    fields.fromLabel.html("Start");
                    fields.toLabel.html("Eind");
                    fields.resourceLabel.html("Werknemer");

                    // add custom opdrachtbon field
                    var OpdrachtbonField = ''
                    OpdrachtbonField +=
                        '<div>' +
                            '<div class="jqx-scheduler-edit-dialog-label">Opdrachtbon</div>' +
                            '<div class="jqx-scheduler-edit-dialog-field">' +
                                '<input type="text" id="Opdrachtbon" />' +
                            '</div>' +
                        '</div>';

                    var i = 0;
                    $('#dialogSchedulePersons').children('div').each(function () { // loop trough the div's (only first level childs) elements in dialogscheduler
                        i += 1;
                        if (i == 2) { // places the field in the third position.
                            $(this).after(OpdrachtbonField);
                        };
                    });

                    $("#Opdrachtbon").jqxInput({
                        theme: theme, placeHolder: "Opdrachtbon", displayMember: "Referentie", valueMember: "Id", width: '98%', height: 24,
                        source: function (query, response) {
                            var Datafields = DatafieldsOpdrachtbonnen();
                            var dataAdapter = new $.jqx.dataAdapter
                            (
                                {
                                    type: 'GET',
                                    contentType: 'application/json; charset=utf-8',
                                    datatype: "json",
                                    datafields: Datafields,
                                    url: "getData.asmx/GetOpdrachtbonnen",
                                    data:
                                    {
                                        pagenum: "0",
                                        pagesize: "20",
                                        sortdatafield: "Id",
                                        sortorder: "desc",
                                        filterscount: "1",
                                        filtervalue0: query,
                                        filtercondition0: "CONTAINS",
                                        filterdatafield0: "Id",
                                        filteroperator0: ""
                                    }
                                },
                                {
                                    autoBind: true,
                                    formatData: function (data) {
                                        data.Id = query;
                                        return data;
                                    },
                                    loadComplete: function (data) {
                                        data = data.d;
                                        if (data.count > 0) {
                                            response($.map(data.data, function (item) {
                                                return {
                                                    label: item.Id + (item.Referentie ? ", " + item.Referentie : ""),
                                                    value: item.Id
                                                }
                                            }));
                                        }
                                    }
                                }
                            )
                        }
                    });

[hfParticipant]

Hi Ivailo,

What I would like to achieve is to select a row based on a value.

So I loop through the grid rows. If the row with the searched value is not on that grid page I’ll go to the next page with the ‘gotonextpage’ method. When the searched value is on the grid page I’ll select that row. Thats what triggers the rowselect event, but than the problem arises > args.row is undefined.

[hfParticipant]

https://www.jseditor.io/?key=argsrow-undefined-by-rowselect-after-gotonextpage

[Author]

Posts