I have a dynamically filled datatable with fixed columns and scrollX enabled:
$('#products').DataTable({
"data": formattedData,
"scrollX": true,
"fixedColumns":{ "leftColumns": 0, "rightColumns": 1 }
});
The problem is, I need the columns to stop automatically calculating their width. Even if I try to force them on initialization...
$('#products').DataTable({
"order": [[ 0, "asc" ]],
"columnDefs": [
{ "title": "Name", "targets": 0, "width": "350px" },
{ "title": "Code", "targets": 1 },
{ "title": "Regular code", "targets": 2, "width": "500px" },
{ "title": "Special code", "targets": 3, "width": "300px" }
]
});
... if scrollX is enabled, the scrolling is enabled just if the columns are too small. And I want the scrolling enaled always, and the columns not changing their width.
Any idea about how to force the column width?
The same question was asked here but has no answer: https://datatables.net/forums/discussion/31403/scrollx-not-work-with-fixed-column-width
First disable autoWidth -> https://datatables.net/reference/option/autoWidth
In my humble opinion columns.width are useless to anything than relative percentages. Define minimum column widths in CSS instead
#products td:nth-child(1) { min-width: 350px; }
#products td:nth-child(3) { min-width: 500px; }
#products td:nth-child(4) { min-width: 300px; }
http://jsfiddle.net/f8uw6rLy/
Related
I need to have my vscode highlight specific words so I can leave different notes in the code and easily see them when I need to, for example: Note: with the color green and DEBUG with color red and so on.
Download and install TODO Highlight extension. After you download and install the extension, make sure you restart your VSCode. Now please follow the following steps in order to add custom keyword highlighting in your code.
On windows hold down Ctrl + Shift and on mac Command + Shift,
then press the key P.
a command line opens up.
On the command line type "open settings" and click on
"Preferences: open settings".
Settings window will open.
under the "search setting" input on the right handside look for the
three dots "..." and click on it.
Click on "Open settings.json".
"User Settings" tab will open.
It contains a split screen window. on the left side you see the defualt settings and on the right side you see the user settings
in the "search settings" type "todohighlight.keywords"
you will see "todohighlight.keywords": [].
Hover over it with your mouse
a little pen will show up on its left side
click on it
you'll see a drop-down select menu opens.
click on "Replace in settings".
you can now see "todohighlight.keywords": [] in the right pannel window (USER SETTINGS).
This is an array that contains json objects such as following:
"todohighlight.keywords": [
{
"text": "todo:",
"color": "#000000",
"backgroundColor": "DarkKhaki",
"overviewRulerColor": "DarkKhaki",
"border": "1px solid DarkKhaki",
"borderRadius": "3px",
"isWholeLine": false
},
{
"text": "note:",
"color": "#000000",
"backgroundColor": "#72824E",
"overviewRulerColor": "#72824E",
"border": "1px solid #72824E",
"borderRadius": "3px",
"isWholeLine": false
},
{
"text": "System.debug",
"color": "#000000",
"backgroundColor": "STEELBLUE",
"overviewRulerColor": "STEELBLUE",
"border": "1px solid STEELBLUE",
"borderRadius": "3px",
"isWholeLine": false
},
{
"text": "system.debug",
"color": "#000000",
"backgroundColor": "STEELBLUE",
"overviewRulerColor": "STEELBLUE",
"border": "1px solid STEELBLUE",
"borderRadius": "3px",
"isWholeLine": false
},
{
"text": "console.log",
"color": "#000000",
"backgroundColor": "STEELBLUE",
"overviewRulerColor": "STEELBLUE",
"border": "1px solid STEELBLUE",
"borderRadius": "3px",
"isWholeLine": false
},
{
"text": "|DEBUG|",
"color": "#000000",
"backgroundColor": "#72848A",
"overviewRulerColor": "#72848A",
"border": "1px solid #72848A",
"borderRadius": "3px",
"isWholeLine": true
},
{
"text": "attention:",
"color": "white",
"backgroundColor": "red",
"border": "1px solid red",
"borderRadius": "3px",
"isWholeLine": false
},
{
"text": "debug:",
"color": "white",
"backgroundColor": "red",
"border": "1px solid red",
"borderRadius": "3px",
"isWholeLine": false
}
],
"todohighlight.include": [
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx",
"**/*.html",
"**/*.php",
"**/*.css",
"**/*.scss"
],
"todohighlight.exclude": [
"**/node_modules/**",
"**/bower_components/**",
"**/dist/**",
"**/build/**",
"**/.vscode/**",
"**/.github/**",
"**/_output/**",
"**/*.min.*",
"**/*.map",
"**/.next/**"
]
If you're not familiar with json notation copy the content of "todohighligh.keywords" from the sample above and past it to your "user settings" window in between the two [] brackets. you can change the values on the left side of : colon in between "" double quotes. if you would like to add more than two keywords simply add a comma after the last closing curly bracket } in your "user settings" and copy/past one json object (which is from one { open bracket to the first closing } bracket) and then change its content. you can add as many keywords as you'd like to.
MAKE SURE YOU SAVE THE FILE by holding down Ctrl(windows) / command(mac) and press the key "s" or from the menu bar go to File ->
Save
Edit Jun/2021 It's been a while since I published this post. I've updated the sample for more detailed highlighting. Post your comments down below if you need clarifications. Cheers!🍻
Edit Jun/2022 I've added both "todohighlight.include" and "todohighlight.exclude" keys with some sample values for, files/file name patterns, to include and exclude on the highlighting. Cheers!🍻
My answer may not apply your scene, but if someone wants to highlight any word,I prefer this plugin:
The following options can be configured
highlightwords.colors: this is an array of light/dark pairs for respective theme types, you can have as few or as many as you like
highlightwords.box: show highlights as a box around the selections if true, set highlight as background color if false
highlightwords.defaultMode: the initial mode when initialized. 0=default, 1=whole word, 2=ignore case, 3=whole word and ignore case
highlightwords.showSidebar provides a view in the explorer window for searching, changing options and removing highlights
I want to use ag-grid in my angular 5 application
but I am unable to use as it throws an exception in my console.
My component code:
columnDefs = [
{headerName: "First Name", field: "first_name", width: 100, editable: true},
{headerName: "Last Name", field: "last_name", width: 100, editable: true},
{
headerName: "Gender",
field: "gender",
width: 90,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Age",
field: "age",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Mood",
field: "mood",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Country",
field: "country",
width: 100,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Address",
field: "address",
width: 502,
cellEditor: 'mySimpleCellEditor'
}
];
rowData = [
{
first_name: 'Bob', last_name: 'Harrison', gender: 'Male',
address: '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401)
747-0763',
mood: "Happy", country: 'Ireland'
},
];
My html code:
<div>
<ag-grid-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="rowData"
enablecolresize
enablesorting
enablefilter
rowheight="22"
rowselection="multiple">
</ag-grid-angular>
</div>
My app.module.ts code:
import { AgGridModule } from "ag-grid-angular/main";
imports: [
AgGridModule.withComponents([])
],
I am still getting the below error in my console and I am unable to run my application.
(anonymous) # bootstrap.min.js:6
compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'columndefs' since it isn't a known property of 'ag-grid-
angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'columndefs'
input, then verify that it is part of this module.
2. If 'ag-grid-angular' is a Web Component then add
'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to
suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas'
of this component. ("id-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[ERROR ->][columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="): ng:///AppModule/GridtestComponent.html#3:21
Can't bind to 'showtoolpanel' since it isn't a known property of 'ag-
grid-angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'showtoolpanel'
input, then verify that it is part of this module.
I tried almost everything but still not able to resolve this issue.
How about instead of using...
[columndefs]="columnDefs"
[rowdata]="rowData"
You use...
[columnDefs]="columnDefs"
[rowData]="rowData"
Also, basically nothing - except address - in your rowdata matches the field names of your headers. AgGrid won't render data when it has no matching header for those. Please don't try to simply insert code at random. The main page has an easily accessible Get Started page.
You need import in app.module this:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '#angular/core';
#NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
],
...
I set a value in settings_data.json of Shopify Config.
And I am trying to insert it into my CSS.
settings_schema.json
...
{
"type": "image",
"id": "image1.png"
"label": "Background Image"
}
...
index.liquid
...
<style>
.div {
background-color: url({{image1.png}});
}
</style>
But I can't get the background image.
How can I fix?
You have to use a filter for the image in order to show the full URL address:
For example: {{ image1.png | img_url: 'medium' }}
To get a value of the store settings you need to call the settings object. Also in your schema it seems that the id contains the value and a comma is missing. Double check this.
settings_schema.json
...
{
"type": "image",
"id": "image1", // Name of variable
"label": "Background Image",
"default": "image1.png" // Content
}
...
index.liquid
...
<style>
.div {
background-color: url({{ settings.image1 }});
}
</style>
I have used DataTables in several web2py apps with little trouble (after the learning curve), but I am working on a new app and cannot seem to get the columnDefs to set the column widths. Here is the javascript in the page's HTML:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#list').dataTable( {
searching: true,
displayLength: 10,
lengthChange: false,
paging: true,
columnDefs: [
{"width": "15%", "targets": 0 },
{"width": "15%", "targets": 1 },
{"width": "10%", "targets": 2 },
{"width": "5%", "targets": 3 },
{"width": "10%", "targets": 4 },
{"width": "10%", "targets": 5 },
{"width": "5%", "targets": 6 },
{"width": "5%", "targets": 7 },
{"width": "20%", "targets": 8 }
]
});
});
All the other options (searching, displayLength, etc.) work as advertised, so I know the function is working, but I've tried about a hundred different things to make the column widths change, to no avail. I get the same lack of response using the columns option, or going back to the legacy aoColumnDefs. There are exactly 9 TH elements and 9 TD elements, so I know there's no mismatch there and there is, in fact, a table with an id='list'. Using Datatables 1.10.11.
Sorry for this seemingly elemental problem; I will appreciate any help or insights as to what I'm doing wrong here.
I am currently implementing the same kendoui grid as showing in the following:
http://demos.kendoui.com/web/grid/index.html
The problem that i can see is that the grid does not have auto height where if the record less than 10, the grid still in the same height.
Is there anyway i could resolve this since this one not happening when we use the previous version
I tried using the following javascript but still not working:
function resizeGrid() {
var gridElement = $("#grid");
var dataArea = gridElement.find(".k-grid-content");
var newGridHeight = $(document).height() - 350;
var newDataAreaHeight = newGridHeight - 65;
dataArea.height(newDataAreaHeight);
gridElement.height(newGridHeight);
$("#grid").data("kendoGrid").refresh();
}
$(window).resize(function () {
resizeGrid();
});
Thank you
Not sure I understand your problem because the Grid actually has an autoheight. If in the definition of the Grid you define an attribute saying the number of pixel that grid should have, it will stick to that height no matter it it has 5 or 50 records. If it actually needs more space will add a scrollbar and if it need less, it will display the empty space.
In the example that you refer in your question try:
$("#grid").kendoGrid({
dataSource: {
data : createRandomData(20),
pageSize: 10
},
height : 500,
groupable : true,
sortable : true,
pageable : {
refresh : true,
pageSizes: true
},
columns : [
{ field: "FirstName", width: 90, title: "First Name" } ,
{ field: "LastName", width: 90, title: "Last Name" } ,
{ width: 100, field: "City" } ,
{ field: "Title" } ,
{ field : "BirthDate", title : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
{ width: 50, field: "Age" }
]
});
And the height will be 500px.
You can use css in order to draw a grid that will keep its height adjusted to its container, as well as considering other elements around:
#grid {
/* chop the grid's height by 45px */
height: calc(100% - 45px);
}
#grid .k-grid-content {
/* chop the grid content's height by 25px */
height: calc(100% - 25px) !important;
}
This is done without using the 'height' property in the grid's declaration (at the .js side).
Works fine for me.
Remove height: 500
$("#grid").kendoGrid({
dataSource: {
data : createRandomData(20),
pageSize: 10
},
groupable : true,
sortable : true,
pageable : {
refresh : true,
pageSizes: true
},
columns : [
{ field: "FirstName", width: 90, title: "First Name" } ,
{ field: "LastName", width: 90, title: "Last Name" } ,
{ width: 100, field: "City" } ,
{ field: "Title" } ,
{ field : "BirthDate", title : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
{ width: 50, field: "Age" }
]
});
For me, removing scrollable did the trick.
If there was only one row, the grid was small, and grew together with the amount of rows up to the pagesize level.
No height setting needed.