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
vikram fartyalvikram fartyal 

jqgrid demo in salesfoce

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. By looking into the debug logs i came to know that my java script is not at all calling the controller method. Below is my visualforce page code & Controller code

VF page:

<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>

Controller:

global class GridController {

    public GridController() {

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

Any help or quick suggestions?
Grazitti TeamGrazitti Team
Hi Vikram,

you have syntax error at line 20 --> data&colon; jsonString,
change the variable name and use colon (:) instead of semicolon (;)


Please Mark this as Answer if it helps you
--
Regards,
Grazitti Team
Web: www.grazitti.com
Email: sfdc@grazitti.com
vikram fartyalvikram fartyal
Hi Grazitti Team,

First of all thanks for looking into the code that sharply. It actually helped a bit but still not able to see the data in grid.

Its now able to make Remote call but not handling the data in callback method it seems. Its giving following error:

Uncaught TypeError: undefined is not a function             
search                                                                              
(anonymous function)

grid error in chrome console


when i write a test method with an alert in body it works fine. Can you see any syntax error in this??