Issue with editor.jqxComboBox

[DavidSimmonsParticipant]

When using the editor.jqxComboBox with the autoComplete: true if I select the item the update is correct. if I type the value and then pick the value, theedit is incorrect as it returns a 0 for the value.

var StateSource = {
datatype: “json”,
datafields: [
{ name: ‘ID’ },
{ name: ‘State’ }
],
id: ‘id’,
url: ‘../State/StateJSON.php’,
async: false
};

var StateDataAdapter = new $.jqx.dataAdapter(StateSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var state = records[i];
data.push(state);
}
return data;
}
});

{ text: 'StateID', dataField: 'StateID', width: 80, hidden: true, editable: true,
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == "") return oldvalue;
}
},
{ text: 'State', dataField: 'State', width: 120, editable: true, filterable: true, filtertype: 'list', columntype: 'combobox',
createeditor: function (row, column, editor) {
editor.jqxComboBox({selectedIndex: 0, source: StateDataAdapter, autoComplete: true, autoOpen: false, remoteAutoComplete: false, displayMember: "State", valueMember: "ID"});
editor.bind('select', function (event) {
var item = event.args.item;
if (item) {
var value = item.value;
var label = item.label;
StateIndex = value;
}
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == "") return oldvalue;
}
},

[DavidSimmonsParticipant]

I one column with is an inventory item that may have 2000 items. I am trying to use it with the ComboBox so I can type in part of the value and then select the item. Is there a way to increase performance? When you click the cell that is going to contain the ComboBox, the is a huge delay. I really need this function, PLEASE HELP….

[Peter StoevKeymaster]

Hi David,

Combobox’s auto-complete mode currently is not implemented in jqxGrid. That’s the reason it is disabled by default.
Matching a string among 2000 items on each key stroke could result in poor performance. That’s the reason we implemented the remoteAutoComplete feature of jqxComboBox.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DavidSimmonsParticipant]

Sorry this is the smallest I could make the example not leave out anything…

The problem is with State ComboBox. If you edit the State using the drop down arrow and select the stated everything works correct. If use the comboBox as autofill and type the first 3 characters of a state, than select the state and press enter it returns 1 always.

State ***************
prepare(“SELECT ID, State FROM States Order by State”);
$preparedStatement->execute();

$result = $preparedStatement->fetchAll();

echo json_encode($result);
….
?>

CompanyGrid *******

$(document).ready(function () {
var theme = “energyblue”;
var selectedID;
var selectedRowID;
var StateIndex=0;

var StateSource = {
datatype: “json”,
datafields: [
{ name: ‘ID’ },
{ name: ‘State’ }
],
id: ‘id’,
url: ‘../State/StateJSON.php’,
async: false
};

var StateDataAdapter = new $.jqx.dataAdapter(StateSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var state = records[i];
data.push(state);
}
return data;
}
});

var source = {
datatype: "json",
totalrecords: 1000,
datafields: [
{ name: 'ID' },
{ name: 'Company' },
{ name: 'Address' },
{ name: 'City' },
{ name: 'StateID'},
{ name: 'State'},
{ name: 'Zip' },
{ name: 'Phone' },
{ name: 'Fax' },
{ name: 'Email' },
{ name: 'Created' },
{ name: 'CreatedBy' },
{ name: 'Updated' },
{ name: 'UpdatedBy' },
{ name: '' }
],
id: 'ID',
url: "CompanyData.php",
addrow: function (rowid, commit) {
var data = "insert=true&";
$.ajax({
dataType: 'json',
url: 'CompanyData.php',
data: data,
cache: false,
success: function (data, status, xhr) {
$("#message").html("Transaction: " + xhr.responseText);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
$("#message").html("Transaction: " + jqXHR.responseText);
commit(false);
}
});
$("#jqxgrid").jqxGrid('updatebounddata');
},
deleterow: function (rowid, commit) {
var data = "delete=true&" + $.param({ id: rowid });
$.ajax({
dataType: 'json',
url: 'CompanyData.php',
cache: false,
data: data,
success: function (data, status, xhr) {
$("#message").html("Transaction: " + xhr.responseText);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
$("#message").html("Transaction: " + jqXHR.responseText);
commit(false);
}
});
$("#jqxgrid").jqxGrid('updatebounddata');
},
updaterow: function (rowid, rowdata, commit) {
/*alert("updaterow"+rowid+" "+rowdata.Description);
$.each(rowdata, function(index, value) {
alert(index + ': ' + value);
});*/
},
sort: function () {
$("#jqxgrid").jqxGrid('updatebounddata');
}
};

