$.jqx.dataAdapter is not a constructor - javascript

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...

Related

Hide column if field is empty table.bootstrapTable

I want to hide the column title: 'Nome do Beneficiário' when the field: 'NomeSocial' is null or empty.
Would you help me, please?
The table is responsive. Using Javascript and bootstrapTable.
tabela.bootstrapTable('refresh');
var options = {
pagination: "true",
classes: "table",
pageSize: 10,
cache: false,
pageList: "[10, 25, 50]",
sidePagination: "server",
url: url,
columns: [
{
title: 'CPF',
field: 'Cpf',
align: 'center',
valign: 'middle'
},
{
title: 'Matrícula',
field: 'Matricula',
align: 'center',
valign: 'middle'
},
{
title: 'Nome do Beneficiário',
field: 'Nome',
align: 'center',
valign: 'middle'
},
{
title: 'Nome Social do Beneficiário',
field: 'NomeSocial',
align: 'center',
valign: 'middle'
},
{
title: 'Visualizar',
align: 'center',
valign: 'middle',
formatter: visualizar
}
],
formatNoMatches: function () {
return mensagemSemRegistro;
}
};
tabela.bootstrapTable(options);
}

Setting the Editable property of a column in JQXgrid

JS: http://jsfiddle.net/tzHXR/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
I am trying to learn JQXgrid and this is my JS file. in this whole grid is set to editable: true flag but i want a particular field to be non-editable.
In reference to the forum-post by jqwidget team member http://www.jqwidgets.com/community/topic/making-a-column-non-editable/#post-11055
i tried this:
JS: http://jsfiddle.net/tzHXR/89/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
editable:false; // Editable Property Set to false
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
but after this , it doesn't work at all. all it shows is blank. i tried on my machine too.
why does editable:false for a column makes it worse. how can i apply non-editable property to one exact column.

The reason is that you should remove ";" after editable: false in your jQWidgets Grid's column definition. That is a syntax error.

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

JQX Grid Not working in chrome

I used JQX grid widget.And through a javascript i'm populating cell values.This works good for Firefox.But not working in Chrome.Here is the code i have used.
var objCredit = jQuery.parseJSON(returnText);
document.getElementById('txtCustNumber').value = objCredit.CustomerId;
$('[id$=txtCustNumber]').text(objCredit.CustomerId);
getCustomerDetails();
document.getElementById('cmbDocType').value = '3';
***documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', objCredit.Amount);***
Here is my Grid Definition.
var source1 = { totalrecords: 5, unboundmode: true, datatype: "json",
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
],
localdata: data
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{ text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{ text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: setAmountEditable() },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{ text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
Thanks in advance

Your initialization is incorrect. datatype: "json" in unbound mode does not make sense. You should remove that. Below is a working sample:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source1 = {
totalrecords: 5, unboundmode: true,
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
]
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
var documentGridContainer = $("#jqxgrid");
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
ready: function()
{
documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', 50);
},
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{
text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{
text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
//showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: true },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{
text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{
text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{
text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid">
</div>
</div>
</body>
</html>

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\">");

Categories