jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

editable dynamic selects using dataURL

Tags: dataurl formatter dynamic select

29/01/2012
02:43

illiquent

Member

Members

Forum Posts: 5

Member Since:
29/01/2012

Offline

hi.

i've got a jGrid reading data in with json, with an Item, Category, SubCategory.

The goal is to have the category and subcategory be editable, and the subcategory select should depend on category.

ie if a category is changed, the subcategories refresh. on the subcategory change, the page should post the data.

I think that using the formatter: "select" option might be what I want, but I'm not finding any useful documentation or examples on it.

here's what I have in my colModel

colModel:[
               {name:'ID',index:'ID', width:30, key:true, hidden:true},
               {name:'ITEMNAME',index:'ITEMNAME', width:200},
               {name:'CAT_ID',index:'CAT_ID', width:150, editable: true,edittype:"select",formatter: "select",
               editoptions: { dataUrl: '/admin/cats.cfm'} },
               {name:'SUBCAT_ID',index:'SUBCAT_ID', width:150,editable: true,edittype:"select",
               editoptions: { dataUrl: '/admin/cats.cfm?subcat=1'} },
           ],

when i use formatter: select, the select box is blank

when I don't, they work fine.

I realize the code above isn't going to do what I need, but I'm hoping it might show what I'm trying to do.

Is there an example in the docs themselves for dynamic select boxes?

I've seen lots of suggested solutions in forums, but none of them make sense or work for my situation.

I know this is a common task, so I'm surprised to see its not better documented or why so many people seem confused on it.

29/01/2012
06:23

illiquent

Member

Members

Forum Posts: 5

Member Since:
29/01/2012

Offline

i found the solution on another post.

thanks tony!

here's the version I used:

$("document").ready(function() {
       var lastsel2
       jQuery("#list2").jqGrid({
           url:'/beta/prodSelect.cfc?method=getAllGrid',
           width:"auto",
           height:"auto",
           datatype: "json",
           colNames:['ID','ITEMNAME', 'CAT_ID','SUBCAT_ID'],
           colModel:[
               {name:'ID',index:'ID', width:30, key:true, hidden:true},
               {name:'ITEMNAME',index:'ITEMNAME', width:200},
               {name:'CAT_ID',index:'CAT_ID', width:150, editable: true,edittype:"select",
               editoptions: {
               dataUrl: '/admin/cats.cfm',
               dataEvents :[

{ type: 'change', fn: function(e) {

var thisval = $(e.target).val();

$.get('cats.cfm?subcat=1&topCatID='+thisval, function(data)

{ var res = $(data).html();

var id = jQuery("#list2").jqGrid('getGridParam', 'selrow');
var t = '#' + id + '_SUBCAT_ID';
$(t).html(res);
}); // end get

}//end func

} // end type

] // dataevents

               } },
               {name:'SUBCAT_ID',index:'SUBCAT_ID', width:150,editable: true,edittype:"select",
               editoptions: { dataUrl: '/admin/cats.cfm?subcat=1'} },
           ],

       onSelectRow: function(id){
      if(id && id!==lastsel2){
        jQuery('#list2').restoreRow(lastsel2);
        jQuery('#list2').editRow(id,true,'1');
          lastsel2=id;
             }
           },
           rowNum:30,
           rowList:[30,60,90],
           pager: '#pager2',
           sortname: 'thisid',
           viewrecords: true,
           sortorder: "asc",
           editurl: "/admin/qry_itemCorrect.cfm",

           caption:"Your Items"
           });



       });

29/02/2012
00:48

saw

New Member

Members

Forum Posts: 1

Member Since:
23/02/2012

Offline

Hi,

I'm trying to set up dynamic selects with coldfusion too. Your example looks good. What is on your admin/cats.cfm?subcat=1' page? I'm trying to use a cfquery in a function on a cfc page. but it's not working yet.

Thank you

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
109 Guest(s)

Currently Browsing this Page:
1 Guest(s)