How to make the rows on skuid table clickable

  • 1
  • Question
  • Updated 5 months ago
  • In Progress

I have a table on a skuid page. I want to make the rows clickable so that when the user clicks on any part of the row, it runs some javascript.

I am having difficulty linking the javascript snippet to the click event of the row.

The though the following post had the answer:

https://community.skuid.com/skuid/topics/onclick-javascript-on-click-of-any-field-in-row-of-skuid-ta...


but I do not know how to link the function to the table class.


Thanks

 

Photo of Parminder Dhillon

Parminder Dhillon

  • 110 Points 100 badge 2x thumb

Posted 5 months ago

  • 1
Photo of Josh Lewis

Josh Lewis

  • 1,218 Points 1k badge 2x thumb
Hello Parminder,

Have you had a chance to review this guide from our documentation site? https://docs.skuid.com/latest/en/skuid/javascript/snippets/table-custom-row.html I think it may prove helpful, but if not, please let me know!

Thank you,

Josh
Photo of Parminder Dhillon

Parminder Dhillon

  • 110 Points 100 badge 2x thumb
Hi Josh

I know the row action function I can use. What I am looking for is for the user to click on any field on the row (is the entire row us clickable) and that to invoke a JavaScript function where I can access the row contents and perform a function on the data.

The row action icon is not too user friendly.

Thanks

Parminder
Photo of Josh Lewis

Josh Lewis

  • 1,218 Points 1k badge 2x thumb
Parminder,

Thank you for the reply! I wanted to share that resource as a method closer to declarative functionality that you might be able to leverage, but I understand it might not be perfect for what you are trying to achieve. 

For more custom code based implementation tips, I am hoping that a member of the community might be able to chime in with how they have tackled a similar scenario as I do not consider myself a "code expert" per se.

Thank you,

Josh 
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Parminder,

The script referenced in the community post you found does work.  It is setup to 'click' the row action icon.  That is, clicking the row clicks the row action icon.  You can then declaratively setup any actions to run when the row action is clicked.

Here is a sample page that demonstrates the use of this script.

Thanks,

Bill

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Task">
    <models>
        <model id="Task" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Task">
            <fields>
                <field id="Subject"/>
                <field id="CreatedDate"/>
                <field id="ActivityDate"/>
                <field id="Description"/>
            </fields>
            <conditions/>
            <actions>
                <action>
                    <actions>
                        <action type="custom" snippet="addActionAfterQuery"/>
                    </actions>
                    <events>
                        <event>models.loaded</event>
                    </events>
                </action>
            </actions>
        </model>
    </models>
    <components>
        <pagetitle model="Task" uniqueid="sk-3u_j-201">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="savecancel" uniqueid="sk-3u_j-199"/>
            </actions>
        </pagetitle>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Task" mode="read" allowcolumnreordering="true" uniqueid="actionOnRowTable" emptysearchbehavior="query">
            <fields>
                <field id="Subject" hideable="true" allowordering="true" uniqueid="fi-3u_i-935"/>
                <field id="CreatedDate" hideable="true" allowordering="true" uniqueid="fi-3u_i-936"/>
                <field id="ActivityDate" hideable="true" uniqueid="fi-3u_n-271"/>
                <field id="Description" hideable="true" uniqueid="fi-3u_n-272"/>
            </fields>
            <rowactions>
                <action type="popup" icon="sk-icon-popup" label="View record details">
                    <popup width="80%" title="Viewing {{Model.label}}: {{Subject}}">
                        <components>
                            <basicfieldeditor showheader="true" showsavecancel="true" mode="edit" model="Task" uniqueid="sk-3u_q-334">
                                <conditions>
                                    <condition type="contextrow" field="Id" mergefield="Id" autocreated="true"/>
                                </conditions>
                                <columns>
                                    <column width="50%">
                                        <sections>
                                            <section title="Section A">
                                                <fields>
                                                    <field id="Subject" uniqueid="sk-3u_q-320"/>
                                                    <field id="CreatedDate" uniqueid="sk-3u_q-323"/>
                                                    <field id="ActivityDate" uniqueid="sk-3u_q-326"/>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                    <column width="50%">
                                        <sections>
                                            <section title="Section B">
                                                <fields>
                                                    <field id="Description" uniqueid="sk-3u_q-332"/>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                </columns>
                            </basicfieldeditor>
                        </components>
                    </popup>
                </action>
            </rowactions>
            <massactions usefirstitemasdefault="true"/>
            <views>
                <view type="standard"/>
            </views>
            <searchfields/>
        </skootable>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript>
            <jsitem location="inline" name="addActionPageLoad" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
        $('#actionOnRowTable tr').on('click', 'td', function(event) {
            if($(event.currentTarget).find('.sk-icon-popup').length &lt;= 0) {
                $(event.currentTarget.parentElement).find('.sk-icon-popup').click();
            }
        });
});
})(skuid);</jsitem>
            <jsitem location="inlinesnippet" name="addActionAfterQuery" cachelocation="false">var params = arguments[0],
$ = skuid.$;
$('#actionOnRowTable tr').on('click', 'td', function(event) {
    if($(event.currentTarget).find('.sk-icon-popup').length &lt;= 0) {
        $(event.currentTarget.parentElement).find('.sk-icon-popup').click();
    }
});</jsitem>
        </javascript>
        <actionsequences uniqueid="sk-3u_n-265"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Josh Lewis

Josh Lewis

  • 1,218 Points 1k badge 2x thumb
Thanks for adding this Bill!
Photo of Parminder Dhillon

Parminder Dhillon

  • 110 Points 100 badge 2x thumb

Thanks Bill. That worked just like I wanted it to.

One more question related to this:

Is it possible to "hide" the row action column from the user so that the only option is to click on the row?

For example, at the moment when the row is clicked, the Row Action icon click is forced. Is it possible to get the details of the row that has been clicked ie something like Item.Row so that the Row action is not required?

Thanks

Parminder

Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Parminder,

Try this CSS:
.sk-action-field {
    display: none;
}

Thanks,

Bill
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Parminder,

The same approach works.  You just need a different 'selector':

.checkcolumn {
    display: none;
}

Thanks,

Bill
Photo of Parminder Dhillon

Parminder Dhillon

  • 110 Points 100 badge 2x thumb

Thanks Bill - That worked fine.

Photo of Parminder Dhillon

Parminder Dhillon

  • 110 Points 100 badge 2x thumb

One more follow up query on this:


When the table is displayed with pagination enabled, the click on row only works on the first page. It does not work on any other page.

The javascript below add the on click function to the rows on the first page on page load:

(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
        $('#actionOnRowTable tr').on('click', 'td', function(event) {
            if($(event.currentTarget).find('.sk-icon-popup').length <= 0) {
                $(event.currentTarget.parentElement).find('.sk-icon-popup').click();
            }
        });
});
})(skuid);

The question is how do I add this function to other pages in the table pagination as the user clicks through the pagination?


Thanks

Parminder


Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Parminder,

It appears that the paging is a different event that is not picked up by the Model requeried initiating event.  I am not sure what event is fired when the Next or Previous link is clicked.

Thanks,

Bill
(Edited)