jQuery UI Widgets › Forums › Grid › Clickable object in grid cell
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.
-
Author
-
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)?
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 Stoevhttp://www.jqwidgets.com
jQWidgets TeamHi 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,
PileHi 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 Stoevhttp://www.jqwidgets.com
jQWidgets TeamThanks!
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,
PileHi 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 Stoevhttp://www.jqwidgets.com
jQWidgets TeamHi 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
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 ?
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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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 ?
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 ?
-
AuthorPosts
You must be logged in to reply to this topic.