ASP.Net Lightbox.SetExternalLightboxForm

Hi,

Thank you very much for this excellent product.

I am integrating this in my ASP.Net Web Application NOT MVC.

I got some samples from this forum and using it.

i am creating the scheduler in server-side using the component “DHTMLX.Scheduler”

it works fine… but i need to have some custom controls inside lightbox
i used the following code:

Dim ctl As New Controls.LightboxSelect("type", "Type") With ctl .AddOption(New Controls.LightboxSelectOption("MEETING", "Meeting")) .AddOption(New Controls.LightboxSelectOption("CALL", "Call")) .AddOption(New Controls.LightboxSelectOption("PERSONAL", "Personal")) .MapTo = "eventType" End With
i need another textbox which should allow autocomplete.
i don’t know how to achieve this in server side… so i decided to use externalform option.

Scheduler.Lightbox.SetExternalLightboxForm("Add.aspx")

if i give like this, how can handle saving, and other operations?

can you please suggest?

Thanks for any help!

Hello,
check the related article http://scheduler-net.com/docs/fully_custom_lightbox.html
and ‘Custom form in lightbox’ sample in the package

in short, there is two important things:
1)you have to define ‘setValues’ and ‘getValues’ methods inside your form
2)you need to use one of the next methods to close the lightbox(they will be available inside the form)

lightbox.save()//close lightbox, update event in the calendar, send changes to the server(scheduler will use 'getValues' method to retrieve updated event object) lightbox.close()// close lightbox lightbox.remove()// close lighbox, delete selected event
no other special handling is required,
server side handler(which is specified in DHXScheduler.SaveAction) does not require any changes, if it have worked with the native lightbox, it will work with the custom form

Hi,

Thank you very much for the reply. The link you gave is very much useful for me…

can you suggest one more thing please?

i am using a external light box, but i want to have recurring events section inside that. is there any function to achieve that?

or should i have my own controls for recurring events inside custom form?

if i should have my own controls, how should i pass the values for recurring events?

Can you please suggest this one also please?

Once again, thanking for the prompt and clear reply.

DejaAnbu

Hi,
unfortunately lightbox controls can’t be reused, so you’ll need to implement your control for recurrence, this may be a bit complex task.
reccuring event should have 3 additional properties -
rec_type - string
event_length - int
event_pid - int
You can check this article for format details
docs.dhtmlx.com/doku.php?id=dhtm … ntegration

Hi,

Thank you. i’ll look into the documentation and try to get recurring events.

but is it possible to have a single line Textbox OR Autosuggest Option in LightBoxSelect

Dim ctl As New Controls.LightboxSelect("clients", "Client")

is there any method for lightBoxSelect to behave like Autosuggest box?

Please help!.

Hi,
native controls does not support such functionality, but you may create your own controls,
it will require some js coding and a few lines of c#(or vb) code.
define a class for server-control by following:

public class CustomLightboxField: LightboxField{ public LightboxText(string name, string label = null):base(name, label) { this.Type= "customControl"; } public bool Focus{get{return this.GetBool("focus");} set{this.Set("focus", value);}} }
and it’s client-side implementation

