[Vardhman JainParticipant]

Hi Peter,

Please confirm if it is possible to achieve this functionality.Please confirm even it is not possible to achieve the same.

[Vardhman JainParticipant]

Thanks for the reply Peter.Just wanted to know that how we would display different number of nested grid for different rows which are genrating dynamically.The current demo available in demos shows only only one nested level which is genrating statically.
In addition to this,here I want to update the nested level of a row not the row itself as there would be multiple number of nested levels in same row. Also,for updating I want a radio button in header of nested grid level upon clicking which that row will be updated.So,how would we able to access that particular row which the user will select dynamically.Finally, I want to get the details for any randomly selected nested grid level in new popup where I can validate these before updating them.As, I already mentioned above that we need to mantain all these in single session(not using request).So,it would be quiet difficult to mantain all this in single session.

I already tried implementing this and finding it quiet complex and teadoius to acheive all the required functionalities.So ,can you plaese confirm that it would be possible to acheive all the required functionalities using the nested grid. Also,can you please provide a sample code supporting these functionalities for reference.

Thanks and Regards,
Vardhman Jain

[Vardhman JainParticipant]

Thanks for the reply Dimitar.I finally got the solution for this.Actually,the grid was not getting refreshed automatically,due to which it was taking the new size of screen.So,I just used the refresh function for refreshing the grid and now it is working fine.

[Vardhman JainParticipant]

Hi Dimitar,

Thanks for your reply.I tried the code you sent yesterday,but it is not working for me.Later,I found that I am facing this issue because the js files for jqxgrid are not getting reloaded again after resizing the panels ,so the calculated column width remain same as before.

If the jqxgrid is included within iFrame then the resizing of the jqxgrid is happening. But we don’t need to use iFrame in our application.
So is there any way to reload the js files on resizing the page.

[Vardhman JainParticipant]

Ok .Thanks Anyways..

[Vardhman JainParticipant]

Hi Dimitar,

Thanks for your reply.I saw the above link but this functionality is not the one I am looking for.The above demo contains nested grids but the child grid appears within the parent grid itself in this example.However,what I need is completly new grid right below the parent grid which would appear after clicking a row from parent grid.The issue is that as the second grid doesnt load initially,so the code in filter.js doesnt get the proper value due to which it get error.So,can you please suggest any solution for this issue..

[Vardhman JainParticipant]

Hi Dimitar,

Thanks for the reply.Actually, I have already seen this link but it doesn’t contain much information regarding the difference in features between the various versions.The thing is that we want to buy an version of jqxgrid but just we want to check once that which version would be more useful for our application.So,is there any link where I can get the detailed description for each of these versions along with the respective features .

Thanks and Regards,
Vardhman Jain

[Vardhman JainParticipant]

Hi Peter,

Thanks for the solution.It is working fine for me now.

Regards,
Vardhman Jain

[Vardhman JainParticipant]

Hi Peter,

Thanks for your solution. Now we are getting correct page indexing. But one more issue we are facing that when tries to load last record page refreshes with Grid’s “gotopage” method and it takes again to first page only.
But we need it to go on last page without page refreshes. So is it possible without refreshing page?

Thanks in Advance.
Vardhman

[Vardhman JainParticipant]

Thanks for suggesting solution Peter. But I want code for “First” and “Last” pages in the grid. As you suggested, we tried implementation with pagerrenderer. But it is not working. Could you please give us code snippet for “First” and “Last” feature implementation in the grid.

Thanks & Regards,
Vardhman Jain

[Vardhman JainParticipant]

Hi Peter,

Which version should I use?

[Vardhman JainParticipant]

Hi Peter,

Thanks for your reply.I checked my code refering to link you provided.But the problem is that the same code is working in few page however in few cases it is throwing this error.Can you please look into my code once and see what may be the issue-

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<meta http-equiv=”X-UA-Compatible” content=”IE=10; IE=9; IE=8; IE=EDGE” />

