jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Related Topics sp_TopicIcon

GRID pager center is not dsplayed.

Tags: pager center

15/12/2010
15:06

ramakrishna_r

New Member

Members

Forum Posts: 1

Member Since:
15/12/2010

Offline

hello,

the grid pager center is not displayed, i have pasted the complete code below, pleas help

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> SAP Web Portal Messaging System</title>
<link rel="stylesheet" href="http://10.28.32.35/sapweb/scripts/jquery/flora/flora.tabs.css" type="text/css" media="screen" title="Flora">
<link rel="stylesheet" href="http://10.28.32.35/sapweb/scripts/jquery/flora/flora.dialog.css" type="text/css" media="screen" title="Flora">


<link rel="stylesheet" type="text/css" media="screen" href="http://10.28.32.35/sapweb/scripts/jqgrid/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://10.28.32.35/sapweb/scripts/jqgrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://10.28.32.35/sapweb/scripts/jqgrid/ui.multiselect.css" />
<style>
html, body {
margin: 2;   /* Remove body margin/padding */
padding: 2;

    font-size: 75%;
}
/*Splitter style */

#LeftPane {
/* optional, initial splitbar position */
overflow: auto;
}
/*
* Right-side element of the splitter.
*/

#RightPane {
padding: 2px;
overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
.rotate
    {
        /* for Safari */
        -webkit-transform: rotate(-90deg);

        /* for Firefox */
        -moz-transform: rotate(-90deg);

        /* for Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
word-wrap: 'break-word';

}
.ui-tabs-panel {
height: 445px;
width:900px;
overflow: auto;
}
.ui-dialog-content {
position: relative; /* just to start a new grid */
}

/* to make the tabs fill the dialog-content, whatever its size may be */
.ui-dialog-content .ui-tabs {
      bottom: 0;
      left: 0;
      overflow: auto;
      position: absolute;
      right: 0;
      top: 0;
}

</style>
<script type="text/javascript" src="http://10.28.32.35/sapweb/scripts/jquery/jquery-1.4.4.js" > </script>
<script type="text/javascript" src="http://10.28.32.35/sapweb/scripts/jquery/jquery-ui-personalized-1.6rc2.min.js"> </script>


<script src="http://10.28.32.35/sapweb/scripts/jqgrid/jquery.layout.js" type="text/javascript"></script>
<script src="http://10.28.32.35/sapweb/scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>

$(document).ready(function(){
var url1="http://10.28.32.35/sapweb/ajax/mynewmessages_ajax.asp";
var url2="http://10.28.32.35/sapweb/ajax/my_Approved_messages.asp";
var url3="http://10.28.32.35/sapweb/ajax/my_rejected_messges.asp";
var url4="http://10.28.32.35/sapweb/ajax/new_messages_for_approval.asp";
var url5="http://10.28.32.35/sapweb/ajax/messages_rejected_by_me.asp";
var url6="http://10.28.32.35/sapweb/ajax/approved_user_messages.asp";
$(function() {
  $( "#dialog" ).dialog({
   autoOpen: false,
   show: "blind",
   hide: "explode",
   height:'350px',
   width:'350px'
  });
  });

$("#TabGroup > ul").tabs();
//-----list1-----
function getGrid(list,pager,urla,cap,stedit) {
//alert(urla);
jQuery(list).jqGrid({
url: urla,
datatype: "xml",
mtype: 'GET',
   colNames:['MSGNO','SHORT TEXT', 'CREATED BY','CREATED DATE','STATUS'],
   colModel:[
  {name:'MSGNO',index:'id', width:80,resizable:true},
     {name:'HTEXT',index:'HTEXT', width:300,resizable:false},
     {name:'CRBY',index:'CRBY', width:150, align:"right",resizable:true},
     {name:'ODATE',index:'ODATE', width:180,resizable:true},
  {name:'STATUS',index:'STATUS', width:100,resizable:true}
   ],
   pager: jQuery(pager),
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder:'desc',
height:'350',

viewrecords: true,
scroll:1,
altRows:false,
rownumbers:true,
subGrid : true,
/*subGridUrl: 'http://10.28.32.35/sapweb/ajax/my_new_msg_sub_grid_ajax.asp?',
    subGridModel: [{ name : ['NOTE NO','ADDED BY','ADATE','COMMENT','STAUS'],
                    width : [200,100,100,100,100,60],params: ['MSGNO'] }     ],
*/

subGridRowExpanded: function(subgrid_id, row_id) {
  // we pass two parameters
  // subgrid_id is a id of the div tag created whitin a table data
  // the id of this elemenet is a combination of the "sg_" + id of the row
  // the row_id is the id of the row
  // If we wan to pass additinal parameters to the url we can use
  // a method getRowData(row_id) - which returns associative array in type name-value
  // here we can easy construct the flowing
var msgnum = jQuery(list).jqGrid('getRowData', row_id);
msgnum = msgnum.MSGNO;


  var subgrid_table_id, pager_id;
  subgrid_table_id = subgrid_id+"_t";
  pager_id = "p_"+subgrid_table_id;
  $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' ></table><div id='"+pager_id+"' ></div>");
  jQuery("#"+subgrid_table_id).jqGrid({
   url:"http://10.28.32.35/sapweb/ajax/my_new_msg_sub_grid_ajax.asp?MSGNO="+msgnum,
   datatype: "xml",
   mtype:"POST",
   colNames: ['NOTE NO','ADDED BY','ADD DATE','COMMENT','STATUS'],
   colModel: [
    {name:"NOTENO",index:"NOTENO",width:90,key:true},
    {name:"ADDBY",index:"ADDBY",width:150,editable:false, edittype:'text',editoptions: {size:15, maxlength: 15}},
    {name:"ADATE",index:"ADATE",width:100,align:"right",editable:false, edittype:'text',editoptions: {size:15, maxlength: 15}},
    {name:"COMMENT",index:"COMMENT",width:'200',height:'100%' ,editable:true, edittype:'textarea',editoptions: {rows:10, cols: 15},editrules:{required:true}},
    {name:"STATUS",index:"STATUS",width:100,sortable:false,editable:stedit, edittype:'select',editoptions: {value:"2:WAIT FOR APPROVE;4:REJECTED;3:APPROVED"}}
   ],
     rowNum:20,
     pager: pager_id,
     sortname: 'NOTENO',
      sortorder: "asc",
      height: '100%',
   scroll:1,
   editurl:"http://10.28.32.35/sapweb/ajax/add_msg_note_ajax.asp?MSGNO="+msgnum

  });
  jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:false,search:false},{},
    {height:350,width:300,scroll:true,reloadAfterSubmit:true,closeAfterAdd:true,afterSubmit:processAddEdit },
    {});

  //$("#"+subgrid_id).click(function(){ jQuery("#"+subgrid_id).jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
},
subGridRowColapsed: function(subgrid_id, row_id) {
  // this function is called before removing the data
  //var subgrid_table_id;
  //subgrid_table_id = subgrid_id+"_t";
  //jQuery("#"+subgrid_table_id).remove();
},

caption:cap
});
jQuery(list).jqGrid('navGrid',pager,{edit:false,add:false,del:false,search:false},{
afterShowForm:function(form) { form.css("height", "300px"); } }
);
}

