jqgrid is not a function using onSelectRow

I've seen a lot of similar issues on this site, so I apologize is this is a duplicate of an issue I didn't understand the answer for. But here it is: my trouble is "jQuery("#tmpgrid").getCell is not a function" (via firebug) when this code block is triggered

        onSelectRow: function (id) {
            var listid = jQuery('#tmpgrid').getCell(id, "Item id");
            $(window.location).attr('href', '/template/details/' + listid);
        }

within this asp.net mvc partial page

<table id="tmpgrid">
</table>
<div id="tmppager">
</div>
<script type="text/javascript">
    var grid = $('#tmpgrid');
    grid.jqGrid({
        url: '/template/jsontemplate',
        datatype: "json",
        height: "auto",
        autowidth: true,
        colNames: ['Item id', 'Title', 'Create Date', 'Edit Date', 'Public'],
        colModel: [
        { name: "id", index: "id", width: 25, search: false },
        { name: "Title", index: "Title", search: true, searchoptions: { sopt: ['cn']} },
        { name: "CreateDate", index: "CreateDate", width: 50, search: false },
        { name: "EditDate", index:开发者_运维知识库 "EditDate", width: 50, search: false },
        { name: "IsPublic", index: "IsPublic", width: 25, search: false }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager',
        sortname: 'CreateDate',
        emptyrecords: 'No records to display',
        ignoreCase: true,
        viewrecords: true,
        caption: "My Checklists",
        onSelectRow: function (id) {
            var listid = jQuery('#tmpgrid').getCell(id, "Item id");
            $(window.location).attr('href', '/template/details/' + listid);
        }
    });
    grid.jqGrid('navGrid', '#tmppager', { edit: false, add: false, del: false, searchtext: 'Search' });
</script>

I've seen Oleg's posts about script loading/ordering issues, but I don't believe this is my problem (or maybe I'm not understanding the solution properly) - since I'm not using a developer release and thus only have 2 js files: "grid.locale-en.js" and "jquery.jqgrid.min.js". Also, I'm not sure if this still applies to the jqgrid versions past 3.7.2. I'm using the recent 4.0.0 release

I'm banging my head against a wall here. Any ideas?

Would you believe it was an interaction with another script? I have some telerik components on the site and when I pulled their @Html.Telerik().ScriptRegistrar() component out, then jqGrid started working right.

Hmmm... Now to wean myself off those telerik components. I'd been planning this anyway.

Thanks for all your help!

I think jqGrid uses the jQuery-UI style method calls. Based on these examples, you need to call getCell like this:

$('#tmpgrid').jqGrid('getCell', id, 'Item id');

I suppose, that you have to use "new API" style. What I mean is you included jqGrid JavaScripts in about as following form (see documentation):

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

In the case you should "new API" style for the most jqGrid methods which you use. For example

var listid = jQuery('#tmpgrid').jqGrid('getCell', id, "Item id");

instead of

var listid = jQuery('#tmpgrid').getCell(id, "Item id");

A colleague of mind just solved this one - $('#xyz'), is the same as $get('#xyz') - which returns a dom object, that you can only call dom methods on.

However $find(), will get you the actual object with its expected methods