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

Forums / Developing with Sitefinity / Flat Taxonomy and MVC Widget Designer

Flat Taxonomy and MVC Widget Designer

2 posts, 0 answered
  1. David Lamb
    David Lamb avatar
    10 posts
    Registered:
    02 Oct 2009
    04 Feb 2014
    Link to this post
    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?
  2. LBrinley
    LBrinley avatar
    59 posts
    Registered:
    29 Dec 2005
    05 Feb 2014 in reply to David Lamb
    Link to this post

    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.


     

     

2 posts, 0 answered