最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

c# - How to add a new column of buttonsimages in jqgrid - Stack Overflow

programmeradmin3浏览0评论

I am using JQgrid in ASP MVC web application .

I was able to add a new columns of buttons named edit by using formatters

But, the problem is i was not able to get the value of a column in a row for which the button is clicked.

For example, if i click button edit ( new added) on 4th row, i would require to fetch the value of first column of that particular row.

i need this beacuse i want to redirect to another page with that value and do the edit there.

I was not able to fetch that value and add javascript to it.

Please help on this with any code samples..

I am using JQgrid in ASP MVC web application .

I was able to add a new columns of buttons named edit by using formatters

But, the problem is i was not able to get the value of a column in a row for which the button is clicked.

For example, if i click button edit ( new added) on 4th row, i would require to fetch the value of first column of that particular row.

i need this beacuse i want to redirect to another page with that value and do the edit there.

I was not able to fetch that value and add javascript to it.

Please help on this with any code samples..

Share Improve this question asked Oct 18, 2013 at 6:44 Sai AvinashSai Avinash 4,75317 gold badges62 silver badges98 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

Here's an simple example how you could add buttons dynamically to a jqgrid

http://jsfiddle/ShKDX/1/

Not sure if you first row is the id as specified in the fiddle, but you can modify it to use the correct data from the afterInsertRow function

var data = [
    {id: 1, text: 'row1'},
    {id: 2, text: 'row2'},
    {id: 3, text: 'row3'},
    {id: 4, text: 'row4'},
    {id: 5, text: 'row5'},
];
$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Id', 'Text', 'edit'],
    colModel: [
        { name: 'id', index: 'id', sorttype: "int" },
        { name: 'text', index: 'text' },
        { name: 'edit', index: 'edit', align: 'center', sortable: false, width: '40px' }
    ],
    caption: "Custom buttons",
    data: data,
    afterInsertRow: function(id, currentData, jsondata) {
        var button = "<a class='gridbutton' data-id='"+id+"' href='#'>edit</a>";
        $(this).setCell(id, "edit", button);
    },
    loadComplete: function(data) {
        $(".gridbutton").on('click', function(e) {
           e.preventDefault();
           alert('Edit id: ' + $(this).data("id"));
        });
    }
});

You don't need to bind click event handler to every button in the column. Every binding take memory and other resources of web browser. The most events bubbling to from inner to outer DOM element (see here), Mouse click, Keyboard keydown, Touch touchstart and other events on the button inside of grid will be bubble to the grid's <table> element. jqGrid register by default click event handler on the grid. It calls beforeSelectRow and onCellSelect callbacks and trigger jqGridBeforeSelectRow and jqGridCellSelect events from the event handler. So instead of binding your own click event handlers on every button it's enough to use one from listed above callbacks or events. beforeSelectRow (or jqGridBeforeSelectRow) will be used first. The callback is practical if you what that click on the button don't select the corresponding row. The answer for example shows how to verify whether the column which you needs are called. Another answer provides an example which will be very close to what you need. One more answer gives you another code fragment. To see more my old answers about the subject you can use the following query.

UPDATED: the demo http://jsfiddle/ShKDX/82/ is modification of the demo posted by Manuel van Rijn. It demonstrates what I mean.

发布评论

评论列表(0)

  1. 暂无评论