Unable to Load SQL Server Data

I followed some other posts, due to the lack of scheduler data loading examples. I do not get any errors on the page, or from the connector but I get two major issues:

  1. The next and previous buttons do not load the arrow icons
  2. Nothing loads in the timeline

Here is the code for the Default.aspx page:

<%@ Page Language="VB" AutoEventWireup="false" Inherits="dhtmlx._Default" Codebehind="Default.aspx.vb" %>

<!DOCTYPE html>

<html>
<head>
	<title>Timeline View. dhtmlxScheduler</title>
    <script src="Content/dhtmlxscheduler.js" type="text/javascript"></script>
    <script src="Content/dhtmlxscheduler_dhx_terrace.js" type="text/javascript"></script>
    <script src="Content/dhtmlxscheduler_timeline.js" type="text/javascript"></script>
    <script src="Content/connector.js" type="text/javascript"></script>
    <link href="Content/dhtmlxscheduler.css" rel="stylesheet" media="screen" type="text/css" />
    <style type="text/css" media="screen">
	    html, body{
		    margin:0px;
		    padding:0px;
		    height:100%;
		    overflow:hidden;
	    }
    </style>
    <script type="text/javascript" charset="utf-8">
        function init() {

            scheduler.locale.labels.timeline_tab = "Timeline"
            scheduler.locale.labels.section_custom = "Section";
            scheduler.config.details_on_create = true;
            scheduler.config.details_on_dblclick = true;
            scheduler.config.xml_date = "%Y-%m-%d %H:%i";
            scheduler.config.first_hour = 6
            scheduler.config.last_hour = 23
            
            scheduler.createTimelineView({
                name: "timeline",
                x_unit: "minute",
                x_date: "%H:%i",
                x_step: 30,
                x_size: 24,
                x_start: 16,
                x_length: 48,
                y_unit: scheduler.serverList("sections"),
                y_property: "DRIVER_ID",
                render: "bar"
            });

            scheduler.init('scheduler_here', new Date(1900, 0, 1), "timeline");
            scheduler.load("DatabaseConnector.ashx");
        }
    </script>
</head>
<body onload="init();">
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:215px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
		</div>
		<div class="dhx_cal_header"></div>
		<div class="dhx_cal_data"></div>		
	</div>
</body>
</html>

Here is the connector (handler) code:

Imports System.Web
Imports System.Web.Services
Imports dhtmlxConnectors

Public Class DatabaseConnector
    Inherits dhtmlxRequestHandler

    Public Overrides Function CreateConnector(ByVal context As HttpContext) As dhtmlxConnectors.IdhtmlxConnector
        Dim MyConnector As New dhtmlxSchedulerConnector(
            "EVENTS", _
            "EVENT_ID", _
            dhtmlxDatabaseAdapterType.SqlServer2005, _
            ConfigurationManager.ConnectionStrings("ResourceManagement").ConnectionString, _
            "START", _
            "END", _
            "DRIVER_ID, ROUTE" _
        )
        Dim MyOptions As New dhtmlxOptionsConnector(
            "DRIVERS",
            "DRIVER_ID",
            dhtmlxDatabaseAdapterType.SqlServer2005,
            ConfigurationManager.ConnectionStrings("ResourceManagement").ConnectionString, _
            "DESCRIPTION"
        )
        MyConnector.AddOptionsConnector("sections", MyOptions)
        Return MyConnector
    End Function
End Class

The database contains all the columns listed in to the connectors and the connection string is good (tested using SqlConnection). Does the connection string need to be OLEDB or ODBC to work with the connector? I am using the new 3.7 of the scheduler with the Terrace skin.

Hi,[code]

[/code]you don’t need to add connector.js to the page since it’s already included into the scheduler

 <link href="Content/dhtmlxscheduler.css" rel="stylesheet" media="screen" type="text/css" />

