jQWidgets Forums
Forum Replies Created
-
Author
-
February 26, 2016 at 4:19 pm in reply to: dropdown & show a particular field dropdown & show a particular field #81874
any way..thanks…problem solved…
Dear Hristo,
did not work. may be I could not explain my requirements. I am trying to fetch records from data table through a search option. like typing T i should be able to get all the names starting with T.
If possible plz send me demo with cods which works.
regards
tapas
tpsdas@gmail.comDear Peter,
Could You kindly give me the link of the newest version of Your Software demos for my reference.Actually I am looking for Search _ Sort Grid_Sub Grid & Edit & Also putting Password in the same grid view ( All under 1 roof)
Can U kindly HELP me pleaseeee!!!
Regards
Tapas
tpsdas@gmail.comDear Peter,
Could You kindly give me the link of the newest version of Your Software demos for my reference.
Actually I hv experienced when I am able to code the Search & Edit function – i am Not Able to code Grid & Sub grid option & Search & Edit function& & Vice versa in same grid view.
Actually I am looking for Search _ Sort Grid_Sub Grid & Edit & Also putting Password in the same grid view ( All under 1 roof)
Can U kindly HELP me pleaseeee!!!
Regards
TapasDear Sir,
Tried from the demo example ( folder name : server_side_grid_editing_with_popup) .
I hv able to make the search/ sorting / edit & filter option.
BUt UN-able to code Sub grid & grouping & grid password ( Tree Option)
PLz plz help me.
Below mentioned is the code I hv tried:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In order to enter in edit mode, click any of the ‘Edit’ buttons. To save the changes, click the ‘Save’ button in the popup dialog. To cancel the changes
click the ‘Cancel’ button in the popup dialog.</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxwindow.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/jqxinput.js”></script>
<script type=”text/javascript” src=”../../scripts/gettheme.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script><script type=”text/javascript”>
$(document).ready(function () {
var source =
{
datatype: “json”,
datafields: [
{ name: ‘EmployeeID’, type: ‘string’},
{ name: ‘FirstName’, type: ‘string’},
{ name: ‘LastName’, type: ‘string’},{ name: ‘Title’, type: ‘string’}
],
cache: false,
id: ‘EmployeeID’,
url: ‘data.php’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&FirstName=” + rowdata.FirstName + “&LastName=” + rowdata.LastName + “&Title=” + rowdata.Title;
data = data + “&EmployeeID=” + rowid;$.ajax({
dataType: ‘json’,
url: ‘data.php’,
type: ‘POST’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
}
});
}
};var dataAdapter = new $.jqx.dataAdapter(source);
// initialize the input fields.
$(“#firstName”).jqxInput({width: 150, height: 23});
$(“#lastName”).jqxInput({width: 150, height: 23});$(“#title”).jqxInput({width: 150, height: 23});
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 900,
selectionmode: ‘singlecell’,
source: dataAdapter,
autoheight: true,
filterable: true,
//editable : true,
sortable: true,
pageable: true,
columns: [
{ text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 90 },
{ text: ‘First Name’, columntype: ‘dropdownlist’, datafield: ‘FirstName’, width: 150 },
{ text: ‘Last Name’, columntype: ‘dropdownlist’, datafield: ‘LastName’, width: 150 },{ text: ‘Title’, datafield: ‘Title’, width: 90 },
{ text: ‘Edit’, filterable: false, sortable:false, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.FirstName);
$(“#lastName”).val(dataRecord.LastName);$(“#title”).val(dataRecord.Title);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 280, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});$(“#popupWindow”).on(‘open’, function () {
$(“#firstName”).jqxInput(‘selectAll’);
});$(“#Cancel”).jqxButton();
$(“#Save”).jqxButton();// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { FirstName: $(“#firstName”).val(), LastName: $(“#lastName”).val(), Title: $(“#title”).val()};var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘close’);
}
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<form>
<table>
<tr>
<td align=”right”>First Name:</td>
<td align=”left”><input id=”firstName” /></td>
</tr>
<tr>
<td align=”right”>Last Name:</td>
<td align=”left”><input id=”lastName” /></td>
</tr><tr>
<td align=”right”>Title:</td>
<td align=”left”><input id=”title”/></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr></table>
</form>
</div>
</div>
</div>
</body>
</html> -
AuthorPosts