I used an example of bootstrap datatable to have a sortable table on my symfony project. I use datatables.net
With this javascript code :
$(document).ready(function() {
$('#datatable').DataTable();
} );
And my table in HTML :
<table id="datatable" class="table table-striped">
<thead>
<tr>...
The only problem is that I don't want all my columns to be sortable (some columns only contain a checkbox or a button for example). Moreover with this table and this javascript code I automatically have a search bar as well as Previous Next buttons and other options that appear automatically. I would like to be able to modify this default template by removing all these options that I don't need. Do you have an idea how to adapt this datatable?
Thanks in advance
You should read documentation for datatables. https://datatables.net/extensions/rowreorder/examples/initialisation/restrictedOrdering.html
Example:
// add class reorder on column, that you want to order
$(document).ready(function() {
var table = $('#example').DataTable( {
rowReorder: true,
columnDefs: [
{ orderable: true, className: 'reorder', targets: 0 },
{ orderable: false, targets: '_all' }
]
} );
} );
Related
Please help. I have been using Vue Tables 2 for > 2 years now, and I have never had this problem. My table shows up perfectly as usual, but now whenever I click on a cell, it is surrounded by a blue outline on chrome and a dotted outline on firefox. It is exhibiting the same behavior as if I had clicked on an input. I went through my Vue Tables 2 options one by one, disabling each in turn and it did not change the behavior. I looked through bootstrap 4 tables documentation, and could not find the same behavior as a option, so i believe it is vue tables that is doing it. The demo fiddle on the Vue Tables 2 page also has this behavior. It is very distracting and I am trying to get it to stop.
My goal is to have the table show the behavior it has before, which is to do nothing when you click on a cell.
I am using Bootstrap 4.4, and Vue-Tables-2 version 1.6.25
My options array looks like so
tableOptions: {
skin: 'table table-sm table-hover border-0',
filterable: true,
pagination: { chunk:4 },
perPageValues: [],
perPage: 18,
dateColumns: ['created_at'],
dateFormat: 'MM-DD-YYYY',
toMomentFormat: 'YYYY-MM-DD H:mm:ss',
texts:{
filter:"",
count:"",
filterPlaceholder:"Search",
page:"Page:",
noResults:"No matching records",
loading:'Loading...',
},
columnsClasses: {
cntCnt: 'text-center noOutline',
qtCnt: 'text-center noOutline',
statusName: 'text-center noOutline',
created_at: 'text-center ',
},
headings: {
id: 'Ref',
name: 'Name',
cntCnt: 'Contacts',
qtCnt: 'Quotes',
statusName: 'Status',
created_at: 'Created',
orgSelect: '',
},
}
I have added a picture that shows whats going on.The outline is arouns any and every cell I click, including the column headers.
That is the focus selector of CSS whose style is being applied. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
You need to override this CSS and set border to none.
You can also do this:
:focus { outline: none; }
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I am currently designing a table that was made with rc-table. I made the last row for actions which renders the buttons edit and delete. I want to edit it's style with Sass but I was unable to
I also specified classes for both the edit and delete button since they'll have different background-colors.
Is it possible to access it directly via a class? or is there another way which I don't know about.
for example if you have something like this in your code
this.columns = [
{
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
<a className="delete-btn" onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
},
];
you can add class t the a element and the overwrite those styles with your CSS/SASS.
like this
.rc-table td {
background-color: 'red';
// custom styles here
}
notice the className attribute in a.
I have just recently made a move from Adobe Flex to Sencha ExtJs.
I can't seem to find an equivalent of data binding in ExtJs where a form value depends on another form value.
e.g. I am creating an SMS window where i show the count of characters entered in a message field.
This is how i am doing in ExtJS. Also, the fiddle - http://jsfiddle.net/xxB4J/
Ext.create('Ext.window.Window',{
items: [
{
xtype: 'textarea',
fieldLabel: 'Message',
listeners: {
change: function() {
var countLabel = this.up('window').down('#lbCharacterCount');
countLabel.setText(this.getValue().length + '/160 Characters');
}
}
},
{
xtype: 'label',
itemId: 'lbCharacterCount',
text: '0/160 Characters'
}
]
}).show();
Now, in Flex this was as simple as doing
<mx:Text text="{message.text.length.toString()}/160 Characters}" />
So, just want to know if there is some sort of similar data binding in ExtJS? or the way i am doing is the only way of doing it?
Thank you
Maybe, you could use a textarea configuration:
Sencha:
maxLength and maxLengthText
or is the control field editable ?
I’m trying to create a Datagrid with editable cells.
As I am using dijits for the editable cells I try to set constraints within the “widgetProps” property of the layout, like this:
widgetProps: {
required: true,
constraints: {
min: 0,
max: 100,
places: '0,2'
}
}
Here required: true works as expected, whereas the constraints property is not working at all.
An example here: http://jsfiddle.net/LjVmJ/ where I've tried to use constraints both in a NumberTextBox and a DateTextBox.
Bug in Dojo or am I missing something?
From Oliver on the dojo mailinglist:
It should be "constraint", and it should be put outside "widgetProps".
Which solves the problem.
I found a ‘dirty’ solution to this issue:
First declare my own NumberTextBox with the required constraints:
dojo.declare(
"my.custom.PercentageNumberTextBox",
[dijit.form.NumberTextBox],
{
postCreate: function(){
this.inherited(arguments);
this.set('constraints', {min:0,max:100, places:'0,2'});
}
});
Then I’m using it as the widgetClass in the grid structure:
{
field: 'employmentPercentage',
name: 'Employment %',
type: dojox.grid.cells._Widget,
widgetProps: { required: true },
widgetClass: my.custom.PercentageNumberTextBox,
editable: true,
width: '150px'
}
This is a workaround for now (full example here: http://jsfiddle.net/LjVmJ/2/),