Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting the value of a dijit FilteringSelect with saved value
    text
    copied!<p>I have developed a dijit widget for EPiServer. Within the widget there is a FilteringSElect which gets it's data from a REST store. The values that populate the FilteringSelect are a numerical Id and a text value.</p> <p>When EPiServer saves the value, it is the numerical value (Id) that is saved.</p> <p>My entire widget looks like so:</p> <pre><code>{ return declare("communityuser.editors.CommunityUserSelector", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], { templateString: "&lt;div class=\"dijitInline\"&gt;\ &lt;div data-dojo-attach-point=\"stateNode, tooltipNode\"&gt;\ &lt;div data-dojo-attach-point=\"inputWidget\" data-dojo-type=\"dijit.form.FilteringSelect\" style=\"width: 300px\"&gt;&lt;/div&gt;&lt;span style=\"padding-left:10px;\"&gt;&lt;a href=\"#\" data-dojo-attach-point=\"resetLink\"&gt;Reset&lt;/a&gt;&lt;/span&gt;\ &lt;/div&gt;\ &lt;/div&gt;", intermediateChanges: false, value: null, store: null, onChange: function (value) { // Event }, postCreate: function () { // call base implementation this.inherited(arguments); // Init textarea and bind event this.inputWidget.set("intermediateChanges", this.intermediateChanges); //set whether the internal required property is true this.inputWidget.set('required', false); //get a reference to the CommunityUserStore var registry = dependency.resolve("epi.storeregistry"); this.store = this.store || registry.get("customquery"); //set the store for the FilteringSelect this.inputWidget.set("store", this.store); //connect the onChange event for the FilteringSelect this.connect(this.inputWidget, "onChange", this._onInputWidgetChanged); //connect the onclick event for the Reset Link this.connect(this.resetLink, "onclick", this._onResetClicked); }, isValid: function () { // summary: // Check if widget's value is valid. // tags: // protected, override return true; }, // Setter for value property _setValueAttr: function (value) { if (!value) { return; } //set the value of the FilteringSelect and the value of the parent control this.inputWidget.set("value", value.userId); this._set("value", this._serializeUser(value)); }, // Event handler for the changed event of the input widget _onInputWidgetChanged: function (value) { this._updateValue(value); }, //Event handler when the Selection in the FilteringSelect is changed _updateValue: function (value) { //check whether the initial value matches the new value i.e. the value after the selection has changed if (this._started &amp;&amp; epi.areEqual(this.value, this._serializeUser(value))) { return; } //create an object representation of the value var formattedValue = (!value) ? {} : this._serializeUser(value); this._set("value", formattedValue); this.onChange(formattedValue); }, _onResetClicked: function (event) { event.preventDefault(); this.inputWidget.reset(); }, _serializeUser: function(userId) { return ({userId: userId }); }, }); </code></pre> <p>This may not be the correct way to write a dojo/dijit widget - it's my first.</p> <p>In my Rest Store I have two methods, Get(string name) and GetUserById(int userId).</p> <p>The values of the Get method are returned, I presume because Get is the default method dojo is looking for. Therefore after loading when the user types a value into the FilteringSelect or selects the pulldown from the FilteringSelect, it is populated with all the values returned from the Get method.</p> <p>However, if when the widget loads it already has a value (because it was saved in EPiServer) I want to call a different method from my store and return just 1 record - in this instance the record to be returned would be a user account that has the same Id.</p> <p>Id | Value 1 | "User 1" 2 | "User 2" 3 | "User 3"</p> <p>What I am struggling with is how to call the method from the store, and then show the value returned in the FilteringSelect.</p> <p>This is the first time I have used either dojo or dijit so i might be doing soemthing fundamentally wrong.</p> <p>Can anyone give me a pointer please?</p> <p>Many thanks Al</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload