I'm trying to build a custom library for my table, I want to add an option where for each column (th) I may be able to defined their width depends to what I declared. For example I only need to define the width of the first and second column (th) and I have 8 columns, there rest of the column should have width.
My sample snippets inside my table prototype:
init: function (el, options) {
column: {
width: [20, 200, 500]
}
}
I am not really sure how to, since I'm starting to learn javascript. For now I'm just up to adding the width, sooner or later I'll be adding more options inside the column, like color etc.
Additional information: I want pure JavaScript without using other library (jQuery) to my library.
Model-wise you probably want something like:
{
columns: [ {
label: "Foo",
width: 50 // px
}, {
label: "Bar",
width: 100 // px
}, {
label: "Baz",
width: "*"
} ]
}
instead of
{
column_widths: [ 50, 100, "*" ]
column_labels: [ "Foo", "Bar", "Baz" ]
}
The "*" would translate to a column with no defined width so the browser will decide how wide it is. Whether that is desirable or not is up to you.
Related
I am using the pdfMake and I Ihave a text next to a image I would like to repeat that part in my docdefintion.
I would like to repeate this part of my pdfmake
{
columns: [
{
image: "checked",
height: 10,
width: 10
},
{
stack: [
{
columns: [
{
text: 'First column first line',
width: '50%',
margin: [5, 0, 0, 0],
}
]
}
],
width: '*'
}]
}
Here is my docDefinition
let docDefinition = {
pageSize: 'LEGAL',
//pageOrientation: 'landscape', //may be usefull in some case
pageMargins: [40, 80, 40, 60],
content: [
{
...
this.getFailureLocationObject(),
...
}
};
pdfMake.createPdf(docDefinition).download('Intervention' + '19060023');
}
I have made this function that should return a object list (ol) I have o the object that I want to push into ol when the function retuns o there is no problem my image is displayed next to the text However when I return ol insted there is a wierd result where the image and text are no longer aligned and no mater how may objects I add to ol the result is the same there is only one image displayed next to the text. How can I fix this issues thank you for your help.
getFailureLocationObject() {
const ol = [];
var o = {
columns: [
{
image: "checked",
height: 10,
width: 10
},
{
stack: [
{
columns: [
{
text: 'First column first line',
width: '50%',
margin: [5, 0, 0, 0],
}
]
}
],
width: '*'
}]
};
ol.push(o);
ol.push(o);
return o;
}
Here you can try what I have made so far. And see the issus I have hard coded 'First column first line','First column Second line','First column Third line'. However I would like the method this.getFailureLocationObject(), too loop and make the list.
Try it out here!
https://stackblitz.com/edit/angular-pdfmake-example-3f14km?file=src%2Fapp%2Fapp.component.ts
After a bit of testing with the code you provided, I figured out that the problem is the reference of the objects.
So, when pdfmake gets the values, somehow, if both have same reference (are the same object) it mixes them.
I came to this conclusion because when you change the code you have with:
getFailureLocationObject() {
const ol = [];
var o = {
columns: [
{
image: 'checked',
height: 10,
width: 10,
},
{
stack: [
{
columns: [
{
text: 'First column first line',
width: '50%',
margin: [5, 0, 0, 0],
},
],
},
],
width: '*',
},
],
};
ol.push(o);
o = JSON.parse(JSON.stringify(o));
ol.push(o);
return ol;
}
The error no longer occurs. Note that JSON.parse(JSON.stringify(o)) creates a new JSON object with the same content as o, meaning the two objects in the array are different (as the objects are not the same)
This might be an issue to be reported to the developers of the plugin to be fixed. For now, the solution is to add different objects to the array using clone. There is a good explaination on how and why to use cloning here.
Feel free to ask for clarification if needed!
I'm developing an web application that handles and shows large amounts of live data from some devices. To visualise the data I decided to use HighStock. It seems to work well on most of the data:
However, when the bottom navigator touches right border, the picture becomes quite different:
The timeline is almost the same, but the number of points is different, also vertical scale is different... What is this happening? How to fix it?
My code looks this way:
const ch1 = Highcharts.stockChart('chart1', {
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonTheme: {visibility: 'hidden'},
labelStyle: {visibility: 'hidden'},
},
title: {
text: 'Metrics',
},
series: [{
name: 'Sensor 1', data: [],
}, {
name: 'Sensor 2', data: [],
}, {
name: 'Sensor 3', data: [],
}]
});
// a,b,c gets values from the server
// They are arrays of pairs of timestamp & value
ch1.series[0].setData(a);
ch1.series[1].setData(b);
ch1.series[2].setData(c);
// tm_min & tm_max are dynamically calculated using the data
ch1.xAxis[0].setExtremes(tm_min, tm_max);
Update: Here is an example with 2% of my data – try to do the same as shown above.
I found the solution. The issue is caused by your data and xAxis.ordinal that is enabled by default in Highstock. Your data has many empty points on the right side of the chart and because of ordinal, the empty space was not rendered, yet dataGrouping grouped data differently.
Check this here https://jsfiddle.net/BlackLabel/x1tgqbw6/ (disabled ordinal):
xAxis: {
ordinal: true
}
So, the solution is to disable xAxis.ordinal or generate your data without null points:
https://jsfiddle.net/BlackLabel/ex054oy8/
API reference:
https://api.highcharts.com/highstock/xAxis.ordinal
I have some rows I hide like that:
$("#"+rowid).hide();
My problem is that when the user clicks to sort a colmun, the hidden rows reappeared. There is a way to avoid this?
EDIT
I will try to explain a little bit more what I did with code example.
I start to create my grid with this params (and without datas).
var params = {
datatype: "local",
data: [],
caption: "Grid",
colNames:[ "Column A", "Column B" ],
colModel:[
{ name:"colA", key: true },
{ name:"colB" }
]
};
For some reasons, I reload next the grid with datas, like this:
$("#myGrid").jqGrid("clearGridData")
.jqGrid("setGridParam", { data: myDatas })
.trigger("reloadGrid");
And I have checkboxes with listeners, like this one:
$("#checkbox1").on("change", onCheckbox1Changed);
function onCheckbox1Changed() {
var rowid = ...;
var datas = $("#myGrid").jqGrid("getRowData");
for(var key in datas) {
if(datas[keys].colB === "" && $("#checkbox1").val() === true) {
$("#"+rowid).show();
} else if(datas[keys].colB === "" && $("#checkbox1").val() === false) {
$("#"+rowid).hide();
}
}
}
This code works like I want. Rows are hidden/shown depending on checkboxes. The problem is when I clik on a column to sort it, the hidden columns reappeared.
EDIT 2
I could force the grid to hide the rows after a sort. But I didn't find where I can find an event like "afterSort". There is "onSortCol" but it is called before the sort.
A solution will be to force that using "loadComplete". Like this:
var params = {
// ...
loadComplete: onLoadComplete
}
function onLoadComplete() {
onCheckbox1Changed();
}
I tried it and it works. But I am not very "fan" with this solution.
I find hiding some rows after displaying the page of data not the best choice. The main disadvantage is the number of rows which will be displayed. You can safe use $("#"+rowid).hide(); method inside of loadComplete only if you need to display one page of the data. Even in the case one can see some incorrect information. For example, one can use viewrecords: true option, which place the text like "View 1 - 10 of 12" on right part of the pager.
I personally would recommend you to filter the data. You need to add search: true option to the grid and specify postData.filters, which excludes some rows from displaying:
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ field: "colA", op: "ne", data: "rowid1" },
{ field: "colA", op: "ne", data: "rowid2" }
]
}
}
If you would upgrade from old jqGrid 4.6 to the current version (4.13.6) of free jqGrid, then you can use "ni" (NOT IN) operation:
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ op: "ni", field: "id", data: "rowid1,rowid2" }
]
}
}
In both cases jqGrid will first filter the local data based on the filter rules and then it will display the current page of data. As the result you will have the perfect results.
Sorting of such grid will not not change the filter.
Don't hide columns after the creation of the table, hide them directly when you create the grid using the option hidden, like this:
colNames: ['Id', ...],
colModel: [
{ key: true, hidden: true, name: 'Id', index: 'Id' },
....
]
If you want to hide columns on particular events after the creation of the grid, look at this article.
Hope it was you were looking for.
Trying to get this with the Webix Treetable. I can only set fixed rowHeight property. So here I face two problems:
Height of the rows
Position of the 'plus' icons (always on top)
Current treetable config is
rowHeight:100, rowLineHeight:34,
columns:[{
id:"value",
template:"{common.treetable()} #value#",
fillspace:true
}],
Code sample: http://webix.com/snippet/23a6b79f
you can use the $height attribute in data, like in example.
If you load data remotly, you can obviously pass it.
webix.ui({
view:"treetable",
rowHeight:100, rowLineHeight:34,
columns:[{
id:"value",
template:"{common.treetable()} #value#",
fillspace:true
}],
data: [{
id:1,
$height:30,
value:"Root",
open:true,
data:[{
id:"11",
value:"Text 1<br>Text 2<br>Text 3",
data:[
{ id:"111", value:"Should be small too", $height:30}
]
}]
}]
});
http://webix.com/snippet/59a17d61
I need to show an array of objects in the table like representation. Table has columns with the properties, and when clicked on the column it should show more data inside the table. It should be sortable.
Is there a JS library that could do this, so I dont have to write this from scratch?
Please see the attached image with the JSON object.
When the user clicks on Ana, additional row is inserted.
I created the demo https://jsfiddle.net/OlegKi/kc2537ty/1/ which demonstrates the usage of free jqGrid with subgrids. It displays the results like
after the user clicks on the "+" icon in the second line.
The corresponding code you can find below
var mydata = [
{ id: 10, name: "John", lname: "Smith", age: 31, loc: { location: "North America", city: "Seattle", country: "US" } },
{ id: 20, name: "Ana", lname: "Maria", age: 43, loc: { location: "Europe", city: "London", country: "UK" } }
];
$("#grid").jqGrid({
data: mydata,
colModel: [
{ name: "name", label: "Name" },
{ name: "lname", label: "Last name" },
{ name: "age", label: "Age", template: "integer", align: "center" }
],
cmTemplate: { align: "center", width: 150 },
sortname: "age",
iconSet: "fontAwesome",
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = [$(this).jqGrid("getLocalRow", rowid).loc];
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
idPrefix: rowid + "_",
data: subgridData,
colModel: [
{ name: "location", label: "Localtion" },
{ name: "city", label: "City" },
{ name: "country", label: "Country" }
],
cmTemplate: { align: "center" },
iconSet: "fontAwesome",
autowidth: true
});
}
});
Small comments to the code. Free jqGrid saves all properties of input data in data parameter. I added id property to every item of input data. It's not mandatory, but it could be helpful if you would add more functionality to the grid. See the introduction for more details.
The columns are sortable based on the type of the data specified by sorttype property of colModel. To simplify usage some standard types of data free jqGrid provides some standard templates which are shortcurts for some set of settings. I used template: "integer" in the demo, but you could replace it to sorttype: "integer" if only sorting by integer functionality is important.
If the user click on "+" icon to expand the subgrid then jqGrid inserts new row and creates the div for the data part of the subgrid. You can replace subGridRowExpanded from above example to the following
subGridRowExpanded: function (subgridDivId) {
$("#" + subgridDivId).html("<em>simple subgrid data</em>");
}
to understand what I mean. The unique id of the div will be the first parameter of the callback. One can create any common HTML content in the subgrid. Thus one can create empty <table>, append it to the subgrid div and
then convert the table to the subgrid.
To access to the item of data, which corresponds to the expanding row one can use $(this).jqGrid("getLocalRow", rowid). The return data is the item of original data. It has loc property which we need. To be able to use the data as input for jqGrid we create array with the element. I's mostly all, what one have to know to understand how the above code works.
You can add call of .jqGrid("filterToolbar") to be able to filter the data or to add pager: true (or toppager: true, or both) to have the pager and to use rowNum: 5 to specify the number of rows in the page. In the way you can load relatively large set of data in the grid and the user can use local paging, sorting and filtering. See the demo which shows the performance of loading, sorting and filtering of the local grid with 4000 rows and another one with 40000 rows. All works pretty quickly if one uses local paging and not displays all the data at once.
I use datatables.net for all my "more complex than lists"-tables. I It's a very well kept library with loads of features and great flexibility.
In the "con" column I would say that it's so complex that it probably has quite a steep learning curve. Although the documentation is great so there is always hope for most problems.