We Keep Coding

pdfmake content overflow bug

As seen in the image on the pdf, when the content does not fit, it moves to the next page, how can we prevent this?
When the values ​​in the 232nd record are moved, an empty space is created on the next page, I want to prevent this.
{
pageBreak: 'before',
text: 'Park Bilgileri',
fontSize: 15,
bold: true,
margin: [0, 0, 0, 0],
},
{
table: {
headerRows: 1,
widths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
body: [
[
{
text: 'Park No',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'Plaka',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Giriş Tarih & Saat',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'Çıkış Tarih & Saat',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'İçeride Geçirdiği Süre(Saat:Dakika:Saniye)',
style: 'tableHeader',
alignment: 'center',
bold: true,
fontSize: 11,
},
{
text: 'Ücret',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Durum',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Kullanıcı',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
{
text: 'Ödenme Tarihi',
style: 'tableHeader',
bold: true,
alignment: 'center',
fontSize: 11,
},
],
...parkingData,
],
},
},
const parkingData = resultData.returnedObj.parkings.map((p) => {
return [
{
text: (pid += 1),
},
{
text: p.plate_no,
},
{
text: dateNow(p.starts_at),
},
{
text: dateNow(p.ends_at),
},
{
text: diffTimeConvert(p.ends_at - p.starts_at),
},
{
text: p.price,
},
{
text: p.info,
},
{
text: p.exit_from_id ? p.exit_from_id.toString().slice(-5) : 'Otomatik',
},
{
text: p.isDebtPay && p.debtPayTime ? dateNow(p.debtPayTime) : '',
},
];
});
This is the code I wrote, how can I solve this problem? I think it might be a solution to transfer the whole line that doesn't fit on the page to the next page, but I don't know how to implement it.

$.jqx.dataAdapter is not a constructor

The data is not being displayed. I tried debugging the cide in the degugger. I get an error $.jqx.dataAdapter is not a constructor The data is successfully populated in the aDataSet. Please tell me what could possible be wrong.
$(document).ready(function(){
var aDataSet = [
//loading data --successful
];
var source =
{
localdata: aDataSet,
datatype: "array",
dataFields:
[
{ name: 'empcode', type: 'string' },
{ name: 'srno', type:'number'},
{ name: 'projectcode', type: 'string' },
{ name: 'projectname', type: 'string' },
{ name: 'startdate', type: 'date' },
{ name: 'enddate', type: 'date' },
{ name: 'clientname', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'modify', type: 'string' },
{ name: 'delete', type: 'string' },
{ name: 'view', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter( this.source ,{
loadComplete: function (aDataSet) { },
loadError: function (xhr, status, error) { }
});
// create jqxDataTable.
$("#tableid").jqxDataTable(
{
source: dataAdapter,
pageable: true,
altRows: true,
filterable: true,
height: 400,
filterMode: 'advanced',
width: 850,
columns: [
{ text: 'Sr No', cellsAlign: 'center', align: 'center', dataField: 'srno', width: 200 },
{ text: 'Emp Code', cellsAlign: 'center', align: 'center', dataField: 'empcode', width: 200 },
{ text: 'Project Code', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'center', align: 'center', width: 100 },
{ text: 'Project Name', dataField: 'Price', cellsformat: 'c2', align: 'center', cellsAlign: 'center', width: 70 },
{ text: 'Start Date', cellsAlign: 'center', align: 'center', dataField: 'startdate', width: 100 },
{ text: 'End Date', cellsAlign: 'center', align: 'center', dataField: 'enddate',width: 100 },
{ text: 'Client Name', cellsAlign: 'center', align: 'center', dataField: 'enddate',width: 100 },
{ text: 'Status', cellsAlign: 'center', align: 'center', dataField: 'status',width: 100 },
{ text: 'Modify', cellsAlign: 'center', align: 'center', dataField: 'modify',width: 100 },
{ text: 'Delete', cellsAlign: 'center', align: 'center', dataField: 'delete',width: 100 },
{ text: 'View', cellsAlign: 'center', align: 'center', dataField: 'view',width: 100 }
]
});
});

It will be better if you show your HTML, not only your JS, so we can see if you had the same problem or not. I had the same problem and the solution was to add the reference to jqxdata, as it is explained here:
https://www.jqwidgets.com/community/topic/b-jqx-dataadapter-is-not-a-constructor/
For example, i was trying to add a jqx-data-table into a website. Originally I had this in my references (Jquery and other references are in other place):
<script src="~/js/jqwidgets/jqxbuttons.js"></script>
<script src="~/js/jqwidgets/jqxscrollbar.js"></script>
<script src="~/js/jqwidgets/jqxdatatable.js"></script>
<script src="~/js/jqwidgets/jqxmenu.js"></script>
<script src="~/js/jqwidgets/jqxlistbox.js"></script>
<script src="~/js/jqwidgets/jqxdropdownlist.js"></script>
So i just added, at the beggining, this one:
<script src="~/js/jqwidgets/jqxdata.js"></script>
Result:
<script src="~/js/jqwidgets/jqxdata.js"></script>
<script src="~/js/jqwidgets/jqxbuttons.js"></script>
<script src="~/js/jqwidgets/jqxscrollbar.js"></script>
<script src="~/js/jqwidgets/jqxdatatable.js"></script>
<script src="~/js/jqwidgets/jqxmenu.js"></script>
<script src="~/js/jqwidgets/jqxlistbox.js"></script>
<script src="~/js/jqwidgets/jqxdropdownlist.js"></script>

Provide a publicly accessible link for debugger. That would attract more people...

Adding image in a cell of jqxgrid

i have used Jqxgrid for a project which successfully loads data from a json string passed to it as a data source. i want to display images/icons in a column cell again each particular entry/row. Following code initializes the grid:
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
theme: 'energyblue',
selectionmode: 'multiplecellsadvanced',
columns: [
align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
{ text: 'SendMail', columngroup: 'Mail Details', datafield: 'ID', width: 50 },
{ text: 'Content Type', columngroup: 'Mail Details', datafield: 'LinkFilename', cellsalign: 'right', align: 'right', width: 200 },
{ text: 'Sender', columngroup: 'Mail Details', datafield: 'Sender', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
{ text: 'Date', datafield: 'Created', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 250 },
],
columngroups: [
{ text: 'Mail Details', align: 'center', name: 'Mail Details' }
]
});
Please guide me through this.

You can use Image Column in JqxGrid. Tutorial

Jquery flexigrid select check box by selecting the row

$("#rfqDetails").flexigrid({
dataType: 'json',
colModel: [
{ display: 'checkbox', name: '', width: 30, align: 'center' },
{ display: 'RfqNo', name: 'RfqNo', width: 80, sortable: false, align: 'center' },
{ display: 'PreferredSupplier', name: 'PreferredSupplier', width: 100, sortable: false, align: 'center' },
{ display: 'Status', name: 'Status', width: 80, sortable: false, align: 'center' },
{ display: 'Company', name: 'Company', width: 80, sortable: false, align: 'center' },
{ display: 'Edit', name: '', width: 80, sortable: false, align: 'center' },
{ display: 'View', name: '', width: 80, sortable: false, align: 'center' },
],
title: "RFQ Summary",
height: 320,
showToggleBtn: false,
singleSelect: false,
resizable: false
});
$('#rfqDetails').click(function ()
{
var selected = $('#rfqDetails .trSelected td:eq(0)');
$(selected).each(function ()
{
selected.attr('checked', 'checked')
});
});
The above is my code for flexigrid. In the first column I have the checkbox by selecting the row I have to select the checkbox and when deselecting the row the checkbox has to deselect.

using JSON when trying to add checkboxes to each dynamic list item

I am trying to populate a row with a checkbox in front as it is dynamically built.
I am new to Json.
Here is where I dynamically format the columns:
while(reader.Read()) {
if(i>=startRead&&i<maxCount) {
var actionBtns=new StringBuilder("");
jsonWriter.WriteStartObject();
jsonWriter.WritePropertyName("id");
jsonWriter.WriteValue("a"+i);
jsonWriter.WritePropertyName("cell");
jsonWriter.WriteStartObject();
//trying to add checkboxes here but not sure what to put as Value????
//need help with this part: i want to add a checkbox here ----------------
jsonWriter.WritePropertyName("exhibitCheckBox");
jsonWriter.WritePropertyName("actionBtns");
jsonWriter.WriteValue(actionBtns.ToString());
jsonWriter.WritePropertyName("ExhibitMovementID");
jsonWriter.WriteValue(reader["ExhibitMovementID"].ToString());
jsonWriter.WritePropertyName("Location");
jsonWriter.WriteValue(reader["Location"].ToString());
jsonWriter.WritePropertyName("TrackingNumber");
jsonWriter.WriteValue(reader["TrackingNumber"].ToString());
jsonWriter.WritePropertyName("MovedBy");
jsonWriter.WriteValue(reader["MovedBy"].ToString());
jsonWriter.WritePropertyName("ShipperName");
jsonWriter.WriteValue(reader["ShipperName"].ToString());
jsonWriter.WritePropertyName("ReceiverName");
jsonWriter.WriteValue(reader["ReceiverName"].ToString());
jsonWriter.WritePropertyName("Company");
jsonWriter.WriteValue(reader["Company"].ToString());
jsonWriter.WritePropertyName("Reason");
jsonWriter.WriteValue(reader["Reason"].ToString());
jsonWriter.WriteEndObject();
jsonWriter.WriteEndObject();
sb.Append(",");
}
my checkbox in my javascript is called "exhibitCheckBox"
:
$('#viewExhibitMoveHistoryGrid').flexigrid({
url: url,
dataType: 'json',
method: 'get',
colModel: [
//{ display: 'Actions', name: 'actionBtns', width: 50, sortable: true, align: 'center' },
{display: '<input type="checkbox" class="exhibitCheckBox" id="checkAllExhibits" />', name: 'checkbox', width: 20, sortable: false, align: 'left', process: caseFileRowSelected },
{ display: 'Move ID', name: 'ExhibitMovementID', width: 100, sortable: true, hide: false, align: 'center' },
{ display: 'Reason', name: 'Reason', width: 120, sortable: true, align: 'center' },
{ display: 'Moved By', name: 'MovedBy', width: 120, sortable: true, align: 'center' },
{ display: 'Moved To', name: 'ExhibitLocation', width: 120, sortable: true, align: 'center' },
{ display: 'Date', name: 'ExhibitMoveDate', width: 100, sortable: true, align: 'center' },
{ display: 'Time', name: 'ExhibitMoveTime', width: 100, sortable: true, align: 'center' },
{ display: 'Receiver', name: 'ReceiverName', width: 120, sortable: true, align: 'center' },
{ display: 'Company', name: 'Company', width:120, sortable: true, align: 'center' },
{ display: 'Shipper', name: 'ShipperName', width: 120, sortable: true, align: 'center' },
{ display: 'Tracking #', name: 'TrackingNumber', width: 120, sortable: true, align: 'center' },
{ display: 'Cost', name: 'ShippingCost', width: 120, sortable: true, align: 'center' }
],

figured it out:
jsonWriter.WritePropertyName("checkbox");
jsonWriter.WriteValue("<input class=\"exhibitMoveCheckBox\" id=\"exhibitMoveCheckBox_"+reader["ExhibitID"].ToString()+"\" type=\"checkbox\">");