var self = this;
var pagerrenderer = function () {
var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
var paginginformation = datainformation.paginginformation;

var container = $("

“);

var table = $(“”);
table.appendTo(container);

var tableRow = $(“”);
tableRow.appendTo(table);

var tableLeft = $(“”);
tableLeft.appendTo(tableRow);

var tableCenter = $(“”);
tableCenter.appendTo(tableRow);

var tableRight = $(“”);
tableRight.appendTo(tableRow);

var pagingLeftSpacer = $(““);
pagingLeftSpacer.appendTo(tableLeft);
self.pagingLeftSpacer = pagingLeftSpacer;

var addButton = $(“

“);
addButton.find(‘span’).addClass(‘ui-icon ui-icon-plus’);
addButton.width(16);
addButton.jqxTooltip({ content: ‘Add Record!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme });
addButton.appendTo(tableLeft);

var deleteButton = $(“

“);
deleteButton.find(‘span’).addClass(‘ui-icon ui-icon-trash’);
addButton.width(16);
deleteButton.jqxTooltip({ content: ‘Delete Selected Record!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme });
deleteButton.appendTo(tableLeft);

var refreshButton = $(“

“);
refreshButton.find(‘span’).addClass(‘ui-icon ui-icon-refresh’);
addButton.width(16);
refreshButton.jqxTooltip({ content: ‘Refresh Grid!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme });
refreshButton.appendTo(tableLeft);

var leftButton = $(“

“);
leftButton.find(‘span’).addClass(‘ui-icon ui-icon-triangle-1-w’);
leftButton.width(20);
leftButton.jqxTooltip({ content: ‘Previous Record!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme });
leftButton.appendTo(tableCenter);

var pagingLabel = $(“

“);
pagingLabel.text(1 + paginginformation.pagenum + ‘ of ‘ + Math.ceil(datainformation.rowscount / paginginformation.pagesize) + ‘ Pages ‘ + datainformation.rowscount + ‘ Records’);
pagingLabel.appendTo(tableCenter);
self.pagingLabel = pagingLabel;

var rightButton = $(“

“);
rightButton.find(‘span’).addClass(‘ui-icon ui-icon-triangle-1-e’);
rightButton.width(20);
rightButton.jqxTooltip({ content: ‘Next Record!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme });
rightButton.appendTo(tableCenter);

var pagingRightSpacer = $(““);
pagingRightSpacer.appendTo(tableLeft);
self.pagingRightSpacer = pagingRightSpacer;

//var saveButton = $(“

“);
//saveButton.find(‘span’).addClass(‘ui-icon ui-icon-disk’);
//saveButton.width(16);
//saveButton.jqxTooltip({ content: ‘Save Grid State!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme });
//saveButton.appendTo(tableRight);

//var restoreButton = $(“

“);
//restoreButton.find(‘span’).addClass(‘ui-icon ui-icon-folder-open’);
//restoreButton.width(16);
//restoreButton.jqxTooltip({ content: ‘Restore Grid State!’, position: ‘mouse’, name: ‘Tooltip’, theme: theme });
//restoreButton.appendTo(tableRight);

var handleStates = function (event, button, className, add) {
button.bind(event, function () {
if (add == true) {
button.find(‘div’).addClass(className);
}
else button.find(‘div’).removeClass(className);
});
}

