Materialize data table fixed header with custom scroll - javascript

I am using materialize data table in my application, using which I have implemented fixed header functionality. This is working fine for default page scroll bar.
Fixed Header with default scroll bar
HTML Code:
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
JS Code:
$(document).ready(function(){
var data2 = {
"results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
]
};
$('#myTable').dataTable({
data: data2.results,
"order": [],
"bSort": false,
"bInfo": false,
"paging": false,
"searching": false,
columns: [
{ data: 'Name', title: "Name" },
{ data: 'Amount', title: "Amount" },
{ data: 'Profit', title: "Profit" },
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"},
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"}
],
"columnDefs": [
{ "width": "200px", "targets": [0] },
{ "width": "100px", "targets": [1] },
{ "width": "100px", "targets": [2] },
{ "width": "100px", "targets": [3,6] },
{ "width": "100px", "targets": [4,7] },
{ "width": "200px", "targets": [5,8] }
],
"fixedHeader": {
header: true
}
});
});
But when I set width for table and used custom scrolling means fixed header is not changing based on scroll.
Fixed Header with custom scroll bar
In the above code, I changed my HTML part like this and added this css. But fixed header is not working.
HTML Code:
<div class="row">
<div class="col s8 m5">
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
</div>
</div>
CSS Code:
#myTable_wrapper {
overflow-x:auto;
}
I have attached my two example JSFiddle here. How to achieve fixed header for custom scoll bar in materialize data table?

Apparently datatables' fixed header does not support scoll-x at all. I tried one or two moths ago, but couldn't find a solution. Read the topic here
Yet, i managed to solve this by changing my page design. I did not use a fixed header. But put my table at the top of the div, meaning no search box or pagination or anything on top of the table. Just like your first JSFiddle example.
After that, i gave an height to scrollY, and my header became fixed. What i mean is;
get rid of
"fixedHeader": {
header: true
}
and put these lines instead.
"ScrollX": true,
"scrollCollapse": true,
"sScrollY": 400
Try this on JSFiddle
Also, you can make the height dynamic, like:
"sScrollY": calcDataTableHeight(),
And function
var calcDataTableHeight = function() {
h = $('#wrapper').height() - 150;
return h;
};
you can play with the numbers, but dont forget to declare the function before initiating it.

Related

Tabulator does not execute script in ajax-load cell data

Not sure if this is a bug or ignorance.
I have a Tabluator table loading data from ajax:
productsTable = new Tabulator("#productsTable", {
height:"100%",
layout:"fitColumns",
ajaxURL: dataSource,
columns: [
{title: "Orders", field: "orders_test_col", formatter: "html", headerSort: false, headerHozAlign: "center", hozAlign: "center", headerSort:false, width: "25%"},
]
});
The data I am returning looks like this:
{
"data": [
{
"itemId": 2896652,
"orders_test_col": "\u003cscript\u003econsole.log('orders_test_col: 2896652')\u003c/script\u003e",
}
]
}
Essentially <script>console.log('orders_test_col: 4097380')</script>
How can I get this script to run after loading in the data? In the Tabulator docs they explicitly talk about beware of script injection so I assume(d) that it should run that data.

jquery datatable - set column width and wrap text

We are using the Scroller plugin for our jquery data table to allow virtual scrolling. However, we have requirement to support text wrapping inside a cell, as user would like to view the entire text instead of truncated one. I observed that it does not wrap the text by default. Is there a way to support this feature? Any possible workaround?
Fiddler
https://jsfiddle.net/Vimalan/2koex0bt/1/
html Code:
<table id="example" class="display" cellspacing="0" width="100%"></table>
js code:
var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];
for (var i=1; i<=500; i++)
{
var dataRow = {};
dataRow.ID = i;
dataRow.FirstName = "First Name " + i;
dataRow.LastName = "Last Name " + i;
if (i%5 ==0)
{
dataRow.Details = detailsSample;
}
else
{
dataRow.Details = "Large text "+i;
}
dataRow.Country = "Country Name";
dataList.push(dataRow);
}
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details", "width": "400px" },
{ title: "Country", data: "Country" }
]
} );
Expectation
In the above table, the "Details" column should always have a width of 400px and the text in that column should wrap.
Any suggestion will be greatly appreciated.
Found the solution by wrapping the column data in a div and setting the white-space, width css properties for the div.
Fiddler:https://jsfiddle.net/Vimalan/2koex0bt/6/
JS
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details" },
{ title: "Country", data: "Country" }
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: 3
}
]
} );
CSS
.text-wrap{
white-space:normal;
}
.width-200{
width:200px;
}
Not sure if you add in stylesheets or not, but set your table-layout to fixed and add in the white-space. Currently you are using white-space:no-wrap which negates what you're trying to do. Also I set a max-width to all your td's so this will happen whenever there is overflow.
Add this at the end of your jQUery
https://jsfiddle.net/2koex0bt/5/
$(document).ready(function(){
$('#example').DataTable();
$('#example td').css('white-space','initial');
});
If you want to just use the api, do this ( add in anymore CSS to change the styling ).
If you want to do it with CSS, do this:
table {
table-layout:fixed;
}
table td {
word-wrap: break-word;
max-width: 400px;
}
#example td {
white-space:inherit;
}
Js Code:
'columnDefs': [{
render: function (data, type, full, meta) {
let instaText = (data != null && data.length > 25) ? data.substr(0, 25) : data == null?"":data;
return '<div class="text-overflow" title='+'"'+ data +'"' +'>' + instaText + '</div>';
},
targets: [27]
}],
CSS:
{
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
}

How to make column hidden in jsGrid?

I am using jsGrid in my project and now I am stuck here to hide a column that is being used in code but should not be displayed in page.
The grid I am using is : jsGrid
I have tried to take input control hidden but, still it doesn't work.
The following code is defines the columns of grid where I have taken hidden field for AccountID. but, it doesn't work.
Code:
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", type: "hidden", width: 0}
]
Since v1.3 jsGrid fields have an option visible
http://js-grid.com/docs/#fields
If you need to hide (or show) a field at runtime, it can be done like the following:
$("#grid").jsGrid("fieldOption", "ClientName", "visible", false);
Try this below code.
create a css class like below
.hide
{
display:none;
}
And assign the css property to the field like below
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", css: "hide", width: 0}
]
Hope this will help you.
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", visible: false, width: 0}]
fields: [{
name: "<FIELD NAME>",
visible: false
}
]
hidden very simple, make it like this example :
{ name: "id", title: "Id", type: "text", width: 1, css:"hide"}
where css class hide from bootsrap
In my case we started our application to show a column in JSGrid and went all the way to production. Later there was a need to hide that column but I used that column to do custom sorting. So this is how I did
My styles
.idStyle:
{
color: red;
}
Created new style
.hiddenStyle:
{
display: none;
}
Below are my jsGrid Fields
var jsGridField =
[
{ name: "Student ID", type: "text", width: "auto", css: "idStyle hiddenStyle" },
{ name: "Student Name", type: "text", width: "auto", css: "labelStyle" },
]
No data Row has been created on jsgrid for row data when there is no data. we have used below css row data for hiding it and showing.
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>
When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience .
For solving this we can use hide and show the css element on modifying the CSS class
For Hiding :
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();
For Showing :
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();

jquery grid not filled with JSon data

