I have been trying to build a custom property editor based on the dropdown.
I have managed to get it to build with a set of options based on a prevalues field, and when I edit the document with this editor, I see all the drop down options, but having selected one and saved the document, it does not save my selection. (I checked the back end db, and no value is being written)
I must be missing something?
code extracts...
package.manifest
...
prevalues:{
fields:[
{
label:"Options",
description: "Options",
key:"myOptions",
view:"multivalues"
},
...
view
<select ng-model="model.value" ng-options="opt.id as opt.value for opt in model.config.myOptions">
<option></option>
</select>
Do I need to somehow bind them to the model?
ps just tested, if I hard code the options in the view it works fine. Hmm.....what do I do next!
Related
I have a selectable field that uses the django-select2 library. I am currently trying to copy the behaviour of the "add another" functionality present in the admin forms of Django.
I added a "+" icon to my regular form template and opened a popup so that the user can register a new item. This part works, now I wish to select the newly added item automatically once the popup is closed. I cannot seem to add a new option to the selectable, though.
I read the original dismissAddAnotherPopup() code and the select2 docs on that, but appending a new Option(...) to the element does not have the desired effect - in fact it adds as many options as I want, but they appear under the select box instead of in the dropdown menu, as if they were completely different things.
I looked at the html result and it seems the select2 field is not using <option ...> for the options rendered with Django, but rather some deeper nested elements for the options.
What is the correct syntax for adding new options in this situation?
What solved it for me was this answer:
let opt = "<option value=" + myValue + " selected='selected'>" + myValueText + "</option>";
$('#mySelect').html(opt);
$('#mySelect').val(myValue).trigger("change");
It looks a bit ugly to just replace the html, but as I mentioned in the question, appending a new Option(...) to the element did not work.
Not fully client side, but might be helpful: you can use the django-addanother wrapper, like:
widgets = {
'somefield': AddAnotherWidgetWrapper(Select2Widget, reverse_lazy('somefield_add')),
}
This will render a "+" next to the Select2 field; when pressing a popup will be opened which allows to add a new object. Once saved, the Select2Widget will be automatically populated with this newly created object.
In my app I want to create a new Risk ( an instance of Risk object ) and when it is created I want to display 5 checkboxes and three radio buttons. Selected options are specific to each instance of Risk object.
Later I want to display a list of all added Risks with an Edit option button on each Risk. I want my app to restore the view specific to a selected Risk ( when an Edit button on a selected risk is clicked ) - with Risk name, all checkboxes and radio-buttons checked as selected previously. And I want to be able to edit these checkbox selections again so that all new changes were properly reflected in MySQL.
As a newbie in Thymeleaf I did the following:
<div th:each="top : ${topic}">
<input type="checkbox" th:field="*{topic}" th:checked="${top.checked}" th:value="${top.name}"/><label th:text="${top.name}">Something is wrong !</label>
</div>
I am sure that Controller and Hibernate/MySQL part works properly ( I checked using Logs ).
This works just fine - but only if I have selected only one checkbox ( initially when I added a risk ).
If I select more than one checkbox (when adding a risk) and later select this risk for editing no checkboxes are checked.
What is wrong ?
After some research I found the following text in Thymeleaf’s documentation:
“… th:field would have taken care of that and would have added a checked="checked" attribute to the corresponding input tags.”.
Also I found this guidance :
http://forum.thymeleaf.org/The-checked-attribute-of-the-checkbox-is-not-set-in-th-each-td3043675.html
Then I managed to develop a couple of small apps and I want to share what I found out and hope it will help someone.
( may be it is too detailed for experienced people, but I want it to be clear to all )
I do not want to repeat what is already in the above-mentioned Thymeleaf’s forum page ( see Administrator’s first response / explanation for detail - second in forum thread ) - just want to make a small summary and stress out few points:
you indeed do not need to add ‘checked’ when using th:each;
you must add th:field=“{…}” which should have the name of the field in your model class (referred by Thymeleaf as form-backing bean - th:object ) to which checkboxes are related. More on this: I stated above that my ‘form-backing bean’ was Risk.java. And for each Risk object instance the selected checkboxes represent topics(s) specific to this Risk instance. And selected topics are assigned to field ‘topic’ of Risk.java's instance (and hence in related table in MySQL when instance is saved). That field’s name should go inside th:field=“{…}” as th:field=“*{topic}” in my case. When you select checkboxes Thymeleaf will save selected values to Risk.java’s topic field using its setTopic method and when it needs to restore view Thymeleaf will use Risk.getTopic method to get info on earlier selected items.
all values of checkboxes (or radio-buttons ) should come from another source - it could be an Enum if you need a static set of checkboxes or if you need checkboxes to be dynamically generated you can use a class ( I needed static set of checkboxes for my app, but I decided to try to create a dynamic one as well - see links to my Github repo’s below to see the code I managed to develop ). So for my app I created an Enum Topics with all values for checkboxes and Enum Types with all values for radio-buttons. Then in your controller class you should add all values to Model’s attribute - I did this as I used an Enum:
model.addAttribute("topics", Topics.values());
model.addAttribute("types", Types.values());
(if you need dynamic ones do the following:
model.addAttribute("topics", topicsService.findAll());
model.addAttribute("types", typesService.findAll());
)
Then you should have something similar to:
<div>
<div th:each="top : ${topics}">
<input type="checkbox" th:field="*{topic}" th:value="${top.id}"/><label th:text=" | ${top.name}|">Something is wrong !</label>
</div>
</div>
<div>
<div th:each="typ : ${types}">
<input type="radio" th:field="*{type}" th:value="${typ.id}"/><label th:text="| ${typ.name} |">Something is wrong !</label>
</div>
</div>
where:
as mentioned, th:field=“{topic}" corresponds to form-backing Model class - Risk.java’s field. Same for th:field=“{type}" ;
topics in th:each="top : ${topics}” should match with attribute name you provided in controller.
And the MOST important part is that th:field=“*{topic}” should return an array.
th:field=“*{topic}” returning an array of selected items and th:each returning array of all options Thymeleaf should now be able to mark checkboxes / radio buttons as checked when values in first array match values in second array.
Since in case of radio buttons you can select only one option th:field=“*{type}” does not actually return an array - it returns only one item. But in case of checkboxes it should be an array - so the ‘topic’ field in Risk.java must return an array.
For this we need a converter - a class named e.g. StringListConverter that implements AttributeConverter….
( I learned how I can do it here. If not this answer in www.stackoverflow.com I would not be able to finalyze this app and would not be writing all this:
https://stackoverflow.com/a/34061723/6332774 )
Then in your form-backing model class - Risk.java in my case you need to do something like :
#Convert(converter = StringListConverter.class)
private List<String> topic = new ArrayList<>();
private String type;
Type can simply be a String.
That is it.
( I wanted to display checkboxes in table form indicating number of columns needed - I could do it, but I am not sure how clean it is or how safe it is. Related code is in riskformtable.html in example project linked below.
I posted a related question here - Thymeleaf - Displaying checkboxes in table form when using th:each - is what I am doing safe?
Also I wanted to use different color for all risk items with even sequential number in my risk’s list - it is in index.html
See full example code using links below )
Links to my GitHub repos:
example with static set of checkboxes : https://github.com/aripovula/Spring-Thymeleaf_checkboxes_and_radiobuttons
example with dynamically generated checkboxes : https://github.com/aripovula/Spring-Thymeleaf_dynamic_checkboxes_n_radio-buttons
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I managed to get jquery datatables plugin to work with asp.net mvc 3 so it posts back json, and with a search function.
Problem now I that I need to move the search box and add a "language" filter outside it's "normal" position next to a custom made menu.
Is there a way that I can integrate:
Language: <select name="languageid">
<option value="SV">Swedish</option>
<option value="EN">English</option>
</select>
Keywords: <input type="text" name="keywords">
To refresh datatables when languageid or keywords change? and still have sorting, paging working?
My brain is only firing at half power today, but the short answer is that this can be done; it's just my suggestions that are kind of vague...sorry!
There are a whole set of language options in oLanguage; it was a bit "Too Long, Didn't Read" for me to sort through, but perhaps something there will help you identify where to set up a language switcher
You can remove the search box from the main table and set up your own, using the fnFilter method to trigger the search
Depending on how your other options are configured (server-side, for example), there are methods to trigger a refresh of the table. You would bind a listener for the languageid or keyword change action (.on('change', '#languageid', function(e) { /* ... */ })) which would fire the appropriate refresh action (in my instance which uses server-side, I use fnDraw())
I'm sorry about the directionless advice, but I wanted you to know at least that this is possible. Posting the question on the datatables.net forums directly might get you the best possible answer.
After reading a few question/answers here I have managed to work out how to add a Select list to a form and fill it with data, like so:
#Html.DropDownList("S", new SelectList(ViewBag.S, "Id", "Nme"), "-- Sel a S --")
And it works perfectly. However I would like to add some client-side Validation To validate whether the user has selected an option and not left it at the Default.
I'm using the standard jquery stuff that comes with mvc 3, so presumably I have to do something with HTML.ValidationMessage, but what?
And Can't for the life of me work out how.
TIA.
Ok I had a look through how its done in JQuery land and found just by adding an htmlattribute like so:
new {#class='required'}
to my Html.DropDownList statement, and adding validationMessage, fixes the problem for me.
If you are using the jquery validation then you may simply add the css class reuired and have the required validation for the dropdownlist, provided the default value is empty.
First, if a dropdown is required, add the [Required] attribute to your model property.
Then, enable client side validation somewhere at the top of your view:
<% Html.EnableClientValidation() %>
Then add
#Html.ValidationMessage("S", "*")
Above will only work if the 'default' selection has a null or empty value.
Also ensure you've got the correct js files referenced in the script tags at the top of your page