<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<link href=”/BES/resources/css/login.css” rel=”stylesheet”>
<link href=”/BES/resources/css/OpsSupportGroup.css” rel=”stylesheet”>
<link href=”/BES/resources/css/BeaconStyle.css” rel=”stylesheet”>

<link href=”/BES/resources/css/jqx.base.css” rel=”stylesheet”>
<link href=”/BES/resources/css/OpsSupportGroup.css” rel=”stylesheet”>
<script src=”/BES/resources/scripts/jquery-1.10.2.js” ></script>
<script src=”/BES/resources/scripts/jquery-1.10.2.min.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxcore.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxcheckbox.js”></script>
<script src=”/BES/resources/jqwidgets/jqxcore.js”></script>
<script src=”/BES/resources/jqwidgets/jqxbuttons.js”></script>
<script src=”/BES/resources/jqwidgets/jqxscrollbar.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxmenu.js”></script>
<script src=”/BES/resources/jqwidgets/jqxgrid.js”></script>
<script src=”/BES/resources/jqwidgets/jqxgrid.selection.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxgrid.columnsresize.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxdata.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxgrid.edit.js”></script>
<script src=”/BES/resources/scripts/demos.js” ></script>
<script src=”/BES/resources/generatedata.js”></script>
<script src=”/BES/resources/jqwidgets/jqxnumberinput.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxwindow.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxlistbox.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxdropdownlist.js” ></script>
<script src=”/BES/resources/jqwidgets/jqxgrid.sort.js”></script>
<script src=”/BES/resources/jqwidgets/jqxgrid.filter.js”></script>
<script src=”/BES/resources/jqwidgets/jqxgrid.pager.js” ></script>

