Custom Bindings

Custom bindings are specific knockout bindings for the ViewModel at run-time. Custom bindings override the Knockout binding based on the custom control Binding Attribute (For more information, see Binding Attribute in Attributing Properties).

To create custom bindings

1. Create a custom binding class by inheriting the IBindingProperty.

2. Add the following namespaces to your custom binding property class file.
   

   using Skelta.Forms.Core;
   using Skelta.Forms.Core.Classes;
   using Skelta.Forms.Core.CommonObjects;
   using Skelta.Forms.Core.Controls;
   using Skelta.Forms.Core.Interfaces;

3. Implement RenderBinding function of the IBindingProperty interface.

   // For String, Number, Boolean
   <ContainerName>.<ControlID>.<KnockoutPropertyName> = ko.observable();
   <ContainerName>.<ControlID>.<KnockoutPropertyName> = ko.observable(<PropertyValue>);

   // For Array
   <ContainerName>.<ControlID>.<KnockoutPropertyName> = ko.observableArray();
   <ContainerName>.<ControlID>.<KnockoutPropertyName> = ko.observableArray(<ArrayPropertyVariable>);
   // Container Name
   bindingHelperObject.ViewModelContainerName
   // Control ID
   bindingHelperObject.Control.Id

4. Return the Knockout binding code snippet as a string.

5. Add the following function in the custom control class.

   public override IBindingProperty GetBindingClassObject(string fullyQualifiedClassPath)
   {
   try
   {
   return (IBindingProperty)Activator.CreateInstance(Type.GetType(fullyQualifiedClassPath));
   }
   catch (Exception ex)
   {
   return null;
   }
   }

Example

Custom binding for items, series, and colors properties of the Knockout Kendo Bar Chart control. The items, series, and colors are required arrays added with a third party JavaScript file.

class BarchartBindingProperty : IBindingProperty

{

/// <summary>

/// The Value Property Implementation.

/// </summary>

/// <param name="bindingHelper">binding Helper object</param>

/// <returns>The implementation of Value Property</returns>

public string RenderBinding(object bindingHelper)

{

StringBuilder stringBuilder = new StringBuilder();

BindingHelper bindingHelperObject = (BindingHelper)bindingHelper;

var chartControl = bindingHelperObject.ViewModelContainerName + "." + bindingHelperObject.Control.Id;

//// KO binding where items and series variables will get the array data from the external source (3rd Party JS file).

 stringBuilder.AppendLine(bindingHelperObject.ViewModelContainerName + "." + bindingHelperObject.Control.Id + "._items = ko.observableArray();");

stringBuilder.AppendLine(bindingHelperObject.ViewModelContainerName + "." + bindingHelperObject.Control.Id + "._series = ko.observableArray();");

stringBuilder.AppendLine(bindingHelperObject.ViewModelContainerName + "." + bindingHelperObject.Control.Id + "._colors = ko.observableArray();");

//// Items

stringBuilder.AppendLine("if(" + chartControl + "._itemsURL !== \"\") {");

stringBuilder.AppendLine(chartControl + "._items(getItems(" + chartControl + "._itemsURL));");

stringBuilder.AppendLine("}");

stringBuilder.AppendLine("else {");

stringBuilder.AppendLine(chartControl + "._items(eval(" + chartControl + "._itemsData));");

stringBuilder.AppendLine("}");

//// Series

stringBuilder.AppendLine("if(" + chartControl + "._seriesURL !== \"\") {");

stringBuilder.AppendLine(chartControl + "._series(getSeries(" + chartControl + "._seriesURL));");

stringBuilder.AppendLine("}");

stringBuilder.AppendLine("else {");

 stringBuilder.AppendLine(chartControl + "._series(eval(" + chartControl + "._seriesData));");

stringBuilder.AppendLine("}");

//// Colors

stringBuilder.AppendLine("if(" + chartControl + "._colorsURL !== \"\") {");

stringBuilder.AppendLine(chartControl + "._colors(getColors(" + chartControl + "._colorsURL));");

stringBuilder.AppendLine("}");

stringBuilder.AppendLine("else {");

stringBuilder.AppendLine(chartControl + "._colors(eval(" + chartControl + "._colorsData));");

stringBuilder.AppendLine("}");

return stringBuilder.ToString();

}

}

Note:
Assignment of KO observable variables must be a function.

control.<property(value)>;

For example:

chartControl.items(<JSONCollection>);