How to change the suppressMovable value in dynamic columns, for example, on button click
{
field: 'id',
headerName: '№',
editable: false,
suppressMovable: true,
},
Related
I have a table displaying search results with server side Pagination but when I click the columns, there is no sorting taking place and the server displays the results again for any of the column arrow clicks. Is there any way I can limit the pagination to take place only for the page arrows in the footer and then sorting to take place for the displayed results when i click the columns?
<q-table
dense
:title="Patient result"
:data="searchResultList"
:columns="columns"
:pagination="serverPagination"
row-key="name"
:no-data-label="noDataMessage"
:loading="loading"
#request="request"
>
data() {
return {
filter: '',
columns: [
{
name: 'patientId',
required: true,
label: 'patientId',
align: 'left',
field: row => row.patientId,
format: val => `${val}`,
sortable: true,
}
{
name: 'lastname', align: 'center', label: 'lastname', field: 'lastname', sortable: true,
},
{
name: 'firstname', align: 'center', label: 'firstname', field: 'firstname', sortable: true,
},
{
name: 'dob', align: 'center', label: 'dob', field: 'dob', sortable: true,
},
],
page: 1,
rowsInPage: 25,
};
computed: {
serverPagination() {
return {
sortBy: this.paginationObject.sortBy,
descending: this.paginationObject.descending,
page: this.paginationObject.page,
rowsNumber: this.patientSearchResults.count,
rowsPerPage: this.paginationObject.rowsPerPage,
};
paginationObject: {
sortBy: 'name',
descending: false,
page: 1,
rowsPerPage: 25,
methods: {
request(props) {
this.$store.dispatch('patientSearch/setPaginationObject', props);
},
Use sort-method. You can write a custom function where you can pass the rows(Not all but according to pagination i.e. if the selected page is 1 the rows will be 0-5 from your array. Here I'm guessing the default visible rows will be 5.)
Check out this API reference - https://quasar.dev/vue-components/table
In QTable API, you will find the details about this method.
I want to remove sorting from all columns in the table and want to add a Print button on top.
But when I am using below code the print button is missing:
$('#printData').DataTable({
dom: 'Bfrtip',
"paging": false,
"iDisplayLength": -1,
buttons: [{
extend: 'print', footer: true,
title:'<div style="text-align:center;">Test Report</div>'
}],
columnDefs: [{
"visible": true,
"searchable": true
}],
});
Anyone can let me know can we use columnDefs with buttons?
I am fairly new to Vue JS but have been using JavaScript for quite a while now. I have the vue2-datatable-component by onewaytech installed and have been using the Advanced Example that they have posted. The table is working correctly but am trying to have the buttons in the operations column execute an ajax call to delete the object displayed in that row. I didn't see anything in the documentation about passing the unique ID to the td-Opt so I am stuck.
You will have to use a dynamic component to make it. for example:
data () {
return {
props: ['row'],
supportBackup: true,
supportNested: true,
tblClass: 'table-bordered',
tblStyle: 'color: #666',
pageSizeOptions: [5, 10, 15, 20],
columns: [
{title: '#', field: 'uid', sortable: true},
{title: 'Date', field: 'date_at', sortable: true},
{title: 'Nombre', field: 'name', sortable: true},
{title: 'Precio', field: 'total_price', sortable: true},
{title: 'Action', field: 'action', tdComp: 'Opt'},
],
data: [],
total: 0,
selection: [],
query: {},
}`enter code here`
},
Where Opt:
import actionItem from "../xxx.vue";
import DisplayRow from "../Utils/nested-DisplayRow.vue";
components: {"Opt": actionItem, , 'DisplayRow': DisplayRow},
So in your ActionItem component you can create your component, that component will be your row action.
I have one formpanel which is present inside other form panel, and inner form panel having text field. when user tap on the device go button after entering some value into textfield, its trying to submit. but i don't want to submit the form on go button tap.
here is my code :
Ext.define('Test.view.FormPage', {
extend: 'Ext.form.Panel',
xtype: 'formPage',
config: {
standardSubmit: false,
submitOnAction: false,
items: [{
xtype: 'formpanel',
standardSubmit: false,
submitOnAction: false,
height: 300,
items: [{
xtype: 'textfield',
label: 'name',
name: 'name',
value: '',
placeholder: 'name'
} ]
} ]
}});
i am using sencha 2.3.1.Please provide some idea how to fix this issue.
True you are getting this result, as there are two imput type submit buttons.
If you do not need the submit buttons you could create your own formpanel with
getElementConfig: function() {
var config = this.callParent();
// add this line if you extend from formpanel
config.children.pop();
//<---------
return config;
}
Then it won't bother you. But there will be no more input with type submit!
data-bind="koGrid: { data: ViewModel.statistics,
columnDefs: [ { displayName: 'Name', field: 'toName', sortable: true, headerTemplate: 'TmplStatsHeader', headerClass: 'left15 ' },
{ displayName: 'Email', field: 'email', sortable: true, headerTemplate: 'TmplStatsHeader', headerClass: 'left30 ' },
],
I have a ko grid my column definition is above
I have to show Email (second column) only based on some condition.
You have to use Cell Template to change/show the cell value based on other property.