I'm new to angular ui-grid.
I want to implement a dropdown box for inline editing and I follow this tutorial (gender column): http://ui-grid.info/docs/#/tutorial/201_editable and I modified it by using a new cshtml page (as shown below) because I want to set the option from database instead of enter the options manually.
The code below is where I implemented the dropdown box:
name: app.localize('Roles'),
field: 'getRoleNames()',
minWidth: 160,
editableCellTemplate: '~/App/common/views/users/roleDropDownList.cshtml'
And here is the code of roleDropDownList.cshtml
<div ng-controller="common.views.users.index as vm">
<select>
<option ng-repeat="role in vm.roles">{{role.displayName}}</option>
</select>
</div>
Now I'm able to choose the option but it's like not capturing the changes when I choose 1 of the options.
Here is the example:
DropDown sample
As you can see in the image, the row in red color means it's dirty row (edited) but the row that I edited with dropdown is not in red color means it's not being edited and it can't be save.
I found a way that more easier to implement what I want.
name: app.localize('Roles'),
field: 'getRoleNames()',
minWidth: 160
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'displayName',
editDropdownIdLabel: 'displayName'
editDropdownValueLabel is to set the value of the options otherwise it will shows "undefined" as image shown below
Example of dropdown undefined options
editDropdownIdLabel is to show the value of the selected option otherwise it will shows ID as image shown below
Showed Id
The code below is to get the data from database:
vm.userGridOptions.columnDefs[3].editDropdownOptionsArray = result.data.items;
Related
I'm using a select2 ajax based dropdown with a single select. This is working perfectly.
There is another input field also on the page and when this is interacted with, I would like to preload the select with a certain amount of options - say 4.
I am using the below to insert the options dynamically, but this is only presenting 1 selected option and when I click the dropdown I get the "please enter x characters" message and don't see what I've preloaded. Is this something that can be achieved?
var newOption = new Option(data.text, data.id, true, true);
$('#selectid').append(newOption).trigger('change');
Thanks,
David
I’m using Oberon forms version 2019.2 CE.
In my form I have Dynamic Dropdown (with search) with country select (required field) and Text field with display code of selected country:
When I select country, in text field appears selected country code:
Now I can click ‘x’ sign to remove value form drop down:
Value in field 'code' has not been deleted. When I click Validate button no error is detected. It seems that when I use 'x' sign to remove value from dropdown, I remove only label, not value.
My question is whether it is possible to remove both label and value, when I click 'x' sign?
I am unable to reproduce this with Orbeon Forms CE 2019.2. This is what I am seeing when running this form. If this doesn't help, I'd recommend you update your question to include a link to a minimal form that you are using to reproduce this, with steps to reproduce (and then post a comment, for notification).
It looks like the problem occurs when I use ‘Service performs search’ option set to ‘Yes’. Below you can see how it looks like in my form:
Source code of the form: here
I'm using select2.full.js
I'm not using any require.js to help me pull in modules, I'm basically using my know how from everything I learned in v3.5
I've been trying countless of hours, wrapping my head around this, but I have no idea how to make ajax cascading dropdowns.
Example: You load up the page, there is the first select2 dropdown that pulls data using ajax automatically (you don't enter anything.. data is there on the page load from the server), a default value is selected. Since that default value is selected, the second select2 drop down will use that value to make an ajax call to populate its own list. Now, when I select another value in the first select2 dropdown, the second select2 dropdown will reflect those changes with the new dataset.
What I've able to come up with was a 3 dropdowns that you can populate on a page load, but when you do any ajax request, the dropdown data doesn't change.
It's been two years since I used select2, and the library keeps changing, the documentation keeps changing, I'm at my wits end with this library. But I feel drawn to it by the bootstrap support, and the look and feel. The functionality, the way to implement things, the documentation is just so unbelievably awful.
I don't have any useful code at all, I've been pulling, plugging, modifying, etc.. and now I'm moving to my hair and teeth.
ANY useful example to do this would be awesome.
Just found my answer..
I was using the templating:
<select id="test">
<option value="1">1</option>
<option value="2">2</option>
</select>
to:
data = [{id: "1", text: "1"}, {id: "2", text: "2"}];
<input id="test" type="hidden" />
and just kept my jquery on select2 the same. So it was really just a change in the templating from to that solved it.
However, the only downside to this is that when you are refreshing new data from these drop downs, the highlighted (selected value) is always the first item in the drop down list, even though that's not the selected value shown in the dropdown.
Here is a small code snippet to make Select2 (v4.x) cascading dropdown - https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
Using this module, options of a select2 list box will be loaded/refreshed by ajax based on selection of another select2 list box.
Example use -
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
Selected value of parent select2 listbox will be set to the parent_id of the data object before ajax call.
I am populating a select dropdown from MongoDB database and then clicking on submit to perform some action on the selected value. I want to show default text for my select dropdown but also want that the default option should not allow to click submit unless some other value is chosen.
I tried this:
<g:select name="websiteSelection"
from="${websitesList.website}" id="mySelect" noSelection="${['null':'Select Website']}"
class="styled-select" value="select" />
But this allows me to press submit when nothing is selected apart from default text. Is there any way I can achieve this requirement?
In My MVC 4 application, I have a Multi Select List Box, where I can select multiple values, I also has an Item New Role as one of the list items, which also refers to a model property NewRole.
So using Jquery whenever the user selections contain New Role, I will provide a text box to the user, which is bind to NewRole from model as given,
#Html.TextBoxFor(m => m.NewRole)
Which also has the following evaluation field.
#Html.ValidationMessageFor(m => m.NewRole)
And I will hide this text-box if the user selected options does not has the Item New Role.
Now the problem is even if I hide the div which contain the Text Box, it will try evaluating the required field validation.
What I require is When User Selects New Role and the User did not enter anything in the provided text Box then validate the required field property.
I know I can write a JQuery to show an alert when the div visible and does't has any value. But I want this default validation should happen on that condition.
is it possible?
One of the trick to avid certain client side validation conditionally ... you can use the IGNORE attribute of the validation ...
jQuery Validate Ignore elements with style
$("#myform").validate({
ignore: ":hidden"
});
If this is not what you are looking ... I will provide more specific information
Yes it is possible with RemoteAttribute. Take a look at this article:
http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx
Keep in mind that this is NOT client side validation meaning there is an actual server post happening.
Try using the rules add and remove, when new role is selected add new rule which validates the textbox on other selection remove the rule from text box and hide it like you are doing:
http://validation.bassistance.de/rules/