When using the UI Grid editing features, it's possible to specify cell editing parameters in columnDefs. But this restricts one to have the same type in all rows for a given column.
I have sort of a sideways grid, where each row is a field, and each column is an entity. Is it possible to specify the editing parameters per row, so in a single column, one row can have, say, a dropdown, and another can have a text box?
You can use a custom template, for example this one:
<div><div ng-if="row.entity.colType === 'text'">
<form name="inputForm">
<input
type="INPUT_TYPE"
ui-grid-editor
ng-class="'colt' + col.uid"
ng-model="MODEL_COL_FIELD">
</form>
</div>
<div ng-if="row.entity.colType === 'dropdown'">
<form
name="inputForm">
<select
ng-class="'colt' + col.uid"
ui-grid-edit-dropdown
ng-model="MODEL_COL_FIELD"
ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">
</select>
</form>
</div>
</div>
is a basic example of an editable cell whose type varies depending on the field colType.
I just copied and pasted the basic templates from ui-grid.edit and put an ng-if around each of them.
I built this plunker, but, as you can see, it doesn't hide the inputs after click so I guess you should create a custom directive similar to uiGridEditor as suggested in this tutorial.
Related
My ng-repeat input fields are dynamic fields, if checkbox checked the ng-repeat input fields are displaying, ADD More button also enabled. If i click the ADD More button same set of input fields are displaying, i need to validate my ng-repeat input fields at the time of checkbox status will be true (checked) using ng-required / required option.
Kindly give me a solution using ng-required = "true" / required.
Thank you.
most probably you need to set the name on each checkbox
something like
<div your ng-repeat>
<input type="checkbox" name="chk{{$index}}" ng-model="yourmodel" ng-required="true" />
</div>
I want to add a text-box to the top of the dropdown list that appears when a select-box is clicked.
This way, I can filter and select a value.
Can this be done in devExpress?
I know that the template for each individual value can be modified by using dx-template, but can the dropdown list as a whole be modified (i.e. a text-box be added to the top for filtering)?
<div dx-select-box="vm.account1BoxConfig">
<div data-options="dxTemplate:{ name:'accountItem' }">
<span dx-text-box="{value: 'Mike'}"></span> // not working -- adds text-box to each value
<span>{{::code}}</span>
<small style="margin-left: 5px">[{{::name}}]</small>
</div>
</div>
By the way, I don't want to type text in the select-box element - only in a text-box at the top of the drop-down.
-- I know the select-box element can be used to type filter/search text-.
The only other option I can think of is to create a dx-list and toggle it when the input element is clicked....
I suggest you use dxLookup instead. It provides a search box in the drop-down out-of-the box. See the http://js.devexpress.com/Demos/WidgetsGallery/#demo/actions_and_lists-lookup-overview demo.
I am creating a dynamic radio buttons and checkboxes .But when enter their labels how can we have a validation so that no name is repeated again for next controls respectively
<span style="padding-left: 20px" ng-repeat="r in field.rbtn track by $index | unique:'r.radioname'" >
<input type="radio" id="radio_{{$index}}">{{r.radioname}}
</span>
For this I have used like this..but it does not displaying the values only the label is displayed but under it ,no radio button with its name is not displaying
I am sure you are using ng-repeat for dynamically generating checkboxes.
You can use the Angular unique filter for removing duplicates in your ng-repeat.
What I'm trying to do is make a number of dynamic radio/checkbox fields based on data that is passed to me. Unfortunately I don't have control over the format of this data but it should be ok to get the job done.
This is as far as I have got: http://plnkr.co/edit/LKwueHUzSrC5JpeBY9So
The format of the data I need to end up with in the end is a simple array like this:
"school_type": [
"Government/State",
"International",
"Co-educational"
]
This data could come from a radio box, or a checkbox if it's selected. Checkboxes are displayed if there is only one option, radios if more than one.
So I can get the fields displaying, but the issues I have are:
The name properties on the radio buttons don't seem to work for
each set.
I can't work out how to get the value of the checkbox/radio selected... back to the controller and into the array I need. I thought the easiest way would be to use the ng-change property available and pass a function to this but I keep getting errors every way I try.
Any help would be appreciated.
There's a couple of problems with your code:
You're not using interpolation where it is needed;
You're not binding the controls to the scope;
Here's your updated code:
<label ng-switch-when="r" class="radio">
<div ng-repeat="option in options">
<input type="radio" name="{{fieldname}}" ng-model="$parent.$parent.selectedid" value="{{option}}">
<span>{{ option }}</span>
</div>
</label>
<label ng-switch-when="c" class="checkbox">
<input type="checkbox" name="{{fieldname}}" ng-false-value="" ng-true-value="{{options[0]}}" ng-model="$parent.selectedid">
<span>{{ options[0] }}</span>
</label>
Note that in order to bind the controls correctly I had to use $parent.$parent for the radio buttons and $parent for the checkbox. That was needed because both ng-switch and ng-repeatcreate new child scopes. So I had to go up one level for the checkbox and two ones for the radio buttons. That could be avoided if you used an object instead of primitives for the bindings. I suggest that you try to refactor your code so it does that. This article has more information on that matter.
And finally, here's a working version of your Plunker.
An HTML template that I'm working on has a variety of HTML select and checkbox elements contained within it.
Eg.
<select>
<option></option>
<option>No</option>
<option>Yes</option>
</select>
<input type="checkbox" />
I've found that these elements do not appear to be editable from within the WYSIWYG editor.
I would like a user to be able to toggle the checkboxes and select options from within these elements from within the WYSIWYG editor.
So the HTML could be turned into something like this:
<select>
<option></option>
<option selected>No</option>
<option>Yes</option>
</select>
<input type="checkbox" checked />
Has anyone been able to acheive this in TinyMCE 4?
Is there a plugin that may help that I haven't found? Are there techincal challenges to achieving this as a plugin?
Thanks for any help/advice!
Update:
I've discovered the inability to change these element within the editor is actually a reported bug with Firefox since 2008! In other browsers you are able to change the values of these elements - however as no changes are made to the HTML - their state is not saved.
Perhaps a plugin to record the state of these elements into the HTML source just prior to saving, would fulfil my requirement?