click event in the grid

[sudarshanMember]

hi i use the two grid in the same dialog box and i need the second grid value when the first grid row was already selected.i.e. i need first grid value first then only the second grid value.

[DimitarParticipant]

Hello sudarshan,

Please check it out the demo Master-Details. It may be of help to you.

Best Regards,
Dimitar

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

[sudarshanMember]

That is good but,i am trying to retrieve the value from first grid.iff the second grid is already selected.other wise the second grid row click events do not give me any response…

[sudarshanMember]

The second grid row only throw(i.e when the second grid row was click) the pupup dialog when the first grid already selected

[DimitarParticipant]

Hi sudarshan,

Please provide us with a sample code which to clarify your issue.

Best Regards,
Dimitar

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

[sudarshanMember]

$(document).ready(function(){
$(“#admission”).jqxButton({them:’energyblue’});
var student_detail=
{
datatype:”json”,
datafields:[
{name:’student_id’,type:’int’},
{name:’student_fname’,type:’string’},
{name:’student_lname’,type:’string’},
{name:’student_grade’,type:’string’},
{name:’student_rollno’,type:’string’}
],
id:’student_id’,
url:””,
};
var dataAdapter = new $.jqx.dataAdapter(student_detail, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$(“#admission_grid”).jqxGrid(
{
theme: ‘energyblue’,
selectionmode: ‘singlerow’,
rowNum:5,
pagesizeoptions:[’10’,’15’,’20’,’40’],
columns:[
{text:’First Name’,datafield:’student_fname’,width: 90},
{text:’Last Name’,datafield:’student_lname’,width: 90},
{text:’Grade’,datafield:’student_grade’,width: 50},
{text:’Roll NO’,datafield:’student_rollno’,width: 40}
]

});
$(“#admission_grid”).on(“rowdoubleclick”, function () {
//var id = $(“#admission_grid”).jqxGrid(‘getrowid’,selectedrowindex);
var selectedrowindex = $(“#admission_grid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#admission_grid”).jqxGrid(‘getdatainformation’).rowscount;
var data=$(“#admission_grid”).jqxGrid(‘getrows’)[selectedrowindex];
$(‘#f_name’).val(data.student_fname);
$(‘#lastName’).val(data.student_lname);
$(‘#grade’).val(data.student_grade);
$(‘#rollNo’).val(data.student_rollno);
$(‘#student_id’).val(data.student_id);
});

$(“#admission”).click(function (){
$(‘#admisssion’)[0].reset();
showAdmission(‘Admission::’);
});
//for the student fees details
var service_detail=
{
datatype:”json”,
datafields:[
{name:’service_code’,type:’int’},
{name:’service_detail’,type:’string’},
{name:’service_charge’,type:’string’}
],
id:’service_code’,
url:””,
};
var dataAdapter_fees = new $.jqx.dataAdapter(service_detail, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$(“#admission_grid_fees”).jqxGrid(
{
theme: ‘energyblue’,
width: 200,
height:487,
rowNum:5,
pagesizeoptions:[’10’,’15’,’20’,’40’],
columns:[
{text:’ID’,datafield:’service_code’,width: 20},
{text:’Fee Description’,datafield:’service_detail’,width: 115},
{text:’Charge’,datafield:’service_charge’,width: 65},
]

});
########## i need here the double click events only if the (student_id) value is already send or the (admission grid ) row was already clicked(selectdd ) #########
$(“#admission_grid_fees”).on(“click”, function () {

var selectedrowindex = $(“#admission_grid_fees”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#admission_grid_fees”).jqxGrid(‘getdatainformation’).rowscount;
var data=$(“#admission_grid_fees”).jqxGrid(‘getrows’)[selectedrowindex];
$(‘#service_code’).val(data.service_code);

});
});
function showAdmission(title)
{
dialog=$(‘#add_fees’).dialog({
modal: true,
‘title’: title,
dialogClass: “no-close”,
resizable: false,
height:600,
width: 1050,
show: “slow”,
draggable:true,
position:’center’,
hide: “size”,
buttons: [/*{ text: “Save”, click: function() {$( this ).find(‘form#addData’).submit(); } },*/
{text: “Ok”, click: function() {$( this ).dialog( “close” );}}]
});
}

[DimitarParticipant]

Hi sudarshan,

As far as I understand, you want the double click event on a second grid row only to work if a row of the first grid is selected. Is this correct?

Best Regards,
Dimitar

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

[sudarshanMember]

yes exactly problem is that?? Please help me dimiter

[DimitarParticipant]

Hi sudarshan,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                selectionmode: 'singlerow',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            var firstGridRow;
            $('#jqxgrid').on('rowselect', function (event) {
                var args = event.args;
                var row = args.rowindex;
                firstGridRow = row;
            });
            var cellbeginedit = function (row, datafield, columntype, value) {
                if (row != firstGridRow) return false;
            }
            $("#jqxgrid2").jqxGrid(
            {
                source: dataAdapter,
                editable: true,
                editmode: 'dblclick',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100, cellbeginedit: cellbeginedit },
                  { text: 'Last Name', datafield: 'lastname', width: 100, cellbeginedit: cellbeginedit },
                  { text: 'Product', datafield: 'productname', width: 180, cellbeginedit: cellbeginedit },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellbeginedit: cellbeginedit },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: cellbeginedit },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: cellbeginedit }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid" style="float: left;">
        </div>
        <div id="jqxgrid2" style="float: left; margin-left: 20px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[Author]

Posts