function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Diwan AkashDiwan Akash 

Jqgrid in salesforce

I want to display data in a JQGrid on visualforce page. I am not getting any error but i can't also see any data.

Below is my visualforce page code & Controller code

 

Visualforce Page:

 

<apex:page standardController="Contact" showHeader="true" standardStylesheets="false" extensions="GridController" 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;      
    myp1.GridController.showContacts(name,handleContacts);
}

function handleContacts(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>

 

 

 

Controller:

 

 

global class GridController {
    public GridController(ApexPages.StandardController controller) {

    }
    
    @RemoteAction
    global static List<Contact> showContacts(String accName){
        accName = '%'+ accName+'%';
        List<Contact> lst_contacts = new List<Contact>([select id, name from contact where Account.Name LIKE : accName]);
        return lst_contacts;
    }
}

 

 

can someone help me?

Thanks,

Akash

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9
remove that one! I dont think you dont need it.
PS: I am ssuming you havent activated namespace in your org

All Answers

Avidev9Avidev9

I am not familiar with jQGrid....but found a problem with code.

 

function contactSearch(name) {
    var jsonString;      
    myp1.GridController.showContacts(name,handleContacts);
}

 what is myp1 ? Namespace of your org ?

 

 function search(jsonString) {        
        $("#pdata").jqGrid("GridUnload");
         /*     data is returned in json object format only , I guess these lines are not needed
        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,   
    });   

 

Diwan AkashDiwan Akash
The name space when I log in into my dev environment I see it as c.ap1.visual.force.com/apex/xyz.

I got this piece of code from google I don't know exactly what this myp1 is?
Avidev9Avidev9
remove that one! I dont think you dont need it.
PS: I am ssuming you havent activated namespace in your org
This was selected as the best answer
Diwan AkashDiwan Akash
It worked by removing that..
Thanks
Neeraj GuptaNeeraj Gupta

Hey can anybody please tell me how to implement delete functionality in jqgrid and salesforce ? also i need to show hover on some cells? Please help !!

vikram fartyalvikram fartyal
@Avidev9, @Diwan Akash,

i used the same code to start with jqgrid demo. Even i removed the NamespacePrefix as well but its not showing any data. By looking into the debug logs i came to know that my java script is not at all calling the controller method. 
Any suggestions???
NK@BITNK@BIT
try this one

https://nitinkhunalsalesforce.wordpress.com/2016/10/27/add-jqgrid-to-visualforce-page-using-remote-action/