Hi I am not able to get the data from JSON loaded on to grid,
HEre is my code for the grid wich displays the stock prices for the stock for a user :
$(document).ready(function () {
// $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
jQuery("#jqTable").jqGrid({
url:jqDataUrl,
datatype: "json",
mtype: "POST",
height: 250,
// Specify the column names
colNames: ["SYMBOL", "LAST", "CHANGE", "%CHANGE","HIGH/LOW"],
// Configure the columns
colModel: [
{ name: "SYMBOL", index: "SYMBOL", width: 200, align: "left" },
{ name: "LAST", index: "LAST", width: 200, align: "left" },
{ name: "CHANGE", index: "CHANGE", width: 200, align: "left" },
{ name: "%CHANGE", index: "%CHANGE", width: 200, align: "left"},
{ name: "HIGH/LOW", index: "HIGH/LOW", width: 200, align: "left"}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "id",
},
multiselect: false,
// paging: true,
// rowNum:10,
// rowList:[10,20,30],
pager: $("#jqTablePager"),
loadonce:true,
caption: "WatchList"
}).navGrid('#jqTablePager',{edit:false,add:true,del:true});
}
});
But when i try and run the code i am not able to get the contents on to the table (but the grid loads with no content)
And My json is of the form :
{
total: "1",
page: "1",
records: "2",
rows :
[
{id:"1", cell:["cell11", "cell12", "cell13","cell13","cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23","cell13","cell13"]}
]
}
Please help me solve the problem
UPDATE:
I discovered that if you do not put repeatitems:true option into json reader, jqGrid assumes that you are using json dot notation. When you put it into jsonReader, your data is properly loaded. Here is working example: http://jsfiddle.net/a5e5F/3/
Old version:
I played a lot with your jqgrid code, and it seems that there is a bug in this version of jqGrid, which causes your jsonReader not to work. It reads data directly, ignoring root element and assuming that your data is array of json objects in format
{propertyName1:'PropertyValue1', propertyName2:'PropertyValue2', ...}
You can see what I mean on http://jsfiddle.net/a5e5F/2/
If you replace data:rows with data:data (your format of data), it does not load data. Maybe you should try to change your json data to use real json format (with properties named as columns)?
I have been trying a ton of stuff, changing column names to check for issue in #Barmar's coment, which I also thought it is the cause.

Layout Problems with JavaScript / Kendo UI

I'm working on a project that requires Kendo UI. We are currently working with the Q1'12 beta. My appliction must have a footer that is always visible. The content of the application would be in all remaining space above the footer. Please note that I do NOT want the footer on TOP of content. I want two distinct sections (Content and Footer).
For some reason, when I use a Kendo grid with a larger data set, grid grows larger than the space alotted for it. While my footer is where I need it to be, the grid appears to grow behind the footer. Because of this, my users cannot interact with the scroll bar. I have included my code below. How do I fix this? I keep spinning my wheels on this and it seems like an easy/common problem. But I can't find a solution.
<body>
<div id="myLayout" class="k-content" style="background-color:Gray; height:100%;">
<div id="contentArea" style="background-color:Silver;">
<div id="myList"></div>
<script type="text/javascript">
var myDataSource = new kendo.data.DataSource({
type: "json",
pageSize: 50,
transport: { read: "/myDataSource/" }
});
$(window).load(function () {
$("#myList").kendoGrid({
scrollable: { virtual: true },
dataSource: myDataSource,
sortable: true,
columns: [
{ title: "Field 1" },
{ title: "Field 2" },
{ title: "Field 3" },
{ title: "Field 4" },
{ title: "Field 5" },
{ title: "Field 6" },
{ title: "Field 7" }
]
});
});
</script>
</div>
<div id="footer" style="background-color:Silver;">
Footer information
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#rootLayout").kendoSplitter({
orientation: "vertical",
panes: [
{ scrollable: false, collapsible: false, size: "90%" },
{ collapsible: true, size: "10%" }
]
});
});
</script>
</body>
Thank you for any and all help.
I adapted your sample and swapped out the data source for one provided by the Telerik team to build this implementation:
http://jsfiddle.net/latenightcoder/GZjN5
The code is fairly self-explanatory but all I do is manipulate the grid height based on that of the footer.

Categories