BarChart​.cs

using System;

using System.ComponentModel;

using System.Text;

using Skelta.Forms.Core.Controls;

using Skelta.Forms.Core.Interfaces;

namespace Corp.CustomControls.BarChartCustom

{

//Adding the attribute to make it available in the forms designer

[DesignerControl(992200, CoreDesigner.NextGenDesigner, DesignerCategory.Custom)]

public class BarChart : BaseDataExternalControl

{

public override BaseControl GetNewInstanceForClone()

{

var custom = new BarChart();

custom.ChartType = this.ChartType;

return custom;

}

public override string TypeAssociation

{

get

{

return "Custom";

}

}

private string chartType = "Column";

private string _items = string.Empty;

private string _series = string.Empty;

private string _colors = string.Empty;

private string _itemsURL = string.Empty;

private string _seriesURL = string.Empty;

private string _colorsURL = string.Empty;

[DefaultValue("Column")]

[DesignerProperty(774000, Categories.Advanced, CoreDesigner.NextGenDesigner)]

public string ChartType

{

get { return chartType; }

set { chartType = value; }

}

[DesignerProperty(774100, Categories.Advanced, CoreDesigner.NextGenDesigner)]

[BindingAttribute(889900, "Skelta.Forms.Core.CommonObjects.CommonStringBindingProperty", BindingPropertyName = "itemsData", IsObservable = false)]

public string Items

{

get { return _items; }

set { _items = value; }

}

[DesignerProperty(774150, Categories.Advanced, CoreDesigner.NextGenDesigner)]

[BindingAttribute(889950, "Skelta.Forms.Core.CommonObjects.CommonStringBindingProperty", BindingPropertyName = "seriesData", IsObservable = false)]

public string Series

{

get { return _series; }

set { _series = value; }

}

[DesignerProperty(774200, Categories.Advanced, CoreDesigner.NextGenDesigner)]

[BindingAttribute(8810000, "Skelta.Forms.Core.CommonObjects.CommonStringBindingProperty", BindingPropertyName = "colorsData", IsObservable = false)]

public string Colors

{

get { return _colors; }

set { _colors = value; }

}

[DesignerProperty(774250, Categories.Advanced, CoreDesigner.NextGenDesigner)]

[BindingAttribute(8810100, "Skelta.Forms.Core.CommonObjects.CommonStringBindingProperty", BindingPropertyName = "itemsURL", IsObservable = false)]

public string ItemsURL

{

get { return _itemsURL; }

set { _itemsURL = value; }

}

[DesignerProperty(774300, Categories.Advanced, CoreDesigner.NextGenDesigner)]

[BindingAttribute(8810200, "Skelta.Forms.Core.CommonObjects.CommonStringBindingProperty", BindingPropertyName = "seriesURL", IsObservable = false)]

public string SeriesURL

{

get { return _seriesURL; }

set { _seriesURL = value; }

}

[DesignerProperty(774350, Categories.Advanced, CoreDesigner.NextGenDesigner)]

[BindingAttribute(8810300, "Skelta.Forms.Core.CommonObjects.CommonStringBindingProperty", BindingPropertyName = "colorsURL", IsObservable = false)]

public string ColorsURL

{

get { return _colorsURL; }

set { _colorsURL = value; }

}

[BindingAttribute(8810400, true, "Corp.CustomControls.BarChart.BarChartBindingProperty")]

public override string ControlBindings

{

get;

set;

}

public override string GetView()

{

AddJsFiles();

return base.GetView();

}

public override string GetControlHtml()

{

var stringBuilder = new StringBuilder();

StringBuilder dataBindAttribute = new StringBuilder();

//Creating the binding for the controls, by default all these properties are rendered, If any other Knockout binding like "attr" etc, can be added here.

//"DataBindAttribute" is the keyword, which is mandatory data: items, series: [{ name: 'sample', field: 'value' }]

//We can have separate views for design mode using the below keyword "this.TopLevelForm.InDesignMode", which will be true while rendering in design mode.

if (this.TopLevelForm.InDesignMode == false)

{

dataBindAttribute.Append(" " + DataBindAttribute + "=\"kendoChart: { data: " + this.Id + "._items, title: { text: 'Graph Sample' }, series: " + this.Id + "._series, seriesColors: " + this.Id + "._colors}");

dataBindAttribute.Append("\"");

}

stringBuilder.Append("<div " + this.GetControlIdAttribute + dataBindAttribute.ToString() + "></div>");

return stringBuilder.ToString();

}

private void AddJsFiles()

{

if (string.IsNullOrEmpty(this.TopLevelForm.RuntimeJS["kendo.dataviz.chart"]))

{

this.TopLevelForm.RuntimeJS.Add("kendo.dataviz.chart", "js/kendo.dataviz.chart.min.js");

}

if (string.IsNullOrEmpty(this.TopLevelForm.RuntimeJS["knockout-kendo.kendochart"]))

{

this.TopLevelForm.RuntimeJS.Add("knockout-kendo.kendochart", "js/knockout-kendo.kendochart.js");

}

if (string.IsNullOrEmpty(this.TopLevelForm.RuntimeJS["corp.customcontrol.barchart"]))

{

this.TopLevelForm.RuntimeJS.Add("corp.customcontrol.barchart", "js/corp.customcontrol.barchart.js");

}

}

public override string GetViewModelScript()

{

StringBuilder viewModelScript = new StringBuilder();

viewModelScript.Append(base.GetViewModelScript());

string controlString = "_" + this.ParentForm.Id + "." + this.Id;

viewModelScript.AppendLine("corp.customcontrol.barChart.initialize(" + controlString + ");");

return viewModelScript.ToString();

}

public override IBindingProperty GetBindingClassObject(string fullyQualifiedClassPath)

{

try

{

return (IBindingProperty)Activator.CreateInstance(Type.GetType(fullyQualifiedClassPath));

}

catch (Exception ex)

{

return null;

}

}

}

}