3

I would like to keep a button inside the jqgrid in the first column. 

$(document).ready(function() {
            var grid = $("#list"),
                mydata = [
                {col1:"need a button here",col2:"val1",col3:"val2"},
                {col1:"need a button here",col2:"val1",col3:"val2"},
                {col1:"need a button here",col2:"val1",col3:"val2"},
 ];
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['A','B','C'],
                colModel:[
{name:'col1',index:'col1',key: true,width:100,sorttype:"text"},
{name:'col2',index:'col2',key: true,width:100,sorttype:"text"},
{name:'col3',index:'col3',key: true,width:100,sorttype:"text"},
 ],
                search:true,
                pager:'#pager',
                jsonReader: {cell:""},
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                height: "38%",
                caption: "Add Button"
            });

I need a button in the first column which is col1. I tried adding a button in grid complete function after the height property.

gridComplete: function(){
    var ids = $("#list").jqGrid('getDataIDs');
    for(var i=0;i < ids.length;i++){
        var cl = ids[i];
        be = "<input style='height:22px;' type='button' value='clickme'/>";
        $("#list").jqGrid('setRowData',ids[i],{act:be});
    }

It doesn't work. Can someone please help with this?

Thanks.

sahana
  • 601
  • 5
  • 12
  • 33
  • sorry, but the code which you posted contains many errors. The most important error is the usage of `key: true` in more as one column. Which input data you need really? Do you have some *unique* property in the input data which could be used as `id`? What you plan to do with the grid more? I mean: do you need to use editing of data for example or not? What should be done on click on the button in the row? What information you need inside of `onclick` handler? I see many your old questions which you don't accepted. Should one write answers on your questions in the case? – Oleg Dec 25 '15 at 09:17
  • I am trying out an example that is all. For showing you my code I just pasted the lines hence the repetition of key:true. Not going to use id. no editing needed. on click of the button should show a popup with a different grid. – sahana Dec 25 '15 at 09:20
  • You should **always** which which version of jqGrid you use (or can use) and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7). You use `{act:be}` as parameter of `setRowData` where `"act"` is the name of column which will be modified. To make the code working one should use `{col1:be}` instead. The way with call of `setRowData` is **very bad**. value='clickme'/>"`. – Oleg Dec 25 '15 at 09:27
  • 2
    You can use HTML fragments directly in input data instead. Just replace `col1:"need a button here"` to `"`. One more way is the usage of custom formatter. One can use `beforeSelectRow` to bind `click` on the button. – Oleg Dec 25 '15 at 09:28
  • Thanks @Oleg I used formatter which was suggested by Cakan. Will try HTML fragments directly too. – sahana Dec 25 '15 at 09:43
  • 1
    You are welcome! In any way I'd recommend you to be very careful with `id` of input data (or `key: true` in **one** column which have unique values). One more option is usage of `formatter: "actions"`, but it's simple only in free jqGrid. See [the answer](http://stackoverflow.com/a/29735149/315935). You can use `formatoptions: {editbutton: false, delbutton: false}` and add your custom button instead. – Oleg Dec 25 '15 at 09:54
  • @oleg thanks for the suggestions. will go through the link and make use of it. – sahana Dec 29 '15 at 04:43

1 Answers1

3

You could use custom_formatter for that. Your definition for the first column would look like this:

{name:'col1',index:'col1',key: true,width:100,sorttype:"text",formatter:buttonFunction},

Then you should define formatter JavaScript function which will render your button:

function buttonFunction(cellvalue, options, rowObject)
{
   // some business logic for each row
   return "<input style='height:22px;' type='button' value='clickme'/>";
}
cakan
  • 2,099
  • 5
  • 32
  • 42
  • Should I give some value inside mydata[col1:"i mean here"] ? Where should I write the buttonfunction? can you please help ? – sahana Dec 25 '15 at 09:22
  • I'm not sure, I think that you can but don't have to. If you put some value, you should be able to use it in JavaScript function as `cellvalue` variable. You can write your JavaScript function in the same file where you define your grid. – cakan Dec 25 '15 at 09:25