I am creating form which has a dropdown feature that is currently pulling items (titled allDropdownTypes) from a table in my database. I've created this component using Vuetify, so it is in the following format:
<v-card>
<v-container>
<v-select
:items="allDropdownTypes.map(a => a.value)"
label="Project Type"
>
</v-select>
</v-container>
</v-card>
How can I create a way for users to add a new entry into the DB table through adding to the dropdown list?
Visually, alongside the options already given there is a + icon at the bottom of the dropdown list which will turn into a text box which the user can then submit and it will enter that option into the DB.
Related
I have a v-select dropdown (vuetify), which are a list of time-slots with 15 minutes interval
['00:00','00:15'...'23:55']
Let us call it startTime which is pre-defined to f.x '12.00' and is binded with v-model to data.
The issue here is, when i click on startTime the dropdown is not automatically scrolled to the selected value, i have to manually scroll down.
But WHEN i click a other value f.x 13.00 - and now when i click the startTime - it will automatically be scrolled to the selected value.
Here is a example of this behavior in code-pen
https://codepen.io/Hoxi/pen/QWBXwVB
Here is a example which shows that it works if i select a value, now the dropdown will be scrolled into the selected value.
So the issue is when the value is pre-selected, v-select wont be scrolling into the preselected value
Related issue:
https://github.com/sagalbot/vue-select/issues/1169
I think menu-props="auto" can help you
<v-combobox
v-model="select"
:items="items"
menu-props="auto"
label="Select"
persistent-hint
return-object
single-line>
</v-combobox>
When using the Vuetify v-data-table element set to allow scrolling, is there a way or setting that would cause the results to scroll back to the top when clicking to the next page of results? By default when you click to show the next 10 records after having scrolled down you have to manually scroll back up to start looking at record 11, etc.
<v-data-table
:headers="headers"
fixed-header
:height="height"
:items="invoices"
item-key="id"
:search="search"
class="elevation-1"
:loading="loading"
loading-text="Loading...please wait..."
no-data-text="No invoices needing approval."
no-results-text="No invoices found for your search."
>
If you use vuetify 2.0 you can try something like but this event also triggers when you change count per page:
<v-data-table
ref="dataTable"
#update:page="$vuetify.goTo($refs.dataTable)"
...
The following prop worked fine for me:
#update:page="$vuetify.goTo(0)"
How do I identify the cell selected in a Quasar table?
My goal is that once I identify the cell selected, if the user clicks on a custom button, I pass the selected cell information to a pop up page.
Note I'm not using the row selection checkboxes.
we want to be able to select multiple cells from a given column in a quasar table. I believe that this will take a custom selection capability.
You can archive the selection using the data index. Please refer the following codepen for multiple row selection.
https://codepen.io/anon/pen/PrNBpV
And for cell selection refer this.
https://codepen.io/anon/pen/gNrdyL?editors=1010
try this
<q-td key="desc" :props="props" v-for="col in props.cols" :key="col.name" #click.native="selectRow(props.row.__index,col.name)" :class="selected.hasOwnProperty(props.row.__index) && selected[props.row.__index].indexOf(col.name)!=-1?'bg-grey-2':''">
{{ props.row[col.field] }}
</q-td>
I create one data table with option select-all, in each row in my table I add one event in checkbox
<v-checkbox
primary
hide-details
v-model="props.selected"
#change="selecionarPedido"
></v-checkbox>
So It`s possible to put a event in seletAll checkbox (that checkbox in the header? or an envent in v-checkbox that fire when the select-all change the value?
Here is the code below,
driver.findElement(By.id("ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry_B-1")).click();
driver.findElement(By.id("ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry_I")).sendKeys(sh.getCell(2, 2).getContents());
i have tried out the below code still not working:
Select sel= new Select(driver. id( "ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry_B-1" ));
sel.SelectByVisibleText(sh.getCell(2, 2).getContents());
For text field type it's working fine. Only for List fields it's not importing.
HTML CODE BELOW:-
<input type="text" style="color:#555555;font-family:Arial,Helvetica,sans-serif;cursor:default;" readonly="readonly" onkeypress="aspxEKeyPress('ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry', event)" onfocus="aspxEGotFocus('ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry')" onblur="aspxELostFocus('ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry')" onchange="aspxETextChanged('ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry')" id="ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry_I" value="--Select--" name="ctl00$ContentPlaceHolder1$cbpAssociationNew$panelAssnDetailAdd$Industry" class="dxeEditArea dxeEditAreaSys " autocomplete="off">
HTML LINK:-
https://docs.google.com/document/d/1fZ-YuuYXlrJzFbRJ_oPOMycdMlloS66dPIYe6TJDfas/edit?usp=sharing
From what I can see from the HTML code snippet, this is not a simple Select dropdown that can be worked out using Select class. It consists of tables and table elements.
So, to resolve this you've to do things:
1- Click on the dropdown table using the below code:
driver.findElement(By.id("ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry_I")).click();
2- Click on the dropdown item that matches the text so fetched from the sheet using below:
driver.findElement(By.xpath("//td[#class='dxeListBoxItem' and contains(text(),'"+sh.getCell(2,2).getContents()+"')]")).click();;
OR try using "Action class":-
1- Click on the dropdown table using the below code:
Actions act = new Actions(driver);
act.moveToElement(driver.findElement(By.id("ctl00_ContentPlaceHolder1_cbpAssociationNew_panelAssnDetailAdd_Industry_I"))).click().perform();
2- Click on the dropdown item that matches the text so fetched from the sheet using below:
act.moveToElement(driver.findElement(By.xpath("//td[#class='dxeListBoxItem' and contains(text(),'"+sh.getCell(2,2).getContents()+"')]"))).click().perform();