Render g.select on controller - spring

How to i set the default value on g:select from controller? From my list of name's for example
here's my list ["peter","josh","john","thomas"]
render g.select( name:'selectName',
from:listOfName,
optionKey:'id',
optionValue:'name',
value:'john')
after submitting the form when the g:select reload it's still set on the first list which is peter. i don't know how do i get the default value for selection, or how do i get the the value on onComplete tags of g:select

Looking at your example the reason why it's selecting the first value in the list is because your optionKey is that of "id" and your "value" appears to be the optionValue. The "value" should contain the "id" of the selected option not the optionValue.
Here is an example to illustrate this:
<g:select name="selectName" from="${[['id': 2, 'name': 'Bob'], ['id': 1, 'name': 'Joe']]}" optionKey="id" optionValue="name" value="1" />
UPDATE (Since you added more information to your question and changed it)
The optionKey and optionValue settings of your select are not needed. In your new example simple use this:
render g.select( name:'selectName',
from:listOfName,
value:'john')

Related

th:selected for select tag in Thymeleaf not working

<select multiple="multiple>
<option th:each="vName : ${variety}"
th:value="${vName}"
th:text="${vName}"
th:selected="${selectedVariety}"></option>
</select>
In the above code "selectedVariety" is a string array sent from controller.
I'm not able to bind the select tag on edit.
And this select tag is not a part of entity table so th:filed="*{selectedVariety}" is not working.
Tried th:attr="selected=${selectedVariety==vName?true:false}">
Not working
On using this "th:selected="${selectedVariety}" every option in the dropdown is getting selected.
What may be the solution??
The option is selected when the value is included to the String array. You'll need following attribute within your <option>:
th:selected="${#arrays.contains(selectedVariety, vName)}"
It returns true (selected) if selectedVariety contains given vName or false (unselected) otherwise.

how to correctly render referenced entities in list when I have objects instead of numberic ids?

right now in order for the list to render properly I need to have this kind of data passed in:
row = {
id: value,
name: value,
height: value,
categories: [1,2,3,4]
}
how can I adapt the code so that a list works with this kind of data?
row = {
id: value,
name: value,
height: value,
categories: [{id: "1"},{id: "2"},{id: "3"},{id: "4"}]
}
when I try to do that it seems that it applies JSON.stringify to the objects so it is trying to find category with id [Object object]
I would to avoid a per case conversion of data as I do now..
it seems that I cannot do anything in my restClient since the stringify was already applied
I have the same issue when I fetch just one data row e.g in Edit or Create.. categories ReferenceArrayInput is not populated when categories contains objects
Have you tried using format?
https://marmelab.com/admin-on-rest/Inputs.html#transforming-input-value-tofrom-record
Might help transform your input value. Then you can use format() to change values back to the format your API expects.
If this does not work then you will have to probably create a custom component out of ReferenceArrayInput.

What is the way to do it with Vuejs

I have a page with 3 combos, 6 dependents inputs text ( if a special value is selected in combo, it will show, otherwise it will hide)
Then, I will have A text fields that is a computed property. Each time an input is changed, it will reevaluate this field value.
So, For instance, My fields are:
GradeIni, GradeFin, Category, AgeCategory, AgeIni, AgeFin , Gender (selects)
isTeam ( Checkbox )
CategoryFullName
So, for example, There is 5 predefines AgeCategory,and the 6th is Custom, when Selected, it show AgeIni and AgeFin
Each time a value is change, CategoryFullName is reevaluated.
My first answered question was how to get values from server.
I knew how to do it with Ajax, but in this case, it was easier to just use Server variable sent by Laravel when pages load.
So, the answer was 2 options:
#foreach ($grades as $grade)
<option ...>{{ $grade }}</option>
#endforeach
Or
<grades :grades="{{ $grades }}"></grades>
So, I would like to use the second one, but it means I have to create a component for each Select Option in my page, which seems a little heavy.
So, I'm a little bit confused about how should I make this page. Is it better by AJAX, is it better to be able to get data from laravel, and o make a component for each list, or is there a better way to do it????
You dont need to use many components. One component and one variable to keep the selected grade are fine.
You can create a component template to display all the grades.
I have created one template with dummy data to show you how you can do it.
<template id="grades-list">
Curently selected: Title {{selected.title}} Value: {{selected.value}}
<select v-model="selected">
<option v-for="grade in grades" :value="grade">{{grade.title}}</option>
</select>
</template>
The component should be registered like this:
Vue.component('grades', {
props: ['grades', 'selected'],
template: '#grades-list'
})
The tricky part is how you will select a default value and keep it synced with the parent. To do so, you can use .sync
<!-- you can use :grades="{{ grades }}" with Blade too-->
<grades :grades="grades" :selected.sync="selectedGrade"></grades>
To set default value you can update the selectedGrade variable when the document is ready, using vm.$set.
new Vue({
el: 'body',
data: {
'selectedGrade': ''
},
ready() {
this.$set('selectedGrade', this.grades[1])
}
})
I have created an example with dummy data here.

