jQuery Grid Plugin - jqGrid - Topic: setting up new api http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api Simple:Press Version 5.7.5.3 kadrwabadam on setting up new api http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20230 Help http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20230 Do I need to need to wrap all new api code inside:-

jQuery(document).ready(function(){

});

like this:-

jQuery(document).ready(function(){

jQuery("#list").jqGrid({
// some code
});

jQuery("#list").jqGrid('navGrid','#pager',
// some code
});

});
]]> Mon, 11 Oct 2010 21:22:07 +0300 kadrwabadam on setting up new api http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20225 Help http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20225 Thanks for your reply tony! I am doing in same manner but its not working. Here is my html:-

<head>
    <title>my title</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.5.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <style>
      html, body {
          margin: 0;
          padding: 0;
          font-size: 75%;
      }
    </style>

    <script src="js/jquery-1.4.2.min.js" type="text/javascript" ></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
         jQuery.jgrid.no_legacy_api = true;
         $.jgrid.useJSON = true;
    </script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="js/navgrid.js" type="text/javascript"></script>
</head>

<body>
<table id="list"></table>
              <div id="pager"></div>
</body>

</html>

and here is navgrid.js:-

jQuery("#list").jqGrid({
       url:'users.php',
    datatype: "xml",
       colNames:['UserID'],
       colModel:[
           {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}},
       ],
       rowNum:10,
       rowList:[10,20,30],
       pager: '#pager',
       sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"Navigator Example",
    editurl:"someurl.php",
    height:210
});

jQuery("#list").jqGrid('navGrid','#pager',
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);

and nothing shows up. If I'll insert this code in navgrid.js, it will start working:-

$(function(){
  $("#list").jqGrid({
    url:'xml/users.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['UserID','First Name', 'Last Name','Email','Status','Role'],
    colModel :[
      {name:'id', index:'id', width:55, editable: true},
      {name:'fname', index:'fname', width:90, editable: true},
      {name:'lname', index:'lname', width:80, align:'right', editable: true},
      {name:'email', index:'email', width:80, align:'right', editable: true},
      {name:'status', index:'status', width:80, align:'right', editable: true},
      {name:'role', index:'role', width:150, sortable:false, editable: true}
    ],
    pager: '#pager',
    emptyrecords: "Nothing to display",
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    caption: 'List of users',
    width: 1000
   }).navGrid('#pager',
        {edit:true, add:true, del:true, search:true, refresh:true},
        {reloadAfterSubmit:false},
        {reloadAfterSubmit:false},
        {reloadAfterSubmit:false}
        ).navButtonAdd("#pager",
         {caption:"Show/Hide", position: "last",
         title:"Click here to show/hide columns  ",
         cursor: "pointer", buttonicon:"ui-icon-add",
         onClickButton: function(){
           jQuery("#list").setColumns('navGrid','hideCol',"selrow");
           return false;
         }});
});

I am just displaying functionality. Both navgrid.js have different settings, I know

]]> Mon, 11 Oct 2010 11:58:49 +0300 tony on setting up new api http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20217 Help http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20217 Hello,

The setting shoould be loaded after locale and before grid javascript files.

something like:

..

    <script src="../../../js/jquery.js" type="text/javascript"></script>
    <script src="../../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    </script>
    <script src="../../../js/jquery.jqGrid.js" type="text/javascript"></script>
…

See here:

http://www.trirand.com/jqgridw.....#038;s=api

Regards

]]> Mon, 11 Oct 2010 09:31:45 +0300 kadrwabadam on setting up new api http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20216 Help http://www.trirand.com/blog/?page_id=393/help/setting-up-new-api#p20216

I have implemented grid successfully but it not showing using new api. I have placed:-

jQuery.jgrid.no_legacy_api = true;

before jquery.jqGrid.min.js

I have tested almost 100 times if there is any problem in implementation. There seems no mistake to me. Grid works perfectly if I call it as :-

$(function(){
$(“#list”).jqGrid({

but It won’t work if I will call it as:-

jQuery(“#list”).jqGrid(

any suggestion?

]]> Mon, 11 Oct 2010 00:53:16 +0300