jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

How to display data in grid cell for a multiselect combobox?

05/03/2014
17:38

ksbigfoot

Canada

Member

Members

Forum Posts: 7

Member Since:
04/03/2014

Offline

In my index.html file:

jQuery(document).ready(function(){
          var $mygrid= jQuery("#list").jqGrid({
          url:'getData.php',
          editurl: 'editData.php',
          datatype: 'xml',
          mtype: 'GET',
          colNames:['ID','COL1', 'COL2', 'CATEGORY','USER'],
          colModel :[
          {name:'ID',index:'ID', width:70, resizable:false, editable:false,edittype:'text',formatter:'showlink',formatoptions:{target:"_new", baseLinkUrl:'displayLink.php'}},
          {name:'COL1',index:'COL1', width:90,resizable:false, sortable:true, editable:true},
          {name:'COL2',index:'COL2', width:90,resizable:false, sortable:true, editable:true},
   {name:'CATNAME',index:'CATNAME', width:80,align:'right', sortable:true, editable:false},
   {name:'USER',index:'USER', width:80,align:'right', sortable:true, editable:false} ],
   pager: '#pager',
   rowNum:30,
          //rowList:[10,20,30,50],
          sortname: 'ID',
          sortorder: "Asc",
          width: 1200,
          height: '100%',
          viewrecords: true,
          multiselect: false,
          editable: true,
          toolbar: [true,"top"],
   caption: "My Admin Screen"

});

In my getData.php file, I return the data in xml:
echo "<cell>". $row['CATNAME']."</cell>";

CATNAME is a comma delimited list like "Balance, Base, Foundation"

In index.html, the data will display if I declare the row like above example, but I want the CATNAME field to be editable.
The CATNAME field should be a multiselect combobox.

If I set the field to be like this, it doesn't display anything in the row cell of the index.html file:

{name:'CATNAME',index:'CATNAME', width:80,align:'right', sortable:false, editable:true,
formatter: 'select', edittype: 'select', editoptions: {multiple:true, size:5, dataUrl: 'categorySelect.php'}},

The categorySelect.php file only returns basic select:
<select>
<option value='1'>Balance</option>
<option value='2'>Base</option>
<option value='3'>Foundation</option>
</select>

How do I display the data "Balance, Base, Foundation" in the CATNAME field in the row of the index.html page ?

Thanks

17/03/2014
16:51

ksbigfoot

Canada

Member

Members

Forum Posts: 7

Member Since:
04/03/2014

Offline

Solved: I added an extra column that was passed in containing the string. The other column is the editable column that isn't displayed.

{name:'CATNAME',index:'CATNAME', width:80,align:'right', sortable:false, editable:false},
{name:'CATNAME2',index:'CATNAME2', width:80,align:'right', sortable:false, editable:true, editrules:{
         required:true,
         edithidden:true
         },

       hidden:true,
       formatter: 'select', edittype: 'select', editoptions: {
       multiple:true,
       size:5,
       dataUrl: "categorySelect.php"
     }},

17/03/2014
21:03

ksbigfoot

Canada

Member

Members

Forum Posts: 7

Member Since:
04/03/2014

Offline

My question now is I am trying to pass the unique identifier to the categorySelect.php page. Does anyone know how I would pass the unique identifier of the row that was selected OR attach it to my dataURL?

EG.) dataUrl: "categorySelect.php?id=23432"

19/03/2014
12:14

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

dataUrl property can be a function. To this function we pass the id and value

try this

colModel : [

{

name:'name',...

dataUrl : function(rowid, value, name) { return 'myscript.php?id='+rowid; }

...

]

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

15/04/2014
23:50

ksbigfoot

Canada

Member

Members

Forum Posts: 7

Member Since:
04/03/2014

Offline

When I add the function into the dataUrl, I am getting a 404 - File or directory not found. The URL is showing as: http://localhost/function(rowi.....+rowid;%20}

Here is the code I am using:

{name:'CATNAME2',index:'CATNAME2', width:80,align:'right', sortable:false, editable:true, editrules:{
                         required:true,
                         edithidden:true
                      }, hidden:true,
       formatter: 'select', edittype: 'select', editoptions: {
       multiple:true,
       size:5,
       dataUrl : function(rowid, value, name) { return 'categorySelect.php?id='+rowid; }
     }},

Do you see what I am doing wrong?

16/04/2014
12:56

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

The first parameter in this case is calculated incorrect - I mean there is a bug.

Try with this code.

dataUrl : function( rowid, value, name) {

var srow = jQuery("#grid").jqGrid('getGridParam','selrow');

myUrl = "Set here default value in case no row is selected";

if( srow ) {

myUrl = 'categorySelect.php?id='+srow;

}

return myUrl;

}

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

16/04/2014
19:07

ksbigfoot

Canada

Member

Members

Forum Posts: 7

Member Since:
04/03/2014

Offline

I am getting a 404 – File or directory not found. Seems like the function is not being processed.

Fiddler is showing that it is trying to call "GET /function(rowid,%20value,%20name...

I changed the code to this and it still isn't processing the function:

dataUrl: function(rowid, value, name) {
      myUrl = "categorySelect.php?id=6842";
      return myUrl;
       }

19/04/2014
10:58

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Can you please make a demo in jsfiddle or post your full source code.?

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

23/04/2014
22:52

ksbigfoot

Canada

Member

Members

Forum Posts: 7

Member Since:
04/03/2014

Offline

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQGrid</title>

<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>

body{
font-family:"Verdana";
font-size:12px;
}
.ui-jqgrid tr.jqgrow td {vertical-align:top !important}

</style>

jQuery(document).ready(function(){
        var $mygrid= jQuery("#list").jqGrid({
                    url:'test.php',
                    editurl: 'edit.php',
                    datatype: 'xml',
                    mtype: 'GET',
                    colNames:['ID','TITLE', 'DATE ADDED','DESCRIPTION','KEYWORDS','SECURITY','CATEGORY', 'CATEGORY2','UPLOADER'],
                    colModel :[
                    {name:'V_ID',index:'V_ID', width:55, resizable:false, key:true, editable:false,edittype:'text',formatter:'showlink',formatoptions:{target:"_new", baseLinkUrl:'displayLink.php'}},
                    {name:'V_TITLE',index:'V_TITLE', width:90,resizable:false, sortable:true, editable:true},
                    {name:'V_DATE_ADDED',index:'V_DATE_ADDED', width:80, align:'right', editable:false},
                    {name:'V_DESCRIPTION',index:'V_DESCRIPTION', width:80, align:'right', sortable:true, editable:true},
                    {name:'V_KEYWORDS',index:'V_KEYWORDS', width:80,align:'right', sortable:true, editable:true},
     {name:'V_PRIVATE_VID',index:'V_PRIVATE_VID', width:80,align:'right', sortable:true, editable:true,formatter: 'select', edittype: 'select', editoptions: { value: "private:private;public:public"}},
     {name:'CATNAME',index:'CATNAME', width:80,align:'right', sortable:false, editable:false},
     {name:'CATNAME2',index:'CATNAME2', width:80,align:'right', sortable:false, editable:true, editrules:{
                         required:true,
                         edithidden:true
                      }, hidden:true,
       formatter: 'select', edittype: 'select',
       editoptions: {
      multiple:true,
      size:10,
      dataUrl: "categorySelect2.php",
      postData: function (rowid) {
       return {
        action: "getState",
        CATNAME2: $(this).jqGrid("getCell", rowid, "CATNAME2")
       };
      }

       }
     },
     {name:'V_UPLOADER',index:'V_UPLOADER', width:80,align:'right', sortable:true, editable:false} ],
     pager: '#pager',
     rowNum:30,
                    sortname: 'V_ID',
                    sortorder: "Asc",
                    width: 1200,
                    height: '100%',
                    viewrecords: true,
                    multiselect: false,
                    editable: true,
                    toolbar: [true,"top"],
     caption: "My Video Admin"
  });

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

});
</script>
</head>
<body>
<table id="list"></table>

24/04/2014
12:02

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

This code is wrong:

     {name:'CATNAME2',index:'CATNAME2', width:80,align:'right', sortable:false, editable:true, editrules:{
                         required:true,
                         edithidden:true
                      }, hidden:true,
       formatter: 'select', edittype: 'select',
       editoptions: {
      multiple:true,
      size:10,
      dataUrl: "categorySelect2.php",
      postData: function (rowid) {
       return {
        action: "getState",
        CATNAME2: $(this).jqGrid("getCell", rowid, "CATNAME2")
       };
      }

       }
     }

Try this please

{name:'CATNAME2',index:'CATNAME2', width:80,align:'right', sortable:false, editable:true,

editrules:{
required:true,
edithidden:true
},

hidden:true,
formatter: 'select', edittype: 'select',
editoptions: {
multiple:true,
size:10,
dataUrl : function(){

var srow = jQuery("#grid").jqGrid('getGridParam','selrow');

myUrl = "categorySelect.php";

if( srow ) {

myUrl = 'categorySelect.php?id='+srow;

}

return myUrl;
}
}

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

25/04/2014
04:27

ksbigfoot

Canada

Member

Members

Forum Posts: 7

Member Since:
04/03/2014

Offline

I changed the code to what you specified and I am still getting a 404 result showing URL as: GET /admin/function()%20%7Bvar%20srow%20=%20jQuery(%22%23list%22).jqGrid('getGridP....

03/05/2014
09:51

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Not sure what you do.

This is exactley your code. The only diffrenece is that I use the source array data.

See it in action here

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
49 Guest(s)

Currently Browsing this Page:
1 Guest(s)