Control for Multiselect

Scheduler ASP.NET MVC
#1

Hi,
id like to know if for Select - MultiSelect i can set a dropdownlist as control.
Design for CheckBox is very bad, there’s not space between elements when is there more than 2 or 3.

Thanks in advance.

#2

Hi,
while there is no built-in control, it can be implemented fairly easily.
scheduler-net.com/docs/lightbox. … e_lightbox - “Creating Custom Editors For Lightbox”
Please check the attached demo.
There I add two multiselect controls - one using a native html select with multiselect attribute, and one using jQuery Chosen plugin
SchedulerLightboxMultiselect.zip (1.31 MB)

#3

Hi DHX Scheduler gurus :slight_smile:,

Can someone recomand an example for integration with jQuery plugins like select2 or chosen for multiselect?
I managed to make it work for single select using slect2 plugin but i’m not able make it work for multi select(pillbox) like in example below:

select2.org/getting-started/basic-usage

The main concern is related to how multiselect=“true” should be defined in section declaration. I tried using type:“multiselect” but seems to not work as I’ve expected.

I also tried defining a custom lightbos editor like in example below and rendering a multiselect list but still not working.
docs.dhtmlx.com/scheduler/custo … ditor.html.

I’ll return attaching the code i wrote for this.

Any advices are highly apreciated.

Thx,
unissh

Because i coudn’t attach the txt/js file i wrote below what i tried

$(document).ready(function() {

var alert_opts = [
    { key: 1, label: 'None' },
    { key: 2, label: 'On start date' },
    { key: 3, label: '1 day before' }
];


$.ajax({
    url: "/event/get",

    success: function (result) {
        scheduler.parse(result, "json");
    }
});

scheduler.config.lightbox.sections = [
    { name:"text", height:100, map_to:"text", type:"textarea", focus:true },
    { name:"select", height:150, map_to:"type", type:"select", options:alert_opts},
   // { name:"select", height:150, map_to:"type", type:"my_editor"},
    { name:"time", height:100, type:"time", map_to:"auto"}
];

scheduler.attachEvent("onLightbox", function (id){
    debugger;
    var selectElement = scheduler.formSection("select").node.querySelector("select");
    $(selectElement).select2();
});


scheduler.attachEvent("onAfterLightbox", function (id){
    var selectElement = scheduler.formSection("select").node.querySelector("select");
    $(selectElement).select2('remove');
});

scheduler.attachEvent('onEventAdded', function(id, event) {
    debugger;
    $.ajax({
        url: "/event/add",
        data: {start_date:event.start_date, end_date:event.end_date,text:event.text},
        success: function (result) {
            scheduler.changeEventId(id, result.id);
        }
    });
});

scheduler.attachEvent('onEventChanged', function(id, event) {
    $.ajax({
        url: "/event/update",
        data: {start_date:event.start_date, end_date:event.end_date,text:event.text, id:event.id},
        success: function (result) {
          alert("Event updated!");
        }
    });
});

scheduler.attachEvent('onEventDeleted', function(id, event) {
    $.ajax({
        url: "/event/delete",
        data: {id:event.id},
        success: function (result) {
           //alert("Event deleted!");
        }
    });
});

scheduler.init('scheduler_here', new Date(),"month");

});