Taxonomy Selection in Custom Control Designer - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Taxonomy Selection in Custom Control Designer

  • Taxonomy Selection in Custom Control Designer
  • I have a page control that uses a RadScheduler to display events in a calendar format.  I want to filter the events displayed based on categories and would like the user to be able to edit the selected categories from the backend designer menu.

    My first question is, what is the recommended way to display available categories and allow user selection in a designer form?

    I'm currently using a RadTreeView to display the categories in a hierarchy, but I'm not sure how to detect the selected categories on form submission.

    Second question, assuming using a RadTreeView is the recommended approach, how would I go about retrieving the selected values from the RadTreeView control on the designer form?

    Thanks.
  • Hi Geoff,

    You should build this into one control. The easiest way to filter the RadScheduler based on a category is using QueryString key in the url. You can click a node from the RadTreeView and on this event you can bind the RadScheduler or you can cause a post back which will call CreateChildControls. Please take a look at this post that shows how to filter items based on a taxon

    www.sitefinity.com/.../sitefinity-4-0-taxonomy-categorization.aspx

    If you want to just perform the filtering form the ControlDesigner, not from the public part of the website, you just need a property where you pass the category /s ID. You can take a look at

    www.sitefinity.com/.../creating-the-c-sharp-custom-designer-class.aspx

    You need to pass the RadTreeView object to the client component and inside applyChanges you can call get_selectedNodes()[0].get_value client method to get the selection.


    Greetings,
    Ivan Dimitrov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  • Thank you for the detailed response. get_selectedNodes()[0].get_value is what I was looking for.  However, I'm having an issue getting access to the RadScheduler from within the applyChanges js method. I tried exposing it as a property on the designer .cs file similar to how values are persisted within applyChanges (controlData.Scheduler), but I was unable to access it this way. Because the server control renders as markup on the client, I'm not sure how to get access to the actual RadScheduler object client side.

    Thanks.
  • Hi Geoff,

    You should add the RadScheduler on the client through GetScriptDescriptors() as a component property.


    this._Scheduler = null;
     
     
    get_Scheduler : function ()
        return this._Scheduler ;
    ,
    set_Scheduler : function (value)
        this._Scheduler = value;
    ,


    Greetings,
    Ivan Dimitrov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  • I misspoke earlier about the RadScheduler.  The control is a RadTreeView. Adding the RadTreeView as a component property in the GetScriptDescriptors() method worked, as you suggested, but it led me to another issue.

    My RadTreeView is using checkboxes and I am able to get the value of a single checkbox.  I would like to be able to iterate through all the checked checkboxes and retrieve the value from each of them.

    I wrote the following code, separating the values with a delimiter, but .get_value() is not defined as a method on a single element within the loop.

    var categoryIds = '';
    var checkedNodes = this.get_Categories().get_checkedNodes();
    for (var category in checkedNodes)
        categoryIds += category.get_value() + '_|_';

    How would I successfully retrieve the values from each of the checked nodes?

    Thanks.
  • Hi Geoff,

    Once you pass the RadTreeView on the client you can use all methods that the RadTeeView expose

    www.telerik.com/.../treeview-client-basics.html

    You can use

    get_checkBoxElement
    get_checkState

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  • It is now working successfully. Thank you for all your help on this issue, Ivan.

    I didn't see much documentation on Script Descriptors or how to get access to server controls client side, so to help anyone else that has a similar issue, here is how I loaded the RadTreeView as a component property to get access to it client side:
    public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
        var descriptor = (ScriptControlDescriptor)scriptDescriptors[scriptDescriptors.Count - 1];
        descriptor.AddComponentProperty("Categories", this.tvwTaxa.ClientID);
        return scriptDescriptors.ToArray();

    And here is my client side code with my accessors and code to load and save the data:
    refreshUI: function ()
        var data = this.get_propertyEditor().get_control();
     
        var selectedNodes = new Array();
     
        var categories = data.Categories.split('_|_');
        for (var i = 0; i < categories.length; i++)
            var node = this.get_Categories().findNodeByValue(categories[i]);
            if (node)
                selectedNodes.push(node);
            
        
     
        this.get_Categories().checkNodes(selectedNodes);
    ,
    applyChanges: function ()
        var controlData = this.get_propertyEditor().get_control();
     
        var categoryIds = '';
        var checkedNodes = this.get_Categories().get_checkedNodes();
        for (var i = 0; i < checkedNodes.length; i++)
            categoryIds += checkedNodes[i].get_value() + '_|_';
        
     
        controlData.Categories = categoryIds;
    ,
    get_Categories: function ()
        return this._Categories;
    ,
    set_Categories: function (value)
        this._Categories = value;