jQWidgets Forums

Tagged: action, Button, cellsrenderer, click, custom, grid, image, jqxgrid

This topic contains 2 replies, has 2 voices, and was last updated by latha 11 years, 1 month ago.

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

Author

Grid custom button actions Posts

March 6, 2014 at 12:18 pm Grid custom button actions #50597

latha

Participant

  var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                        return '<div style="padding-left:5px;padding-top:20px;"><img id="btnEdit" src="/images/Edit.gif"></img><span style="padding-left:5px;"><img id="btnDelete" src="images/Delete.gif"></img></span><span style="padding-left:5px;"><img id="btnClose" src="images/Icon_ok_16x16.png"></img></span></div>';
                    };

 var imagerenderer = function (row, datafield, value) {
            return '<img style="margin-left: 25px;margin-top: 12px;" src="' + value.replace("~/", "../../") + '"/>';
        }

        var columnrenderer = function (value) {
            return '<div style="margin-left: 25px; margin-top: 5px;">' + value + '</div>';
        }

$(“#jqxgrid”).jqxGrid(
{
width: 1425,
source: dataAdapter,
pageable: true,
autorowheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
height: 650,
columns:
[
{ text: ‘Case ID’, datafield: ‘Number’, width: 100, cellsalign: ‘center’, renderer: columnrenderer },
{ text: ‘Prio’, datafield: ‘Prio’, width: 100, cellsrenderer: imagerenderer, renderer: columnrenderer },
{ text: ‘Subject’, datafield: ‘Subject’, width: 265 },
{ text: ‘Organization’, datafield: ‘Group’, width: 250 },
{ text: ‘Device’, datafield: ‘Device’, width: 150 },
{ text: ‘Status’, datafield: ‘Status’, width: 250, renderer: columnrenderer, cellsalign: ‘center’ },
{ text: ‘Reported’, datafield: ‘Reported’, width: 150, renderer: columnrenderer },
{ text: ‘Manage’, cellsrenderer: cellsrenderer, cellsalign: ‘center’, width: 180, editable: false }
]
});
}
else {
$(“#divErrors”).show();
$(‘#lblErrorHeader’).html(“Support case details cannot be displayed”);
$(‘#lblError’).html(“” + jsonData.MsgStatus.ResponseText);
}
}

else if (jsonData.MsgStatus != undefined && jsonData.MsgStatus.ResponseCode != undefined) {
$(“#divErrors”).show();
$(‘#lblErrorHeader’).html(“Support case details cannot be displayed”);
$(‘#lblError’).html(“” + jsonData.MsgStatus.ResponseText);
}
}

I need to get the row id to do the following process.

1. While clicking “btnEdit” it should navigate to another page & row id should be accessed in that page.
2. While clicking “btnDelete” in need to open popup & row id should be accessed in popup.
3. While clicking “btnClose” i should call the ajax function in same page.

March 7, 2014 at 6:59 am Grid custom button actions #50644

Dimitar

Participant

Hello latha,

Click functionality for elements generated through cellsrenderer can be added only with the JavaScript onclick event. The script realising the custom function has to be added inside the grid’s div.

Here is an example (based on the demo Image Column), implementing functionality #2:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to use the Grid API to customize a column's
        rendering.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var movies = new Array();

            // Avatar
            movies[0] = { Image: 'avatar.png', Title: 'Avatar', Year: 2009 };
            movies[1] = { Image: 'priest.png', Title: 'Priest', Year: 2006 };
            movies[2] = { Image: 'endgame.png', Title: 'End Game', Year: 2006 };
            movies[3] = { Image: 'unknown.png', Title: 'Unknown', Year: 2011 };
            movies[4] = { Image: 'unstoppable.png', Title: 'Unstoppable', Year: 2010 };
            movies[5] = { Image: 'twilight.png', Title: 'Twilight', Year: 2008 };
            movies[6] = { Image: 'kungfupanda.png', Title: 'Kung Fu Panda', Year: 2008 };
            movies[7] = { Image: 'knockout.png', Title: 'Knockout', Year: 2011 };
            movies[8] = { Image: 'theplane.png', Title: 'The Plane', Year: 2010 };
            movies[9] = { Image: 'bigdaddy.png', Title: 'Big Daddy', Year: 1999 };

            var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px;" height="60" width="50" src="../../images/' + value + '" onclick="customFunction(' + row + ')"/>';
            }

            var source = { localdata: movies, datatype: "array" };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: dataAdapter,

                rowsheight: 60,
                columns: [
                  { text: 'Image', datafield: 'Image', width: 60, cellsrenderer: imagerenderer },
                  { text: 'Title', datafield: 'Title', width: 200 },
                  { text: 'Year', datafield: 'Year' }
               ]
            });
            $("#jqxwindow ").jqxWindow({ height: 90, width: 150, autoOpen: false });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
            <script type="text/javascript">
                var customFunction = function (row) {
                    $("#row").text(row);
                    $("#jqxwindow").jqxWindow("open");
                };
            </script>
        </div>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                You have clicked image number <span id="row"></span>.</div>
        </div>
    </div>
</body>
</html>

As for functionality #1 – if the page is external, you may only pass the row index in the URL of the page (as a part of the path, query or fragment name).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 10, 2014 at 6:26 am Grid custom button actions #50742

latha

Participant

Hi Dimitar

Thanks for your valuable reply.I will try and let you the result.

Thanks & Regards
Latha S

Author

Posts

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

You must be logged in to reply to this topic.