ASPxGantt.CustomJSProperties Event

Enables you to supply any server data that can then be parsed on the client.

Namespace: DevExpress.Web.ASPxGantt

Assembly: DevExpress.Web.ASPxGantt.v24.2.dll

NuGet Package: DevExpress.Web

Declaration

C#

public event GanttCustomJSPropertiesEventHandler CustomJSProperties

VB.NET

Public Event CustomJSProperties As GanttCustomJSPropertiesEventHandler

Event Data

The CustomJSProperties event's data class is GanttCustomJSPropertiesEventArgs. The following properties provide information specific to this event:

Property	Description
Properties	Gets a collection of temporary client properties. Inherited from CustomJSPropertiesEventArgs.

Remarks

In some instances, it is necessary to obtain server information on the client. The CustomJSProperties event enables you to declare temporary client properties. These properties can hold arrays, hashtables, etc. Once declared, a property can be accessed on the client.

To add new properties, use the event parameter’s Properties property, which represents a collection of property names and their values. The only requirement is that property names must begin with the ‘cp’ prefix, to avoid rewriting the ASPxGantt base properties.

Example

The following example illustrates how to use the CustomJSProperties event to pass information about daily rules in the Gantt from the server to the client side. On the client, this information is set as a label’s text.

The result:

Working hours: from 08:00 till 11:55 AND from 13:00 till 17:00

ASPX

<span>Working hours: </span>
<dx:ASPxLabel runat="server" ID="DailyRules" Text="" ClientInstanceName="dailyRulesLabels" />

<dx:ASPxGantt ID="Gantt" runat="server" OnCustomJSProperties="Gantt_CustomJSProperties" ... >
    <ClientSideEvents Init="OnGanttViewInit" />
    // ...    
    <WorkTimeRules>
        <dx:DailyRule>
            <WorkTimeRanges>
                <dx:WorkTimeRange Start="08:00" End="11:55" />
                <dx:WorkTimeRange Start="13:00" End="17:00" />
            </WorkTimeRanges>
        </dx:DailyRule>
    </WorkTimeRules>
</dx:ASPxGantt>

C#

protected void Gantt_CustomJSProperties(object sender, GanttCustomJSPropertiesEventArgs e) {
    e.Properties.Add("cpDailyRuleInfo", GetDailyRulesDescription());
}

private string GetDailyRulesDescription() {
    string result = "";
    string separator = "";

    List<DailyRule> dailyRules = Gantt.WorkTimeRules.OfType<DailyRule>().ToList();
    foreach(DailyRule rule in dailyRules) {
        foreach(WorkTimeRange range in rule.WorkTimeRanges) {
            if(!String.IsNullOrEmpty(result)) separator = " AND ";
            result += String.Format("{0}from {1} till {2}", separator, range.Start.ToString(@"hh\:mm"), range.End.ToString(@"hh\:mm"));
        }
    }
    return result;
}

JS

function OnGanttViewInit(s, e) {
    dailyRulesLabel.SetText(s.cpDailyRuleInfo)
}

Online Demo

ASPxGantt - Work Time Schedule