I am using b-table on vue-bootstrap using this code:
b-table :fields="queryResult.columns" :items="queryResult.rows"
The field is like this: id, column_name, column_hide
But, it automatically generates 'translated' header name, column_name to Column Name.
Is there any way to disable 'auto-renaming' on that table header ?
According the documents, there is a label attribute that can be set on the fields prop
Appears in the columns table header (and footer if foot-clone is set).
Defaults to the field's key (in humanized format) if not provided.
It's possible to use empty labels by assigning an empty string "" but
be sure you also set headerTitle to provide non-sighted users a hint
about the column contents.
Related
In a v-data-table, I have one column with a simple text field, this column containing the text field is sortable. The problem is that when I change the value in the text field, the data is immediately re-sorted and in my case the lines change and in the worst case the line change and the focused input changes too, like in this example: codepen reproduction
For reproduction:
click on the iron header to sort the iron column
change one input
see that the line changed its position and that you're not anymore in the same field
Expected behavior:
sort the iron column
change one input
see that the line didn't change its position and you can keep modify the input
click sort again to reorder the data once you're done.
Is there a way of behaving like in the expected behavior?
Thank you very much for the answers
It looks like you should use a different event on the <v-text-field> component to listen for changes instead of using v-model to bind changes automatically to props.items.iron. Text Field Event Docs here
You could do something like using the blur event so it only updates when your user focuses away from the text field:
<v-text-field
#blur="updateIron"
:rules="[max25chars]"
label="Edit"
single-line
counter
autofocus
></v-text-field>
then in your JS file you'd add a method like this:
methods: {
// ...other stuff here
updateIron(val) {
this.item.iron = val
}
}
Try experimenting with different events to update your values at the appropriate time.
So I found the answer to that, which consist of redefining the header:
I use the slot header.iron in order to redefine a sortIron method only on click : basic demo
What I'll have to do next is to redefine arrows, style, 'asc' and 'desc'
I'm still open to other ways of doing it!
But right now I can follow my wanted behavior which is :
sort the table via the iron column
change one field
press tab, on the next field enter a value
repeat previous step until you're done
finally re-sort the table only by clicking the header
I've got a form for updating user data that populates each input with the existing field value as it is stored in the database. However, in the case of new users, certain values haven't yet been committed to the database and so I'd like the input boxes to be blank.
In order to display the user data, I'm using Jade's interpolation functionality to look at the #{user.local} object passed in via the routes.js file.
It looks like this (snippet):
input(type="text", name="firstname", value="#{user.local.firstName}")
This works well when the property is defined, but it (correctly) inserts undefined as the text in an input where the property has not been defined.
Is there a way for me to set a variable to default to something if it hasn't been set?
Something like:
input(type="text", value="#{user.local.firstName || 'Default Text'"})
Using jade ~1.9.2, I tried
input(type='text' class='form-control' id='line6Name' name='param6' value='#{device.param6||""}')
in a form I'm writing. It gives a default of an empty string for undefined values.
I'm willing to bet the code you have there would work if you shifted where the closing double quote is.
From:
input(type="text", value="#{user.local.firstName || 'Default Text'"})
To:
input(type="text", value="#{user.local.firstName || 'Default Text'}")
I have a Vue instance whose data contains an array of objects. I display this data in a table without issue.
Upon clicking the table rows, I set a "selected" property on the corresponding data object using:
key.$set('testing', testing);
Upon setting this value, I add a custom css class the the table row, without issue.
However, if I do a simple output of the entire array of objects at the bottom of the page (such as below), it doesn't get updated to reflect the new "testing" attribute I have added.
{{ gridData | json }}
I was able to reproduce my question using some modified vue.js example code in this JSFiddle:
https://jsfiddle.net/wdmatl/531axrtt/
Notice when you click on rows of data, you either see "testing" or "not testing". But this new object data isn't reflected in the json at the bottom of the page. Why not?
I want to change default header template of grid. I do not know what config or property to set. I tried "renderTpl" , "tpl" , "metaRowTpl" but these property related to row in grid, where i want to change header.
Any example or link would be great.
Like above image, I want extra header/row/column-header in between where text will come from database (and basically it is filter information).
You change the header text with the following command
yourGrid.getView().getHeaderAtIndex(columnIndex).setText('Header Text');
http://jsfiddle.net/alexrom7/YNTuN/3/
I'm using boostrap library on Yii via yii-booster
I've created a relation table view
The related view is a TbGriView itself
Vhen in a row i click on the link on the 'related' column, the row expands itself, and render a TbGridview inside it.
The problem is that the internal gridview cannot be sorte, paged or filtered, because each action on it causes that the entire container grid will empty
Note
- external grid as a id of 'extenalgrid'
- each internal grid has as id like 'internalgrid-$rowId' , so every internal grid as differnt id on div, table and table row elements.
- the action called from "render related tabel" link is using renderPartial without the postProcess option. If i use potProcess, the row will be empty
So is it not possible to rendere a full working gridview/tbgridview into a related table ?
Use different css classes for the filters, buttons and headers for the different tables. From the jquery.yiigridview.js file events are bound to selectors as $('#table-id .selector-class') so elements in your internal gridView still trigger the events bound to the external gridView. You also have to specify a different url for the internal gridView by setting it's ajaxUrl.