jQuery UI Widgets Forums Grid Clickable object in grid cell

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • 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)?

    • This topic was modified 12 years, 2 months ago by  pile.
    • This topic was modified 11 years, 9 months ago by  Peter Stoev.
    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

    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

    • This reply was modified 12 years, 2 months ago by  pile.
    • This reply was modified 12 years, 2 months ago by  pile.
    • This reply was modified 12 years, 2 months ago by  pile.
    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

    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

    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

    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

    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 ?

    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

    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 ?

    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 ?

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

You must be logged in to reply to this topic.