Minor Update: Switch-On-The-Fly Lightboxes

DHTMLX Scheduler .NET got a minor update that addresses the issue with creating different lightboxes on a single page. For example, you have a task manager and want to show different lightboxes depending on the type of a task:

  • A task assigned to one user;
  • A task assigned to multiple users;
  • A day-off report;

Previously, if you have more than one lightbox on a page, you had to declare all of them on the client-side with JavaScript.

Now this issue is tackled. You can declare any number of lightboxes on the server-side and switch them easily on the fly.

To implement this functionality, DHXScheduler class now has an additional property that stores configurations of the lightboxes:

List<SchedulerLightbox> Lightboxes

For example, Scheduler .NET can be configured as follows:

var scheduler = new DHXScheduler(this);
//define one lightbox
var taskLightbox = new SchedulerLightbox { Name = "tasks" };

var text = new LightboxText("text", "Description");
var priority = new LightboxSelect("textColor", "Priority");
priority.AddOptions(new List<object>{
    new { key = "gray", label = "Low" },
    new { key = "blue", label = "Medium" },
    new { key = "red", label = "Hight" }
});
var time = new LightboxMiniCalendar("time", "Time:");

taskLightbox.Add(text);
taskLightbox.Add(priority);
taskLightbox.Add(time);

            
//another lightbox
var notesLightbox = new SchedulerLightbox { Name = "notes" };
var desc = new LightboxText("text", "Description");
var category = new LightboxRadio("category", "Category");
category.AddOptions(new List<object>{
    new { key = "job", label = "Job" },
    new { key = "family", label = "Family" },
    new { key = "other", label = "Other" }
});
var remind = new LightboxCheckbox("remind", "Remind");

notesLightbox.Add(desc);
notesLightbox.Add(category);
notesLightbox.Add(remind);

//adding boxes to the scheduler
scheduler.Lightboxes.Add(taskLightbox);
scheduler.Lightboxes.Add(notesLightbox);

//specify the initial one
scheduler.Lightbox = taskLightbox;

 The switching is now enabled with JavaScript:

scheduler.attachEvent("onBeforeLightbox" , function(id){
  var ev = scheduler.getEvent(id);
  switch(ev.type){
   case "task":
    scheduler.switchLightbox("tasks");
    break;
   case "note":
    scheduler.switchLightbox("notes");
    break;
  }
  return true;
 });

The new feature is available in the updated package of Scheduler .NET, that you can download right now.

free download

If you'd like to share your ideas on further DHTMLX Scheduler .NET development, you are welcome to comment below. 

Author

Svetlana

Viktoria Langer

DHTMLX Scheduler .NET product care manager and customer manager since 2012. Interested in ASP.NET and trying to create valuable content.

Recent Blog Posts