+1-888-365-2779
Try Now
More in this section

Forums / Sitefinity SDK / Taxonomy Selection in Custom Control Designer

Taxonomy Selection in Custom Control Designer

7 posts, 3 answered
  1. Geoff
    Geoff avatar
    89 posts
    Registered:
    02 Mar 2011
    08 Mar 2011
    Link to this post
    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.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    30 Sep 2016
    09 Mar 2011
    Link to this post
    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

    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/sdk/sitefinity-4-0-taxonomy-categorization.aspx#1454545

    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

    http://www.sitefinity.com/4.0/documentation/how-to-create-a-widget/advanced/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!
    Answered
  3. Geoff
    Geoff avatar
    89 posts
    Registered:
    02 Mar 2011
    09 Mar 2011
    Link to this post
    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.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    30 Sep 2016
    09 Mar 2011
    Link to this post
    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!
    Answered
  5. Geoff
    Geoff avatar
    89 posts
    Registered:
    02 Mar 2011
    09 Mar 2011
    Link to this post
    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.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    30 Sep 2016
    10 Mar 2011
    Link to this post
    Hi Geoff,

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

    http://www.telerik.com/help/aspnet-ajax/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!
    Answered
  7. Geoff
    Geoff avatar
    89 posts
    Registered:
    02 Mar 2011
    10 Mar 2011
    Link to this post
    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;
    }
7 posts, 3 answered