jQWidgets Forums

Tagged: cellclik normal click

This topic contains 7 replies, has 4 voices, and was last updated by Rishabh 7 years ago.

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

Author

Normal click event in the Cell Posts

April 25, 2013 at 5:33 am Normal click event in the Cell #19962

pius.satpathy

Member

Hi ,

I have a question regarding the ‘cellclik’ event and any help as ealry will be helpful for me.

I am generating the Cells of the JQXGrid using cell renderer using some div .

now I am am trying to use normal click event of the DIV in the cell using jquery and not ‘cellclick’ event provided by jqxgrid.

Everything is working fine till when I am not using scrollbar of the JQXGRID.That means I am able to capture the event of individual cell click and perform my logic.

Problem occurs when I have more rows and if use scroll bar of the GRID and the click event does not work.

-Pius Ranjan Satpathy

April 25, 2013 at 7:23 am Normal click event in the Cell #19972

Peter Stoev

Keymaster

Hi,

With jqxGrid, you can use only the events provided by the widget and described in the API Documentation. If you want to bind to custom events of custom HTML elements, you should do that in the “cellsrenderer” and the handler functions should be inside the Grid’s DIV tag.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  {
                      text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2',
                      cellsrenderer: function (row, field, value) {
                          return "<input onclick='func()' type='button'/>";
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
            <script type="text/javascript">
                function func() {
                    alert("click");
                }
            </script>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

May 3, 2013 at 7:14 am Normal click event in the Cell #20518

pius.satpathy

Member

Thank You Peter. Your suggestion helped me a lot.

-Pius

May 3, 2013 at 8:51 am Normal click event in the Cell #20524

thondchen

Participant

Hi,

how i wrap the text in a cell of the grid.
Is any method to do that?
thanks.

August 22, 2013 at 2:31 pm Normal click event in the Cell #27459

pius.satpathy

Member

Hi Peter,

Now we are moving the application to tablet.But in tablet onclick event does not work. Is there any work around for this.

-Pius Ranjan

August 22, 2013 at 2:36 pm Normal click event in the Cell #27460

Peter Stoev

Keymaster

Hi,

You can use the Grid’s built-in event called – “cellclick”. That’s the preferred way as we optimize these for Touch devices, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 23, 2013 at 5:10 am Normal click event in the Cell #27497

pius.satpathy

Member

Then we have different div inside individual cell.And each div has its some attributes and these attributes values are input some other section of the page for rendering.How we can achieve that.

For example suppose cell1 has the div1, div2. How shall I access the attribute value of div1 if I click div1.

-Pius

March 30, 2018 at 11:44 am Normal click event in the Cell #99504

Rishabh

Participant

Hi,

I am using React JqxGrid. Need to trigger my class function on click of button.
Something like

cellsrenderer: (row, field, value) => {
                          return "<input onClick={this.handlefunc} type='button'/>";
                      }

But this returns error.

Can you please help me with this or suggest any workaround.

Author

Posts

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

You must be logged in to reply to this topic.