dhtmlxScheduler timeline view is buggy on 2.3

To DHtmlX,
I have been attempting to develop a scheduler for myself which is using the Timeline view. This is working fine, and I am able to create events, drag and drop events etc, however, the next and previous buttons are having issues within my sample. If I click forward too fast on the scheduler, then the events stops moving, and stays still (not reflecting its true scheduled day) unless I press the previous button again. The same is true in the reverse (if I press the previous button too fast, clicking the next button once will fix the previous button’s issue). I am unsure on why this is happening, however I have attached a sample of the issue in hopes that the dhtmlx support will help me resolve the issue. This sample application runs on ASP.NET, using MS SQL Server 2005. All that is needed to implement this solution is for the connector CSharp file to have a valid connection string implemented, and the SQL Script contained within the project to be deployed to a MS SQL 2005 Server.

Any help resolving this issue would be greatly appreciated.

P.S. The board won’t let me attach my sample, giving me the following error:
“Sorry, the board attachment quota has been reached.”

Kind regards
Greg Goldberg

Problem with attachments fixed, please attach you sample ( a similar sample locally doesn’t show such problem , it may be related to dyn. loading or some other configuration, which is used in your case )

Hi,
I have attached the sample, as well as emailing it too you. I am also unsure of what you mean by “dyn”? If it makes a difference, I am running this from an SQL Server running on my local machine (A desktop computer, not a server), I am also running the Web Server from my desktop, so everything is local on this machine.

Kind regards
Greg
dhtmlxSchedulerMSSQLASPNETSample.zip (208 KB)

Try to update existing files with the attached ones, it must resolve the issue.
( there was a bug with rendering empty timeline view during dyn. loading )
dhtmlxscheduler_timeline.zip (26 KB)

Hi Stanislav,
Thanks heaps for the response, the code you have provided seems to have resolved my issue immediately.
Kind regards
Greg Goldberg :ugeek:

Hi Stanislav,
Thanks again for your great assistance, I am now able to implement my own scheduler application and customize the lightbox, and events. However, I do have a few queries about this application. I have been searching through the overwelming amount of discussion forum threads and have adopted customization to my scheduler events, to render the events with colour, however when I create the event, and it is rendered, it does not change colour when I save the event. I have fully reviewed the dhtmlxScheduler document:
docs.dhtmlx.com/doku.php?id=dhtm … ngs_config

I have reviewed the forum, and have seen a post where you suggest to set the scheduler.config.update_render variable to true, but in my currently implemented project, the viewed date period changes on the dhtmlxScheduler.

My next issue is directly related to the dhtmlxConnector project. I have been reviewing the C#.NET source code in thorough detail, including debugging the execution process in its entirity for the dhtmlxScheduler component.

It seems as though there is an issue with its ability to render events which begin outside of the currently viewed “time period”. If the event begins before the first displayed datetime, or ends after the last displayed datetime which was initially displayed. While debugging the dHtmlxScheduler and dHtmlxConnector, I have come accross this condition, and am able to change it, but thought it is important that you guys are aware of this, so you can upgrade the code accordingly or advise me on a correct course of action to remedy this.

Thanks for your great help again.
Kind regards
Greg

it does not change colour when I save the event
You are using event_class template and have the related css class already on the page, right ?
Normally the event bar repainted after any action, so it will apply new css class directly during creating and after saving as well.

If somehow it not works you can try to call

scheduler.setCurrentView(scheduler.getState().date);

which will repaint whole view ( you can call it from onAfterLightbox for example )

As for problem with connectors, we will investigate it.

Hi Stanislav,
The resolution to the connector issue is as follows:
Within the dhtmlxSchedulerConnector.cs file, I modified the Request_BeforeSelect to use the following conditions:

        void Request_BeforeSelect(object sender, EventArgs e)
        {
            //include start date if it wasn't included yet
            if (!this.Request.RequestedFields.Contains(this.StartDateField))
                this.Request.RequestedFields.Add(this.StartDateField);
            //include finish date if it wasn't included yet
            if (!this.Request.RequestedFields.Contains(this.FinishDateField))
                this.Request.RequestedFields.Add(this.FinishDateField);
            //merge requested fields with details fields
            this.Request.RequestedFields = this.Request.RequestedFields.Union(this.DetailsFields).Distinct().ToFieldsCollection();

            if (!string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["to"]) && this.FinishDateField != null)
            {
                this.Request.Rules.Add(new FieldRule(this.StartDateField, Operator.Lower, Convert.ToDateTime(HttpContext.Current.Request.QueryString["to"]).ToString(Tools.DateFormat)));
            }
            if (!string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["from"]) && this.StartDateField != null)
            {
                this.Request.Rules.Add(new FieldRule(this.FinishDateField, Operator.Greater, Convert.ToDateTime(HttpContext.Current.Request.QueryString["from"]).ToString(Tools.DateFormat)));
            }
        }