getGrid("#list1","#pager1",url1,"NEW MESSAGES",false);
getGrid("#list2","#pager2",url2,"My Approved Messages",false);
getGrid("#list3","#pager3",url3,"My Rejected Messages",false);
getGrid("#list4","#pager4",url4,"New Messages For My Approval",true);
getGrid("#list5","#pager5",url5,"Rejected User Messages",true);
getGrid("#list6","#pager6",url6,"Approved User Messages",false);

});
function processAddEdit(response, postdata) {
                //alert("processAddEdit called");
    var success = true;
                var message = ""
    //alert(response.responseText);
                /*
    var json = eval('(' + response.responseText + ')');
                if(json.errors) {
                        success = false;
                        for(i=0; i < json.errors.length; i++) {
                                message += json.errors[i] + '<br/>';
                        }
                }
                var new_id = "1";
                return [success,message,new_id];
    */
    return response.responseText;
        }


function fire(obj)
{
//alert(obj);
$.ajax({
url:"http://10.28.32.35/sapweb/ajax/get_user_details.asp?WNAME="+obj,
cache: false,
async: false,
success: function(data){
var vid = document.getElementById('dtext');
  vid.innerHTML=data;
},
dataType: "html"
});
$.fx.speeds._default = 1000;
$( "#dialog" ).dialog( "open" );
return false;
}
</script>
</head>
<body bgcolor="white" background="http://10.28.32.35/sapweb/admin/images/tatami_pattern.gif">
<DIV style="position:absolute; left:10px; top:0px; height:90%">
<%
sFullUser=Request.ServerVariables("LOGON_USER")
sUser=Split(sFullUser,"",-1)
%>
<font size =4 color="#FF9900">SAP Web Portal User Lock/Unlock System                      
                      
    <%Response.write "welcome "& sUser(1) %></font><br>
<a id="page-msg" href="http://10.28.32.35/sapweb/crunlockmsg.asp" onclick="window.open(this.href, 'popupwindow', 'width=650,height=650'); return false;">Create New Message</a>
</DIV>
<div id="TabGroup" class="flora" style="position:relative; left:10px; top:70px; height:90%">

            <ul>
                <li><a href="#fragment-1"><span>My New Messages</span></a></li>
                 <li><a href="#fragment-2"><span>My Approved </span></a></li>
                <li><a href="#fragment-3"><span>My Rejected</span></a></li>
                <li><a href="#fragment-4"><span>New For Approval</span></a></li>
                <li><a href="#fragment-5"><span>Rejected User Messages</span></a></li>
    <li><a href="#fragment-6"><span>Approved User Messages</span></a></li>
            </ul>
   <div id="fragment-1" >
   <table id="list1" style="background-color: #800000"></table>
   <div id="pager1" ></div>
   <script type=text/javascript>

   </script>
   </div>
   <div id="fragment-2" >
   <table id="list2" style="background-color: #800000"></table>
   <div id="pager2" ></div>
   </div>
   <div id="fragment-3" >
   <table id="list3" style="background-color: #800000"></table>
   <div id="pager3" ></div>
   </div>
   <div id="fragment-4" >
   <table id="list4" style="background-color: #800000"></table>
   <div id="pager4" ></div>
   </div>
   <div id="fragment-5" >
   <table id="list5" style="background-color: #800000"></table>
   <div id="pager5" ></div>
   </div>
   <div id="fragment-6" >
   <table id="list6" style="background-color: #800000"></table>
   <div id="pager6" ></div>
   </div>
   </div>
   <div id="dialog" title="User Details">
<p id='dtext'>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

</body>
</html>

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
57 Guest(s)

Currently Browsing this Page:
1 Guest(s)