Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Paul B on Jan 19, 2010 04:11
open dhtmlx forum
dhtmlxScheduler - Units view not pairing events to columns

Hi,

I am trying to create a units view like this:

scheduler.createUnitsView("unit","user",keyLabelPairs);

where user is an event property which is a string. When I use the view and add events which have the user property to the scheduler, the unit view just shows all the events in the left hand column. All the individual columns are created properly. I have looked in the DOM using firebug and the key and labels are as expected, and the events have the correct user string added.

Is this not working because the key is a string? Does the key property of keyLabelPairs have to be a numerical value as in your examples? What else could be happening?

Cheers
Paul
Answer posted by Stanislav (support) on Jan 19, 2010 05:24
>>he unit view just shows all the events in the left hand column
Such can occur if event has not "user" property at all, in such case, scheduler will set first available option by defalt

Be sure that you have "user" value in data xml ( name of field was added to connector's configuration ) 
Also, be sure that keyLabelPairs contains an options with such "user" values as in data xml. 
Answer posted on Jan 19, 2010 07:19
Hi,

I am loading the events in via DWR so creating a new event object where the args are variables defined in previous lines or supplied to a parent method:

AjaxEventUpdater.retrieveBookingsForUser(str, typeValue, {
            async:false,
            callback:function (bookings) {
               
                //add events if they have any
                if (bookings != null) {
                    for (var i=0; i<bookings.length; i++) {
                        var booking = bookings[i];
                        var eventStart = booking.openingTime;
                        var eventEnd = booking.closingTime;
                        eventStart.formatDate('d-m-Y H:i');
                        eventEnd.formatDate('d-m-Y H:i');
                        var textString = "";
                        if (booking.student != null) {
                            textString = booking.student.firstName + " " + booking.student.lastName + "<br/><a href='/careersAdvice/session/editSession.html?id=" + booking.id + "'>Edit</a>::<a href='/careersAdvice/session/runSession.html?id=" + booking.id + "'>Run</a>";
                        }
                        str = userName.replace(/\"/g, '');
                        scheduler.addEvent({
                            
                             start_date: eventStart,
                             end_date: eventEnd,
                              text: textString,
                              user: userName,
                             id: booking.id
                                
                        });
                    }
                }

               }

        });

I have checked in the DOM that keyValuePairs is present and contains the correct keys. I have also checked in the DOM that the events are there and have this user property.
The events are all still in the wrong column. Any clues?

Cheers
Paul
Answer posted by Alex (support) on Jan 19, 2010 09:29
Please check that userName is the desired user key.
Answer posted by Paul B on Jan 19, 2010 09:54
Hi,

That previous code had some quote-removal code in as I thought that may be causing the problem but it makes no difference.

Here is some corrected code.

       AjaxEventUpdater.retrieveBookingsForUser(userName, typeValue, {
            async:false,
            callback:function (bookings) {
               
                //add events if they have any
                if (bookings != null) {
                    for (var i=0; i<bookings.length; i++) {
                        var booking = bookings[i];
                        var eventStart = booking.openingTime;
                        var eventEnd = booking.closingTime;
                        eventStart.formatDate('d-m-Y H:i');
                        eventEnd.formatDate('d-m-Y H:i');
                        var textString = "";
                        if (booking.student != null) {
                            textString = booking.student.firstName + " " + booking.student.lastName + "<br/><a href='/careersAdvice/session/editSession.html?id=" + booking.id + "'>Edit</a>::<a href='/careersAdvice/session/runSession.html?id=" + booking.id + "'>Run</a>";
                        }
                       
                        scheduler.addEvent({
                            
                             start_date: eventStart,
                             end_date: eventEnd,
                              text: textString,
                              user: userName,
                             id: booking.id
                                
                        });
                    }
                }
               
               }

        });

I have double checked and triple checked and quadruple checked that these are correct. The values for the key and user for the event are the same in the DOM, but they are still put in the incorrect column. The scheduler._props.unit object has the property map_to="user" so it is definitely looking in the correct field. Examples in the docs and on Knowledge Base show that creating your own field name in the event is possible but all the other examples use a numeric value. I would like to avoid this if possible.

Thanks for your continued help.
Paul
Answer posted by Alex (support) on Jan 20, 2010 01:27

Please provide the example of code for units view configuration. 

And the example od addEvent method (with values (no variables) that you try to insert)

Answer posted by Paul B on Jan 20, 2010 02:07
Hi again

Here is all the code to do with the view and how the unit view is generated and populated.

<div id="scheduler_here" class="dhx_cal_container" style='width:698px; height:525px; margin: 0px;'>
    <div class="dhx_cal_navline" style="position:absolute; margin:0px;">
        <div class="dhx_cal_prev_button" style="position:absolute; margin:0px; min-height: 1px;">&nbsp;</div>
        <div class="dhx_cal_next_button" style="position:absolute; margin:0px; min-height: 1px;">&nbsp;</div>
        <div class="dhx_cal_today_button" style="position:absolute; margin:0px; min-height: 1px;"></div>
        <div class="dhx_cal_date" style="position:absolute; margin:0px; min-height: 1px;"></div>
        <div class="dhx_cal_tab" name="unit_tab" style="right:219px; position:absolute;"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:154px; position:absolute;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:90px; position:absolute;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:26px; position:absolute;"></div>
    </div>
    <div class="dhx_cal_header" style="position:absolute; margin:0px;">
    </div>
    <div class="dhx_cal_data" style="position:absolute; margin:0px;">
    </div>       
</div>

<script type="text/javascript">
  scheduler.config.multi_day = true,
   scheduler.config.hour_size_px = 168,
   scheduler.config.edit_on_create = 1,
   scheduler.config.details_on_create = 1,
   scheduler.locale.labels.unit_tab = "Compare";
   var keyLabelPairs = [];
   DWRObject.getUsers({
       async:false,
       callback: function(users) {
         
          for(var i=0; i<users.length; i++) {
             var op = users[i];
             //populate the user list for narrowing down in day/week/month view
             var listOption = new Option(op.fullName,op.name);
             var currUserName = '${currentUserName}';
             //is this user the current user? If so, set selected.
             if (op.name == currUserName) {
                listOption.selected = true;
             }
           
             document.getElementById('userSelect').options.add(listOption);
             
             //loop through and create a new key label pair for each actor
             keyLabelPairs.push( {key:op.name, label:op.fullName} );
          }
          return;
       }
   });
   scheduler.createUnitsView("unit","user",keyLabelPairs);

   scheduler.init('scheduler_here',null,"week");

   scheduler.attachEvent("onBeforeViewChange", function (old_mode, old_date, mode, date){
       //this condition stops this being called when using next/previous arrows in unit view
       if (mode == 'unit' && old_mode !='unit') {
           //clear the scheduler
           scheduler.clearAll();
           //fetch events for users of that department from the unit view
            //loop through key label pairs
            for (var i=0; i<keyLabelPairs.length; i++) {
                var pair = keyLabelPairs[i];
                //method for DWR retrieval of more appointments
                displayEventsForNewUser(pair.key);
            } 
       }
       else if(mode != 'unit' && old_mode == 'unit') {
            //clear the scheduler
            scheduler.clearAll();
            //load events for whoever is selected in the user select box
            var userName = document.getElementById('userSelect').value;
            displayEventsForNewUser(userName);
       }
       return true;
   });

  function displayEventsForNewUser(userName) {
        DWRObject.getEventsForUser(userName {
            async:false,
            callback:function (bookings) {
               
                //add events if they have any
                if (bookings != null) {
                    for (var i=0; i<bookings.length; i++) {
                        var booking = bookings[i];
                        var eventStart = booking.openingTime;
                        var eventEnd = booking.closingTime;
                        eventStart.formatDate('d-m-Y H:i');
                        eventEnd.formatDate('d-m-Y H:i');
                        var textString = "";
                        if (booking.student != null) {
                            textString = booking.student.firstName + " " + booking.student.lastName + "<br/><a href='editSession.html?id=" + booking.id + "'>Edit</a>::<a href='runSession.html?id=" + booking.id + "'>Run</a>";
                        }
                       
                        scheduler.addEvent({
                            
                             start_date: eventStart,
                             end_date: eventEnd,
                              text: textString,
                              user: userName,
                             id: booking.id
                                
                        });
                    }
                }
               }

        });
       
       }
</script>

Any help you can give would be appreciated.

Cheers
Paul
Answer posted by Alex (support) on Jan 20, 2010 04:49

The provided code can't be tested. We need to result of the executing getUsers method - something like keyLabelPairs = [{key:1, label:"User A"},{key:2, label:"User B"}] , and the parameters that you pass to the addEvent method (values instead of variables).

Answer posted by Paul B on Jan 20, 2010 08:19
Now with no variables:

<div id="scheduler_here" class="dhx_cal_container" style='width:698px; height:525px; margin: 0px;'>
    <div class="dhx_cal_navline" style="position:absolute; margin:0px;">
        <div class="dhx_cal_prev_button" style="position:absolute; margin:0px; min-height: 1px;">&nbsp;</div>
        <div class="dhx_cal_next_button" style="position:absolute; margin:0px; min-height: 1px;">&nbsp;</div>
        <div class="dhx_cal_today_button" style="position:absolute; margin:0px; min-height: 1px;"></div>
        <div class="dhx_cal_date" style="position:absolute; margin:0px; min-height: 1px;"></div>
        <div class="dhx_cal_tab" name="unit_tab" style="right:219px; position:absolute;"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:154px; position:absolute;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:90px; position:absolute;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:26px; position:absolute;"></div>
    </div>
    <div class="dhx_cal_header" style="position:absolute; margin:0px;">
    </div>
    <div class="dhx_cal_data" style="position:absolute; margin:0px;">
    </div>       
</div>

<script type="text/javascript">
  scheduler.config.multi_day = true,
   scheduler.config.hour_size_px = 168,
   scheduler.config.edit_on_create = 1,
   scheduler.config.details_on_create = 1,
   scheduler.locale.labels.unit_tab = "Compare";
   var keyLabelPairs = [{key:'artetam', label:'Mikel Arteta'},
                        {key:'fellainim', label:'Marouane Fellaini'},
                        {key:'cahillt', label:'Tim Cahill'},
                                                {key:'pienaars', label:'Stephen Pienaar'}];
  
   scheduler.createUnitsView("unit","user",keyLabelPairs);

   scheduler.init('scheduler_here',null,"week");

   scheduler.attachEvent("onBeforeViewChange", function (old_mode, old_date, mode, date){
       //this condition stops this being called when using next/previous arrows in unit view
       if (mode == 'unit' && old_mode !='unit') {
           //instead of looking up the string from the keyValuePairs, they are individually listed here.          

           displayEventsForNewUser('artetam');
                             displayEventsForNewUser('fellainim');
           displayEventsForNewUser('cahillt');
           displayEventsForNewUser('pienaars');
       }
       return true;
   });

  function displayEventsForNewUser(userName) {
        DWRObject.getEventsForUser(userName {
            async:false,
            callback:function (bookings) {
               
                //add events if they have any
                if (bookings != null) {
                    for (var i=0; i<bookings.length; i++) {
                        var booking = bookings[i];
                        var eventStart = booking.openingTime; //a Date object
                        var eventEnd = booking.closingTime; //a Date object
                        eventStart.formatDate('d-m-Y H:i');
                        eventEnd.formatDate('d-m-Y H:i');
                        var textString = "Some string with description words";
                       
                        scheduler.addEvent({
                            
                             start_date: eventStart,
                             end_date: eventEnd,
                              text: textString,
                              user: userName,
                             id: booking.id //a number, not string
                                
                        });
                    }
                }
               }

        });
       
       }
</script>

Is this suitable to test? As I have said, the keys are not numerical, they are strings. Is this what is causing the problem? Even from looking at dhtmlxscheduler_units.js, it is not clear.

Cheers
Paul
Answer posted by Alex (support) on Jan 20, 2010 09:28

We have tested the following:

scheduler.config.xml_date="%Y-%m-%d %H:%i";

scheduler.config.api_date="%Y-%m-%d %H:%i";

 var keyLabelPairs = [{key:'artetam', label:'Mikel Arteta'},
  {key:'fellainim', label:'Marouane Fellaini'},
  {key:'cahillt', label:'Tim Cahill'},
  {key:'pienaars', label:'Stephen Pienaar'}

];

...

scheduler.createUnitsView("unit","user",keyLabelPairs);

scheduler.init('scheduler_here',new Date(2009,10,5),"unit");
scheduler.addEvent({
  id:1,
  start_date:"2009-11-20 10:00",
  end_date:"2009-11-20 12:00",
  text:"Event text",
  user: 'cahillt'
 });

The event has been added into the 3rd unit.


Answer posted by Paul B on Jan 20, 2010 09:42
I think this must be due to what the variables are generating - maybe some null characters getting inserted, or extra quote marks or something.. I will check the values (again).

Thanks for your help.
Paul