MultiSelect on Lightbox

Scheduler ASP.NET MVC
#1

Hello,
On my calendar, I would like the user to have the ability to pick ‘employees’ that work on a given event. So I added the ability to add a Multi-select box of employees on the light box. The form shows up correctly and I can also parse out the comma-separated list of employee Ids. I now want to save these id’s in a table separate from the actual event data table as I’d like to keep a 1-to-many association between the Event and employees that work on an event.

So I have the Event Table with regular columns: id, text, start_date, end_date and so on…
Then there is an EventEmployee table with columns: MappingId (PK), id (FK with Event id), EmployeeId.

Here are my questions:

  • When I’m editing an event, is there a way to check the selected employees? Right now, when the lightbox opens up in Edit mode, there’s no way for a user to know which employees he had picked for the event.
  • Is there a way to save these elements directly in the EventEmployee table? Right now I’m writing additional code to manually add to the EventEmployee table like so:
default:// "update"   
locationEvent = data.LocationCalendars.SingleOrDefault(ev => ev.id == action.SourceId);
//i'm manually removing previously added stylists.
                            List<LocationStylistMapping> mList = data.LocationStylistMappings.Where(x => x.EventId == locationEvent.id).ToList();
                            foreach (var item in mList)
                            {
                                data.LocationStylistMappings.Remove(item);
                            }
                            
                            TryUpdateModel(locationEvent);
//I am manually adding stylists to the event
                            AddStylists(locationEvent, Request.Form["StylistId"]);
                            break;
#2

Hello,

  1. I’d suggest to create custom lightbox control for this case.
    the idea is to load selected employees using ajax when user opens lightbox.
    Control may be inherited from default multiselect, so it shouldn’t take much coding.
    I could post a few code snippets, if you need it

  2. I not sure if there is a simpler method

#3

Hello,
I would highly appreciate it if you could post the code snippet to checkmark the checkbox on the multi-select. I have wired up the AJAX part, i just need to know how to select those checkboxes.

Thank you again for your prompt response.

#4

Hello,
I am seeing another javascript error when I add Multi-select to the calendar. After adding multi-select, it looks for a URL: I think it is trying to crosslink the associated StylistId field I have for the multi-select to the actual table. However, StylistId for me is stored in a separate table and hence causes issues when it doesn’t find stylists.

localhost:15409/undefined?dhx_cr … 2074498337"

Here is some more error description: dhtmlxshceduler.js (line 664)

docObj is null
[Break On This Error]

if (docObj.nodeName.indexOf(“document”) != -1){

Any help on how to proceed? How do people usually save the options from a multi-select box? Any guides would be appreciated.

#5

Hi,
this issue was fixed in one of the recent updates.
please update scheduler js codebase with the latest one(you can take it from eval version of the component)

as for selecting values in multiselect, it can be done the following way
js implimentation(code should be executed before scheduler initializaton):[code]
//declaring custom lightbox control
scheduler.form_blocks[“AjaxMultiselect”] = {
//copy default multiselect behavior
get_value : scheduler.form_blocks[“multiselect”].get_value,
render : scheduler.form_blocks[“multiselect”].render,
focus : scheduler.form_blocks[“multiselect”].focus,

    set_value : function (node, value, ev, config) {
        //loading list of employees...
        var args = arguments;
        var onload_callback = function (req) {
            //assing values to the event object
            ev[config.map_to] = this.responseText;//responseText- comma separated values, eg "1,3,5"
            //call default multiselect function, to update lightbox
            scheduler.form_blocks["multiselect"].set_value.apply(scheduler, args);
        };
        //request to appropriate action, send current event id. you may also add uid to each request to prevent cache
        dhtmlxAjax.get("<%= Url.Action("Employees", "BasicScheduler")%>?id=" + ev.id, onload_callback);
    }
};[/code]

on the server:[code]//declare server side configuration class for new control
public class AjaxMultiselect : LightboxMultiselect
{
public AjaxMultiselect(string name, string label)
: base(name, label)
{
this.Type = “AjaxMultiselect”;
}
}
public virtual ActionResult Index()
{
var sched = new DHXScheduler();
…

var multi = new AjaxMultiselect("employee", "Employee");
multi.AddOptions(....);
sched.Lightbox.Add(multi);

....
return View(sched);

}[/code]