As for your resolution to the event’s changing colour, I have attempted to implement that “work around solution” (and was allready aware of it) however, it does not seem to have any effect on my project. The code I used is as follows:

        scheduler.attachEvent("onAfterLightbox", function (){
            //any custom logic here
            scheduler.setCurrentView(scheduler.getState().date);
            return true;
        });

This is the code which I use to configure the colour for the specific event:

        scheduler.templates.event_class=function(start,end,event){
            return event.SchedulerType;
        }

I also have some server side code which generates the classes for each of the different scheduler types (depending on what colour value is held in the database). However, I have debugged the JavaScript code by adding a breakpoint to return event.SchedulerType, and it seems as though the “SchedulerType” attribute is not held on the event variable, unless I do a full refresh of the page, therefore it will not matter if I attach that event.

I have a SchedulerEvents table which holds the details for each event, which has a link to a table called SchedulerTypes, which has the types of events, and details for that type (Event Colour, and other type data).

The SchedulerTypeId still seems to be retained, even though the SchedulerType and SchedulerColour is not getting populated in the event variable in the javascript. Below is the Custom SQL statements I am using on my connector:

            dhtmlxSchedulerConnector connector = new dhtmlxSchedulerConnector(
                @"Select EventId, UserId, JobId, SE.SchedulerTypeId, FromDate, ToDate, EventName, EventDescription, " +
                      @"IsBillable, IsTentative, ApprovedUserId, ApprovedDate, CreatedUserId, CreatedDate, UpdatedUserId, " +
                      @"UpdatedDate, SchedulerType, IsJob, SchedulerColour FROM SchedulerEvents SE JOIN SchedulerTypes ST ON SE.SchedulerTypeId = ST.SchedulerTypeId"
                , "EventId"
                , dhtmlxDatabaseAdapterType.SqlServer2005
                , "MyConnectionString"
                , "FromDate"
                , "ToDate"
                , "FromDate as FromDate, ToDate as ToDate, EventName as text, EventId as EventId, UserId as UserId, JobId as JobId, SE.SchedulerTypeId as SchedulerTypeId," +
                    " EventDescription as EventDescription, IsBillable as IsBillable, IsTentative as IsTentative, ApprovedUserId as ApprovedUserId, ApprovedDate as ApprovedDate," +
                    " CreatedUserId as CreatedUserId, CreatedDate as CreatedDate, UpdatedUserId as UpdatedUserId, UpdatedDate as UpdatedDate, SchedulerType as SchedulerType," +
                    " IsJob as IsJob, SchedulerColour as SchedulerColour"
            );

            connector.Request.CustomSQLs.Add(CustomSQLType.Delete, @"DELETE FROM  [SchedulerEvents] WHERE EventId = {EventId}");

            connector.Request.CustomSQLs.Add(CustomSQLType.Update, @"UPDATE [SchedulerEvents] " +
              @" SET [UserId] = {UserId}," +
              @"     [JobId] = {JobId}," +
              @"     [SchedulerTypeId] = {SchedulerTypeId}," +
              @"     [FromDate] = '{FromDate}'," +
              @"     [ToDate] = '{ToDate}'," +
              @"     [EventName] = '{text}'," +
              @"     [EventDescription] = '{EventDescription}'," +
              @"     [IsBillable] = {IsBillable}," +
              @"     [IsTentative] = {IsTentative}," +
              @"     [ApprovedUserId] = {ApprovedUserId}," +
              @"     [ApprovedDate] = '{ApprovedDate}'," +
              @"     [UpdatedUserId] = " + Common.Session.UserId + "," +
              @"     [UpdatedDate] = '" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "'" +
              @"         WHERE EventId = {EventId}");

            connector.Request.CustomSQLs.Add(CustomSQLType.Insert, @"INSERT INTO  [SchedulerEvents] " +
           @"([UserId]," +
           @" [JobId]," +
           @" [SchedulerTypeId]," +
           @" [FromDate]," +
           @" [ToDate]," +
           @" [EventName]," +
           @" [EventDescription]," +
           @" [IsBillable]," +
           @" [IsTentative]," +
           @" [ApprovedUserId]," +
           @" [ApprovedDate]," +
           @" [CreatedUserId]," +
           @" [CreatedDate]," +
           @" [UpdatedUserId]," +
           @" [UpdatedDate])" +
           @"   VALUES" +
           @"    ({UserId}," +
           @"    {JobId}," +
           @"    {SchedulerTypeId}," +
           @"    '{FromDate}'," +
           @"    '{ToDate}'," +
           @"    '{text}'," +
           @"    '{EventDescription}'," +
           @"    {IsBillable}," +
           @"    {IsTentative}," +
           @"    {ApprovedUserId}," +
           @"    '{ApprovedDate}'," +
           @"    " + Common.Session.UserId + "," +
           @"    '" + DateTime.Now.ToString("yyyy-MM-dd HH:mm") + "'," +
           @"    {UpdatedUserId}," +
           @"    '{UpdatedDate}')");

