Table (with scrolling on) minimizes on rendering the first time

  • 1
  • Problem
  • Updated 1 year ago
  • Acknowledged
Hi,
This is the use case: I have two identical tables, one with Read only, the other with Edit. I have a buttom set with a custom Edit and Cancel button.
When I click edit, it changes a value in a custom Model to On and Renders the Edit only table. On Default and  when I press cancel , it renders only the Read-only table.

Everything works fine Except(!) when I have scrolling on for the table. On page load or first time load, the editable table minimized to one row.
If I press Edit, then cancel and then edit again, it renders correctly with scrolling enabled.

So this seems strange as it does work on second try and I can't figure out why.

I've reproduced the error on a simple page and attached screenshot and XML. Never mind the format etc.

this is the Screenshot after Page load when I press edit. See the scroll bars on the right side of the header, it does show all 5 rows.

This is after I press Edit, Cancel and then Edit again it works




Any suggestions why this happens?
I guess there might be JS to avoid having 2 tables, I'm just not an expert in JS and this worked fine until I added scrolling. 
I'm now just not using scrolling, slightly annoying if the table gets too long, but I can live with it.

Thanks,

Thomas
Photo of thomas haelsig

thomas haelsig

  • 290 Points 250 badge 2x thumb

Posted 1 year ago

  • 1
Photo of thomas haelsig

thomas haelsig

  • 290 Points 250 badge 2x thumb
Here is the XML:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="AccountFields" limit="5" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="Name"/>
                <field id="Id"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="LastModifiedDate"/>
                <field id="CreatedDate"/>
                <field id="Description"/>
                <field id="Phone"/>
                <field id="Rating"/>
                <field id="AccountSource"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="RenderEditing" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="RenderEditView" uionly="true" displaytype="TEXT" label="RenderEditView"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-1m0rRF-87">
            <divisions>
                <division behavior="fit" verticalalign="top">
                    <components>
                        <navigation uniqueid="sk-1m1hrk-242" type="vertical">
                            <navigationitems>
                                <navigationitem label="Navigation Item 1" uniqueid="sk-1m1hrk-241">
                                    <actions>
                                        <action type="redirect" window="self"/>
                                    </actions>
                                </navigationitem>
                                <navigationitem label="Navigation Item 2" uniqueid="sk-1m1iqG-248">
                                    <actions>
                                        <action type="redirect" window="self"/>
                                    </actions>
                                </navigationitem>
                            </navigationitems>
                        </navigation>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" ratio="5" minwidth="100px">
                    <components>
                        <buttonset model="AccountFields" uniqueid="sk-1m2nbD-382">
                            <buttons>
                                <button type="multi" label="Edit" uniqueid="sk-1m2-w4-413">
                                    <actions>
                                        <action type="updateRow" fieldmodel="RenderEditing" affectedrows="all" field="RenderEditView" enclosevalueinquotes="true" value="On"/>
                                    </actions>
                                </button>
                                <button type="multi" label="Cancel" uniqueid="sk-1m3034-418">
                                    <actions>
                                        <action type="cancel">
                                            <models>
                                                <model>AccountFields</model>
                                            </models>
                                        </action>
                                        <action type="updateRow" fieldmodel="RenderEditing" affectedrows="all" field="RenderEditView" enclosevalueinquotes="true" value="Off"/>
                                    </actions>
                                </button>
                            </buttons>
                        </buttonset>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="false" buttonposition="" mode="readonly" allowcolumnreordering="true" responsive="true" uniqueid="sk-1m0vCQ-102" model="AccountFields" emptysearchbehavior="query" allowscrollbars="true">
                            <fields>
                                <field id="Description" hideable="true" uniqueid="fi-1m1BKm-160"/>
                                <field id="Id" hideable="true" uniqueid="fi-1m1BKm-161"/>
                                <field id="Name" hideable="true" uniqueid="fi-1m1BKn-162"/>
                                <field id="Phone" hideable="true" uniqueid="fi-1m1BKn-163"/>
                                <field id="Rating" hideable="true" uniqueid="fi-1m1BKn-164"/>
                                <field id="AccountSource" hideable="true" uniqueid="fi-1m1BKn-165"/>
                                <field id="CreatedDate" hideable="true" uniqueid="fi-1m1BKo-166"/>
                                <field id="LastModifiedDate" hideable="true" uniqueid="fi-1m1BKo-167"/>
                            </fields>
                            <rowactions/>
                            <massactions usefirstitemasdefault="true"/>
                            <views>
                                <view type="standard"/>
                            </views>
                            <renderconditions logictype="or">
                                <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="RenderEditing" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="RenderEditView" fieldtargetobjects="Account" value="Off"/>
                                <rendercondition type="blank" operator="=" fieldmodel="RenderEditing" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="RenderEditView" fieldtargetobjects="Account" value="null" enclosevalueinquotes="false"/>
                            </renderconditions>
                            <searchfields/>
                        </skootable>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="false" model="AccountFields" buttonposition="" mode="edit" allowcolumnreordering="true" responsive="true" uniqueid="sk-1m1G-L-193" emptysearchbehavior="query" allowscrollbars="true">
                            <fields>
                                <field id="Description" hideable="true" uniqueid="fi-1m1RBX-216"/>
                                <field id="Id" hideable="true" uniqueid="fi-1m1RBX-217"/>
                                <field id="Name" hideable="true" uniqueid="fi-1m1RBY-218"/>
                                <field id="Phone" hideable="true" uniqueid="fi-1m1RBY-219"/>
                                <field id="Rating" hideable="true" uniqueid="fi-1m1RBY-220"/>
                                <field id="AccountSource" hideable="true" uniqueid="fi-1m1RBY-221"/>
                                <field id="CreatedDate" hideable="true" uniqueid="fi-1m1RBY-222"/>
                                <field id="LastModifiedDate" hideable="true" uniqueid="fi-1m1RBZ-223"/>
                                <field id="OwnerId" hideable="true" uniqueid="fi-1m1RBZ-224"/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                            <renderconditions logictype="and">
                                <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="RenderEditing" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="RenderEditView" fieldtargetobjects="Account" value="On"/>
                            </renderconditions>
                            <searchfields/>
                        </skootable>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="10%" ratio="1">
                    <components>
                        <richtext multiple="false" uniqueid="sk-1m22DV-282" model="AccountFields">
                            <contents>&lt;p&gt;Right hand side responsive information&lt;/p&gt;