<script type=”text/javascript”>
$(document).ready(function () {

$(“#main-panel-bes”).css(“background-color”, “#D9EFF7”);

$(“#noti”).css(“color”, “#FFFFFF”);
$(“a”).removeClass(“a5”);
$(“a”).addClass(“aC”);

;

var temp=JSON.stringify(“done”);

if(temp.length > 7)
{
alert(temp);
window.close();
jQuery.ajax({
type : ‘GET’,
data : jQuery(this).serialize(),
url : ‘OpsSupportGroups?sessionValue=’+temp,
success : function(data, textStatus) {

},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}

var jsonString = JSON.stringify([{“securityGroupId”:”500092″,”groupName”:”Angola WellLink RT 01test”,”groupDesc”:”Ops Group for Angola WellLink RT”,”rowChangedBy”:”Shrey Chaturvedi”,”rowChangedDate”:”2014-05-26 11:51:39.0″},{“securityGroupId”:”500093″,”groupName”:”Group Qatar”,”groupDesc”:”Ops Group for Qatar WellLink RT”},{“securityGroupId”:”500094″,”groupName”:”Group Brazil”,”groupDesc”:”Ops Group for Brazil LiveWire”},{“securityGroupId”:”500098″,”groupName”:”Qatar WellLink Data Services”,”groupDesc”:”Ops Group for Qatar WellLink Data Services”},{“securityGroupId”:”25″,”groupName”:”Group United States 1test”,”groupDesc”:”testOps Group for United States WellLink RT”,”rowChangedBy”:”Richard Borremans”,”rowChangedDate”:”2014-05-05 12:12:45.0″},{“securityGroupId”:”16″,”groupName”:”Group Australia”,”groupDesc”:”Ops for Australia 2 edited”,”rowChangedBy”:”Enis Aliko”,”rowChangedDate”:”2014-04-09 17:55:23.0″},{“securityGroupId”:”23″,”groupName”:”Group Canada newly edited”,”groupDesc”:”Ops Group for Canada WellLink RT”,”rowChangedBy”:”Carmen Diluca”,”rowChangedDate”:”2014-04-19 18:43:23.0″},{“securityGroupId”:”20″,”groupName”:”Group Australia”,”groupDesc”:”Ops Group for Australia WellLink RT”},{“securityGroupId”:”28″,”groupName”:”Group Canada”,”groupDesc”:”Ops Group for Canada WellLink Data”},{“securityGroupId”:”500095″,”groupName”:”Angola LiveWire”,”groupDesc”:”Ops Group for Angola LiveWire”},{“securityGroupId”:”500096″,”groupName”:”Angola WellLink Data Services”,”groupDesc”:”Ops Group for Angola WellLink Data Services”},{“securityGroupId”:”500097″,”groupName”:”Qatar LiveWire”,”groupDesc”:”Ops Group for Qatar LiveWire”}]);

document.getElementById(“CreateDeleteButton”).disabled=true;
$(“#jqxgridtwo”).hide();
$(“#gridtwo”).hide();
$(“#text”).show();
$(“#image2”).hide();
$(“#image”).hide();

var source =
{
localdata: jsonString,
datatype: “json”,
datafields:
[
{ name: ‘securityGroupId’, type: ‘string’ },
{ name: ‘groupName’, type: ‘string’ },
{ name: ‘groupDesc’, type: ‘string’ },
{ name: ‘rowChangedBy’, type: ‘string’ },
{ name: ‘rowChangedDate’, type: ‘string’ },
],
pagesize:5,

};

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

$(“#jqxgrid”).jqxGrid(
{

width: ‘97%’,
source: dataAdapter,
pageable: true,
sortable : true,
editable: true,
selectionmode: ‘checkbox’,

showfilterrow: true,
filterable : true,
autoheight: true,
pagesize:5,

columnsresize: true,

columns: [

{ text: ‘ID’, datafield: ‘securityGroupId’, editable:false , filtertype : ‘number’, width: ‘10%’, cellsalign: ‘right’ },
{ text: ‘Name’, datafield: ‘groupName’, editable:false , filtertype : ‘textbox’, width: ‘25%’ },
{ text: ‘Description’, datafield: ‘groupDesc’, editable:false ,filtertype : ‘textbox’, width: ‘33%’ },
{ text: ‘Updated By’, datafield: ‘rowChangedBy’, editable:false , filtertype : ‘textbox’, width: ‘13%’},
{text: ‘Updated Date’, datafield: ‘rowChangedDate’, editable:false , filtertype : ‘textbox’, width: ‘15%’ },

]
});

$(“#jqxgrid”).bind(‘cellendedit’, function (event) {
if (event.args.value) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);

}
else {
$(“#jqxgrid”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
});

var datainformation=$(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var rowscount=datainformation.rowscount;

$(“#jqxgrid”).bind(‘rowselect’, function (event) {
document.getElementById(“CreateDeleteButton”).disabled=false;
var securityGroupId= event.args.row.securityGroupId;
$(“#securityGroupId”).val(securityGroupId);

jQuery.ajax({
type : ‘GET’,
data : jQuery(this).serialize(),
url : ‘AdmintoolsOps?securityGroupId=’+securityGroupId,
success : function(data, textStatus) {

document.getElementById(‘AdmintoolsOpsID’).contentDocument.location.reload(true);

},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});

jQuery.ajax({
type : ‘GET’,
data : jQuery(this).serialize(),
url : ‘DetailsAndCriteria?securityGroupId=’+securityGroupId,
success : function(data, textStatus) {

document.getElementById(‘OpsDetailsAndCriteria’).contentDocument.location.reload(true);

},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});

$(“#jqxgridtwo”).show();
$(“#gridtwo”).show();
$(“#text”).hide();
$(“#image”).hide();
$(“#image2”).show();

var rows = $(“#jqxgrid”).jqxGrid(‘selectedrowindexes’);
var wanted=rows[rows.length – 1];
for (var m = 0; m < rows.length; m++)
{
var row = $(“#jqxgrid”).jqxGrid(‘getrowdata’, rows[m]);

var selectedrowindex = rows[rows.length – m – 1];
if(selectedrowindex !=wanted ){

$(“#jqxgrid”).jqxGrid(‘unselectrow’, selectedrowindex);

$(“#jqxgrid”).jqxGrid(‘setcellvalue’, selectedrowindex, ‘available’, false);
}

}

});

$(“#image”).click(function(){
$(“#gridtwo”).show();
$(“#gridtwo”).slideDown();
$(“#text”).hide();
$(“#image”).hide();
$(“#image2”).show();
});

$(“#image2”).click(function(){
$(“#text”).hide();
$(“#gridtwo”).show();

$(“#gridtwo”).slideUp();

$(“#image2”).hide();
$(“#image”).show();
});

});
</script>

<script language=”JavaScript1.2″>
function popitup(url) {
newwindow=window.open(url,’name’,’height=590,width=790,left=170,top=70,resizable=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no’);
if (window.focus) {newwindow.focus()}
return false;
}
function deleteGroup() {
var check = $(“#jqxgridtwo”).jqxGrid(‘selectedrowindexes’);
if(check==”)
{
alert(‘Please select group(s) to delete’);
return false;
}
var r=confirm(“Are you sure you want to delete the Group(s)?”);
if (r==false)
{
return false;
}
var securityGroupId=document.getElementById(“securityGroupId”).value;

jQuery.ajax({
type : ‘GET’,
data : jQuery(this).serialize(),
url : ‘OpsSupportGroups?securityGroupId=’+securityGroupId,
success : function(data, textStatus) {
alert(“Entry deleted”);
parent.location.reload(true);

},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
})

}
</script>

</head>
<body class=’default’>
<form method=”get” name=”myForm1″ >

<input type=”hidden” name=”securityGroupId” id=”securityGroupId” />

<html>
<head>
<title>
BEACON Entitlement System
</title>

<link href=”/BES/resources/css/ChevronStyle.css” rel=”stylesheet”>

<style type=”text/css”>

</style>

</head>

<body class=’default’>
<form method=”get” name=”myForm1″ >

<input type=”hidden” name=”securityGroupId” id=”securityGroupId” />
<%
if(session.getValue(“chevronFlag”).equals(“true”)){
%>

<jsp:include page=”/ChevronHeader”/>

<%
}
else{
%>
<jsp:include page=”/Header”></jsp:include>

<%}%>

<div id=”main-panel-bes”>
<div id=”left-panel-bes”>

• <p style=”float:left;font-family: Segoe UI Light ;color:#5F5F5F; font-size:20pt;text-decoration: none;”>A</p>
• a
• b

</br></br>

• d

</br>

• e
• f
• g

</br></br>

• h

</br>

• i

</br>

</div>
<div id=”right-panel-bes”>
<div id=”page-heading”>
Page Heading

<div id=”bread-crumb-path”>
BEACON Entitlements   >>  Admin Tools   >>  Ops Support Groups
</div>
</div>

<div id=”button-ops” style=”float:left;margin-left:72%;height:10%;width:35%”> <button id=”CreateNewEditDeleteButton” type=”button” onclick=”return popitup(‘CreateNew’)”>Create New</button>

<button id=”CreateDeleteButton” type=”button” onclick=”return deleteGroup()”>Delete</button>

</div>

<div id=”headingCurrentOpsSupportGroup”><b>Current Ops Support Groups</b></div>

<div>

<div id=’jqxWidget’ style=”margin-left: 2%;”>

<div id=”jqxgrid”></div>
<br>
<div id= “stripNormal” > </div>
</div>

<div id=”image”>
“/></img>
</div>

<div id=”image2”>
“/></img>
</div>

<div id=”panel”>
<div id= “gridtwo”>
<iframe src=”DetailsAndCriteria” id=”OpsDetailsAndCriteria” name=”mainTable” frameborder=”0″ height=”230″ width=”100%” style=”position: relative”></iframe>

<div id =”jqxgridtwo”> </div>
<iframe src=”AdmintoolsOps” id=”AdmintoolsOpsID” name=”mainTable” frameborder=”0″ height=”300″ width=”100%” top=”400″ style=”position:relative;”></iframe>
</div>
</div>
</div>
</div> </div>
</form>
<%
if(session.getValue(“chevronFlag”).equals(“true”)){
%>

<jsp:include page=”/ChevronFooter”/>

<%
}
else{
%>

<jsp:include page=”/Footer”/>

<%}%>

</body>
</html>

[Author]

Posts