jqGrid passing row number instead of id column

When I inline edit a cell it passes back 1 for id and there is no id of 1.  I am assuming it is passing 1 because it is the row number but I really do not know why it is passing 1.

      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQgrid - ASPX</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
        <!--<script src="http://asp2d:1138/jquery-1.8.3.js"></script>-->
        <!--<script src="http://asp2d:1138/jquery-ui-1.9.2.custom.js"></script>-->
        <script type="text/javascript" src="http://asp2d:1138/grid.locale-en.js"></script>
        <script type="text/javascript" src="http://asp2d:1138/jquery.jqGrid.min.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/jquery-ui-1.9.2.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/ui.jqgrid.css" />
        <script>
          $(function () {
            $("#list").jqGrid(
              {
              url: "/capplanning/SitePages/jsonhandler.aspx?wherefrom=Category One",
              datatype: "json",
              mtype: "GET",

        colNames: ["xyz","category_type","category_value"],
        colModel: [{ name: "rr45", sortable: true, key: true, editable:true, hidden: true},
                   { name: "category_type", sortable: true, editable:false},
                   { name: "category_value", sortable: true, editable:true}],
              pager: "#pager",
              caption: "Category One",
              loadonce: "true",
              height: "100%",
              cellEdit: true,
                      cellsubmit: "remote",
                      cellurl: "/capplanning/SitePages/jsonhandler.aspx?editedgrid=editcategory1",
              autowidth: true,
              rowNum: 9999,
              gridview: true,
              multiselect:false
              /*rowList:[10,15,20]*/
              });
          $("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
          $("#list").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true });

          $("#list").jqGrid('navButtonAdd', '#pager',
            {
            caption: '',
            title: 'Show/Hide Filters',
            buttonicon: 'ui-icon-arrowthickstop-1-e',
            onClickButton: function ()
              {
              this.toggleToolbar();
              if ($.isFunction(this.p._complete))
                {
                if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible'))
                  {$('.ui-search-toolbar', this.grid.fhDiv).show();}
                else
                  {$('.ui-search-toolbar', this.grid.fhDiv).hide();}
                this.p._complete.call(this);
                fixPositionsOfFrozenDivs.call(this);
                }
              }
            });
          $("#list")[0].toggleToolbar();

          });
        </script>
      </head>
      <body>
        <table id="list"><tr><td></td></tr></table>
        <div id="pager"></div>
      </body>
      </html>

Open in new window



the JSON

{"rows":[
{"id":"2","cell":["2","CategoryOne","Maintenancedd"]},
{"id":"3","cell":["3","CategoryOne","Maintenance"]},
{"id":"4","cell":["4","CategoryOne","New Growth"]}
]}

Open in new window


Here is what I see in my JSON handler

Key = category_value  Value = Maintenance
Key = id  Value = [i][b]1[/b][/i]
Key = oper  Value = edit

Open in new window

DemosthenesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings Demosthenes, , I am not able to completely look at the flow of your JSON return, so I will guess that in your  "JSON handler" you have references for all of the "Values" Except for the "id" value, you seem to have a Constant there as "1", as here -
Value = [i][b]1[/b][/i]

Open in new window

shouldn't that be a reference also, but if you have a "1" there, it would always show one, no matter the id ?
Or maybe I don't see your intent?
1
Alexandre SimõesManager / Technology SpecialistCommented:
Hi!
Usually the issue is always with the missing key:true in the columns definition, but you have it.

So the only option, and as you're actually only binding to an array, remove the key property from the columns definition and try using the jsonReader to configure it manually:
   jsonReader : {
      root:"rows",
      cell: "cell",
      id: "id"
   },

Open in new window

