CODEWITHSUNDEEP
jqueryjqgrid
zurna
zurna

Reputation: 1191

jqgrid redirect to another page when row clicked

I am trying to use jqgrid list for a specific project. I read the online documentation posted but I could not find solution to my problem. I dont have problem with listing and viewing items. But I need to a button in each row and when that button clicked, browser should be redirected to another page (where that row can be edited. eg: ?Section=news&Process=EditNews&NEWSID=1).

I think I am close to the solution but stuck at this point...

    <script type="text/javascript">

    var lastsel;

$(function() {

    $("#list").jqGrid({
            url: '/FLPM/cp/news.cs.asp?Process=ViewNews',
            datatype: 'xml',
            mtype: 'Get',
            height: '100%',
            colNames: ['Actions','ID #','Page', 'Category Name', 'Active', 'Date Entered'],
            colModel: [
                {name:'Actions', index:'Actions', width:100, sortable:false, search:false},
                {name:'ID', index:'ID', width:30},
                {name:'Title', index:'Title', width:360},
                {name:'Category', index:'Category', width:115},
                {name:'Active', index:'Active', width:40, editable:true, edittype:"select", editoptions:{value:"1:Yes;0:No"}},
                {name:'Date', index:'Date', width:126}, 
            ],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [10,20,30],
            sortname: 'Date', 
            sortorder: 'desc',
            viewrecords: true,
            imgpath: 'js/jqGrid/themes/basic/images',
            onSelectRow: function(id) { 
                if(id && id!==lastsel) {
                    $('#list').restoreRow(lastsel); 
                    $('#list').editRow(id,true); 
                    lastsel=id; 
                    } 
                }, 
            loadComplete: function(){ 
                var ids = jQuery("#list").getDataIDs(); 
                for(var i=0;i<ids.length;i++){ 
                    var cl = ids[i]; 
                    de = "<input style='height:25px;width:25px;' type='button' value='DE' onclick=location.href='?Section=news&Process=EditNews&NEWSID='; />";              
                    be = "<input style='height:25px;width:25px;' type='button' value='E' onclick=jQuery('#list').editRow("+cl+"); ></ids>"; 
                    se = "<input style='height:25px;width:25px;' type='button' value='S' onclick=jQuery('#list').saveRow("+cl+"); />"; 
                    ce = "<input style='height:25px;width:25px;' type='button' value='C' onclick=jQuery('#list').restoreRow("+cl+"); />"; 
                    jQuery("#list").setRowData(ids[i],{Actions:de+be+se+ce}) 
                } 
            }, 
            editurl: "custompages.cs.asp?Process=EditPage",             
    }).navGrid("#pager",{edit:true,add:false,del:true});    

});
    </script>

Upvotes: 2

Views: 4814

Answers (1)

Justin Ethier
Justin Ethier

Reputation: 134157

To get it to work, I needed to add an ID to the de element:

id='"+cl+"_buttonEditTest'

I also needed to change Actions to act in order to get the controls to actually show up in each row:

jQuery("#list").setRowData(ids[i],{act:de+be+se+ce})

Also, you probably want to append the row's ID to your link:

onclick=location.href='?Section=news&Process=EditNews&NEWSID="+cl+"';

So the final code is:

de = "<input style='height:25px;width:25px;' type='button' value='DE' onclick=location.href='?Section=news&Process=EditNews&NEWSID="+cl+"'; id='"+cl+"_buttonEditTest' />";              
be = "<input style='height:25px;width:25px;' type='button' value='E' onclick=jQuery('#list').editRow("+cl+"); ></ids>"; 
se = "<input style='height:25px;width:25px;' type='button' value='S' onclick=jQuery('#list').saveRow("+cl+"); />"; 
ce = "<input style='height:25px;width:25px;' type='button' value='C' onclick=jQuery('#list').restoreRow("+cl+"); />"; 
jQuery("#list").setRowData(ids[i],{act:de+be+se+ce}) ;

Upvotes: 1

Related Questions