I have a custom widget which has a content pane (among other things). In it I have a multiselect listbox. I have a assigned a dojoAttachPoint to the listbox.
I want to populate the listbox when the widget is created.
In postCreate I try to fill the listbox with items, but the reference to
this.selectFrom (which is the dojoAttachPoint) is null.
Why would this not be available in postCreate? Any workarounds?
Thanks in advance
HTML:
<div dojoType='dijit.layout.ContentPane'>
<select name="drop1" style='width:200px;'
id="selectTo" dojoAttachPoint='selectTo'
size="10" multiple="multiple">
<option value="1">second col</option>
<option value="2">option two</option>
</select>
</div>
JS:
postCreate: function (){
this.inherited (arguments);
var newOption = document.createElement('option');
text = 'Mark Brown';
value = '1';
selectTo.options [this.selectTo.options.length] = new Option (name,value);
}
this.selectTo is null and it shouldn't be.
Thanks
I think dojoAttachPoint is only meaningful in templates (see dijit._Templated) Templates are separate strings/files which are used to compose widgets and are generally not used inline in the page.
Related
I am looking to auto fill form data based on a table row selection. My problem is I cannot set the correct Selected item in input boxes
I have tried using v-model (as below). I have also tried using
Html Input:
<select #change="typeSelected(selectedType)" v-model="selectedType">
<option v-for="type in types" v-bind:key="type.id" v-bind:value="type.id">{{ type.name }}</option>
</select>
Vue function to update the selected item
public setSelected(type: AssetTypeDto | undefined){
if(type) {
this.selectedType = type;
}
}
Also i tried <option :selected="type.id === selectedType.id". This didn't work either
I wish to have one item in my DDL to be a different color (red). However the list comes from a table and is not hard coded in the page like
<option value="Option 1">Option 1</option>
but rather as
#Html.DropDownListFor(r => r.Journal.Frequency, Model.JournalFrequencyList, "Select a Frequency", new { #class = "form-control" })
Is there a way to make just one item a different color?
You can update your styles/css to make one item red color. Now you did not specify which specific item you want. With jQuery, you can select a specific option and set the color of that to red.
Assume your razor view renders a SELECT element like this
<SELECT id="fancySelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</SELECT>
And if you want to set the color of the option which has value attribute set to "2", you can use the below code
$(function(){
$("#fancySelect option[value='2']").css('color','red');
//you can also apply a css class if needed
});
If you want to update a different option, update your jQuery selector to get that.
EDIT : As per the comment
is there any way to use the text as opposed to the value? Example
change if text is "Deleted"
You can update your jQuery selector to get the option with a specific text.
$("#fancySelect").find("option:contains('Deleted')").css('color','red');
I suggest you rely on option value than the text, you can set the value as a code which you can program against.
I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="">Select..</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
In the VM:
constructor(validation) {
this.agencies = null;
this.agencyId = 0;
this.validation = validation.on(this)
.ensure('agencyId')
.isNotEmpty();
}
activate() {
//call api and populate this.agencies
}
After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:
Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.
Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.
Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.
The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.
constructor() {
this.agencyId = ""; **//must match the bound property's initial value**
}
And in the view:
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
I'm trying to make a hidden field show by adding a class when the "other" option is selected from a pull-down list. But I'm not quite sure the correct way to do it.
I have the input hidden and when option is chosen I want to add the class "view" which adds display block making the hidden field visible.
Here is a fiddle showing what I have so far, any help would be much appreciated: http://jsfiddle.net/maikunari/NX795/
$(document).ready(function(){
$("#select-box").change(function(){
if($(this).val() == "other"){
$("#text-field").show();
} else {
$("#text-field").hide();
}
});
});
<select id="select-box">
<option value="Email Newsletter">Email Newsletter</option>
<option value="Yellow Pages ">Yellow Pages </option>
<option id="other-select" value="other">Other</option>
</select>
I'm using Dojo 1.4.
Given a dojox.grid.DataGrid in markup:
<table jsId="grid1" dojoType="dojox.grid.DataGrid"
structure="layout"
delayScroll="true"
columnReordering="true"
selectable="true"
onRowDblClick="onRowDblClick"
onRowContextMenu="onRowContextMenu"
headerMenu="grid1_headerMenu"
>
<div dojoType="dijit.Menu" id="grid1_rowMenu" jsId="grid1_rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="gridRowContextMenu_onClick">Edit</div>
</div>
</table>
I haven't found a better way to show grid's contex menu that this one:
function onRowContextMenu(e) {
grid1_rowMenu.bindDomNode(e.grid.domNode);
}
It works, menu pops up and function 'gridRowContextMenu_onClick' has being called.
function gridRowContextMenu_onClick(e) {
// how to get a row data???
}
My question is how inside menuitem's onClick handler (gridRowContextMenu_onClick) can I get original row for which menu was poped up?
You can use the event grid object:
var item = e.grid.getItem(e.rowIndex);
I had a similar question. I wanted to create a context menu which allowed the user to remove the item that they right clicked on from the datagrid and delete the item from the datastore. Thought it should be pretty simple and with your help and some other sites, I came up with the following code. I hope this helps someone in the future.
Javascript
var selectedItem; // This has to be declared "globally" outside of any functions
function onRowContextMenuFunc(e) {
grid5_rowMenu.bindDomNode(e.grid.domNode);
selectedItem = e.grid.getItem(e.rowIndex);
}
function gridRowContextMenu_onClick(e) {
store3.deleteItem(selectedItem);
}
HTML
<div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="gridRowContextMenu_onClick">Delete</div>
<div dojoType="dijit.MenuItem">Cancel</div>
</div>
and
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenuFunc"></div>
Of course, if you were programatically creating your DataGrid, you would just add onRowContextMenu: onRowContextMenuFunc to your declaration, as you did in your question above.
Finally, to actually get information about the item:
console.log(e.grid.store.getValue(selectedItem, 'type'));
console.log(e.grid.store.getValue(selectedItem, 'color'));
// Where type and color are fields specified in the DataGrid Layout Structure //
Did you try e.rowIndex?