jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by RedantJ 9 years, 6 months ago.

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

Author

Custom dropdownlist Posts

November 3, 2015 at 8:21 pm Custom dropdownlist #77718

Participant

I am creating a custom drop down box for a table that will have a connection to a SQL backend. I am working with arrays in order to make the transition easy. Before I connect any of this to the server side, I really need to get a solid understanding how to use this with arrays. I’m stuck in creating custom dropdownlist. This current implementation works fine. I’ve noted in the code where I would like the dropdownlist to work. Can someone offer me any insight?

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Holding Bin</title>
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="./scripts/jquery-1.11.1.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/jqxmenu.js"></script>
<script type="text/javascript" src=".jqwidgets/jqxcheckbox.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/jqxgrid.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxpanel.js"></script>	
<script type="text/javascript" src="./scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// The listMakeModel array will be populated from the SQL Backend
var listMakeModel = [
{ value: "Apple Thing", label: "Apple Thing-a-ma-bob" },
{ value: "Dell Thing", label: "Dell Oogity-boo" },
{ value: "Server", label: "Server Server" }
];
var sourceMakeModel =
{
datatype: "array",
datafields: [
{ name: 'label', type: 'string' },
{ name: 'value', type: 'string' }
],
localdata: listMakeModel
};
var adapterMakeModel = new $.jqx.dataAdapter(sourceMakeModel, {
autoBind: true
});
	
// prepare the data
var data = new Array();
// These arrays will be populated from a SQL backend
var barCode =
[
"A1234", "BCBC3", "CCCCC", "DDDD"
];
var SerialNumber =
[
"12345678-9", "55555555-9", "01010101-0", "98765432-1"
];
var MakeModel =
[
"Apple Thing", "Server", "Dell Thing", "Server"
];
var purchaseOrd =
[
"123456", "555555", "010101", "888888"
];
var rmSchool =
[
"101", "200", "220", "500"
];
var bldSchool =
[
"fooHS", "fooJH", "fooES", "fooU"
];
var itemNotes =
[
"Not prepared", "ready to roll out", "Arrived broken", "check settings"
];
var itemIPAddr =
[
"", "10.10.10.10", "", "10.10.20.20"
];
var itemMACAddr =
[
"", "A1:B2:C3:D4:E5:F6", "", "A1:A1:A1:A1:A1:A1"
];
var generaterow = function (i) {
var row = {};
row["barCode"] = "";
row["SerialNumber"] = "";
row["MakeModel"] = "";
row["purchaseOrd"] = "";
row["rmSchool"] = "";
row["bldSchool"] = "";
row["itemNotes"] = "";
row["itemIPAddr"] = "";
row["itemMACAddr"] = "";
row["yesORno"] = "";
return row;
}
for (var i = 0; i < 4; i++) {
var row = {};
row["barCode"] = barCode[i];
row["SerialNumber"] = SerialNumber[i];
row["MakeModel"] = MakeModel[i];
row["purchaseOrd"] = purchaseOrd[i];
row["rmSchool"] = rmSchool[i];
row["bldSchool"] = bldSchool[i];
row["itemNotes"] = itemNotes[i];
row["itemIPAddr"] = itemIPAddr[i];
row["itemMACAddr"] = itemMACAddr[i];
row["yesORno"] = yesORno[i];
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'barCode', type: 'string' },
{ name: 'SerialNumber', type: 'string' },
{ name: 'MakeModel', value: 'MakeModelID', values: {source: adapterMakeModel.records, value: 'value', name: 'label'} },
{ name: 'MakeModelID', type: 'string' },
{ name: 'purchaseOrd', type: 'string' },
{ name: 'rmSchool', type: 'string' },
{ name: 'bldSchool', type: 'string' },
{ name: 'itemNotes', type: 'string' },
{ name: 'itemIPAddr', type: 'string' },
{ name: 'itemMACAddr', type: 'string' },
{ name: 'yesORno', type: 'string' }
],
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server - send insert command
// call commit with parameter true if the synchronization with the server is successful 
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
deleterow: function (rowid, commit) {
// synchronize with the server - send delete command
// call commit with parameter true if the synchronization with the server is successful 
//and with parameter false if the synchronization failed.
commit(true);
},
updaterow: function (rowid, newdata, commit) {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful 
// and with parameter false if the synchronization failed.
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 1130,
source: dataAdapter,
editable: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $("<div style='margin: 5px;'></div>");
toolbar.append(container);
container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
$("#addrowbutton").jqxButton();
$("#deleterowbutton").jqxButton();
// create new row.
$("#addrowbutton").on('click', function () {
var datarow = generaterow();
var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
});
// delete row.
$("#deleterowbutton").on('click', function () {
var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
var commit = $("#jqxgrid").jqxGrid('deleterow', id);
}
});
},
columns: [
{ text: 'Bar Code', datafield: 'barCode', width: 100 },
{ text: 'S / N', datafield: 'SerialNumber', width: 100 },
{ text: 'Make / Model', datafield: 'MakeModel', width: 100 },
// ************************************************************************************************************************
// Here is the issue: If I were to comment the line above, and uncomment the following code, this ASP page will go blank.
//{ text: 'Make / Model', dataField: 'MakeModelId', displayfield: 'MakeModel', columntype: 'dropdownlist',
//		createeditor: function (row, value, editor) {
//			editor.jqxDropDownList({ source: adapterMakeModel, displayMember: 'label', valueMember: 'value' });
// **************************************************************************************************************************
{ text: 'PO #', datafield: 'purchaseOrd', width: 80 },
{ text: 'Room', datafield: 'rmSchool', width: 60 },
{ text: 'School', datafield: 'bldSchool', width: 80 },
{ text: 'Notes', datafield: 'itemNotes', width: 200 },
{ text: 'IP Address', datafield: 'itemIPAddr', width: 100 },
{ text: 'MAC Address', datafield: 'itemMACAddr', width: 150 }
]
});
// events
$("#jqxgrid").on('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
$("#jqxgrid").on('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
});
</script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
        <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 10px;" id="cellendeditevent"></div>
       </div>		
    </div>
</body>
</html>

November 4, 2015 at 7:49 am Custom dropdownlist #77725

ivailo

Participant

Hi RedantJ,

You are forget to place two closing brackeds at the end of the commented part.

{ text: 'Make / Model', dataField: 'MakeModelId', displayfield: 'MakeModel', columntype: 'dropdownlist',
            		createeditor: function (row, value, editor) {
           			editor.jqxDropDownList({ source: adapterMakeModel, displayMember: 'label', valueMember: 'value' });
            		}
            },

Also you have to initialize your yesORno array.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

November 4, 2015 at 2:07 pm Custom dropdownlist #77756

RedantJ

Participant

Hello ivailo,

I’ve removed the yesORno array. We were not going to implement it.

I copied your code exactly as it is into the ASP page, and I have the same problem: the whole screen is blank. There is nothing there.

Is there something else that I missed?

November 4, 2015 at 4:31 pm Custom dropdownlist #77761

RedantJ

Participant

Son of a….

I had a “missing semi colon problem”.

Right at the top:

I now changed this to:

The code works brilliantly.

Hey, keep up the good work with jqwidgets! Great stuff!

Author

Posts

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

You must be logged in to reply to this topic.