Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
How to display data in grid cell for a multiselect combobox?
05/03/2014
17:38
Avatar
ksbigfoot
Canada
Member
Members
Forum Posts: 7
Member Since:
04/03/2014
sp_UserOfflineSmall 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
Avatar
ksbigfoot
Canada
Member
Members
Forum Posts: 7
Member Since:
04/03/2014
sp_UserOfflineSmall 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
Avatar
ksbigfoot
Canada
Member
Members
Forum Posts: 7
Member Since:
04/03/2014
sp_UserOfflineSmall 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
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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
Avatar
ksbigfoot
Canada
Member
Members
Forum Posts: 7
Member Since:
04/03/2014
sp_UserOfflineSmall 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
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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
Avatar
ksbigfoot
Canada
Member
Members
Forum Posts: 7
Member Since:
04/03/2014
sp_UserOfflineSmall 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
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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
Avatar
ksbigfoot
Canada
Member
Members
Forum Posts: 7
Member Since:
04/03/2014
sp_UserOfflineSmall 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>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="stylesheet" />

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>

<!-- <script src="js/jquery.layout.js" type="text/javascript"></script> -->
<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>

<script src="plugins/ui.multiselect.js" type="text/javascript"></script>

<script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
<script src="plugins/jquery.searchFilter.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<style type="text/css">

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

</style>

<script type="text/javascript">

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>

<div id="pager"></div>
</body>
</html>

24/04/2014
12:02
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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
Avatar
ksbigfoot
Canada
Member
Members
Forum Posts: 7
Member Since:
04/03/2014
sp_UserOfflineSmall 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
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall 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.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
71 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information