Hi All, I have a normal grid, in this grid I have a image column and

Hi All,

I have a normal grid, in this grid I have a image column and a drop down column. I want to change the selected value of the drop down on click of image. Please let me know how can we do that?...

OriginalPostID-99022

OriginalPostID-99022

  Discussion posts and replies are publicly visible

  • This can be achieved using JavaScript to add a handler to the click event of the image and the Advanced Form Utilities to update the dropdown but I have to emphasize on the fact that JavaScript should be avoid so you can eventually make your form mobile enabled or to be able to expose it on Tempo for a wider compatibility with other browsers.

    You could consider using a GridSelection component with images and loop back to the form updating the value of the dropdown within the process through activity chaining forum.appian.com/.../SAIL_Components
  • If you are still interested in the JavaScript approach (not recommended) you can add the click event to the rows in the image column within that specific grid. The following function adds it to all the image columns and shows the index of the clicked row within the column.

    This is a quick solution if you have only one image column, if you have more than one the other columns will get the click event too. At least it should be enough if you just have one column of type image or you can take this code as a reference, explore the grid using IE Developer Tools and improve the function

    function addClickEventToRow(gridID) {
    $("#fd_component_"+window.FormDesigner.runtimeNamespace+gridID+" .imageControl").click(function(){
    alert("Image Clicked Number: " + $("#fd_component_"+window.FormDesigner.runtimeNamespace+gridID+" .imageControl").index(this));
    });
    }

    The function retrieves all the elements with the class “imageControl” out of the given grid. The index function returns the id within the resulting array (from the retrieval of all elements with the “imageControl” class.

    This function can be invoked in the load event of the form with the corresponding setTimeout to allow the component to be rendered.

    I am attaching an example application that shows this function in action. The model is called Click Image in Row under Process Models – Forum. The JS is called clickRowEvent.js under Default Community > Temporary Documents Knowledge Center > Temporary Documents>JS libraries. Click on each image and see how the alert indicates which row was clicked, your case you can use that same logic but instead of showing the alert you can update the dropdown with the Advanced Form Utilities plug-in.

    forum.appian.com/.../16214