</contents>
                        </richtext>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Two Questions:

1. What version are you running?

2. Does this XML below work? I believe it wasn't working the first time because the model wasn't being queried. Thus, it would work after cancelling, but not before. This works on my end but I ask which version you are running because maybe if it doesn't work on your end, there could be a problem there.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">    <models>
        <model id="AccountFields" limit="5" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="Name"/>
                <field id="Id"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="LastModifiedDate"/>
                <field id="CreatedDate"/>
                <field id="Description"/>
                <field id="Phone"/>
                <field id="Rating"/>
                <field id="AccountSource"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="RenderEditing" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="RenderEditView" uionly="true" displaytype="TEXT" label="RenderEditView"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-1m0rRF-87">
            <divisions>
                <division behavior="fit" verticalalign="top">
                    <components>
                        <navigation uniqueid="sk-1m1hrk-242" type="vertical">
                            <navigationitems>
                                <navigationitem label="Navigation Item 1" uniqueid="sk-1m1hrk-241">
                                    <actions>
                                        <action type="redirect" window="self"/>
                                    </actions>
                                </navigationitem>
                                <navigationitem label="Navigation Item 2" uniqueid="sk-1m1iqG-248">
                                    <actions>
                                        <action type="redirect" window="self"/>
                                    </actions>
                                </navigationitem>
                            </navigationitems>
                        </navigation>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" ratio="5" minwidth="100px">
                    <components>
                        <buttonset model="AccountFields" uniqueid="sk-1m2nbD-382">
                            <buttons>
                                <button type="multi" label="Edit" uniqueid="sk-1m2-w4-413">
                                    <actions>
                                        <action type="updateRow" fieldmodel="RenderEditing" affectedrows="all" field="RenderEditView" enclosevalueinquotes="true" value="On"/>
                                    <action type="requeryModels" behavior="standard">
<models>
    <model>AccountFields</model>
