jQuery UI Widgets Forums Grid Grid Events in CardView Mode

This topic contains 13 replies, has 2 voices, and was last updated by  njenga 1 week, 3 days ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • Grid Events in CardView Mode #121620

    njenga
    Participant

    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

    Grid Events in CardView Mode #121626

    Martin
    Participant

    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

    Grid Events in CardView Mode #121632

    njenga
    Participant

    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

    Grid Events in CardView Mode #121637

    Martin
    Participant

    Hello Steve,

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

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com

    Grid Events in CardView Mode #121641

    njenga
    Participant

    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)??

    Grid Events in CardView Mode #121642

    Martin
    Participant

    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

    Grid Events in CardView Mode #121645

    njenga
    Participant

    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

    Grid Events in CardView Mode #121655

    Martin
    Participant

    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

    Grid Events in CardView Mode #121663

    njenga
    Participant

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

    Regards
    njenga

    Grid Events in CardView Mode #121668

    njenga
    Participant

    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??

    Grid Events in CardView Mode #121672

    Martin
    Participant

    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

    Grid Events in CardView Mode #121692

    njenga
    Participant

    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!

    Grid Events in CardView Mode #121697

    Martin
    Participant

    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

    Grid Events in CardView Mode #121718

    njenga
    Participant

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

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

You must be logged in to reply to this topic.