Flat Taxonomy and MVC Widget Designer

Posted by Community Admin on 04-Aug-2018 21:32

Flat Taxonomy and MVC Widget Designer

All Replies

Posted by Community Admin on 04-Feb-2014 00:00

I'm using Sitefinity 6.3. I need the end user of my widget to be able to select a taxon from a custom flat taxonomy, via the widget designer. I'd like to use the FlatTaxonField control.

<sfFields:FlatTaxonField ID="ftfCtrl" runat="server" DisplayMode="Write" AllowMultipleSelection="false" ExpandText="Select" DataFieldName="MyGuidField" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc" TaxonomyId="7D2DB5B9-708E-6C72-8556-FF009975A08E" Title="My Field" />

But I'm having a few problems.
  1. I tried to include BindOnServer="true", but that's causing an Uncaught TypeError in the javascript: "Cannot read property '_events' of null." This may or may not be related to problems listed below.
  2. I cannot use the WebServiceUrl as written above. Nothing loads if I do. What I actually have to use is WebServiceUrl="~/Sitefinity/Service/Taxonomies/FlatTaxon.svc/7D2DB5B9-708E-6C72-8556-FF009975A08E". Simply including the TaxonomyId in its eponymous property is not enough to include it in the URL when the javascript makes the actual HTTP GET to retrieve the taxa.
  3. The DataFieldName should be the same as the name of the property in the MVC widget model, correct? (That is, what appears in the 'Advanced' view.)
I'm able to properly persist the value by adding the following to my applyChanges function:
applyChanges: function()
 var controlData = this._propertyEditor.get_control().Settings;
 var selectedTaxa = jQuery(this.get_ftfCtrl())[0].control._selectedTaxa;
 if (selectedTaxa != null && selectedTaxa.length > 0)
  controlData.MyGuidField = selectedTaxa[0].Id;
  else
  controlData.MyGuidField = "";
 

I don't like that it uses undocumented fields, but at least it works. I'd prefer to simply use
controlData.MyGuidField = jQuery(this.get_ftfCtrl()).val()
But val() only returns empty string. So be it.

But I can't figure out a way to SET the FlatTaxonField Control using the saved MyGuidField value. Ideas? I considered using the FlatTaxonSelector, but that UI is unacceptable for the project. Should I be setting the DataFormat or DataItemType properties?

Posted by Community Admin on 05-Feb-2014 00:00

I'm using SF6.2, Web Forms, rather than MVC, and a HierarchicalTaxonField but I would guess the approach should be similar to my own.  I also have a problem with a null javascript object if BindOnServer = true, and had similar trouble setting the control from the database. However, the following works for me.

1) Create a virtual reference to the FlatTaxonField control, in my case the get method of the virtual HierarchicalTaxonField LIstingCats returns 

this.Container.GetControl<HierarchicalTaxonField>("listingcatsControl", true);

2) Create a virtual reference to the TaxonSelector, in my case:

return this.ListingCats.Controls[0].Controls[0].Controls[0].Controls[0].FindControl("expandTarget_write").FindControl("taxaSelector_write") as HierarchicalTaxonSelector;

3) Create a virtual reference to the RadTreeView, in my case

return this.ListingCatsHierarchicalTaxonSelector.Controls[0].Controls[0].FindControl("treePanel").FindControl("taxaTree") as RadTreeView;

4) Attach a client-side onload handler to the RadTreeView:

this.ListingCatsTaxaTree.OnClientLoad = "rtvLoad";

5) use the rtvLoad event handler to capture a reference to the RadTreeView javascript object. The function has rtvLoad(sender, args) sender is the RadTreeView javascript object. I called mine rtvTaxaTree

6) expose your selectedId(s) from your control in javascript on the template: I used an array called lcSelectedIds

7) iterate over your selected ids in javascript selecting each one

for (var i = 0; i < lcSelectedIds.length; i++)

var selNode = rtvTaxaTree.findNodeByValue(lcSelectedIds[i]);

if (selNode)

selNode.select();

That'll do it.  Sorry about the code, but I can't insert it without creating a royal mess, so I just tried to give you the gist.

Of course, now that I've posted this Herculean procedure a Telerik developer will answer with a simple method call or something.

UPDATE: Looking at your code, the jQuery(...)[0].control that you reference IS the javascript RadTreeView object, so you just need to do Steps 6 and 7 in your case.

 

 

This thread is closed