Been a while research, try to hide one specify column in kendo grid table
using this
$('#grid .k-grid-content table tr td:nth-child(8),th:nth-child(8)').toggle();
with no help, anyone has ideas?
The column I want to hide bind to
{
field: "CreatedDate",
width: 20,
title: "Create Date",
type: 'date',
template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #'
}
[edited]
$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle()
$('#grid div.k-grid-content td:nth-child(4)').toggle()
can only hide the header..but not the whole column, still need help!
Assuming #grid is already bound as the kendo grid, you can use the hideColumn function:
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("CreatedDate");
This will hide both the header and data column. There is also a showColumn function when you need to show the column as well.
Try this:
$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle();
$('#grid div.k-grid-content td:nth-child(4)').toggle();
or (combined into a single selector):
$('#grid div.k-grid-header-wrap th:nth-child(4), #grid div.k-grid-content td:nth-child(4)').toggle();
Kendo UI Grid apparently breaks up the table into a structure like this:
<div id="grid">
<div class="k-grouping-header"></div>
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table cellspacing="0">
<colgroup>
<col />
</colgroup>
<thead>
<tr>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table class="k-focusable" cellspacing="0">
<colgroup>
<col />
</colgroup>
<tbody>
<tr data-uid="5f65ad8c-601d-4700-a176-23be2d33fc76">
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager k-widget" data-role="pager">
</div>
</div>
As the table header and table body are in different div elements, you need two selectors to get them both.
I show or hide a specific column depending on the screensize.
When the screen is smaller as X, the expression gives true.
hidden: ($(window).width() < 1350)
(Define in the columns section)
columns: [{
field: "Answers",
title: "Answers",
width: 35,
hidden: ($(window).width() < 1350)
},{
...
Related
I have a datatable that th header misaligned with the content. Please help me to adjust the header and content so that parallel. Because it look
<div style="margin-top:10px; padding: 10px;">
<table id="example" class="table display nowrap table-bordered table-striped" style="width:100%;">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test34567</th>
<th>Test890</th>
</tr>
</thead>
<tbody>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tbody>
</table>
</div>
$(document).ready(function() {
$('#example').DataTable({
scrollX: true
});
});
I know its been a while but the solution still might help others as I had the similar issue recently,
This scenario is happening because of the scrollX. You can set the scrollX to false or update the CSS to adjust the header width to 100%. This can be done inside the JS,
$(document).ready(function() {
$('#example').DataTable({
scrollX: true
});
//Newly added lines
$(".dataTables_scrollHeadInner").css( "width", "100%" );
$(".dataTables_scrollHeadInner table").css( "width", "100%" );
});
This solution is inspired by the answer posted in the datatable discussion forum
I have below code to generate table. Data is comming through searchkit
<Table>
<Thead>
<Tr>
<Th>ID</Th>
<Th>PR</Th>
<Th>Order Details</Th>
<Th>Supplier Name</Th>
<Th>Raised On</Th>
<Th>Status</Th>
<Th>PO</Th>
</Tr>
</Thead>
<Tbody>
{<ViewSwitcherHits
hitsPerPage={10}
sourceFilter={["orderId", "pRNumber", "listOrderProductVM", "listOrderCompanyVM", "createdDate", "statusName", "listOrderPOVM"]}
hitComponents={[
{ key: "table", title: "Table", itemComponent: OrderDetail, },
]}
scrollTo="body"
className='divTableBody'
/>}
<NoHits
errorComponent={errorComponent}
translations={{
"NoHits.NoResultsFound": "No Records Found.",
}} suggestionsField="title" />
</Tbody>
</Table>
I'm using react-super-responsive-table. ViewSwitcherHits is searchkit functionality which is adding div tag as parent in dynamic data. So because of DIV coming right after tbody the table is not showing properly. So I'm thinking to convert that div tag to tbody. Is this right approach to do or any other solution?
below is html screenshot
That's one way of doing it. A maybe cleaner way would be to get the children of what's returned by the search kit component
Search and pagination controls in datatable are showing in center by default.. I want to be them in right position as same as shown in datatables documentation
$(document).ready(function() {
$('#example').DataTable();
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="box-body">
<table id="example" class="table table-bordered table-striped">
<thead>
<tr>
<th>Partner Category/Partner Group</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
There is a property called dom in datatable constructor which can be used to specify different options for datatables like pagination, search input etc.
The built-in options available are:
l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
< and > - div elements
<"#id" and > - div with an id
<"class" and > - div with a class
<"#id.class" and > - div with an id and class
To manipulate the search input you can wrap that with class or ID and with the help of CSS you can achieve the positioning you want. Like this,
$(document).ready(function() {
$('#example').DataTable( {
"dom": '<"search"f>i'
} );
} );
Table without table-responsive class div works perfectly with the sortable options of api jquery ui,
$(document).ready (function () {
$("#sortable").sortable ({
scroll: true,
scrollSensitivity: 20,
scrollSpeed: 40,
});
$("#sortable").disableSelection ();
});
<table class = "table-hover table-striped">
<tr> <td> many, many lines <td> </tr>
</table>
But when we put the responsiveness option in the table the options described above do not work
<div class = "table-responsive">
<table class = "table-hover table-striped">
<tr> <td> many, many lines <td> </tr>
</table>
</div>
The scroll: true, scrollSensitivity: 20, scrollSpeed: 40 options stop working.
How do these options work together with the div class of resposivity?
$("# sortable").sortable ({
is invalid.
Use
$("#sortable").sortable ({
How to give the same sorting functionality to both header rows?
At the moment I can sort either by top("bSortCellsTop": true) or bottom row but not both.
See JSFiddle
<table id="example" border="1">
<thead>
<tr><th></th><th></th><th></th><th>sort 2015</th><th>sort 2016</th></tr>
<tr><th>sort 2012</th><th>sort 2013</th><th>sort 2014</th><th></th><th> </th></tr>
</thead>
<tbody>
<tr><td>23</td><td>11</td><td>900</td><td>100</td><td>2358</td></tr>
<tr><td>10</td><td>45</td><td>410</td><td>1</td><td>531</td></tr>
<tr><td>64</td><td>126</td><td>6310</td><td>85</td><td>7</td></tr>
<tr><td>86</td><td>524</td><td>520</td><td>65</td><td>68</td></tr>
</tbody>
</table>
SOLUTION
You can use the code below to sort header by both top and bottom rows.
JavaScript:
$('#example').DataTable({
"orderCellsTop": true
});
$('#example').on('click', 'tr:eq(1) th', function(){
var index = $(this).parent().find('th').index(this);
var cellTop = $(this).closest('thead').find('tr:eq(0) th:eq('+index +')');
$(cellTop).trigger('click');
});
CSS:
#example thead th {
cursor:pointer;
}
Please note that the code above will work only if number of columns in each row is the same.
DEMO
See this jsFiddle for code and demonstration.