scheduler.form_blocks["customControl"]={ render:function(sns){ //sns - section configuration object return "html code of editor here"; }, set_value:function(node,value,ev){ //node - html object related to html defined above //value - value defined by map_to property //ev - event object ... code to set value to the element ... }, get_value:function(node,ev){ //node - html object related to html defined above //event object return "current value from editor"; }, focus:function(node){ //node - html object related to html defined above ...code to set focus to the element... } }
rel. article - http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:custom_details_form#custom_editors

I must say it will be much easier than creating a full set of controls for custom lightbox.

As for autocomplete - you may consider of using dhtmlxCombo(http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml?pl), which supports this feature. With dhtmlxConnector( .net version is available ) you can achieve this with minimal coding. You can also use connector to handle loading/saving data of DHXScheduelr, if usage of orm is not essential

hi,

Thanks for the continuous support.
i have some pbms in implementation with Asp.Net
i am not using javascript…i am making use of the Dll methods only.

  1. if i use native lightbox , i want to have 2 custom controls , one with autosuggest and another one as a normal selectbox.
    i have displayed normal selectbox using the following code:

Dim ctl As New Controls.LightboxSelect("type", "Type") With ctl .AddOption(New Controls.LightboxSelectOption("MEETING", "Meeting")) .AddOption(New Controls.LightboxSelectOption("CALL", "Call")) .AddOption(New Controls.LightboxSelectOption("PERSONAL", "Personal")) .MapTo = "eventType" End With Scheduler.Lightbox.Add(ctl)
it works fine… but how i can display one more textbox with data from database as an autosuggest?
2. if i give like this

Dim recur As New Controls.LightboxRecurringBlock("Recurring") recur.Button = "recurring" recur.MapTo = "rec_type" Scheduler.Lightbox.Add(recur) Scheduler.Lightbox.AddDefaults()
recurring block displays and works fine… i saw a php sample docs.dhtmlx.com/doku.php?id=dhtm … ntegration - there two methods are called

$scheduler->event->attach(“beforeProcessing”,“delete_related”);
$scheduler->event->attach(“afterProcessing”,“insert_related”);

how can i call this in Asp.Net Server Code for achieving Recurring Events? in other words, what is the Asp.Net equivalent method for this?

If i use custom form, i am able to achieve “autosuggest” … but i am not able to handle recurring events.

Please suggest solution for the questions .

Please help!.

  1. since the native lightbox controls does not support autocomplete, you’ll have to create custom one, and you’ll have to use javascript for it, see my previous post.
    Autoselect textbox shouldn’t be complicated - it may be just a styled input with
    inlined event handler,
    handler should send ajax request with the current input value, and display suggestions from response.
    scheduler.form_blocks[“customControl”].render should return html of this control.
    The other methods are pretty trivial, js control may may look like this(of course you still need to write event handler) :

scheduler.form_blocks["customControl"]={ render:function(sns){ //sns - section configuration object return '<div class="my_custom_input"><input type="text" onkeyup="js handler itself or function call"></div>'; }, set_value:function(node,value,ev){ node.getElementsByTagName('input')[0].value = value; }, get_value:function(node,ev){ return node.getElementsByTagName('input')[0].value; }, focus:function(node){ node.getElementsByTagName('input')[0].focus(); } };

  1. see attached sample
    Scheduler.ASP.NET_fix.zip (404 KB)

hi,

thanks a lot for your sample. one more help please . this is the only thing pending in my module

having Recurring Events: if i add additional controls in lightbox, then light box was not displaying recurring block by default, though i have this line in my code: Scheduler.Extensions.Add(SchedulerExtensions.Extension.Recurring)

. so i have displayed default recurring block using the following code:

[code]Dim recur As New Controls.LightboxRecurringBlock("Recurring")
        recur.Button = "recurring"
        recur.MapTo = "rec_type"
        Scheduler.Lightbox.Add(recur)
        Scheduler.Lightbox.AddDefaults()[/code]

recurring block displays and works fine… i saw a php sample docs.dhtmlx.com/doku.php?id=dhtm … ntegration - there two methods are called

$scheduler->event->attach("beforeProcessing","delete_related"); $scheduler->event->attach("afterProcessing","insert_related");

what is the purpose of these lines and
how can i call this in Asp.Net Server Code for achieving Recurring Events? in other words, what is the Asp.Net equivalent method for this?

Please help this final doubt… Hope to get a reply from you.

Thank you once again…

Oh. I am sorry. Thanks a bunch!.

The attached sample has example for Recurring.

I’ll check that and get back to you if anything…

Thank you very much.

hi,
there was a bug in the previous sample, here is a fixed version
Scheduler.ASP.NET_fix.zip (404 KB)

hi,

thank u for the fixed version. i have applied the fix as in the second attachment.

I have few doubts

in the documentation, php code…the logic for deleteRelated function is

if (($status == "deleted" || $status == "updated") && $type!=""){

but in Asp.net sample u gave, that line is

 if ((action.Type == DataActionTypes.Delete || action.Type == DataActionTypes.Update) && string.IsNullOrEmpty(changedEvent.rec_type))


Please note in php version the rec_type is checked for non-empty in If condition.
But in asp.net version, the rec_type is checked for empty in if condition

Please suggest which one is right.
one more thing is

in insert_related function,
the condition is if ($status == "inserted" && $type=="none")
but in Asp.Net version, it is given

if (action.Type == DataActionTypes.Update) {//insert_related if (changedEvent.rec_type == "none")

please note, the status is checked for “inserted” in php code. but in asp.net version the Status is checked for “Update”…

please suggest which logic is correct

Thank you very much for the excellent support!

my mistake, php version is correct,
once again, here is a fixed sample
Scheduler.ASP.NET_210312.zip (533 KB)

Thanks for your unswerving support

i have corrected the lines as per your attachments…

but still i couldnt find a way for autosuggest…the reason is, i am not using javascript for rendering the scheduler. i am handling all scheduler related code in code-behind. here is a part of my code

[code]protected void Page_Load(object sender, System.EventArgs e)
{
this.Scheduler = new DHXScheduler();

Scheduler.InitialDate = DateTime.Now;
Scheduler.InitialView = "week";

Scheduler.Extensions.Add(SchedulerExtensions.Extension.Tooltip);
Scheduler.Extensions.Add(SchedulerExtensions.Extension.Recurring);

Scheduler.Config.time_step = 15;

Scheduler.Config.show_loading = true;
Scheduler.Config.multi_day = true;
Scheduler.DataAction = "SchedulerData.ashx";
Scheduler.SaveAction = "SaveScheduler.ashx";
Scheduler.LoadData = true;
Scheduler.Data.Loader.PreventCache();
Scheduler.EnableDataprocessor = true;
Scheduler.Config.xml_date = "%m/%d/%Y %H:%i";
Scheduler.Data.Loader.EnableDynamicLoading(System.Data.SchedulerDataLoader.DynamicalLoadingMode.Month);
List<string> js = new List<string>();

//for 15 mins interval
js.Add("var step = 15; " + "var format = scheduler.date.date_to_str('%h:%i %A');" + "scheduler.config.hour_size_px=(60/step)*30;" + "scheduler.templates.hour_scale = function(date){" + "html='';" + "for (var i=0; i<60/step; i++){" + "html+=\"<div style='height:30px;line-height:30px;'>\"+format(date)+\"</div>\";" + "date = scheduler.date.add(date,step,'minute');}" + "return html;\t}");

//for custom coloring each event
js.Add("scheduler.templates.event_class=function(start,end,event){" + "if (event.eventType=='MEETING') " + "return 'meeting';else if(event.eventType=='CALL') return 'call'; else return 'personal';}");

//12 hr format in day and week view
js.Add("scheduler.templates.event_header=function(start,end,event){" + "return format(start) + ' - ' + format(end) ;}");
//12 hr format in month view
js.Add("scheduler.templates.event_bar_date =function(start,end,event){" + "return format(start) + ' ' ;}");

Scheduler.BeforeInit = js;

Controls.LightboxSelect ctl = new Controls.LightboxSelect("type", "Type");
var _with1 = ctl;
_with1.AddOption(new Controls.LightboxSelectOption("MEETING", "Meeting"));
_with1.AddOption(new Controls.LightboxSelectOption("CALL", "Call"));
_with1.AddOption(new Controls.LightboxSelectOption("PERSONAL", "Personal"));
_with1.MapTo = "eventType";
Scheduler.Lightbox.Add(ctl);

Controls.LightboxText ld = new Controls.LightboxText("lead", "Lead/Client");
var _with2 = ld;
_with2.MapTo = "leadId";
_with2.Height = 25;

Scheduler.Lightbox.Add(ld);

Controls.LightboxText sb = new Controls.LightboxText("subject", "Subject");
sb.MapTo = "text";
sb.Height = 25;
Scheduler.Lightbox.Add(sb);

Controls.LightboxText loc = new Controls.LightboxText("location", "Location");
loc.MapTo = "location";
loc.Height = 25;
Scheduler.Lightbox.Add(loc);

Controls.LightboxRecurringBlock recur = new Controls.LightboxRecurringBlock("Recurring", "Recurring");
recur.Button = "recurring";
recur.MapTo = "rec_type";
Scheduler.Lightbox.Add(recur);

Controls.LightboxText desc = new Controls.LightboxText("Description", "Description");
desc.MapTo = "description";
desc.Height = 100;
Scheduler.Lightbox.Add(desc);

Controls.LightboxTime tme = new Controls.LightboxTime("time");
tme.MapTo = "auto";
Scheduler.Lightbox.Add(tme);

}[/code]

how can insert autosuggest Lead/Client as javascript component? . please help me to fix this

Hi,

thanks anyway.

i have achieved autosuggest by doing the following:

js.Add(" scheduler.attachEvent('onLightbox', function (event_id){" & _ " var event_obj = this.getEvent(event_id);autoc(event_obj); });")

[code]function autoc(event_obj) {

              $('div.dhx_cal_ltext:eq(1) textarea').autocomplete({
                  source: function(request, response) {
                      $.ajax({
                          url: "urlll",
                        //code here
                          },
                          error: function(XMLHttpRequest, textStatus, errorThrown) {
                              alert(XMLHttpRequest.responseText);
                          }
                      });
                  },
                  minLength: 2,
               //extra code for validation here
              })
              if (event_obj.text!='') {
                    //here re-assigned the client name to the textarea instead of Id while in edit mode
              } else {
               $('div.dhx_cal_ltext:eq(1) textarea').val('');
              }
    }[/code]

hope, someone will find this useful…

Try this one…Autocomplete Textbox

Mitch