Back to Devexpress

ASPxGantt.CustomJSProperties Event

aspnet-devexpress-dot-web-dot-aspxgantt-dot-aspxgantt-1b70c8cb.md

latest3.9 KB
Original Source

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.v25.2.dll

NuGet Package : DevExpress.Web

Declaration

csharp
public event GanttCustomJSPropertiesEventHandler CustomJSProperties
vb
Public Event CustomJSProperties As GanttCustomJSPropertiesEventHandler

Event Data

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

PropertyDescription
PropertiesGets 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>
csharp
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

See Also

ASPxGantt - 'How To' Examples

ASPxGantt Class

ASPxGantt Members

DevExpress.Web.ASPxGantt Namespace