addButton.click(function (event) {
var rowcount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
$(“#jqxgrid”).jqxGrid(‘addrow’, rowcount++, ”);
});

deleteButton.click(function (event) {
if(selectedID != null || selectedID > 0){
$(“#jqxgrid”).jqxGrid(‘deleterow’, selectedID);
}else{
$(“#message”).html(“You Must Select a Row First!”);
}
});

refreshButton.click(function (event) {
$(“#jqxgrid”).jqxGrid
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
});

rightButton.click(function () {
$(“#jqxgrid”).jqxGrid(‘gotonextpage’);
});

leftButton.click(function () {
$(“#jqxgrid”).jqxGrid(‘gotoprevpage’);
});

/*saveButton.click(function () {
$(“#jqxgrid”).bind(“bindingcomplete”, function (event) {
$(“#jqxgrid”).jqxGrid(‘savestate’);
});
});*/

/*restoreButton.click(function () {
$(“#jqxgrid”).bind(“bindingcomplete”, function (event) {
$(“#jqxgrid”).jqxGrid(‘loadstate’);
});
});*/

if (theme != ”) {
handleStates(‘mousedown’, rightButton, ‘icon-arrow-right-selected-‘ + theme, true);
handleStates(‘mouseup’, rightButton, ‘icon-arrow-right-selected-‘ + theme, false);
handleStates(‘mousedown’, leftButton, ‘icon-arrow-left-selected-‘ + theme, true);
handleStates(‘mouseup’, leftButton, ‘icon-arrow-left-selected-‘ + theme, false);
handleStates(‘mouseenter’, rightButton, ‘icon-arrow-right-hover-‘ + theme, true);
handleStates(‘mouseleave’, rightButton, ‘icon-arrow-right-hover-‘ + theme, false);
handleStates(‘mouseenter’, leftButton, ‘icon-arrow-left-hover-‘ + theme, true);
handleStates(‘mouseleave’, leftButton, ‘icon-arrow-left-hover-‘ + theme, false);
}

return container;
}

$(“#jqxgrid”).bind(‘pagechanged’, function () {
var datainformation = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginformation = datainformation.paginginformation;
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pagescount = paginginformation.pagescount;
self.pagingLabel.text(1 + paginginformation.pagenum + ‘ of ‘ + Math.ceil(datainformation.rowscount / paginginformation.pagesize) + ‘ Pages ‘ + datainformation.rowscount + ‘ Records’);
});

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

$(“#jqxgrid”).jqxGrid({
theme: theme,
width: ‘99.9%’,
height: 600,
source: dataAdapter,
scrollbarsize: 10,
sortable: true,
sorttogglestates: 1,
altrows: true,
virtualmode: false,
pageable: true,
pagesize: 20,
pagerrenderer: pagerrenderer,
enablehover: false,
enabletooltips: false,
autoheight: false,
autosavestate: false,
autoloadstate: false,
columnsresize: true,
columnsreorder: false,
editable: true,
selectionmode: “singlecell”,
filterable: true,
showfilterrow: true,
statusbarheight: 26,
showstatusbar: false,
columns: [
{ text: ‘ID’, dataField: ‘ID’, width: 60, hidden: false, pinned: true, editable: false},
{ text: ‘Company’, dataField: ‘Company’, width: 200, pinned: true, editable: true, filterable: true, filtertype: ‘textbox’},
{ text: ‘Address’, dataField: ‘Address’, width: 160, editable: true, filterable: true, filtertype: ‘textbox’ },
{ text: ‘City’, dataField: ‘City’, width: 120, editable: true, filterable: true, filtertype: ‘textbox’ },
{ text: ‘StateID’, dataField: ‘StateID’, width: 80, hidden: true, editable: true,
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == “”) return oldvalue;
}
},
{ text: ‘State’, dataField: ‘State’, width: 120, editable: true, filterable: true, filtertype: ‘list’, columntype: ‘combobox’,
createeditor: function (row, column, editor) {
editor.jqxComboBox({selectedIndex: 0, source: StateDataAdapter, autoComplete: true, autoOpen: false, searchMode: ‘startswithignorecase’, enableSelection: false, displayMember: “State”, valueMember: “ID”});
editor.bind(‘select’, function (event) {
var item = event.args.item;
if (item) {
var value = item.value;
var label = item.label;
StateIndex = value;
alert(StateIndex);
}
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == “”) return oldvalue;
}
},
{ text: ‘Zip’, dataField: ‘Zip’, width: 100, editable: true, filterable: true, filtertype: ‘textbox’ },
{ text: ‘Phone’, dataField: ‘Phone’, width: 130, editable: true, filterable: false },
{ text: ‘Fax’, dataField: ‘Fax’, width: 130, editable: true, filterable: false },
{ text: ‘Email’, dataField: ‘Email’, width: 200, editable: true, filterable: false },
{ text: ‘Created’, dataField: ‘Created’, width: 160, editable: false, filterable: false },
{ text: ‘CreatedBy’, dataField: ‘CreatedBy’, width: 160, editable: false, filterable: true, filtertype: ‘textbox’ },
{ text: ‘Updated’, dataField: ‘Updated’, width: 160, editable: false, filterable: false },
{ text: ‘UpdatedBy’, dataField: ‘UpdatedBy’, width: 160, editable: false, filterable: true, filtertype: ‘textbox’ },
{ text: ”, dataField: ”, width: ‘50%’, editable: false, filterable: false }
]
});

$(“#jqxgrid”).bind(‘cellvaluechanged’, function (event) {
var rowid = args.rowindex;
var column = args.datafield;
var value = args.newvalue;
var oldvalue = args.oldvalue;
var data = new Object();

var id = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, rowid, “ID”);

//This is used to update the hidden column StateID
if(column === “State”) {
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowid, “StateID”, StateIndex);
return;
}

data.update=’true&’;
data.id=id;
data.column=column;
data.value=value;

if(value !== oldvalue ){
$.ajax({
dataType: ‘json’,
url: ‘CompanyData.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
$(“#message”).html(“Transaction: ” + xhr.responseText);
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
$(“#message”).html(“Transaction: ” + jqXHR.responseText);
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
commit(false);
}
});
}
});