Please use ‘dhtmlxscheduler_dhx_terrace.css’ instead of ‘dhtmlxscheduler.css’ for terrace skin

  1. scheduler.init(‘scheduler_here’, new Date(1900, 0, 1)
    is it supposed to show 1st January 1900 ?
    If scheduler needs to be opened at the current date, you may pass null instead of date object, or new Date()
    scheduler.init(‘scheduler_here’, null, “timeline”);

Connector and the rest of configuration looks correct to me. If the issues still occurs, can you please attach a complete demo where we could test them?

  1. I removed the connector.js file and reference from the project. No change.

  2. The css file is the terrace one, I just renamed it. For testing purposes I renamed it back to include the _dhx_terrace in the name. No change.

  3. The date is correct. We are trying to plan a schedule using just times for trucking routes. As a result we do this over a 3 day period using 12/31/1899 - 1/2/1900 as the date range.

I attached the Visual Studio 2010 project. Note, it is using VB.NET. I also create a database script file to generate the same database structure and data I am using. The script was designed for SQL Server 2008 but should also work in 2005 and 2012. The connection string assumes a SQL Express instance using windows authentication. You can adjust it as necessary for testing. Let me know if you find any issues because I am stumped.

Thanks
dhtmlx.zip (252 KB)

Hi,
try initialize scheduler connector following way: Dim MyConnector As New dhtmlxSchedulerConnector( "EVENTS", _ "EVENT_ID", _ dhtmlxDatabaseAdapterType.SqlServer2005, _ ConfigurationManager.ConnectionStrings("ResourceManagement").ConnectionString, _ "[START]", _ "[END]", _ "DRIVER_ID, ROUTE as text" _ )
diff from your version

  • escaped START and END column names with square brackets, ‘end’ is a keyword so it breaks sql query
  • added alias “ROUTE as text” in order to use ROUTE column as displayed event text.

As for missing images, just copy
/img
/imgs_dhx_terrace
folders from scheduler’s codebase to the Content folder of your project

Thanks for the tips. I have to escape [END], [ROUTE], and [DESCRIPTION] as they are all keywords in SQL Server. I would recommend that the connector engine be altered to automatically encapsulate all column names in brackets as well as table names, schema, etc. Also, it would make a good note in the documentation.

Now I am left with two issues. One looks like a bug and the other I need to research more.

  1. The tabs appears to be rendering incorrectly. The day tab is set to right 215px and the timeline table to right 280px. According to that information they should both be heavily indented and close together. From the attached screen shot you can see that the day tab appears to be rendering to the far left (about left 15px) and the timeline tab is rendering left 15px from where the timeline actually starts. I would imagine the tabs are supposed to start at left 15px and render with a spacing of 65px.

  2. The data is now loading in the attached project but only routes B and C. I can not see route A.

The issue with height and width is still present. The scheduler will crash if no width or height is provided in the container div. I would recommend defaulting these to a values to something like width = 100% and height = 300px so that the scheduler will at least render.

I was able to get all the routes to render when using the proper visual range settings. However, I also noticed that the left of the timeline does not render a border line like the right side. When I added 10px for padding to the html, body css in the project it is much clearer. Also, the next/previous buttons on the top right do not align with the right of the timeline. The connector is working great though!

    <script type="text/javascript" charset="utf-8">
        function init() {
            scheduler.locale.labels.timeline_tab = "Timeline"
            scheduler.config.xml_date = "%Y-%m-%d %H:%i";
            scheduler.config.drag_resize = false;
            scheduler.config.drag_create = false;
            scheduler.config.dblclick_create = false;

            scheduler.createTimelineView({
                section_autoheight: false,
                name: "timeline",
                x_unit: "hour",
                x_date: "%H",
                x_step: 1,
                x_size: 34,
                x_start: -5,
                x_length: 34,
                y_unit: scheduler.serverList("sections"),
                y_property: "DRIVER_ID",
                render: "tree",
                folder_events_available: false, // Make true when you want to show the supplier breakdown
                dy: 20
            });

            scheduler.init('scheduler_here', new Date(1900, 0, 1), "timeline");
            scheduler.load("DatabaseConnector.ashx");
            var myDataProcessor = new dataProcessor("DatabaseConnector.ashx");
            myDataProcessor.init(scheduler);
        }
    </script>

Hi,

  1. The tabs appears to be rendering incorrectly.
    terrace skin uses it’s own logic for positioning tabs, by default position from inline styles is ignored.
    It can be disabled with this config: scheduler.config.fix_tab_position = false;
    Then you could set tabs position and use additional css classes to make rounded buttons:
    dhx_cal_tab_last - right border rounded
    dhx_cal_tab_first - left border rounded
    dhx_cal_tab_standalone - all borders rounded

I also noticed that the left of the timeline does not render a border line like the right side.
That’s correct, borders can be added to the calendar’s container

Also, the next/previous buttons on the top right do not align with the right of the timeline.
Currently I’m not sure whether it’s a ui bug or a desired look. Anyway you can adjust position of these buttons with css:.dhx_cal_next_button { right: 18px; } .dhx_cal_prev_button { right: 65px; } .dhx_cal_today_button { right: 127px; }

All were successful. Thanks