Ternary Conditional Operator not returning true/false

I have a user setting for admins that will show a delete button if they're an admin, and hide it if they're not an admin. What I'd like to say is "If the delete button is visible, the heading of this table column will say "View/Delete". If you're not an admin, the heading will say "View."" I'm also using a JS plugin called jQgrid, which is why the code is in the ColModel block. So far, it's returning true (showing "View/Delete") for everyone, even if they aren't an admin. Any suggestions? Please be nice - I'm new at this :)
, colModel: [
{ name: $(".delete:visible") ? 'View/Delete' : 'View',
The text of the header of the column of the table should have no direct relation with the value of name property of colModel. You can't dynamically change name of any column without recreating of the whole grid.
What you probably need is setLabel method which allows to change the text or attributes on any grid column. For example you can have the column {name: "view", ...} and colNames: [..., "View", ...]. To change the text "View" to "View/Delete" you need to execute
$("#gridid").jqGrid("setLabel", "view", "View/Delete");

Getting the "value" field of a jqgrid's select

I have defined a select in a jqgrid table as follows:
{name: 'station', index: 'station', editable: true, width: 60,
edittype:"select", defaultValue:"",
editoptions:{
dataUrl: "getStationList"
},
editrules: { required: true }
},
The getStationList returns something like:
<select>
<option value="id1">Station1</option>
<option value="id2">Station2</option>
</select>
With the current definition, the first time the combo is shown, the list of Station appears nicely (Station1, Station2,...) and the JSON contains "id1" when Station1 is selected.
But when the table updates it displays "id1" in the select combo instead of keeping showing the Station's list.
Is that a bug or I`m missing some configuration option? (probably the last)
Thanks!
I think you have already a problem during filling the grid. If you want to use ids instead of names you should use formatter: "select" additionally to edittype:'select' (see the documentation). In the case you will have to place ids in the grid during filling of the grid with data. I mean that input data for jqGrid sould contains id1 and id2 instead of "Station1" and "Station2". Only in the case you will be able to use dataUrl which provide <option value="id1">Station1</option>. The next problem is: you have to set editoptions.value or formatoptions.value instead of usage dataUrl: "getStationList". So the usage of formatter: "select" is relatively complex. What one can do is to send the data like {"id1":"Station1", "id2":"Station2"} as a part of main grid data. One can place {stations: {"id1":"Station1", "id2":"Station2"}} as userdata part of JSON input (see the documentation). Inside of beforeProcessing callback one could set formatoptions.value based of userdata.stations. In the way one would de facto make request to getStationList not only during editing of data, but additionally during every filling of grid.
I personally prefer to use no formatter: "select" and use selects in the form
<select>
<option value="Station1">Station1</option>
<option value="Station2">Station2</option>
</select>
In the way the client code would "know" nothing about implementation details of the representation of data. One would fill grid with the data "Station1" and "Station2" and send the same data during editing of grid. The server on the other side will get ids by the names whenever it's needed. Typically if I create "lookup" table Stations with column like "Id" and "Name" I would set
CONSTRAINT UC_Stations_Name UNIQUE NONCLUSTERED (Name ASC)
So there are unique index in the table which can get Id by Name. In the way all Update statements with Name are exactly so quickly as with Id. I use Id in all internal SQL statements, but send only Name to external source. In the way I don't need use formatter: "select".

Resources