jQWidgets Forums

Tagged: grid

This topic contains 3 replies, has 2 voices, and was last updated by basim.sherif 13 years ago.

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

Author

Getting multiple rows data using checkbox. Posts

April 24, 2012 at 5:54 am Getting multiple rows data using checkbox. #3595

Participant

In my code, I tried to get the rows data which are selected using checkbox.
Iam able to get the data when a checkbox is checked.But the problem is,
when the checkbox is unchecked the values are unchanged.
That means,Iam not able to remove a selected row data by unchecking the checkbox.

<html>
<title></title>
<head>
<style>
.button2 {
	-moz-box-shadow:inset 0px 0px 0px -8px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px -8px #ffffff;
	box-shadow:inset 0px 0px 0px -8px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b0b0b0), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #b0b0b0 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0b0b0', endColorstr='#dfdfdf');
	background-color:#b0b0b0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#3b3b3b;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:3px 15px;
	text-decoration:none;
	text-shadow:1px 1px 0px #bab3ba;
}.button2:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #b0b0b0) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #b0b0b0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#b0b0b0');
	background-color:#dfdfdf;
}.button2:active {
	position:relative;
	top:1px;
}
</style>
	<link type="text/css" rel="stylesheet" href="css/custom-theme/jquery-ui-1.8.18.custom.css"/>
  	<link rel="stylesheet" href="widgets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="widgets/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="widgets/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="widgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="widgets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="widgets/scripts/gettheme.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="widgets/jqwidgets/jqxgrid.sort.js"></script> 
    <script src="js/jquery.sessionTimeout.1.0.js"></script>
    <script type="text/javascript">
	
	$(document).ready(function(){
    $(document).idleTimeout();
  });
	
     $(document).ready(function () {
		  var theme = 'energyblue'
          var source =
         {
             datatype: "json",
             datafields: [
			  { name: 'invoice',type: 'int'},
                 { name: 'date'},
                 { name: 'name'},
                 { name: 'amount',type: 'float'},
                
				 
                 
             ],
             url: 'itemsgrid-data.php'
         };
 
         $("#jqxgrid").jqxGrid(
         {
             source: source,
             theme: theme,
			 width: 800,
	
             
			 
			 pageable: true,
             autoheight: true,
			 autowidth: true,
		     sortable: true,
			 editable:true,
			 selectionmode: 'none',
             
              
         columns: [
		        { disabled:true,text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
		        { text: 'Invoice No.', datafield: 'invoice', width: 100},
               { text: 'Invoice Date', datafield: 'date', width: 120},
               { text: 'Dealer Name', datafield: 'name', width:430,cellsalign: 'left' },
               { text: 'Total Amount', datafield: 'amount',minwidth: 150, resizable: false, width: 'auto', cellsalign: 'left'},
               
           ]
         });
 $("#jqxgrid").bind('cellendedit', function (event) {
                if (event.args.value) {
                    $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                }
                else {
                    $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
                }
            });
			
$('#jqxgrid').bind('rowselect', function (event){
                var rows = $("#jqxgrid").jqxGrid('selectedrowindexes');
                var selectedRecords = new Array();
				var value = new Array();
                for (var m = 0; m < rows.length; m++) {
                    var row = $('#jqxgrid').jqxGrid('getcellvalue', rows[m], "invoice");
                    selectedRecords[selectedRecords.length] = row;
					//var value = $('#jqxgrid').jqxGrid('getcellvalue', row[m], "invoice");
					
					
                }
				document.getElementById("invoice").value=selectedRecords;
				document.getElementById("rowcount").value=selectedRecords.length;
            });			
          
		
});
function pass()
{
	var rows = $("#jqxgrid").jqxGrid('selectedrowindexes');
	
	var invoice=document.getElementById("invoice").value;
for(var i=0;i<=invoice.length;i=i+2)
{
	window.open("taxinvoice-pdf.php?invoice="+invoice[i]);
}
}
function goback()
{
	document.location.href="taxinvoice.php";
}
</script>
</head>
<body>
<div id="apDiv1"></div>
<br />
<center><div id="jqxgrid">
</div></center>
<form form action=""   method="post" >
<input type="text" id="invoice" name="invoice" />
<input type="text" id="rowcount" name="rowcount" />
<center>
  <p>
    <input type="button" value="Back" onClick="goback();" class="button2"/>
    <input type="button" value="Print" id="print" onClick="pass();" class="button2"/>
    <input type="submit" value="post" name="submit" class="button2"/>
</center>
</html>