[hkParticipant]

ok so added width to the menu and now the grey box does not flicker so it is invisible and then shows up but looks like it is hidden then the grid loads and then the menu becomes visible.
how can I make the menu visible before lodading the grid as the grid takes a bit longer as it has to populate data from the database.
<table style=”width:100%;” >
<tr style=”background-color:#bababc”>
<td valign=”top”>
<div id=’jqxMenu’ style=’visibility: hidden;height:37px;’>

• Schedule
• Schedule Builder
• Channel

</div>
</td>
<td class=”titles” valign=top align=”right”>You are logged in as <?echo $_SESSION[“formData”][“username”];?> | Logout</td>
<td valign=top align=”right” >
<div id=’jqxMenuA’ style=’visibility: hidden;height:37px;‘>

<li id=’Admin’>Admin
<ul >
• Configure Users
• Configure Service
• Configure Channel
• Configure Automation

</div>
</td></tr></table>

<script type=”text/javascript”>
$(document).ready(function () {
$(“#jqxMenu”).jqxMenu({ width: ‘100%’, theme: ‘hkgrey’});
$(“#jqxMenu”).css(‘visibility’, ‘visible’);
$(“#jqxMenuA”).jqxMenu({ width: ’70’, theme: ‘hkgrey’});
$(“#jqxMenuA”).jqxMenu(‘setItemOpenDirection’, ‘Admin’, ‘left’);
$(“#jqxMenuA”).css(‘visibility’, ‘visible’);

[hkParticipant]

I have added a $(‘#jqxgrid’).jqxGrid(‘updatebounddata’); with every update row to refresh the page after every update to show me the right cell info. I am sure there is a better way to get the updated info from the adapter or make a new instance of the grid adapter but don’t know how to. please help

updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘../models/qp_user_data.php’,
data: data,
success: function (data, status, xhr) {
}
});
commit(true);
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
}

[hkParticipant]

geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();

this is what I have and I copied it from the example as is. The dropdown list does get the values checked and what is in the database.

The problem is with the list showing up in the grid for example “Green Tea,Doubleshot Espresso,Caffe Espresso,White Chocolate Mocha,Caffe Americano” as per the example above. The cell does not get updated with the selections unless I refresh the page and get a fresh dataAdapter
var dataAdapter = new $.jqx.dataAdapter(Source);

this is how the field is defined that is having problems –
{ text: ‘Schedule’, align: ‘center’, columngroup: ‘Services’, columntype: ‘template’, datafield: ‘schedule_service_id’, displayfield: ‘schedule_service’,
createeditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxDropDownList({
autoOpen: true, checkboxes: true, source: servicelistAdapter, displayMember: “service”, valueMember: “service_id”, width: width, height: height, animationType: ‘fade’, selectionRenderer: function () {
return “<span style=’top:4px; position: relative;’>Please Choose:</span>”;
}
});
},
initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var items = editor.jqxDropDownList(‘getItems’);
editor.jqxDropDownList(‘uncheckAll’);
var values = cellvalue.split(/,\s*/);
for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].value == values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
}
}
}
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
},

[hkParticipant]

ok so now I see the dropdown in my grid only when I click on the cell .it is blank when I start
1) how can I show the dropdown as soon as the grid loads

2) what I want is the dropdown loads with all the services as checkboxes and the ones saved in the database to be checked automatically
I can see the dropdowns and checkboxes but they are always unchecked even though the data saves to the database.

{ text: ‘Schedule’, align: ‘center’, columngroup: ‘Services’, datafield: ‘schedule_service_id’, displayfield: ‘schedule’, columntype: ‘template’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({
checkboxes: true, source: servicelistAdapter, displayMember: “service”, valueMember: “service_id”, width:180, height: 25 ,
selectionRenderer: function () {
return “<span style=’top:4px; position: relative;’>Please Choose:</span>”;
}
});
},
initeditor: function (row, value, editor) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var items = editor.jqxDropDownList(‘getItems’);
editor.jqxDropDownList(‘uncheckAll’);
var values = value.split(/,\s*/);
for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].label === values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
}
}
}
},
geteditorvalue: function (row, value, editor) {
// return the editor’s value.
return editor.val();
}
},

