Develop Reference

How to resize columns in ag-grid

I am new to ag-grid. As seen in the screenshot below, I have 4 columns initially. When I remove column 3 (test3), notice that there is space on the right that indicates that a column in missing. How can I ensure that once a column is removed, that the remaining 3 columns (in this case) will fill the area? I tried to pass resizable : true into defaultcolDef but that did not fix the issue...
Intial View
View once Test 3 column is filtered out

Use flex: 1 on each column.
See the documentation here for more info: https://www.ag-grid.com/javascript-data-grid/column-sizing/#column-flex
Or checkout this plunker example: https://plnkr.co/edit/7evoWXCM1sChDBmX
Just drag one of the columns out of the grid to see it working

You can use the columnVisible-event to catch any columns added or removed
https://www.ag-grid.com/javascript-data-grid/grid-events/#reference-columns-columnVisible
and then call
gridOptions.api.sizeColumnsToFit();
https://www.ag-grid.com/javascript-data-grid/column-sizing/#size-columns-to-fit

DataTables, Cleaner and Dynamic Column Headers

I am using the data table that has filtering and search but find the headers so dirty. I know that its because the value of the column for example. Blood Type is C, C is only one letter thus the apperance of the header of the column becomes distorted.
How do I prioritize header name over value of its column when it comes to resizing of the header width? Please see the table shot below.
How do I remove the sorting button(up and down arrows). or how do I change it? I still want the sorting but the diamon thing is so unclean to look at.

(1) To prevent word wrapping in the heading, replace the spaces with non-breaking spaces. You can use the following HTML code: .
Logged (Last 4)
(2) To hide the triangles (which are background images), you can use the following CSS selectors, following your table definition.:
$(document).ready(function() {
var table = $('#yourtableidhere').DataTable( {
// your table definition here
} );
// as well as hiding the triangles, you may also
// want to set the cursor behavior, for consistency:
$("th.sorting, th.sorting_asc, th.sorting_desc").css({
'background-image': 'none',
'cursor': 'default'
});
} );
(It may be confusing to some users, if they can no longer see these triangles.)

Make jqGrid's cb column wider

I'm using free-jqGrid and jqGrid has the option to place selection checkboxes for you onto the grid. On my grid I have two columns in the beginning which is placed by jqGrid and not backed up by my own data: a record number column 'rn' and the checkbox for record selection 'cb' (multi select in my case).
I feature the jqGrid on a bootstrap website, so when the loadComplete event hits, I add 'from-control' class to a lot of edits, like the per column search boxes and basically every edit I can find on the page. (I also replace every ugly little icon to glyphicons. I manipulate the DOM of the toolbar buttons so they become real buttons, so they look nicer and chardin.js work well for example. And so on and on and on. The end result is much better than the original. BTW, I'm not sure if that's the best practice, I couldn't find a better way to make jqGrid more bootstrappy, but this can be another question).
When you apply form-control class to a checkbox, it bloats up. That's beneficial, because it's much easier to click on it, you don't need to have a magnifier glass (like for the original tiny checkbox). I can nicely resize the columns for all those data columns what I supply data for, but I cannot figure out how to widen the cb column so it can accommodate the bloated up checkbox.
I tried adding a configuration for that column in my colModel:
Both
{
name: 'cb',
width: 38,
align: 'center',
sortable: false,
}
and
{
width: 38,
align: 'center',
sortable: false,
}
failed, I got an error from jqGrid stating that the number of colModels doesn't match the number of supplied data. That's true, because the data behind the cb column is not backed up by me.
I tried in the loadComplete
var $ajaxGrid = $("#ajaxGrid");
$ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
That didn't give me an error, but also didn't change anything. Maybe I should put it into another event handler? Which?
Then I tried to go down the rocky road of manipulation:
$("#ajaxGrid_cb").css("width", "38px");
$(".td_cbox").css("width", "38px");
As you see I separately widen the header and the td elements. But this causes the table horizontal scrollbar to appear. Yuck! I tried to tumble deeper into the hacking hole, and make a wider column on the grid narrower to make the scrollbar disappear, but this didn't help:
$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");
There must be a way. Now it's ugly. Screenshot:
(Another style problem you can also see is for the Combined column I specify align: 'center' in the colModel but it has no effect.)

You can use multiselectWidth to specify the width of the multiselect column:
multiselectWidth: 38
One more alternative: you can change the columns width later using setColWidth which is the part of free jqGrid. I introduced the method originally in the answer as plugin to old jqGrid versions. Thus the following, for example, will work too:
onInitGrid: function () {
$(this).jqGrid("setColWidth", "cb", 38);
}
The onInitGrid callback or jQuery event "jqGridInitGrid" are good place, where you can modify the grid before the data will be loaded.
P.S. I'm working now on including better support of Bootstrap in free jqGrid. Probably you will just need to use guiStyle: "bootstrap" in the next version of jqGrid to make jqGrid be "in Bootstrap style".

Highcharts: column overlaps when hiding by legend

I have a problem with highcharts. I have a set of columns for a single category, and when i start hiding the columns using the legend names it starts to show a strange behaviour for example my default chart is as follows:
After I start hiding columns it starts overlapping, the columns that should be visible act like the are, but the others stay there. Is there any known bug?
PS: I'm using highcharts-ng, all the series are added dynamically.

I don't know if it is a known bug, but you can try to fix the space between two columns using something like:
plotOptions: {
column: {
borderWidth: 1,
pointPadding: 0,
groupPadding: 0,
/* ... */
},
/* ... */
}
Do you still have the overlapping with those options ?

Found the issue after digging a bit on our code. We had somewhere in our css
rect{
visibility: visible !important;
}
this was preventing non-visible columns to hide properly.

Avoid a column in panel - extjs

I have created a panel and have 2 columns. Both the columns have many rows. On left side column there is a label in each row and on the right side column there are text fields in each row. In one of the rows I need a blank left column record and checkbox on the right side.
But when I leave a blank items value
Ext.create('Ext.panel.Panel', {
layout: {
type: 'table',
columns: 2
},
items: [
{ xxxxx},
{ xxxxx},
{},
{xxxxx}
]
}
In place of this empty {}, I am getting a thin blue line, whereas I need a blank row.
How do I obtain this (remove the thin blue line)?
Using firefox I found the id of the div element and wrote display:none but that works only for firefox not for IE.
I need a solution which is browser compatible.

If you have an empty string, and set the border to false, then that should get rid of that blue line :
{
border:false,
html: ' ',
}
Here is an example in jsfiddle :
http://jsfiddle.net/xj363e7f/1/