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
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;
,
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() +
'_|_'
;
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
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();
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;