adapters –
var servicelist =
{
datatype: “json”,
datafields: [
{ name: ‘service_id’ },
{ name: ‘service’ }
],
url: ‘../models/qp_channel_data.php?getServiceList=true’,
root: ‘Rows’,
async: false
};
var servicelistAdapter = new $.jqx.dataAdapter(servicelist, {
autoBind: true
});

var dataAdapter = new $.jqx.dataAdapter(Source);
var getservicelistAdapter = function (datafield) {
var Source =
{
dataType: “json”,
datafields: [
{ name: ‘schedule_service_id’}
],
url: ‘../models/qp_user_data.php’,
root: ‘Rows’,
cache: true
};
var dataAdapter = new $.jqx.dataAdapter(Source, { uniqueDataFields: [datafield] });
return dataAdapter;
}

[hkParticipant]

I found an example similar to what I want but I keep getting the below error
Line: 270
Error: Unable to get property ‘split’ of undefined or null reference

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellcustomediting.htm

[hkParticipant]

how can I refresh my channel dropdown list in the checkchange function of the first service list

means if I change the servicelist the channellist should get updated accoprdingly . I want the two to be separate entities at first but change in the checkchange function

[hkParticipant]

figured it out thanks anyways

[hkParticipant]

ineed the above code to be more dynamic, as both my dropdowns are getting populated from the database using a json query.

how can I make the second query have a where service_id is what is selected in the first dropdown.

[hkParticipant]

It indeed did, thanks a lot!

[hkParticipant]

I got the left and right arrows and the add button to show up. thanks a lot just what I wanted.

how can I add the default paging controls like I had earlier – Go to page, show rows etc etc

[hkParticipant]

ok so this is what I have
popup window
<tr><td align=”right”>Service: </td><td align=”left”><div id=’servicelist’></div></td></tr>

adapter with data
var servicelist =
{ datatype: “json”,
datafields: [
{ name: ‘service_id’ },
{ name: ‘service’ }
],
url: ‘qp_main_data.php?getServiceList=true’,
async: false
};
var servicelistAdapter = new $.jqx.dataAdapter(servicelist);

how do I bind the data to the popup service field and return the service_id picked from the list

all other fields edit just fine.

thanks

[hkParticipant]

manually refreshing the page or using updatebounddata to refresh the page shows the customerid but I was expecting it to show right after it got added.
This is my addrow logic
addrow: function (rowid, rowdata, position, commit) {
var datasent = “insert=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘test_data.php’,
data: datasent
});
commit(true,’data’);

data returns uid=3 where 3 is the index and not the actual customer id

This is what calls the addrow –
$(“#addrowbutton”).on(‘click’, function (event) {
// add new empty row.
var datarow = { CompanyName: ‘Enter Company Name’, ContactName: ‘Enter Contact Name’,ContactTitle:’Enter Contact Title’};
$(“#jqxgrid”).jqxGrid(‘addrow’, null, datarow);
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
});
},

if I don’t use $(‘#jqxgrid’).jqxGrid(‘updatebounddata’); the database gets updated but commit does not repaint the customerid field all other fields are good, even if I edit the field it returns uid=the index number and not customerid=

the php logic is as below
if (isset($_GET[‘insert’]))
{
// INSERT COMMAND
$insert_query = “INSERT INTO Customers (CompanyName,ContactName,ContactTitle) VALUES (‘”.$_GET[‘CompanyName’].”‘,'”.$_GET[‘ContactName’].”‘,'”.$_GET[‘ContactTitle’].”‘);SELECT @@identity AS id”;
$result = sqlsrv_query($connect, $insert_query) or die(“SQL Error 1: ” . sqlsrv_errors());
sqlsrv_next_result($result);
sqlsrv_fetch($result);
$custid=sqlsrv_get_field($result, 0);
$data[] = array(
‘CustomerID’ => $custid,
‘Success’=>True
);
echo json_encode($data);
}

and I see the custid on this page

thanks

[hkParticipant]

I am calling $(“#table”).jqxDataTable(‘deleteRow’, rowIndex);

but rowindex is not the same as customerid ??

[hkParticipant]

is there a way in datatable to get jqxGrid(‘getdatainformation’)

[hkParticipant]

I am looking to integrate it into my PHP application , php5.3 with SQL server 2014.

[Author]

Posts