Have a look at the config here.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DemosthenesAuthor Commented:
Alexandre, I tried this before but whenever I used the jsonReader any row that is clicked on becomes highlighted, and stays highlighted.  I even have multiselect:false and it still high lights any and all rows that are clicked on.

        <script>
        
          /* setup the grid */
          $(function () {
            $('#list').jqGrid(
              {
              url: '/capplanning/SitePages/jsonhandler.aspx?wherefrom=Category One',
              datatype: 'json',
              mtype: 'GET',

        colNames: ['category_id','category_type','category_value'],
        colModel: [{ name:'category_id'},
                   { name: 'category_type', sortable: true, editable:false},
                   { name: 'category_value', sortable: true, editable:true}],
              pager: '#pager',
              caption: 'Category One',
              loadonce: 'true',
              height: '100%',
              cellEdit: true,
                      cellsubmit: 'remote',
                      cellurl: '/capplanning/SitePages/jsonhandler.aspx?editedgrid=editcategory1',
              autowidth: true,
              rowNum: 9999,
            jsonReader : {
                    root:"rows",
                    cell: "cell",
                    id: "id"
   }
              /*rowList:[10,15,20]*/
              });
          /*End grid setup*/

          $('#list').jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); /* set up Filter toolbar */
          $('#list').jqGrid('navGrid', '#pager', { edit: false, add: true, del: true }); /* Show the bottom bar "Pager"*/
          $('#list').jqGrid('navButtonAdd', '#pager',                                    /* Set up Filter toggle button*/
            {
            caption: '',
            title: 'Show/Hide Filters',
            buttonicon: 'ui-icon-arrowthickstop-1-e',
            onClickButton: function ()
              {
              this.toggleToolbar();
              if ($.isFunction(this.p._complete))
                {
                if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible'))
                  {$('.ui-search-toolbar', this.grid.fhDiv).show();}
                else
                  {$('.ui-search-toolbar', this.grid.fhDiv).hide();}
                this.p._complete.call(this);
                fixPositionsOfFrozenDivs.call(this);
                }
              }
            });
          $('#list')[0].toggleToolbar();                                                 /* call the function so the Filters are hidden on startup*/

          });
        </script>

Open in new window


                 
    {"rows":[
                      {"id":"2","cell":["2","CategoryOne","Cost Reduction"]},
                      {"id":"3","cell":["3","CategoryOne","Maintenance"]},
                      {"id":"4","cell":["4","CategoryOne","New Growth"]}
                      ]}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

DemosthenesAuthor Commented:
I don't know how to delete a comment so I will just post that I had changed the id column name and forgot to change it in the new jsonReader section.  I changed

              jsonReader : {
                    root:"rows",
                    cell: "cell",
                    id: "id"
   }

Open in new window


to

              jsonReader : {
                    root:"rows",
                    cell: "cell",
                    id: "category_id"
   }

Open in new window


So it matches the column in the colModel.
0
DemosthenesAuthor Commented:
I just threw in some code I found on the internet to deal with the rows highlighting, it seems to work so I will post it.

          $('#list').jqGrid().focusout(function ()                                       /* unselect row after lose focus::fix for row sel issue */
            {
            $('#list').jqGrid("resetSelection");
            });

Open in new window

0
Alexandre SimõesManager / Technology SpecialistCommented:
I don't see how that behavior can be related to the jsonReader config itself.
It might indeed be a side effect for the fact that with it you are reading the data correctly.

Do you use any custom CSS?
0
Alexandre SimõesManager / Technology SpecialistCommented:
I remembered that resetSelection option, but I'm not sure how it behaves with the celledit.

Works well?
0
DemosthenesAuthor Commented:
No, I am grasping at straws now.  Here seems to be the issue.
json returns this
                      {"rows":[
                      {"id":"2","cell":["2","CategoryOne","Cost Reduction"]},
                      {"id":"3","cell":["3","CategoryOne","Maintenance"]},
                      {"id":"4","cell":["4","CategoryOne","New Growth"]}
                      ]}

Open in new window


 My colum model looks like this.
colNames: ['category_id','category_type','category_value'],
        colModel: [{ name:'category_id'},

Open in new window


When my reader code looks like this: the row number is only passed
              jsonReader : {
                    root:"rows",
                    cell: "cell",
                    id: "category_id"
                    }

When my reader code looks like this: the id is passed correctly BUT, all my rows start highlighting, the type of behavior you would expect if the grid had no id or key set.
              jsonReader : {
                    root:"rows",
                    cell: "cell",
                    id: "category_id"
                    }
0
DemosthenesAuthor Commented:
should have been

              jsonReader : {
                    root:"rows",
                    cell: "cell",

Open in new window

                   id: "id"
                    }
0
DemosthenesAuthor Commented:
What I am thinking is as a workaround maybe I can just deselect the last selected row if that is possible but so far I havent found good code for that.  I could keep
              jsonReader : {
                    root:"rows",
                    cell: "cell",
                    id: "id"
                    }
And just unselect the last selected row.  Or unselect every row except the one being clicked on or selected.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.