add,edit,search,page button in below JQgrid MVC4

Question

I use the Following way of method to bind the data in JQGrid.It working Fine.

My question is,The buttons like add,edit,page,search... in bottom of the grid(which is highlighted in the ReferImage) does not show.

How to insert add,edit,search,page button in below JQgrid??

Add Script Files Like the following Order,

    <link href="~/Content/Content/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
    <link href="~/JQGrid/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="~/JQGrid/js/jquery-1.11.0.min.js"></script>
    <script src="~/JQGrid/js/i18n/grid.locale-en.js"></script>
    <script src="~/JQGrid/js/jquery.jqGrid.min.js"></script>
    <script src="~/JQGrid/js/jquery.jqGrid.src.js"></script>

JqGrid Script

<script type="text/javascript">
    $(document).ready(function () { 
    $(function () {
        jQuery("#persontable").jqGrid({
            url: '/Home/passjson',
            datatype: "json",
            mtype: 'GET',
            colNames: ['FirstName', 'LastName', 'LevelOfEducation','Company'],
            colModel: [
                        { name: 'FirstName', index: 'FirstName', width: 100, align: 'left' },
                        { name: 'LastName', index: 'LastName', width: 110, align: 'left' },
                        { name: 'LevelOfEducation', index: 'LevelOfEducation', width: 110, align: 'left' },
                        { name: 'Company', index: 'Company', width: 110, align: 'left' }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            sort: 'FirstName',
            viewrecords: true,
            gridview: true,
            loadonce: true,
            toolbar: [true, 'bottom'],
            multiselect: true,
            pager: "#jQGridPager",
            cellEdit: false,
            rowNumbers: true,
            viewrecords: true
        });

        $('#persontable').jqGrid('navGrid', '#jQGridPager',
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            searchtext: "Search",
            addtext: "Add",
            edittext: "Edit",
            deltext: "Delete",
            refreshtext: "Refresh",
            position: 'left'
        });

    });
    });
</script>   
<table id="persontable" ></table>

Refer Image enter image description here

Do you have the pager named `jQGridPager`? – Md Nazmoon Noor Jun 04 '14 at 06:27 — Md Nazmoon Noor, Jun 04 '14 at 06:27
@nazmoonnoor yes.But it was not working – V.V Jun 04 '14 at 06:29 — V.V, Jun 04 '14 at 06:29

score 4 · Accepted Answer · answered Jun 04 '14 at 08:29

First of all you should use either jquery.jqGrid.min.js or jquery.jqGrid.src.js but not both together.

You problem seems me very easy. You use the option pager: "#jQGridPager" of jqGrid and you call navGrid with parameter '#jQGridPager', but you don't defined empty <div> with id="jQGridPager". So I suppose that you should just append

<table id="persontable"></table>

with

<div id="jQGridPager"></div>

By the way the option sort: 'FirstName' is not exist. Probably you mean sortname: 'FirstName'.

Md Nazmoon Noor · Answer 2 · 2014-06-06T04:48:38.913

0

The button images that jqgrid uses come from the jquery theme. Check if the images are in subdirectory name images of theme css, in your case probably in redmond/images folder.

edited Jun 06 '14 at 04:48

answered Jun 04 '14 at 07:00

Md Nazmoon Noor

3,187
1
24
30

Even Page also didnt displayed – V.V Jun 04 '14 at 07:07

add,edit,search,page button in below JQgrid MVC4

2 Answers2