Clickable object in grid cell - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: clickable object in grid cell, datagrid, datagrid cell, grid, grid cell, grid input, gridview cell

This topic contains 10 replies, has 3 voices, and was last updated by kalaivani 12 years, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Clickable object in grid cell Posts
February 10, 2012 at 2:04 am Clickable object in grid cell #2132

pile
Member

Hi,
Is it possible to put something in grid cell that can be clicked to execute some javascript code? It is clear inside of the cell can be any html code, but when I put regular button (or a whole form), it seems to be unreachable for binding a jQuery “click” function, for example.

I also saw this in API:
$("#jqxgrid").bind("cellclick", function (event) { var column = event.args.column; var rowindex = event.args.rowindex; var columnindex = event.args.columnindex; });

Is that all that is obtainable from “event”? Or is it posible to get something more from clicked cell (some of the content)?

February 10, 2012 at 7:54 am Clickable object in grid cell #2135
Peter Stoev
Keymaster
Hi pile,

The first solution is to use the cellclick event:
```
$("#jqxgrid").bind('cellclick', function (event) {
    var column = event.args.column;
    var rowindex = event.args.rowindex;
    alert('Column: ' + column + "/ Row: " + rowindex);
});
```
The second solution is without the cellclick event:

You can create a button in the cellsrenderer using this code:
```
var cellsrenderer = function (row, column, value) {
    return '<input type="Button" onClick="buttonclick()" value="button"/>';
}
```
As you can see from the above code, when the button is clicked, the ‘buttonclick’ function is called.

Here’s the code for the buttonclick function:
```
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <script type="text/javascript">
            var buttonclick = function (event) {
                alert('click');
            }
        </script>
    </div>
</body>
```
Hope this helps.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team
February 12, 2012 at 10:59 pm Clickable object in grid cell #2170

pile
Member

Hi Peter, thanks for the answer, but I’ll need a little more help.

I’d like to use second solution, the one without grid cellclick event, but I didn’t figure it how from your answer… so I’m going to quickly explain the situation that I need to solve:

I’m making a table of songs for my band, looping trough data from ajax call:
var items = new Array(); $.each(songsData, function (i, obj) { var row = {}; row["Title"] = makeTitle_html(obj.SongId); row["Album"] = makeAlbum_html(obj.AlbumId); row["AddToList"] = makeAddToListButton_html(obj.SongId); items.push(row); });

