Question on lightbox customizing and saving data to DB

Scheduler Javascript
#1

Hi All,

I’m back again after messing around for a bit after getting loading data to work with the help of you guys here. Unfortunately I have another question and problem really.

First one is in regards to customizing the lightbox, I followed the sample here at this page docs.dhtmlx.com/scheduler/custom … ditor.html
and have gotten my lightbox to more or less how I want it to be. This is how my lightbox looks like now, please refer to the attached image.
What I want to do differently is to have the Details as a textarea, like in the default lightbox. I tried changing the input type to textarea but that doesn’t work and no data gets loaded.

Secondly is saving or deleting data, that does not work. With no error returned. Below is the code I am using.

[code]

How to start html, body { margin: 0px; padding: 0px; height: 100%; overflow: hidden; } /*event in day or week view*/ .dhx_cal_event.unscheduled_event div { background-color: #FF9933 !important; color: black !important; } .dhx_cal_event.scheduled_event div { background-color: #009966 !important; color: black !important; } .dhx_cal_event.emergency_event div { background-color: #FF3333 !important; color: black !important; } /*multi-day event in month view*/ .dhx_cal_event_line.unscheduled_event { background-color: #FF9933 !important; color: black !important; } .dhx_cal_event_line.scheduled_event { background-color: #009966 !important; color: black !important; } .dhx_cal_event_line.emergency_event { background-color: #FF3333 !important; color: black !important; } /*event with fixed time, in month view*/ .dhx_cal_event_clear.unscheduled_event { background-color: #FF9933 !important; color: black !important; } .dhx_cal_event_clear.scheduled_event { background-color: #009966 !important; color: black !important; } .dhx_cal_event_clear.emergency_event { background-color: #FF3333 !important; color: black !important; } /*event with fixed time, in year view*/ .dhx_year_event.unscheduled_event { background-color: #FF9933 !important; color: black !important; } .dhx_year_event.scheduled_event { background-color: #009966 !important; color: black !important; } .dhx_year_event.emergency_event { background-color: #FF3333 !important; color: black !important; }
 
 
 
[/code]

Connector code

[code]using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using dhtmlxConnectors;
using System.Configuration;

namespace calendar.connector
{
///


/// Summary description for myconnector
///
public class myconnector : dhtmlxRequestHandler
{

    public override IdhtmlxConnector CreateConnector(HttpContext context)
    {
        return new dhtmlxSchedulerConnector(

            "dbo.events", //table to select from
            //"start_date,end_date,text", //fields to select 
           "id", //primary key column name
           dhtmlxDatabaseAdapterType.SqlServer2005, //predefined database adapter type
           //ConfigurationManager.ConnectionStrings["downtime"].ConnectionString //connection string
           "Server=SYEAP1-MOBL1\\FGDDASHBOARD;Database=downtime;uid=sql_dashboard;pwd=dashboard.2014" //connection string
           , "start_date"
           , "end_date"
           , "text, description,duration,requested_by,approval_status,type"
           //, "description"
           //, "duration"
           //, "requested_by"
           //, "approval_status"
           //, "type"
        );
    }
}

}[/code]

Any assistance is greatly appreciated.

Thanks and regards,

Brax

lightbox.jpg819×460 31.7 KB

#2

Hi,

try using textarea tag w3schools.com/tags/tag_textarea.asp

get_value: function (node, ev) { ev.details = node.childNodes[4].value; return node.childNodes[1].value; },make sure you assign all properties that specified by the control:

get_value: function (node, ev) { ev.details = node.childNodes[4].value; ev.duration = node.childNodes[7].value; return node.childNodes[1].value; },

#3

Hi Aliaksandr,

Thanks for the information, I tried changing it but no success. So in the end I ended up using the default lightbox and just adding sections as in attached screenshot. The thing is the lightbox does not display correctly, I changed the height but the textarea stays small. Also the far right of the textarea does not have closing line. The textarea square is not showing correctly.

Sadly, saving still does not work but loading works fine. Upon clicking the Save button nothing happens, is it because I have made changes to the lightbox and I need to change something else for the Save button to work?

My current code is attached.

Main page

[code]

How to start html, body { margin: 0px; padding: 0px; height: 100%; overflow: hidden; } /*event in day or week view*/ .dhx_cal_event.scheduled_event div { background-color: #009966 !important; color: black !important; } .dhx_cal_event.unscheduled_event div { background-color: #ffff00 !important; color: black !important; } .dhx_cal_event.emergency_event div { background-color: #ff0000 !important; color: black !important; } /*multi-day event in month view*/ .dhx_cal_event_line.scheduled_event { background-color: #009966 !important; color: black !important; } .dhx_cal_event_line.unscheduled_event { background-color: #ffff00 !important; color: black !important; } .dhx_cal_event_line.emergency_event { background-color: #ff0000 !important; color: black !important; } /*event with fixed time, in month view*/ .dhx_cal_event_clear.scheduled_event { background-color: #009966 !important; color: black !important; } .dhx_cal_event_clear.unscheduled_event { background-color: #ffff00 !important; color: black !important; } .dhx_cal_event_clear.emergency_event { background-color: #ff0000 !important; color: black !important; } /*event with fixed time, in year view*/ .dhx_year_event.scheduled_event { background-color: #009966 !important; color: black !important; } .dhx_year_event.unscheduled_event { background-color: #ffff00 !important; color: black !important; } .dhx_year_event.emergency_event { background-color: #ff0000 !important; color: black !important; }
 
 
 
[/code]

Connector Code

[code]using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using dhtmlxConnectors;
using System.Configuration;

namespace calendar.connector
{
///


/// Summary description for myconnector
///
public class myconnector : dhtmlxRequestHandler
{

    public override IdhtmlxConnector CreateConnector(HttpContext context)
    {
        return new dhtmlxSchedulerConnector(

            "dbo.events", //table to select from
            //"start_date,end_date,text", //fields to select 
           "id", //primary key column name
           dhtmlxDatabaseAdapterType.SqlServer2005, //predefined database adapter type
           //ConfigurationManager.ConnectionStrings["downtime"].ConnectionString //connection string
           "Server=pcname\\calendar;Database=downtime;uid=username;pwd=password" //connection string
           , "start_date"
           , "end_date"
           , "text, description,duration,requested_by,approval_status,type"
           //, "description"
           //, "duration"
           //, "requested_by"
           //, "approval_status"
           //, "type"
        );
    }
}

}[/code]

Database Create Code

[code]USE [downtime]
GO

/****** Object: Table [dbo].[events] Script Date: 10/14/2014 15:26:28 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[events](
[id] [int] IDENTITY(1,1) NOT NULL,
[start_date] [datetime] NOT NULL,
[end_date] [datetime] NOT NULL,
[text] varchar NOT NULL,
[description] varchar NOT NULL,
[duration] [int] NOT NULL,
[requested_by] varchar NOT NULL,
[approval_status] varchar NOT NULL,
[type] varchar NOT NULL,
CONSTRAINT [PK_events] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO
[/code]

Best Regards,

Andrew

lightbox_new.jpg819×465 45.5 KB

#4

Hi All,

Just an update that I got the saving data to work but the lightbox is still not display correctly.

Other questions came up but will look around first before posting.

Thanks and regards,

Brax

#5

I have tried the above code, and lightbox form doesn’t have such problems in my case

In which browser it looks incorrectly in your case ?

Are you using exactly the same code as posted above, or some extra css is used on the page.

#6

Sorry for my late reply, just wanted to let you guys know I got the lightbox to display correctly. Not too sure what went wrong but after messing around a few times and clearing my cache and cookies i think it looks better now.

Thank you for all the help :slight_smile:.

Best regards,

Brax