</models>
</action>
</actions>
                                </button>
                                <button type="multi" label="Cancel" uniqueid="sk-1m3034-418">
                                    <actions>
                                        <action type="cancel">
                                            <models>
                                                <model>AccountFields</model>
                                            </models>
                                        </action>
                                        <action type="updateRow" fieldmodel="RenderEditing" affectedrows="all" field="RenderEditView" enclosevalueinquotes="true" value="Off"/>
                                    </actions>
                                </button>
                            </buttons>
                        </buttonset>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="false" buttonposition="" mode="readonly" allowcolumnreordering="true" responsive="true" uniqueid="sk-1m0vCQ-102" model="AccountFields" emptysearchbehavior="query" allowscrollbars="true">
                            <fields>
                                <field id="Description" hideable="true" uniqueid="fi-1m1BKm-160"/>
                                <field id="Id" hideable="true" uniqueid="fi-1m1BKm-161"/>
                                <field id="Name" hideable="true" uniqueid="fi-1m1BKn-162"/>
                                <field id="Phone" hideable="true" uniqueid="fi-1m1BKn-163"/>
                                <field id="Rating" hideable="true" uniqueid="fi-1m1BKn-164"/>
                                <field id="AccountSource" hideable="true" uniqueid="fi-1m1BKn-165"/>
                                <field id="CreatedDate" hideable="true" uniqueid="fi-1m1BKo-166"/>
                                <field id="LastModifiedDate" hideable="true" uniqueid="fi-1m1BKo-167"/>
                            </fields>
                            <rowactions/>
                            <massactions usefirstitemasdefault="true"/>
                            <views>
                                <view type="standard"/>
                            </views>
                            <renderconditions logictype="or">
                                <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="RenderEditing" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="RenderEditView" fieldtargetobjects="Account" value="Off"/>
                                <rendercondition type="blank" operator="=" fieldmodel="RenderEditing" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="RenderEditView" fieldtargetobjects="Account" value="null" enclosevalueinquotes="false"/>
                            </renderconditions>
                            <searchfields/>
                        </skootable>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="false" model="AccountFields" buttonposition="" mode="edit" allowcolumnreordering="true" responsive="true" uniqueid="sk-1m1G-L-193" emptysearchbehavior="query" allowscrollbars="true">
                            <fields>
                                <field id="Description" hideable="true" uniqueid="fi-1m1RBX-216"/>
                                <field id="Id" hideable="true" uniqueid="fi-1m1RBX-217"/>
                                <field id="Name" hideable="true" uniqueid="fi-1m1RBY-218"/>
                                <field id="Phone" hideable="true" uniqueid="fi-1m1RBY-219"/>
                                <field id="Rating" hideable="true" uniqueid="fi-1m1RBY-220"/>
                                <field id="AccountSource" hideable="true" uniqueid="fi-1m1RBY-221"/>
                                <field id="CreatedDate" hideable="true" uniqueid="fi-1m1RBY-222"/>
                                <field id="LastModifiedDate" hideable="true" uniqueid="fi-1m1RBZ-223"/>
                                <field id="OwnerId" hideable="true" uniqueid="fi-1m1RBZ-224"/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                            <renderconditions logictype="and">
                                <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="RenderEditing" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="RenderEditView" fieldtargetobjects="Account" value="On"/>
                            </renderconditions>
                            <searchfields/>
                        </skootable>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="10%" ratio="1">
                    <components>
                        <richtext multiple="false" uniqueid="sk-1m22DV-282" model="AccountFields">
                            <contents>&lt;p&gt;Right hand side responsive information&lt;/p&gt;
</contents>
                        </richtext>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of thomas haelsig

thomas haelsig

  • 290 Points 250 badge 2x thumb
Hi Stephen,

1) Version 10.0.2

2) Your solution works by adding an action to query the model (again).
If you load my page you will see that it does load the data, but somehow on first load it minimized the table size to just the header. So you can scroll and it does show all the data, but only 1 row is visible, but upon second load/query it seems to adjus the size correctly.

The solution works for me, but I do somehow feel that it is strange that it needs an additional action as it does load the data.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
It is strange behavior. I see that scrolling down does show the data. I didn't see that to begin with. Another solution is the following: Deselect the Allow Scroll Bars.


I'm puzzled why querying the model worked. Don't get me wrong, I'm glad that it worked, but I don't think I can tell you why. 

I'll notify the Developers of this tomorrow and see if they can provide any more insight. Thanks for bringing this to our attention
Photo of thomas haelsig

thomas haelsig

  • 290 Points 250 badge 2x thumb
Hi Stephen,

I identified the Selection of "Allow Scroll Bars" as the culprit. I added the scrolling that promped the issues so Deselecting the scroll bars is not really a solution if you want them :)

It is strange that somehow the table with scroll behaves correctly only on the second query attempt, there is a workaround by querying the model again so its not the highest urgency.

Thanks for looking into it.