jQWidgets Forums

Tagged: jqxDataTable jqxDropDownList

This topic contains 5 replies, has 2 voices, and was last updated by cliftonm 10 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

DropDown in DataTable is invisible Posts
February 4, 2015 at 7:56 pm DropDown in DataTable is invisible #66537

cliftonm
Participant

I’m getting strange issue. I have:

var unitList =
{
datatype: “json”,
datafields: [
{ name: ‘Id’, type: ‘number’ },
{ name: ‘Abbr’, type: ‘string’ },
{ name: ‘Name’, type: ‘string’ }
],
url: “/unitlist”,
async: false
};

var daUnitList = new $.jqx.dataAdapter(unitList, { uniqueDataFields: [“Id”] });

and, as part of the table definition:

columns: [{ text: ‘Name’, dataField: ‘Name’, width: ‘15%’},
{ text: ‘Unit’, colummntype: ‘template’, dataField: ‘UnitId’, width: ‘20%’,
createEditor: function(row, cellvalue, editor, cellText, width, height) {
editor.jqxDropDownList({ source: daUnitList, displayMember: ‘Abbr’, valueMember: ‘Id’, width: width, height: height });
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
editor.jqxDropDownList({ width: width, height: height }); editor.val(cellvalue);
editor.val(cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
return editor.val();
}
},
{ text: ‘Cost’, dataField: ‘UnitCost’, width: ‘20%’}]

The table displays the data but when I enter edit mode (I’m using the toolbar option), the dropdownlist box doesn’t display, though, the weird thing is, when I mouse over the field, the mouse changes from an i-beam to a “hand”, just like it does in your demo.

Also, I note that the server is never called to load the data.

Conversely, if I simply put a dropdownlist into the form, like this:

$(“#units”).jqxDropDownList({ theme: “office”, source: daUnitList, displayMember: “Name”, valueMember: “Id”, width: “200px”, height: “25px” });

<div id=”units”></div>

The server is called and the data displays. So I know the AJAX request is working correctly.

Any ideas why the dropdownlist is invisible?

February 5, 2015 at 12:23 am DropDown in DataTable is invisible #66549

cliftonm
Participant

I’ve created a single page test, no AJAX, etc., that follows the example on the demo page almost exactly, except of course the data is different and the column names are different. As you can see, there’s no dropdownlist! Here’s the page:

<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Test</title>
<link type=”text/css” rel=”stylesheet” href=”/Scripts/jqwidgets/styles/jqx.base.css” />

<script type=”text/javascript” src=”/Scripts/jquery-1.11.2.min.js”></script>

<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”/Scripts/jqwidgets/jqxslider.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {

var data = [
{ Id: 4, Abbr: ‘lbs’, Name: ‘pounds’, UnitCost: 5 },
{ Id: 5, Abbr: ‘each’, Name: ‘Each’, UnitCost: 6 },
{ Id: 6, Abbr: ‘ft’, Name: ‘Feet’, UnitCost: 7 },
{ Id: 12, Abbr: ‘in’, Name: ‘Inches’, UnitCost: 8 },
];

var source =
{
localData: data,
dataType: “array”,
updateRow: function (rowId, rowData, commit) {commit(true);},
dataFields:
[
{ name: ‘Id’, type: ‘number’ },
{ name: ‘Abbr’, type: ‘string’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘UnitCost’, type: ‘number’ },
]
};

var dataAdapter = new $.jqx.dataAdapter(source);

var getEditorDataAdapter = function (datafield) {
var source =
{
localData: data,
dataType: “array”,
dataFields:
[
{ name: ‘Id’, type: ‘number’ },
{ name: ‘Abbr’, type: ‘string’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘UnitCost’, type: ‘number’ },
]
};
var dataAdapter = new $.jqx.dataAdapter(source, { uniqueDataFields: [datafield] });
return dataAdapter;
};

$(‘#materialTable’).jqxDataTable(
{
width: 850,
source: dataAdapter,
pageable: true,
pagerButtonsCount: 10,
editable: true,
autoRowHeight: false,
columns: [
{
text: ‘Unit’, colummnType: ‘template’, dataField: ‘Name’, width: ‘20%’,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
editor.jqxDropDownList({
source: getEditorDataAdapter(‘Name’),
displayMember: ‘Name’,
valueMember: ‘Name’,
width: width,
height: height
});
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
editor.jqxDropDownList({ width: width, height: height });
editor.val(cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
return editor.val();
}
},
{ text: ‘Cost’, dataField: ‘UnitCost’, width: ‘20%’ }
]
});

$(“#units”).jqxDropDownList({
source: getEditorDataAdapter(‘Id’),
displayMember: “Name”, valueMember: “Id”, width: “200px”, height: “25px”
});

});

</script>
</head>
<body>
<div>
<h1>Materials</h1>
</div>
<div id=”materialTable”></div>
<div id=”units”></div>
</body>
</html>

February 5, 2015 at 6:42 am DropDown in DataTable is invisible #66561

Peter Stoev
Keymaster

Hi cliftonm,

You did not do it as in the sample because the sample works. The problem in this code is the Typo – colummnType, it should be columnType.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 5, 2015 at 12:55 pm DropDown in DataTable is invisible #66623

cliftonm
Participant

Wow, do I feel like an idiot. I even changed that from “colummntype” to “colummnType” at one point and didn’t notice the typo! Thanks!

You wouldn’t by any chance have a debug version that detects these problems (it’s not the first time I’ve encountered a silent “doesn’t work” as the result of a typo) ?

February 5, 2015 at 12:59 pm DropDown in DataTable is invisible #66624

Peter Stoev
Keymaster

Hi cliftonm,

Debug versions are available only for licensed customers with Developer/Enterprise license. For evaluation and non-commercial usage, only minified is available.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 5, 2015 at 8:56 pm DropDown in DataTable is invisible #66649

cliftonm
Participant

Good to know. I’ll consider it even though I’m using jqWidgets on an open source project.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.