$(‘#jqxgrid’).bind(‘rowdoubleclick’, function (event) {
var args = event.args;
var row = args.rowindex;
selectedRowID = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “ID”);
$(“#message”).html(“Selected RowID: ” + selectedRowID);
});

$(‘#jqxgrid’).bind(‘rowclick’, function (event) {
var args = event.args;
var row = args.rowindex;
selectedID = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “ID”);
});

});

CompanyData *************
prepare(“insert into $table (Created, CreatedBy) value (?,?)”);
$preparedStatement->bindParam(1, $created, PDO::PARAM_STR);
$preparedStatement->bindParam(2, $createdby, PDO::PARAM_STR);
if ($preparedStatement->execute()) {
echo “Insert Successfull, Please Complete All Information!”;
} else {
echo “Insert Failed! $preparedStatement->error”;
}
} else if (isset($_GET[‘update’])) {
if (isset($_REQUEST[“id”])) {
$id = jqGridUtils::GetParam(‘id’);
} else {
die(‘Error no id!’);
}

if (isset($_REQUEST[“column”])) {
$column = jqGridUtils::GetParam(‘column’);
} else {
die(‘Error no column!’);
}

if (isset($_REQUEST[“value”])) {
$value = jqGridUtils::GetParam(‘value’);
} else {
die(‘Error no value!’);
}

//Rename Foreign Key Columns
if ($column === “StateID”) {
$column = “State”;
}

$updated = date(“Y/m/d H:i”);
$updatedby = $_SESSION[‘UserName’];

getMetaData($conn, $table, $id, $column, $value, $updated, $updatedby);
} else if (isset($_GET[‘delete’])) {

} else if (isset($_GET[‘sortdatafield’])) {
$sortfield = $_GET[‘sortdatafield’];
$sortorder = $_GET[‘sortorder’];
if ($sortfield != NULL) {
if ($sortorder == “desc”) {
$sql = “SELECT ID, Company, Address, City, State StateID, (SELECT State FROM States WHERE States.ID=$table.State) State, Zip, Phone, Fax, Email, Created, CreatedBy, Updated, UpdatedBy FROM $table ORDER BY $table.$sortfield DESC”;
} else if ($sortorder == “asc”) {
$sql = “SELECT ID, Company, Address, City, State StateID, (SELECT State FROM States WHERE States.ID=$table.State) State, Zip, Phone, Fax, Email, Created, CreatedBy, Updated, UpdatedBy FROM $table ORDER BY $table.$sortfield ASC”;
}
$preparedStatement = $conn->prepare($sql);
if ($preparedStatement->execute()) {
$result = $preparedStatement->fetchAll();
echo json_encode($result);
} else {
echo “Query Failed! $preparedStatement->error”;
}
}
} else {
$sql = “SELECT ID, Company, Address, City, State StateID, (SELECT State FROM States WHERE States.ID=$table.State) State, Zip, Phone, Fax, Email, Notes, Created, CreatedBy, Updated, UpdatedBy FROM $table Order By Company”;
$preparedStatement = $conn->prepare($sql);
if ($preparedStatement->execute()) {
$result = $preparedStatement->fetchAll();
echo json_encode($result);
} else {
echo “Query Failed! $preparedStatement->error”;
}
}
?>

