When you use jsonstring, then the datatype is automatically converted to local after reading the string.

As you know we do not support local searching in this release.

This feature is planed for next releases

Regards

Tony

Thanks alot for the reply can you please help me out i am stuck in it for last 1 week

this is my code in which sorting works fine, but i need to implement integrated toolbar searching (jqgrid 3.5) can you please suggest, currently i am using Jsonstring as my datatype

Thanks in advance:

jQuery(document).ready(function () {

    // debugger

    var mystr =

       "{" +

       "total: '1'," +

       "page: '1'," +

       "records: '5'," +

       "rows : [" +

       "{id:'1', cell:['cell11','cell12','cell13']}," +

       "{id:'2', cell:['cell21','cell22','cell23']}," +

       "{id:'3', cell:['cell31','cell32','cell33']}," +

       "{id:'4', cell:['cell41','cell42','cell43']}," +

       "{id:'5', cell:['cell51','cell52','cell53']}" +

       "]" +

       "}";

    var mygrid = jQuery("#list").jqGrid({

        url: 'JsonDS.aspx',

        ContentType: 'application/json',

        datatype: 'jsonstring',

        datastr: mystr,

        jsonReader : { root: "rows",

                                         page: "page",

                                         total: "total",

                                         records: "records",

                                         repeatitems: true,

                                         cell: "cell",

                                         id: "[id]",

                                         subgrid: { root:"rows", repeatitems: true, cell:"cell" }

                     },

        width: 990,

        colNames: ['Col 1', 'Col 2', 'Col 3'],

        colModel: [{ name: 'uno', jsonmap:'id'},

                                         { name: 'dos' },

                                         { name: 'tres'}],

        rowNum: 10,

        mtype: "POST",

        rowList: [10, 20, 30],

        pager: '#pager',

        sortname: 'id',

        viewrecords: true,

        rownumbers: true,

        sortorder: "desc",

        gridview: true,

        caption: "Toolbar Search Example"

    });

    jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: true, refresh: false });

    jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Toggle", title: "Toggle Search Toolbar", buttonicon: 'ui-icon-pin-s',

        onClickButton: function () {

            mygrid[0].toggleToolbar();

        }

    });

    jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Clear", title: "Clear Search", buttonicon: 'ui-icon-refresh',

        onClickButton: function () {

            mygrid[0].clearToolbar();

        }

    });

    // Filtertoolbar

    jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Search", title: "Search", buttonicon: 'ui-icon-search',

        onClickButton: function () {

            mygrid[0].triggerToolbar();

        }

    });

    //mygrid.filterToolbar();

    jQuery("#list").jqGrid('filterToolbar');

    //jqGrid.triggerToolbar();

    // FilterGrid

    $("#search").filterGrid("#list", {

        gridModel: false,

        filterModel: [{

            label: 'Search',

            name: 'search',

            stype: 'text'

        } ]

    });

    //SearchGrid

    $("#bsdata").click(function () {

        jQuery("#list").jqGrid('searchGrid',

              { sopt: ['cn', 'bw', 'eq', 'ne', 'lt', 'gt', 'ew'] }

       );

    });

    $("#did").click(function () {

    });

});          

jqGrid does not have nothing to do with the server side code.

Instead that I do not understand ASP, I do not see a code where you accept the parameters posted from grid and then perform the search based on these parametrs and return the appropriate result.

Best Regards

Tony

I am implementing jqgrid in my project.I have fetched the record via JSON and data is showing in the grid.

But Searching and Sorting is not working.

Please give me suggestions about the prerequisites required for searching.

Also point out the mistakes in the code.

Please reply asap.

This is my code.

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #abc
        {
            background:red;
            border:width:100px;
        }
    </style>
    <link href="jquery.jqGrid-3.6.1/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="jquery.jqGrid-3.6.1/src/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="jquery.jqGrid-3.6.1/src/css/ui.multiselect.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="jquery.jqGrid-3.6.1/src/css/jquery.searchFilter.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="Scripts/jquery-ui-1.7.1.custom.css" rel="stylesheet" media="screen" type="text/css" />
   
    <script src="jquery.jqGrid-3.6.1/js/jquery-1.3.2.min.js" type="text/javascript"></script>   
    <script src="Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-3.6.1/src/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-3.6.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <!--<script src="jquery.jqGrid-3.6.1/src/grid.loader.js" type="text/javascript"></script>-->
    <script src="jquery.jqGrid-3.6.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="jquery.jqGrid-3.6.1/src/jquery.searchFilter.js" type="text/javascript"></script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
