jQWidgets Forums

Tagged: grid, jqxgrid, update, updaterow

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

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

Author

what is the problem Posts
December 8, 2013 at 2:38 am what is the problem #46158

okasha
Participant

hello jqwidgets Guys

may you please help me find the problem with that simple code

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Welcome to CodeIgniter</title>
<link rel=”stylesheet” href=”<?= base_url(); ?>js/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”<?= base_url(); ?>js/jquery-2.0.3.min.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxinput.js”></script>

<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxdropdownlist.js”></script>

<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.edit.js”></script>

<script type=”text/javascript” src=”<?= base_url(); ?>js/scripts/gettheme.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
//var data = {};
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘EmployeeID’ },
{ name: ‘FirstName’ },
{ name: ‘LastName’ },
{ name: ‘Title’ },
{ name: ‘Address’ },
{ name: ‘City’ },
{ name: ‘Country’ },
{name: ‘Edit’} ],
id: ‘EmployeeID’,
url: ‘http://localhost/test/index.php/welcome/display’,
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},
updaterow: function (rowid, rowdata, commit) {
/* var data = “update=true&FirstName=” + rowdata.FirstName + “&LastName=” + rowdata.LastName + “&Title=” + rowdata.Title;
data = data + “&Address=” + rowdata.Address + “&City=” + rowdata.City + “&Country=” + rowdata.Country + “&Notes=””;
data = data + “&EmployeeID=” + rowdata.EmployeeID;
$.ajax({
dataType: ‘json’,
url: ‘http://localhost/test/index.php/welcome/display’,
data: data,
success: function (data, status, xhr) {
commit(true);
},
error: function () {
commit(false);
}
}); */
alert(“update”);
}
};
var dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1300,
rtl:true,
selectionmode: ‘checkbox’,
source: dataadapter,
theme: theme,
//editable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function () {
return dataadapter.records;
},
columns: [
{ text: ‘EmployeeID’, datafield: ‘EmployeeID’, width: 100 },
{ text: ‘First Name’, datafield: ‘FirstName’, width: 100 },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 100 },
{ text: ‘Title’, datafield: ‘Title’, width: 180 },
{ text: ‘Address’, datafield: ‘Address’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 100 },
{ text: ‘Country’, datafield: ‘Country’, width: 140 },
{ text:’Edit’,width:80,columntype:”button”, cellsrenderer: function () {
return “تعديل”;
}, buttonclick: function (row) {
editrowindex = row;
var id = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “EmployeeID”);

$(“#jqxwindow”).jqxWindow({ width: 400, height: 300,rtl:true });
$(“#first_name”).jqxInput({ width: ‘250px’, height: ’25px’});
$(“#cancel”).jqxButton({ width: ‘100’, height: ’25’});
$(“#update”).jqxButton({ width: ‘100’, height: ’25’});

$(“#first_name”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “FirstName”));

$(‘#cancel’).on(‘click’, function () { $(“#jqxwindow”).jqxWindow(“close”);
});

$(“#jqxwindow”).jqxWindow(“show”);

}}
]
});

$(‘#update’).bind(‘click’, function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
var rowdata={};
//rowdata[“FirstName”]=”mohamed”;
$(“#jqxgrid”).jqxGrid(‘updaterow’, id, rowdata);
//alert(“klkk”);
});

});

</script>
</head>
<body class=’default’>
<!– <input style=”float:right;” type=”text” name=”cust_name” id=”cust_name” size=”50″ > –>
<div style=”clear:both;”></div>
<div style=”float:right;” id=”jqxgrid”>
</div>

<div style=”display:none;” id=’jqxwindow’>
<div id=”header”></div>
<div id=”content”>

<input type=”text” name=”first_name” id=”first_name” >
<input type=”button” value=”تحديث” id=”update” >
<input type=”button” value=”الغاء” id=”cancel” >

</div>

</div>

</body>
</html>

it should alert “update” when i click “تحديث”

thanks for your help in advance

December 11, 2013 at 4:49 pm what is the problem #46350

okasha
Participant

can anyone help please

December 12, 2013 at 7:05 am what is the problem #46382

Dimitar
Participant

Hello okasha,

Everything seems fine in your code. Please make sure you are using the latest version of jQWidgets (3.0.4).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.