Update *********************
prepare(“SELECT column_name name, if(column_type=’date’, column_type,LEFT(column_type,INSTR(column_type, ‘(‘)-1)) type, if(column_type=”, column_type, substr(column_type, INSTR(column_type, ‘(‘)+1, (INSTR(column_type, ‘)’))-(INSTR(column_type, ‘(‘)+1)) ) size FROM information_schema.columns WHERE table_name=? AND column_name=?”);
$preparedStatement->bindParam(1, $table, PDO::PARAM_STR);
$preparedStatement->bindParam(2, $column, PDO::PARAM_STR);
if ($preparedStatement->execute()) {
$preparedStatement->bindColumn(“name”, $name);
$preparedStatement->bindColumn(“type”, $type);
$preparedStatement->bindColumn(“size”, $size);
while ($row = $preparedStatement->fetch(PDO::FETCH_BOUND)) {
if ($type === “int”) {
updateColumnINT($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size);
} else if ($type === “float”) {
updateColumnFloat($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size);
} else if ($type === “varchar”) {
updateColumnVARCHAR($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size);
} else if ($type === “date”) {
updateColumnVARCHAR($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size);
} else {
die(“Type unknown! $type”);
}
}
} else {
echo “MetaData Failed! “;
}
}

function updateColumnINT($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size) {
$preparedStatement = $conn->prepare(“UPDATE $table set $table.$column=?, $table.Updated=?, $table.UpdatedBy=? WHERE id=?”);
$preparedStatement->bindParam(1, $value, PDO::PARAM_INT);
$preparedStatement->bindParam(2, $updated, PDO::PARAM_STR);
$preparedStatement->bindParam(3, $updatedby, PDO::PARAM_STR);
$preparedStatement->bindParam(4, $id, PDO::PARAM_INT);
if ($preparedStatement->execute()) {
echo “$column Updated Successfully! $id “;
} else {
echo “PreparedStatement Failed! $table $id $column $value $preparedStatement->error “;
}
}

function updateColumnFloat($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size) {
$preparedStatement = $conn->prepare(“UPDATE $table set $table.$column=?, $table.Updated=?, $table.UpdatedBy=? WHERE id=?”);
$preparedStatement->bindParam(1, $value, PDO::PARAM_STR);
$preparedStatement->bindParam(2, $updated, PDO::PARAM_STR);
$preparedStatement->bindParam(3, $updatedby, PDO::PARAM_STR);
$preparedStatement->bindParam(4, $id, PDO::PARAM_INT);
if ($preparedStatement->execute()) {
echo “$column Updated Successfully! $id “;
} else {
echo “PreparedStatement Failed! $table $id $column $value $preparedStatement->error “;
}
}

function updateColumnVARCHAR($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size) {
$preparedStatement = $conn->prepare(“UPDATE $table set $table.$column=?, $table.Updated=?, $table.UpdatedBy=? WHERE id=?”);
$preparedStatement->bindParam(1, $value, PDO::PARAM_STR);
$preparedStatement->bindParam(2, $updated, PDO::PARAM_STR);
$preparedStatement->bindParam(3, $updatedby, PDO::PARAM_STR);
$preparedStatement->bindParam(4, $id, PDO::PARAM_INT);
if ($preparedStatement->execute()) {
echo “$column Updated Successfully! $id “;
} else {
echo “PreparedStatement Failed! $table $id $column $value $preparedStatement->error “;
}
}

function updateColumnDate($conn, $table, $id, $column, $value, $updated, $updatedby, $name, $type, $size) {
$preparedStatement = $conn->prepare(“UPDATE $table set $table.$column=?, $table.Updated=?, $table.UpdatedBy=? WHERE id=?”);
$preparedStatement->bindParam(1, $value, PDO::PARAM_STR);
$preparedStatement->bindParam(2, $updated, PDO::PARAM_STR);
$preparedStatement->bindParam(3, $updatedby, PDO::PARAM_STR);
$preparedStatement->bindParam(4, $id, PDO::PARAM_INT);
if ($preparedStatement->execute()) {
echo “$column Updated Successfully! $id “;
} else {
echo “PreparedStatement Failed! $table $id $column $value $preparedStatement->error “;
}
}
?>

[DavidSimmonsParticipant]

Can you help me understand your example below? I am not sure what is being send as you type. In a PHP design what am I testing for the search? I am would really appreciate any help so I can use autoFill and increase my performance….

In this example is demonstrated the auto-complete feature of jqxComboBox. Suggestions are displayed when at least two characters are entered into the field.

$(document).ready(function () {
var theme = getTheme();
// prepare the data
var source = {
datatype: “jsonp”,
datafields: [
{ name: ‘countryName’ },
{ name: ‘continentCode’ }
],
url: “http://ws.geonames.org/searchJSON”,
data: {
featureClass: “P”,
style: “full”,
maxRows: 12
}
};

var dataAdapter = new $.jqx.dataAdapter(source, {
formatData: function (data) {
data.name_startsWith = $(“#jqxcombobox”).jqxComboBox(‘searchString’);
return data;
}
});

$(“#jqxcombobox”).jqxComboBox({
width: 250,
height: 25,
source: dataAdapter,
remoteAutoComplete: true,
theme: theme,
selectedIndex: 0,
displayMember: “countryName”,
valueMember: “continentCode”,
renderer: function (index, label, value) {
var item = dataAdapter.records[index];
if (item != null) {
var label = item.countryName + “, ” + item.continentCode;
return label;
}
return “”;
},
renderSelectedItem: function(index, item)
{
var item = dataAdapter.records[index];
if (item != null) {
var label = item.countryName + “, ” + item.continentCode;
return label;
}
return “”;
},
search: function (searchString) {
dataAdapter.dataBind();
}
});
});

ex: be

[DavidSimmonsParticipant]

Having an issue when using the dropdown arrow on the comboBox the list is empty in this example. Howevery when typing in the an item the is has data and if selected is correct. Can anyone help me figure out what I am doing wrong?

var CompanySource = {
datatype: “json”,
datafields: [
{ name: ‘ID’ },
{ name: ‘Company’ }
],
id: ‘id’,
url: ‘../Company/CompanyJSON.php’,
async: false,
data: {
featureClass: “P”,
style: “full”,
maxRows: 12
}
};

var CompanyDataAdapter = new $.jqx.dataAdapter(CompanySource, {
formatData: function (data) {
data.name_startsWith = CompanySearch;
return data;
}
});

{ text: ‘Company’, datafield: ‘Company’, width: 200, editable: true, filterable: true, filtertype: ‘textbox’, filtertype: ‘list’, columntype: ‘combobox’,
createeditor: function (row, column, editor) {
editor.jqxComboBox({selectedIndex: 0, source: CompanyDataAdapter, remoteAutoComplete: true, autoOpen: false, dropDownHeight: 250, displayMember: “Company”, valueMember: “ID”,
renderer: function (index, label, value) {
alert(item);
var item = CompanyDataAdapter.records[index];
if (item != null) {
var label = item.Company;
return label;
}
return “test”;
},
renderSelectedItem: function(index, item) {
var item = CompanyDataAdapter.records[index];
if (item != null) {
var label = item.Company;
return label;
}
return “”;
},
search: function (searchString) {
CompanySearch = searchString;
CompanyDataAdapter.dataBind();
}
});
editor.bind(‘select’, function (event) {
var item = event.args.item;
if (item) {
var value = item.value;
var label = item.label;
CompanyIndex = value;
}
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == “”) return oldvalue;
}
},

[DavidSimmonsParticipant]

Got it working… Sorry

[Author]

Posts