<div id="filter" style="margin-left:30%;display:none">Search Invoices</div>
<script src="jqgridjs.js" type="text/javascript"> </script>
<input type="button" id="bsdata" value="Search"/>

</body>
</html>

 jqgridjs.js code:

jQuery(document).ready(function () {
   

    var mygrid = jQuery("#list").jqGrid({
        url: 'JsonDS.aspx',
        ContentType: 'application/json',
        datatype: 'json',
        width: 990,
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
     { name: 'id', index: 'id', width: 65},
     { name: 'invdate', index: 'invdate', width: 90, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'yy-mm-dd' }); } }},
     { name: 'name', index: 'name', width: 100},
     { name: 'amount', index: 'amount', width: 80, align: "right"},
     { name: 'tax', index: 'tax', width: 80, align: "right", stype: 'select', editoptions: { value: ":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00" }},
     { name: 'total', index: 'total', width: 80, align: "right"},
     { name: 'note', index: 'note', width: 150}
    ],
        rowNum: 10,
        mtype: "POST",
        rowList: [10, 20, 30],
        pager: '#pager',
        sortname: 'id',
        viewrecords: true,
        rownumbers: true,
        sortorder: "desc",
        toolbar: [true, "top"],
        gridview: true,
        caption: "Toolbar Search Example"
    });

    jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false, refresh: false });
    jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Toggle", title: "Toggle Search Toolbar", buttonicon: 'ui-icon-pin-s',
        onClickButton: function () {
            mygrid[0].toggleToolbar();
        }
    });
    jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "Clear", title: "Clear Search", buttonicon: 'ui-icon-refresh',
        onClickButton: function () {
            mygrid[0].clearToolbar();
        }
    });

    // Filtertoolbar
    jQuery("#list").jqGrid('filterToolbar');

     mygrid[0].triggerToolbar();
     
   

    //SearchGrid
    $("#bsdata").click(function () {
        jQuery("#list").jqGrid('searchGrid',
  { sopt: ['cn', 'bw', 'eq', 'ne', 'lt', 'gt', 'ew'] }
 );
    });

});          

JsonDS.aspx.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

public partial class JsonDS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var js = "{"+
                     "total: '2'," +
                     "page: '1'," +
                     "records: '1'," +
                     "rows:[" +
                    "{ id:'10', cell:[ '1', '2007-10-06', 'client1', '9000.00','140.00','840', 'Comments']}," +
                    "{ id:'9', cell:[ '2', '2009-12-09', 'client2', '85000.00','150.00','980', 'Comments']}," +
                    "{ id:'8', cell:[ '3', '2008-12-12', 'client3', '4500.00','160.00','350', 'Comments']}," +
                    "{ id:'7', cell:[ '4', '2001-06-05', 'client4', '9000.00','170.00','880', 'Comments']}," +
                    "{ id:'6', cell:[ '5', '2007-10-10', 'client5', '7000.00','180.00','860', 'Comments']}," +
                    "{ id:'5', cell:[ '6', '2007-11-23', 'client6', '6000.00','190.00','540', 'Comments']}," +
                    "{ id:'4', cell:[ '7', '2002-19-24', 'client7', '5000.00','200.00','940', 'Comments']}," +
                    "{ id:'3', cell:[ '8', '2005-14-06', 'client8', '8050.00','290.00','849', 'Comments']}," +
                    "{ id:'2', cell:[ '9', '2004-15-01', 'client9', '8008.00','980.00','845', 'Comments']}," +
                    "{ id:'1', cell:[ '10', '2007-12-06', 'client10', '9000.00','145.00','940', 'Comments']}" +
                    "]"+
                    "}";

        Response.ContentType = "application/json";
        Response.Write(js);
              
    }
}