How to make the rows on skuid table clickable

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

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

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 

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 &amp;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 &amp;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>

Thanks for adding this Bill!

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

Parminder,

Try this CSS:

.sk-action-field {<br>&nbsp; &nbsp; display: none;<br>}

Thanks,

Bill

Parminder,

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

.checkcolumn {<br>&nbsp; &nbsp; display: none;<br>}

Thanks,

Bill

Thanks Bill - That worked fine.

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

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