Grid Events in CardView Mode

[njengaParticipant]

Hi!
Are grid events disabled in CardView mode??
I need to fire an onClick event in cardview mode
E.g.
$("#jqxPondsListGrid").on("cellclick", function (event){....}

Events trigger but after switching to cardview: true, no events fire.

Regards
Steve

[MartinParticipant]

Hello Steve,

The jqxGrid does not have cellclick event in cardview mode as the cards are not grid cells.
However, you can bind to the click event of the content and check which card you have clicked on.
Here is an Example.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

Hi Martin
Thanks for the response.
How about a button or image in the card? Will this image or button respond to click events?

Regards
Steve

[MartinParticipant]

Hello Steve,

Yes, a click on everything inside the content will trigger the event.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

Hi Martin
I meant an event specific to the widget in the content e.g. if I have a button and an image they both trigger the content event BUT do they trigger an event specific to the button or the image (depending on which widget was clicked)??

[MartinParticipant]

Hello Steve,

Could you give us more details about what you are trying to achieve so we can suggest you a solution.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

Hi Martin,
Sure!
I have a card with some columns.
One of those columns is an image created with the code below
`{text: ‘<img style=”margin-bottom: 6px; height=”24″ width=”24″ src=”../images/create-line.png”/>’, datafield: ‘trendCharts’, editable: false, width: 30,
createwidget: function (row, column, value, htmlElement) {
var imgurl = ‘../images/create-line.png’;
var img = ‘<img style=”margin-bottom: 6px; height=”12″ width=”12″ src=”‘ + imgurl + ‘”/>’;
var button = $(“<div style=’border:none;’>” + img + “</div>”);
$(htmlElement).append(button);
button.jqxButton({height: ‘100%’, width: ‘100%’});
button.jqxTooltip({content: ‘<i>View Trend Charts</i>’, position: ‘top’, name: ‘addNewStockTooltip’, theme: reportsTheme});
<strong>button.click(function (event) {
viewTrendCharts(row);
});</strong>
},
initwidget: function (row, column, value, htmlElement) {
var imgurl = ‘../images/create-line.png’;
}
}`

The image displays on the card as expected.
Question is: how do I get an event from clicking just this image? I plan to have several images (or buttons) on a card and I need each to do something different when clicked.
Note: the button.click above is unresponsive, even though its responsive when cardview: false

[MartinParticipant]

Hello njenga,

You can put classes on the images and then check for the class of the target element when a card is clicked to see if the event is triggered from an image.
Here is an Example.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

Thank You Martin!
Works like a charm! ….and distinct classes will allow processing clicks on distinct images!
Much appreciated for your help!

Regards
njenga

[njengaParticipant]

Hi Martin!
Opps! Not so fast….Slight challenge – need to know which card was clicked i.e. preferably get the row values associated with the card. Is this possible??

[MartinParticipant]

Hello njenga,

I have updated the Example so it shows the index of the clicked card.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

Thanks Martin.
What if I have 2 images on a card: my-img-1 and my-img-2
How can I tell which one was clicked on?

Thanks!

[MartinParticipant]

Hello njenga,

You can put different classes to the images and then check if the clicked image has the corresponding class.
Here is an updated Example again.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

duh! My bad! Wasn’t thinking straight!
Thanks Martin!

[Author]

Posts