Creating the TaxonomyDropDown control

You use the TaxonomyDropDown control to display a drop down list with the available taxonomies, when the user is creating a product in the backend. To create the TaxonomyDropDown control, perform the following:

1. From the context menu of folder Web » Controls, click Add » Class.

2. In the Name input field, enter TaxonomyDropDownField.cs.

3. Open the file in Visual Studio and add the following namespaces:

   using System.Web.UI;

   using Telerik.Sitefinity.Configuration;

   using Telerik.Sitefinity.Taxonomies;

   using Telerik.Sitefinity.Taxonomies.Model;

   using Telerik.Sitefinity.Web.Configuration;

   using Telerik.Sitefinity.Web.UI.Fields;

   using Telerik.Sitefinity.Web.UI.Fields.Contracts;

4. Make the TaxonomyDropDownField class inherit the ChoiceField class:

   public class TaxonomyDropDownField : ChoiceField

   {

   }

5. Override the ResourceAssemblyInfo property of the base class in the following way:

   protected override Type ResourcesAssemblyInfo

   {

       get

       {

           return Config.Get<ControlsConfig>().ResourcesAssemblyInfo;

       }

   }

6. Override the Configure method of the base class in the following way:

   public override void Configure(IFieldDefinition definition)

   {

       base.Configure(definition);

       var tdefinition = definition as ITaxonFieldDefinition;

       var tManager = TaxonomyManager.GetManager();

       var tid = tdefinition.TaxonomyId;

       var taxonomy = tManager.GetTaxonomies<FlatTaxonomy>().Where(t => t.Id == tid).SingleOrDefault();

       if (taxonomy != null)

       {

           var countries = taxonomy.Taxa.OrderBy(c => c.Title.ToString());

           this.RenderChoicesAs = Telerik.Sitefinity.Web.UI.Fields.Enums.RenderChoicesAs.DropDown;

           // or you can use Telerik.Sitefinity.Web.UI.Fields.Enums.RenderChoicesAs.CheckBoxes for multiple choice

    

           this.Choices.Clear();

           foreach (var taxon in countries)

           {

               var choice = new ChoiceItem();

               choice.Value = taxon.Id.ToString();

               choice.Text = taxon.Title;

               choice.Enabled = true;

               this.Choices.Add(choice);

           }

       }

   }

7. Implement the client component of the control in the following way:

   1. From the context menu of folder Web » Controls » Scripts, click Add » New Item.

   2. From the dialog click Visual C# » Web » JScript File.

   3. Name the file TaxonomyDropDownField.js and click Add.

   4. From the context menu of file TaxonomyDropDownField.js, select Properties.
   5. In the Properties pane, set the Build Action property of the file to Embedded Resource.

   6. Open the TaxonomyDropDownField.js file and implement the client component in the following way:

      /// <reference name="MicrosoftAjax.js"/>

      /// <reference name="Telerik.Sitefinity.Resources.Scripts.jquery-1.4.2-vsdoc.js" assembly="Telerik.Sitefinity.Resources"/>

      Type.registerNamespace("ProductsModule.Web.Controls");

       

      ProductsModule.Web.Controls.TaxonomyDropDownField = function (element) {

       

          ProductsModule.Web.Controls.TaxonomyDropDownField.initializeBase(this, [element]);

      }

       

      ProductsModule.Web.Controls.TaxonomyDropDownField.prototype =

      {

          initialize: function () {

              ProductsModule.Web.Controls.TaxonomyDropDownField.callBaseMethod(this, "initialize");

          },

       

          // Gets the value of the field control.

          // If a single item is selected returns the value, otherwise of more than one is selected

          // returns an array with the selected values

          get_value: function () {

       

              if (this.get_displayMode() == Telerik.Sitefinity.Web.UI.Fields.FieldDisplayMode.Write) {

                  var result = this._get_selectedItemsValues();

                  if (Array.prototype.isPrototypeOf(result)) {

                      return result;

                  }

                  return [];

              }

              return this._value;

          },

       

          isChanged: function () {

       

              if (this._value == null) this._value = [];

              var newValue = this.get_value();

              var maxi = 0;

              var changed = false;

       

              if (newValue != null) {

                  if (this._value.length == newValue.length) {

       

                      while (this._value[maxi]) {

       

                          var originalValue = this._value[maxi];

                          var found = false;

                          var i = 0;

                          while (newValue[i]) {

                              var currentValue = newValue[i];

                              if (originalValue == currentValue) {

                                  found = true;

                                  break;

                              }

                              i++;

                          }

                          if (!found) {

                              return true;

                          }

                          maxi++;

                      }

       

                  } else {

                      changed = true;

                  }

              }

              return changed;

          }

       

       

      }

       

      ProductsModule.Web.Controls.TaxonomyDropDownField.registerClass('ProductsModule.Web.Controls.TaxonomyDropDownField', Telerik.Sitefinity.Web.UI.Fields.ChoiceField);

8. Override the GetScriptReference method of the base class in the following way:

   internal const string script = "ProductsModule.Web.Controls.Scripts.TaxonomyDropDownField.js";

    

   public override IEnumerable<ScriptReference> GetScriptReferences()

   {

       var assemblyName = typeof(TaxonomyDropDownField).Assembly.FullName;

       var scripts = new List<ScriptReference>(base.GetScriptReferences())

                   {

                       new ScriptReference(TaxonomyDropDownField.script, assemblyName),

                   };

       return scripts;

   }