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".
Related
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.)
I am working the (fantastic) jQuery DataTables plugin and have begun to use the 'Responsive' extension so that it responds well on varied devices etc.
It is working fine however it adds some buttons to allow each row to be expanded to show the columns which have been hidden.
However, this is actually really annoying since it shows all the columns I have deliberately not shown as well as not looking ideal (imho).
Does anybody know how to remove these buttons?
Cheers,
Jack
I did a bit more or an intensive search of the docs and found that these 'expanded rows' are refered to as child rows and can be disabled as follows.
Initially I simply included the
"responsive": true,
tag in my datatables. These child rows may be disabled with:
"responsive": {
"details": false
},
I thing you can override the CSS style of this button and hide it from user:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
display:none
}
Change also the padding of the cell:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {
padding-left: 10px; /* Instead of 30px */
}
I'm novice in ExtJS ... but
I can't solve my problem with two buttons, let's say [B1] and [B2].
On simple toolbar I want to have two buttons on the SAME place
respectively on something (let's say 20 pcx from the left on the
toolbar) displayed alternately [B1] or [B2] on the same position.
Buttons are defined as:
xtype: 'toolbar',
dock: 'bottom',
height: 30,
items: [
[B1] is filefield button:
xtype: 'filefield',
itemId: 'FFId',
buttonOnly: true,
...
[B2] button (in fact used as pull down menu button):
xtype: 'button',
iconAlign: 'right',
...
]
When buttons are simple buttons boyh situation is the same. I tried
to hide/show them the following way:
on the base of hidden property and method setVisible() they are no
in the same place, they are displayed "side by side" (I mean e.g.
[B1] place is empty and on the right side [B2] is displayed)
on the base of style: 'visibility: ...' - the same situation
on the base of style: 'display: ...' almost good, both buttons
are displayed the same place but (left 20 pcx the toolbar)
lower in the toolbar so I see half of both of them
Have you any suggestions?
Thanks in advance!
Try using the property hidden: true.
And for changing the state after it is rendered use the functions .hide(), .show() or if you want to use the same function for both .setHidden(boolInput) where boolInput is true if you want to hide the button, and false if you want to show it.
Edit for clarification:
I assumed you to be wanting to show only one button at a time, and have which ever button is showing at any given time be displayed in the same location. Is that what you wanted, or something different?
Here is a working example of what I understand you are looking for:
https://fiddle.sencha.com/#fiddle/nvn
For your third option style: 'display: ...', you can try set margin and padding configuration to adjust the position of buttons.
I am using jquery datatable (example).
I want these changes:
I want to change the options of show entries dropdown.
I want to use show entries, search and paging footer in some different div (other than the div in which my table reside). Want to keep them apart as these are always keep sticking to the table.
When I use paging the table shoud not move. It shoud be fix in boundaries.
I want to change the options of show entries dropdown.
Use the aLengthMenu parameter:
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
I want to use show entries, search and paging footer in some different
div (other than the div in which my table reside). Want to keep them
apart as these are always keep sticking to the table.
Use the sDom parameter. You can inject divs and customize existing ones with custom classes.
When I use paging the table shoud not move. It shoud be fix in
boundaries.
Add fixed width and height to your table.
If you check examples and options reference you will surely find your answers. This, this and this may help you with point 2.
I'm building a pretty basic HTML table creator/editor (based on a designMode iframe) at work, using direct DOM manipulation. It's a pain, obviously due to Internet Explorer.
When in designMode, a table inserted into the editing area iframe is resizable and the contents of the cells can be freely edited. In Firefox, rows and columns can also be added and removed. I'm currently focused on editing border widths, foreground and background colors and other things that require DOM work.
The trouble is the lack of proper DOM Selection/Range functionality in IE6/7. I'm unable to find the containing nodes for several simultaneously selected cells. For a single cell it's doable with parentElement, but for several selected cells, parentElement is the TR node that houses the TD cells. I can't figure out how to extract node references to only those TD cells inside that TR that have been selected, due to lack of anchorNode, focusNode and the various offsets that W3C DOM provides.
I've already got the table creation and the style modification for individual cells as well as groups of selected cells implemented for W3C compliant browsers, but I'm completely stuck with the IE implementation. Could jQuery help me? I've never used it, but it seems intuitive enough that it will take less time to master than it will to figure out how to do this with the IE DOM alone.
There are three basic style modification scenarios that need to work:
A table cell that has not been explicitly selected with Ctrl/Cmd-clicking, but has the text cursor inside it, must have its background color changed. The cell may have formatted text or other parentNode/childNode-relationship complicators in it.
Several explicitly selected table cells (Ctrl/Cmd-clicked, Shift-selected or just "painted over" with the mouse) must have their background colors changed. This has to work for contiguous rectangular selections as well as for scattered, individual selected cells.
Table-level modifications (border width, color etc.) for the "selected table" need to be possible. That is, in the case of several tables in the editing area, the modification will take place for one or more tables that either have cursor focus (scenario 1) or have selected cells in them (scenario 2).
In Firefox, I already have the code for all three scenarios working. Now I need a cross-browser solution. Can anybody help me?
(IE's problems with selections and ranges have been discussed here before, but not in the context of jQuery. I found these at a glance: 164147, 218043, 235411)
If I understand you properly, you want the general code for selecting table cells, and changing properties (CSS attributes) for the selection.
You can do this easily in jQuery.
var curTableCell = null; // "Softclicked" - not part of the selection (1)
// We call this in the click event below. You'd probably want this for keyboard events as well (for arrow key nav, etc.)
function softclick(element) {
$(curTableCell).removeClass('softclicked');
curTableCell = element;
$(element).addClass('softclicked');
}
$('td, th').click(function() {
if(keyHeld) { // Dunno how you do this (I'm not good at Javascript)
$(this).toggleClass('selected'); // Explicitly added/removed to/from selection (2)
} else {
softclick(this);
}
});
/* When you want to do something on selection: */
$('td.selected, th.selected').css({borderColor: 'red', borderWidth: '1px'});
/* When you want to do something on selected tables (3): */
$('td.selected, th.selected').parents('table')
.css({borderColor: 'red', borderWidth: '1px'});
$('td.selected, th.selected').parents('table').children('td') // Change things on all of table's cells
.css({borderColor: 'red', borderWidth: '1px'});
$('td.selected, th.selected, td.softclicked, th.softclicked').parents('table').children('td') // Change things on all of table's cells, including tables of "softclicked" cells
.css({borderColor: 'red', borderWidth: '1px'});
(I am not too good at Javascript or jQuery (am learning at the moment), but I hope this is enough to get you started.)