function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nupur ModiNupur Modi 

Issue with width of JQGrid in VF Page

Hi

I am using JQGrid in a VF page. I have given hardcoded pixel width to the grid which works fine for a articular resolution only. If resolution changes or someone zooms in / out the browser window, then the width of the JQGrid is disturbed. Does anyone have an idea as to how to set width of JQGrid in percentage?
Gaurav NirwalGaurav Nirwal
<apex:page controller="GridController" showHeader="true" standardStylesheets="false" id="page1" >

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/JavaScript"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
     var gridData;
     var obj;  

    function search(jsonString) {        
        $("#pdata").jqGrid("GridUnload");

        gridData = JSON.stringify(jsonString);    
        obj = JSON.parse(gridData);      

        jQuery("#pdata").jqGrid({
        data&colon; jsonString,
        datatype: 'local',
        colNames:['Id','Name'],
        colModel:[
            {name:'Id',index:'Id', width:40},
            {name:'Name',index:'Name', width:40}],
        rowNum:10,
        rowList:[5,10,20,30,50,100, 1000],
        pager: '#ppdata',
        sortname: 'name',
        viewrecords: true,
        sortorder: "desc",
        caption:"Contact Data",
        width: 800,
        height: 180,   
    });   
   $("#pdata").trigger("reloadGrid");
 }

function showDataInJqGrid(){
    var accName = document.getElementById("query").value;    
    contactSearch(accName);
}

function contactSearch(name) {
    var jsonString;
    Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.GridController.showContacts}',
            name,
            function (result, event) {
                if(event.type == 'exception'){
                    alert(event.message);
                } else{        
                    jsonString = result;        
                    search(jsonString);
                    gridData = JSON.stringify(jsonString);
                }
            },
            {escape: true}
        );

      // I first tried this below option also to call controller method but same results i got
     /*GridController.showContacts(name, function (result, event) {
                if(event.type == 'exception'){
                    alert(event.message);
                } else{        
                    jsonString = result;        
                    search(jsonString);
                    gridData = JSON.stringify(jsonString);
                }
          }); */
}

</script>

<apex:sectionHeader title="Contact Search using AccountID" subtitle="Search Contact" />
  <apex:pageBlock mode="maindetail">
    <apex:form id="qform" >
            <apex:pageBlockSection title="Search Contact for the Account" collapsible="false" columns="1" >
                <table width="100%">
                    <tr>
                        <td><h3>Enter Account Name </h3>&nbsp;&nbsp;<input type="text" id="query" />&nbsp;&nbsp;&nbsp;
                            <input type="button" value="Show Contacts " class="btn" onclick="showDataInJqGrid();" />&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                </table>
            </apex:pageBlocksection>
    </apex:form>

    <apex:pageBlockSection title="Contacts in Response" collapsible="false" rendered="true">               
        <div id="response" style="font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded" />               
        <table id="pdata"></table>
        <div id="ppdata"></div>
    </apex:pageBlocksection>
  </apex:pageblock>
</apex:page>