Then, pass the array to the grid:
var source = { data: items, datatype: "array" }; $("#jqxgrid").jqxGrid( { source: source, theme: theme };

Functions that make cells in row return a simple html-ish string. In the last one I need to make a clickable button. That function looks and returns something like this…
makeAddToListButton_html(id) { return 'input type="button" class="gridButton" id="btn"' + id + '"value="Add to list"' }

…and the given ‘id’ is very important.
I was going to handle click via $(gridButton).click( … ), but other ways are acceptable.

So basically, the question is how to combine your solution (where to put and how to use cellsrenderer) and this piece of my code for making jqxgrid?

Thanks,
Pile

February 13, 2012 at 10:16 am Clickable object in grid cell #2178
Peter Stoev
Keymaster
Hi Pile,

Thank you for writing.

1. The first step is to set up the data source.
```
var items = new Array();
var songsData = {};
for (i = 0; i < 100; i++) {
    songsData[i] = { SongId: i, AlbumId: "Album" + i };
}
$.each(songsData, function (i, obj) {
    var row = {};
    row["Title"] = obj.SongId;
    row["Album"] = obj.AlbumId;
    row["AddToList"] = obj.SongId;
    items.push(row);
});
var source =
{
    data: items,
    datatype: "array"
};
```
2. Next, Create the DataGrid. Select the “jqxgrid” DIV tag and call the jqxGrid constructor. The cellsrenderer property of the third column points to a makeAddToListButton_html function.
```
$("#jqxgrid").jqxGrid(
{
    source: source,
    width: 300,
    columns: [
        { text: 'Title', dataField: 'Title', width: 100 },
        { text: 'Album', dataField: 'Album', width: 100 },
        { text: 'Add To List', cellsrenderer: makeAddToListButton_html, dataField: 'AddToList' }
    ],
    theme: theme
});
```
3. Implement the makeAddToListButton_html function.

The function returns a string of a Button. Each button is with unique id. When the button is clicked, the buttonclick function is called.
```
var makeAddToListButton_html = function (id) {
    return '<input type="button" onClick="buttonclick(event)" class="gridButton" id="btn' + id + '" value="Add to list"/>'
}
```
4. Implement the “buttonclick” function. The buttonclick function has 1 argument – event. We will use it to get the clicked button’s ID.
```
<div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
        <script type="text/javascript">
            var buttonclick = function (event) {
                var buttonID = event.target.id;
            }
    </script>
</div>
```
Hope this helps you.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team
February 13, 2012 at 3:45 pm Clickable object in grid cell #2186

pile
Member

Thanks!
These are the code lines that I was missing! Works now very well.

So I was going further with this, removing regular button with image button, and going to change that image after click to one that represents “song added to list”. That was easy. But on grid scroll or page change, everything goes back to its original state.

I’m already using $("#jqxgrid").jqxGrid('render'); when I need to change a grid height, for example, and I suppose that there is specific way to change cell content, not just find it via Id and change it…

So, I hope my last question on this grid topic is: Is there a way to change/render just that specific cell (or its whole row)?

Thans,
Pile

February 13, 2012 at 4:00 pm Clickable object in grid cell #2187

Peter Stoev
Keymaster

Hi Pile,

The additional logic should be implemented in the makeAddToListButton_html function. You should create a button either with “song added to list” or “add to list” value. According to me, the button’s value should depend on the cell’s value, i.e I think that you should update the cell’s value after the user clicks a button. I suggest you to take a look at the implementation of the “Create, Remove, Update” demo. The demo demonstrates how to ‘Update’ the cell values in a Grid row.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

February 13, 2012 at 6:40 pm Clickable object in grid cell #2192

pile
Member

Hi Peter,

You are right. I combined ‘getrowdata’ and ‘updaterow’ to manage row content, and a little boost to my makeAddToListButton_html() get it done. Function now checks cell’s value and gives proper html output.

I think that my problems here are solved, and huge thanks again for helping!!

Pile

May 8, 2012 at 6:42 am Clickable object in grid cell #3961

kalaivani
Member

I too need Clickable object in the grid cell . How to add the Json value (path of the html link) to button using cell rendering? And also by clicking that button it should navigate to the html link.

iam new to JQWidget any suggestions please ?

May 8, 2012 at 7:50 am Clickable object in grid cell #3968

Peter Stoev
Keymaster

Hi kalaivani,

This sample shows how to add clickable HTML links into jqxGrid: customcolumn.htm. To add a clickable button to a cell, you can use the instructions in this post or to use the built-in ‘button’ column. In this sample, when the user clicks a button, a jqxWindow is opened: popupediting.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 8, 2012 at 9:32 am Clickable object in grid cell #3970

kalaivani
Member

Hi Peter,

Thanks its helps lot for me.

My JSon file is keep on appending data.

is it Possible to call this $(document).ready(function () {// Loading data to grid} at regular interval from client side ?

May 8, 2012 at 11:05 am Clickable object in grid cell #3975

kalaivani
Member

Here is my code

function getdata()
{

var url = “http://” + top.location.host + “/api/kalai/Files”;
var source =
{

datatype: “json”,
datafields: [
{name: ‘Id’ },
{ name: ‘FileName’ },
{ name: ‘Link’}],
id: “id”,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).bind(‘bindingcomplete’, function ()
{

getProducts1();

});

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
pageable: true,
autoheight: true,
async :false,
columns: [
{text: ‘First Name’, dataField: ‘Id’, width: 100 },
{ text: ‘Last Name’, dataField: ‘FileName’, width: 100 },
{ text: ‘Product’, cellsrenderer: makeAddToListButton_html , dataField: ‘Link’ }
]
});

// setInterval(“getProducts1()”, 5000);
}

$(document).ready(getdata);

var makeAddToListButton_html = function (id, row, column, value) {
var datarow = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, id, “Link”);

return ”

}

function getProducts1() {
$(document).ready(getdata);
}

var buttonclick = function (event) {
var buttonID = event.target.id;
var datarow = event.target.value;
newwindow = window.open(datarow, ‘name’, ‘height=1000,width=1000’);
if (window.focus) { newwindow.focus() }

}

By calling the function at bind complete it showing the Message from webpage as "The data is still binding,call this event in bind complete event" How to resolve this ?
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.