Another issue which I have noticed recently may also have significance. If I drag and drop an event within the scheduler component in timeline view, I can not edit the event unless I do a full refresh of the page, or switch views. Thanks heaps again for your help, it is appreciated.

Kind regards
Greg Goldberg :ugeek:

which generates the classes for each of the different scheduler types

But all classes already generated when scheduler loaded, right? ( so when property changed - related class already exists on client side )

You are providing two fields SchedulerType and SchedulerTypeId - which one is used on client side to define event’s type? Probably it is the SchedulerTypeId ( which you are using to save data in DB ), but for css classes you are using SchedulerType - so if TypeId was changed, SchedulerType will not be changed automatically, and as result css class will not be changed as well.

Hi Stanislav,
I am happy to send you a sample to this personally, but would prefer not to publish the entire solution on the forum, as I have put a fair amount of work into it. The SchedulerTypeId is changed by a selection form_block. The SchedulerType table is not modified by the Insert/Update script, it is retrieved only by the select statement.

The SchedulerType’s classes are getting generated independently from the scheduler, using server side code, as is generated correctly. As a resolution to the colours not changing, I could perform a full page refresh after the event has saved (onAfterLightbox event) and the event information would be refreshed, and the colour would change.

Kind regards
Greg

This is exactly why it has not worked without refresh, because you not changing SchedulerType on client side, but using classes based on this parameter - if you will change classes assigning , so it will use SchedulerTypeId instead - it will work without page reloading.

Hi Stanislav,
After beginning to implement a sample, I have found out that the editting of an event after the drag event, was an issue with my own code.

Thanks for the solution in your previous response, I will apply that as a solution so that I can finalize this assignment. As a thought, after inserting/updating an event in the scheduler, the code has to make a server side call because if the command fails the event changes colour to red to signify the fact that the action has failed. In this process, the event could also be processed, returning the values from the selection statement. That would resolve the issue with foreign tables (ComplexSQL) and event creation/modification internally to the scheduler component of the connector project.

Kind regards
Greg

Hi Stanislav,
I would like to note that adding a form_block to retrieve the SchedulerType value resolved the generation of classes, thank you for your help with that, your assistance is great and deeply appreciated.

After further debugging of the issue with dragging and dropping events, it seems as though the issue of not being able to edit an Event in a timeline view, after dragging and dropping it to a new time will fail, in the case that there has been more than one “sections” defined for the y-axis. If there is only a single section key defined i.e.
var sections = [ { key: 1, label: “Test” } ];

You will then be allowed to edit the events, and as soon as I add a second section:
var sections = [ {key: 1, label: “Test1” },
{key: 2, label: “Test2” } ];

I cannot edit the event after moving it using the drag and drop anymore on timeline view unless I refresh the view.

I am also having issues with the Collision script. I have included the collision script by using the following syntax:

And if I only had a single section, it would be working fine, however I have multiple sections in my timeline view, so when I implement the collisions it disables the creation of events in the same time slots, which is what I wanted, however it has also disabled creating events on other sections in the same time period, which is what I require. I was wondering if there is any way to only allow each user to implement one event per section per timeslot rather than just one event per time slot? EDIT was “event per section?”

If a sample is required to reproduce these issues, I would be happy to provide one.

Please advise
Kind regards
Greg Goldberg

We can’t reconstruct the same issue locally.
And looking through code doesn’t show any potential problem as well.

If issue still occurs for you - please provide any kind of sample or demo link where it can be reconstructed.

Hi Stanislav,
At the moment, I am only able to produce the collission issue within a self contained sample. Please test it by performing the following:

  1. insert several events on the grid.
  2. Update only a few of the events by activating the lightbox
  3. Update all of the records and line them up one after another using drag and drop.

Notice that the time slots arent lining up anymore, even though they would if you had not editted them, as well as the different sections event’s are still colliding if they are in the same timeslot. The collission detection can then be invalid and update the events in time slots that are invalid.

