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>
Related
Im passing the property to vue-good-table :select-options="{enabled: true}" to show checkbox for each row. I want to conditionally override this for certain rows. For example, if the column 'isAuthorized' has the value false, the checkbox should not be shown for that row. How to achieve this? Should I implement custom checkbox under <template slot="table-row" slot-scope="props">? Is there a built-in feature available in vue-good table?
I ran into same issue and found a way:
You can set vgtDisabled:true on the rows that should not be selectable.
Similarly, you can set vgtSelected:true for the rows that should be already checked by default.
I found by looking into source of the component here:
https://github.com/xaksis/vue-good-table/blob/d2d0a781ed823c40a3bf14efceac82626e48d67c/src/components/Table.vue#L238
I'm looking for a way to conditionally hide the row selection column in the DataTable component, for example I want to render it if I have a certain prop passed:
<DataTable>
<Column v-if="propName == true" :selectionMode="selectedMode" headerStyle="width: 3em"></Column>
</DataTable>
However, when I try to do the above my table randomly renders 4 empty columns instead.
screenshot of what I want to conditionally hide
what happens when I try to do use the v-if directive
Eventually I managed to fix it using CSS styling to conditionally hide the column I want.
:style="useRowEditing === false ? 'display: none;' : ''"
Just added this to the column and passed an additional property to the column in my arrays.
I am configuruing my devextreme datagrid. I have to use both muliple selection and rowfocus together. I am able to limit selection on selection column checkbox only , so that I dont select a row if I click anywhere in the grid, It always have to be the selection checkbox. Now to include row focus it's creating a problem, when ever I am clicking selection checkbox it's focusing the row first, I have to click on it again to achieve row selection. So how do I prevent row focus event on selection checkbox column?
Refer below configuraion: -
<dx-data-grid :allow-column-reordering="true"
:allow-column-resizing="true"
:column-fixing="{enabled: true}"
:columns="config.columns"
:data-source="groupTypes"
:ref="ref"
:rowAlternationEnabled="true"
:show-borders="true"
#toolbar-preparing="onToolbarPreparing($event)"
key-expr="entityId"
:focused-row-enabled="true"
:focused-row-key.sync="focusedRowKey">
<dx-selection :select-all-mode="selectionMode"
mode="multiple"
show-check-boxes-mode="always"/>
</dx-data-grid>
I removed the :column-fixing="{enabled: true}" porperty from data grid, Now it's working
in my application i have a simple loop on tr element, to build a table:
<tr v-for="user in users"></tr>
Because i'm using an accordion, i will need two rows (the first row generated with v-for and another row that is the accordion):
<tr></tr> Generated with v-for
<tr></tr> Row for accordion
<tr></tr> Generated with v-for
<tr></tr> Row for accordion
So, v-for iterate the collection and for each row, i have another row (that is the accordion).
I would like build the "additional row" when the user click on the row generated via v-for.
So, how i can "attach" this row below the selected row ? I have think to use slot, but i'm a bit confused...
And, when the user click on another row... the previous attached row should be removed and the next one, will be attached on the selected.
In short, the same behavior of Bootstrap Accordion.
I need this because in this way i can load the accordion content "on demand".
Try wrapping them both around a <template> element as such :
<template v-for="user in users">
<tr></tr> Generated with v-for
<tr></tr> Row for accordion
</template>
The <template> element will not be rendered.
Let me first be clear. I'm not asking about how I do conditional formatting in Cognos BI. If there were a simple Red/Amber/Green colour scheme, based upon value ranges then I could do that. If it were a static list of colours, which never changed, I could also do that.
What I am after is accessing a hex colour code that is stored in my database, and I want to use that colour as my table cell background colour. This is something I commonly do in SSRS reports, but cannot see a method for in Cognos BI.
Is this even possible?
You can do this via the HTML object in Cognos.
The HTML object can get its definition from one of the three main ways:
1) Hard-coded text
2) Data Item Value
3) Report Expression
Obviously the first method provides no way to dynamically set the value. I couldn't get the second one to work at all. I'm not yet sure why. However, I was able to use the third type to work to allow dynamic setting of a visual style.
For the solution we'll assume you have a data item called [Color] which pulls a string value from a database in the standard hex form that is used in CSS: #xxxxxx, e.g. #CCCCCC. For the purpose of this example we'll assume it is in query Query1. The following steps describe how to set it up.
1) Add an HTML item right above your list
2) Add another HTML item at the bottom of your list
3) In the top HTML item add a span tag with a unique id such as:
<span id="list">
4) In the bottom HTML item add a closing span tag
</span>
5) Add a third HTML item before all of the other HTML items
6) Set the 'Source Type' property of the HTML item to 'Report Expression'
7) In the Report Expression put the following code:
'<style>
#list td {
background-color: ' + [Query1].[Color] + '
}
</style>'
8) Select the Page object and set the Query property to Query1
9) Click on the Properties property. Check the Color column to give the page access to that query-sourced value.
Now you can dynamically set the column color based on a database provided value. We used the span to give us a way to isolate just the table cells we want to manipulate.
The technique isn't perfect. For instance, the header cells also get their background changed to the color in question, which may or may not be desirable. This is because Cognos doesn't use the th tag for headers but instead renders them as normal cells (td).
I know it's quite and old post but just for completeness I'll add the references to get this working in html, pdf and excel.
To get this working not only for html but also for pdf and excel use a rich text item instead of a html item.
You can use following code in a query item for instance:
<span style="display:block; background-color:' + [Query Subject].[Query Item] + '"> </span>
The query item must then contain a valid color (e.g. rgb(255,0,0)) etc. which is defined by your data source.
Dragging a rich text item in a list and changing it to data item value and selecting the query item will work.
By using the span it will work for excel too, however to make sure it follows the size of the upper object in the hierarchy (the list column or a table etc) you want the display:block style.
Instead of the space in between the > < you can use any other query item that you want to appear as text.