I had to delete the dhtmlx.js file from the project so it would fit into the attachment minimum size (256 KiB, perhaps this could be doubled for future use). Please ensure that you modify the connection string and generate a database using the sql scripts attached.

Not sure why this sample keeps flicking back to the top when I create an event on a section I have to scroll too, but it doens’t happen in my project (it could be from another script running on it, which may be causing the other event drag drop issue which I am describing too).

I will perform further debugging on the drag and drop issue tomorrow, but I suspect it must have been something I have done, as it is not occuring in this sample. Thanks for your great assistance.
Kind regards
Greg Goldberg
WebTest.zip (115 KB)

Hello,

Thank you for your feedback.

You are using older versions of dhtmlxscheduler_collision.js and dhtmlxscheduler_timeline.js files. Try replacing them with the versions available on the known issues page.

Please reply if it will or won’t resolve this issue.

Best regards,
Ilya

Hi Ilya,
I have managed to implement the files you suggested, and the collisions issue was immediately resolved. Thank you for your great support in relation to this.

In regards to the timeline drag and drop issue, this seems to still be present. When I was inserting a row at the bottom of my grid, it was using an index which did not exist for the y_units, so I had to make a minor modification to the script and now it creates events on the last row correctly, and has had no negative effects so far in my testing.

In dhtmlxscheduler_timeline.js I changed

            U.fields={};
            U.fields[O.y_property]=P[O.y_property]=O.y_unit[Q].key;

to the following code:

            U.fields={};
            if(O.y_unit[Q] == undefined)
            {
                Q--;
            }
            U.fields[O.y_property]=P[O.y_property]=O.y_unit[Q].key;

In the scheduler[“mouse_”+O.name]=function(U) function.

Again, I understand the above issue may be related to the issue I am having when I drag and drop an event within the scheduler, and was then unable to edit it.

The Drag events are still getting fired when I double click on the event, but the onDblClick and onClick events are not getting fired off. This issue only happens intermittently (sometimes I can drag and drop an event, and I will still be able to edit it, haven’t determined why it works sometimes and doesn’t other times yet, but will let you guys know what I did to resolve it as soon as I have resolved the issue).

Please bear in mind that for some reason when I scroll down and create an event on the sample I have provided, it flicks back to the top of the scrollable area, but within my other project, it will retain its scroll position on the scheduler’s drag and drop event, and I believe it may be related to that.

Thanks again for your great help Ilya and Stanislav, you have both been great, and so is the dhtmlxScheduler module.

Kind regards
Greg Goldberg

Hi Again,
I have been spending hours trying to figure out what the cause of the issue is, and so far, have been completely unsuccessful. As a temporary resolution for this, I have implemented the following code:

        dp.attachEvent("onAfterUpdateFinish",function(){
          //any custom code
          scheduler.clearAll();
          scheduler.load('Controls/Scheduler/schedulerConnector.ashx' + '?uid=' + scheduler.uid());
        })
        
        dp.defineAction("invalid",function(sid,response){
            //scheduler.clearAll();
            scheduler.load('Controls/Scheduler/schedulerConnector.ashx' + '?uid=' + scheduler.uid());
            //scheduler.setCurrentView(scheduler._date);
            return false;
        })

And it resolves my issue immediately, quiet frustrating that I have to treat the symptom rather than the issue by reloading the scheduler on AfterUpdateFinish to resolve the issue, but at least it resolved the issue immediately. the invalid data processor action is used to re-position events to their original location if an update fails.

Thanks again for your awesome product and help (all of my issues are now resolved).
Kind regards
Greg Goldberg

P.S. I was trying to use scheduler.SetCurrentView(scheduler._date); but it was failing somewhere inside the dhtmlxscheduler javascript code (not on my own code), that is why i just opted to reload the scheduler.

Hi Guys,
I finally resolved the issue with the drag and drop. EDIT found the cause of the drag and drop issue. It is related to the following tag in the header:

Please test in IE8

Thanks heaps for your help as it seems as though the build I have running now is bug free (have further testing too perform though :frowning: ).

Thanks again heaps.
Kind regards
Greg

Hi Guys,
I quickly reverted my temporary fixes to get the issues I was having resolved, and am extremely happy with the results.

minor issue 1.
Lightbox appears in the center of the scrollable area in the browser, would be preferred if it appeared in the center of the currently viewed area instead.

minor issue 2.
The browser gets greyed out around the lightbox in the currently viewed area, but when I scroll down to save the event, I notice that it isnt greyed out throughout the scrollable area, only the initial viewable area.

Thanks again for all your great help.
Kind regards
Greg