Guest User

Untitled

a guest
Jan 20th, 2021
50
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" theme="New_Test_Design">
  2.     <models>
  3.         <model id="UIModel1" limit="20" query="true" createrowifnonefound="false" datasource="Ui-Only">
  4.             <fields>
  5.                 <field id="Field1" displaytype="TEXT" length="255"/>
  6.                 <field displaytype="TEXT" length="255" id="Field2"/>
  7.             </fields>
  8.             <conditions/>
  9.             <actions/>
  10.         </model>
  11.         <model id="UIModel2" limit="20" query="true" createrowifnonefound="false" datasource="Ui-Only">
  12.             <fields>
  13.                 <field id="Field1" displaytype="TEXT" length="255"/>
  14.                 <field id="Field2" displaytype="TEXT" length="255"/>
  15.                 <field displaytype="DOUBLE" length="255" id="Field3" ogdisplaytype="TEXT" precision="9" scale="2"/>
  16.             </fields>
  17.             <conditions/>
  18.             <actions/>
  19.         </model>
  20.     </models>
  21.     <components>
  22.         <skuid__text contents="&lt;span style=&quot;font-size:20px;&quot;&gt;&lt;strong&gt;Table Issues&lt;/strong&gt;&lt;/span&gt;" uniqueid="sk-RmL-11438"/>
  23.         <skuid__grid uniqueid="sk-Ro7-82297" flexDirection="row" justifyContent="flex-start" alignItems="flex-start">
  24.             <divisions>
  25.                 <division minWidth="95vw" ratio="1" alignSelf="auto" maxWidth="95vw">
  26.                     <components>
  27.                         <skuid__tabSet uniqueid="sk-RmP-13093">
  28.                             <tabs>
  29.                                 <skuid__tabPanel name="Config">
  30.                                     <components>
  31.                                         <skuid__text contents="Add Data to model" uniqueid="sk-Rn3-29674"/>
  32.                                         <skuid__buttonSet model="UIModel1" uniqueid="sk-XpR-6174">
  33.                                             <groups>
  34.                                                 <skuid__buttonGroup uniqueId="sk-XpR-6172">
  35.                                                     <buttons>
  36.                                                         <skuid__button label="AddRow" uniqueId="sk-XpR-6173">
  37.                                                             <actions>
  38.                                                                 <action type="createRow" model="UIModel1" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
  39.                                                                     <defaults>
  40.                                                                         <default valuesource="fieldvalue" field="Field1" enclosevalueinquotes="true" value="UIModel1Filed1Value"/>
  41.                                                                         <default valuesource="fieldvalue" field="Field2" enclosevalueinquotes="true" value="UIModel1Filed2Value"/>
  42.                                                                     </defaults>
  43.                                                                 </action>
  44.                                                                 <action type="createRow" model="UIModel2" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
  45.                                                                     <defaults>
  46.                                                                         <default valuesource="fieldvalue" field="Field1" enclosevalueinquotes="true" value="UIModel2Filed1Value"/>
  47.                                                                         <default valuesource="fieldvalue" field="Field2" enclosevalueinquotes="true" value="UIModel2Filed2Value"/>
  48.                                                                     </defaults>
  49.                                                                 </action>
  50.                                                             </actions>
  51.                                                         </skuid__button>
  52.                                                     </buttons>
  53.                                                 </skuid__buttonGroup>
  54.                                             </groups>
  55.                                         </skuid__buttonSet>
  56.                                         <skuid__table allowColumnFreezing="dragDrop" model="UIModel2" uniqueid="sk-XrV-33846" mode="read" pageSize="10">
  57.                                             <fields>
  58.                                                 <field id="Field1" uniqueid="fi-Rm7-3773"/>
  59.                                                 <field id="Field2" uniqueid="fi-Rm7-3774" fieldRenderer="newFieldRenderer"/>
  60.                                                 <field id="Field3" horizontalAlignment="right"/>
  61.                                             </fields>
  62.                                             <filtering enableSearch="false" searchMethod="client"/>
  63.                                             <rowActions/>
  64.                                             <massActions/>
  65.                                         </skuid__table>
  66.                                     </components>
  67.                                 </skuid__tabPanel>
  68.                                 <skuid__tabPanel name="8, 9 &amp; 10">
  69.                                     <components>
  70.                                         <skuid__text contents="&lt;br /&gt;&#10;&lt;br /&gt;&#10;&lt;br /&gt;&#10;UIModel1: {{$Model.UIModel1.data.0.Field1}},&amp;nbsp;{{$Model.UIModel1.data.0.Field2}}.&lt;br /&gt;&#10;UIModel2: {{$Model.UIModel2.data.0.Field1}},&amp;nbsp;{{$Model.UIModel2.data.0.Field2}}." uniqueid="sk-Xq7-23004" allowHtmlInBuilder="false" model="UIModel1">
  71.                                             <styles>
  72.                                                 <spacing/>
  73.                                             </styles>
  74.                                             <renderConditions logictype="and"/>
  75.                                             <styleVariantConditions/>
  76.                                         </skuid__text>
  77.                                         <skuid__table allowColumnFreezing="dragDrop" model="UIModel1" uniqueid="sk-Xpv-19471" mode="read" pageSize="10" enableDrawers="true">
  78.                                             <fields>
  79.                                                 <field id="Field1" label="{{$Model.UIModel1.data.0.Field1}}" uniqueid="fi-Xs--43838"/>
  80.                                                 <field id="Field2" label="{{$Model.UIModel1.data.0.Field2}}" uniqueid="fi-Xs--43839"/>
  81.                                             </fields>
  82.                                             <filtering enableSearch="false"/>
  83.                                             <rowActions/>
  84.                                             <massActions/>
  85.                                             <drawer>
  86.                                                 <components>
  87.                                                     <skuid__form showErrorsInline="true" model="UIModel1" uniqueid="sk-Xt3-44790" mode="read">
  88.                                                         <sections>
  89.                                                             <section title="New Section" showHeading="false">
  90.                                                                 <rows>
  91.                                                                     <row>
  92.                                                                         <fields>
  93.                                                                             <skuid__field id="Field1" uniqueId="sk-Xt8-45828" label="{{Field2}}"/>
  94.                                                                         </fields>
  95.                                                                     </row>
  96.                                                                     <row>
  97.                                                                         <fields>
  98.                                                                             <skuid__field id="Field2" uniqueId="sk-Xt8-45833" label="{{$Model.UIModel2.data.0.Field1}}"/>
  99.                                                                         </fields>
  100.                                                                     </row>
  101.                                                                 </rows>
  102.                                                             </section>
  103.                                                         </sections>
  104.                                                     </skuid__form>
  105.                                                 </components>
  106.                                             </drawer>
  107.                                         </skuid__table>
  108.                                     </components>
  109.                                 </skuid__tabPanel>
  110.                                 <skuid__tabPanel name="11">
  111.                                     <components>
  112.                                         <skuid__text contents="Add few rows of data using Config tab. The Width of table is set to 1000px for the sake of example.&lt;br /&gt;&#10;Reproduce the error: scroll slightly so you can &lt;strong&gt;fully &lt;/strong&gt;see columns that initially cannot be seen due to the width constraint (e.g. Template Field 7...) . Clicking on any cell in Template Field 7 column or columns further to the right will cause table to scroll to the right, unless the scroll bar has reached the end." uniqueid="sk-VB6-21459"/>
  113.                                         <skuid__grid uniqueid="sk-VAx-18539" flexDirection="row" justifyContent="flex-start" alignItems="flex-start">
  114.                                             <divisions>
  115.                                                 <division minWidth="1000px" ratio="1" alignSelf="auto" maxWidth="1000px">
  116.                                                     <components>
  117.                                                         <skuid__table allowColumnFreezing="dragDrop" model="UIModel1" uniqueid="sk-Rmj-24421" mode="readonly" pageSize="10" showSaveCancel="false" minHeightCustom="50px">
  118.                                                             <fields>
  119.                                                                 <field id="Field1" uniqueid="fi-Rnr-5401" readOnly="true"/>
  120.                                                                 <field id="Field2" uniqueid="fi-Rnr-5402" readOnly="true"/>
  121.                                                                 <field type="COMBO" label="Template Field 1" template="Template Field 1" uniqueid="fi-Rnr-5403"/>
  122.                                                                 <field type="COMBO" label="Template Field 2" template="Template Field 2" uniqueid="fi-Rnr-5404"/>
  123.                                                                 <field type="COMBO" label="Template Field 3" template="Template Field 3" uniqueid="fi-Rnr-5405"/>
  124.                                                                 <field type="COMBO" label="Template Field 4" template="Template Field 4" uniqueid="fi-Rnr-5406"/>
  125.                                                                 <field type="COMBO" label="Template Field 5" template="Template Field 5" uniqueid="fi-Rnr-5407"/>
  126.                                                                 <field type="COMBO" label="Template Field 6" template="Template Field 6" uniqueid="fi-Rnr-5408"/>
  127.                                                                 <field type="COMBO" label="Template Field 7" template="Template Field 7" uniqueid="fi-Rnr-5409"/>
  128.                                                                 <field type="COMBO" label="Template Field 8" template="Template Field 8" uniqueid="fi-Rnr-5410"/>
  129.                                                                 <field type="COMBO" label="Template Field 9" template="Template Field 9" uniqueid="fi-Rnr-5411"/>
  130.                                                                 <field type="COMBO" label="Template Field 10" template="Template Field 10" uniqueid="fi-Rnr-5412"/>
  131.                                                                 <field type="COMBO" label="Template Field 11" template="Template Field 11" uniqueid="fi-Rnr-5413"/>
  132.                                                                 <field type="COMBO" label="Template Field 12" template="Template Field 12" uniqueid="fi-Rnr-5414"/>
  133.                                                                 <field type="COMBO" label="Template Field 13" template="Template Field 13" uniqueid="fi-VAx-19010"/>
  134.                                                                 <field type="COMBO" label="Template Field 14" template="Template Field 14" uniqueid="fi-VAx-19011"/>
  135.                                                                 <field type="COMBO" label="Template Field 15" template="Template Field 15" uniqueid="fi-VAx-19012"/>
  136.                                                             </fields>
  137.                                                             <filtering enableSearch="false"/>
  138.                                                             <rowActions/>
  139.                                                             <massActions/>
  140.                                                         </skuid__table>
  141.                                                     </components>
  142.                                                 </division>
  143.                                             </divisions>
  144.                                         </skuid__grid>
  145.                                     </components>
  146.                                 </skuid__tabPanel>
  147.                                 <skuid__tabPanel name="12">
  148.                                     <components>
  149.                                         <skuid__text contents="Add few rows of data using Config tab. Create table by pressing the button.&lt;br /&gt;&#10;&lt;br /&gt;&#10;First Problem: if user tries to adjust the number of frozen columns they won&amp;#39;t be able to, since is offset.&lt;br /&gt;&#10;&lt;br /&gt;&#10;Second Probelm: I couldn&amp;#39;t reproduce it but this is the cause of the problem:&amp;nbsp;&lt;strong&gt;Table &amp;gt; tbody &amp;gt; tr &amp;gt; td (which contains the drawer button)&lt;/strong&gt; would be offset to the right, because &lt;strong&gt;element.style&lt;/strong&gt; would have css that is&lt;strong&gt; left: 44px&amp;nbsp;&lt;/strong&gt;instead of&lt;strong&gt; left:32px&lt;/strong&gt;. And, then when mouse is hovered over the table the style would update to 32px which is what it should be. (You can try this using element styles in browser). Note the exact px might be different for you since idk how they are calculated.&lt;br /&gt;&#10;&lt;br /&gt;&#10;I narrowed down the problem to be related to Design System, if I change Styles to default the problem goes away in my original solution. Also,&amp;nbsp; if I&amp;#39;m design system and change the preview mode I can see the rerendering happening (the drawer being offset and then coming back into place), so I assume my table gets rendered but not rerendered.&lt;br /&gt;&#10;&lt;br /&gt;&#10;Third Problem: If you go to another tab and come back to this tab then the table created with factory will not rendered, unlike components created using Composer." uniqueid="sk-VQH-10766"/>
  150.                                         <skuid__buttonSet uniqueid="sk-VCN-36823">
  151.                                             <groups>
  152.                                                 <skuid__buttonGroup uniqueId="sk-VCN-36821" displayType="detached">
  153.                                                     <buttons>
  154.                                                         <skuid__button label="Creaate Table" uniqueId="sk-VCN-36822">
  155.                                                             <actions>
  156.                                                                 <action type="custom" snippet="createTable"/>
  157.                                                             </actions>
  158.                                                         </skuid__button>
  159.                                                     </buttons>
  160.                                                 </skuid__buttonGroup>
  161.                                             </groups>
  162.                                             <styles>
  163.                                                 <spacing bottom="4"/>
  164.                                             </styles>
  165.                                         </skuid__buttonSet>
  166.                                         <skuid__text contents="&lt;span style=&quot;font-size:20px;&quot;&gt;&lt;strong&gt;Ordinary Table&amp;nbsp;&lt;/strong&gt;&lt;/span&gt;" uniqueid="sk-Vc7-41261"/>
  167.                                         <skuid__table allowColumnFreezing="dragDrop" model="UIModel2" uniqueid="sk-VDG-42019" mode="readonly" pageSize="10" enableDrawers="true" sortOnClient="false" showSaveCancel="false" styleSettingsVariant="857e0841-d4d7-4dae-9cf8-76f6b52604c5">
  168.                                             <fields>
  169.                                                 <field id="Field1" uniqueid="fi-VDN-46551"/>
  170.                                                 <field id="Field2" uniqueid="fi-VDN-46552" fieldRenderer="newFieldRenderer"/>
  171.                                                 <field id="Field3" horizontalAlignment="right" summaries="sum" defaultSummary="sum" uniqueid="fi-VIJ-16746"/>
  172.                                             </fields>
  173.                                             <filtering enableSearch="false" searchMethod="client"/>
  174.                                             <rowActions/>
  175.                                             <massActions/>
  176.                                             <drawer>
  177.                                                 <components>
  178.                                                     <skuid__text contents="Empty Drawer..." uniqueid="sk-VDP-47559"/>
  179.                                                 </components>
  180.                                                 <beforeLoad/>
  181.                                             </drawer>
  182.                                             <styles>
  183.                                                 <spacing bottom="4"/>
  184.                                             </styles>
  185.                                         </skuid__table>
  186.                                         <skuid__text contents="&lt;span style=&quot;font-size:20px;&quot;&gt;&lt;strong&gt;Table creted using JS and component factory.&lt;/strong&gt;&lt;/span&gt;" uniqueid="sk-Vc9-41936"/>
  187.                                         <skuid__wrapper uniqueid="wrapperWrapperTable">
  188.                                             <components>
  189.                                                 <skuid__wrapper uniqueid="wrapperTable">
  190.                                                     <components/>
  191.                                                     <styles>
  192.                                                         <spacing left="2"/>
  193.                                                     </styles>
  194.                                                     <background/>
  195.                                                     <interactions/>
  196.                                                     <renderConditions logictype="and"/>
  197.                                                     <styleVariantConditions/>
  198.                                                 </skuid__wrapper>
  199.                                             </components>
  200.                                             <styles>
  201.                                                 <spacing left="2"/>
  202.                                             </styles>
  203.                                             <background/>
  204.                                             <interactions/>
  205.                                         </skuid__wrapper>
  206.                                     </components>
  207.                                 </skuid__tabPanel>
  208.                             </tabs>
  209.                             <styles>
  210.                                 <spacing/>
  211.                             </styles>
  212.                         </skuid__tabSet>
  213.                     </components>
  214.                 </division>
  215.             </divisions>
  216.             <interactions/>
  217.         </skuid__grid>
  218.     </components>
  219.     <resources>
  220.         <labels/>
  221.         <javascript>
  222.             <jsitem location="inlinesnippet" name="createTable" cachelocation="false">const params = arguments[0];
  223.  
  224.  
  225.  
  226. let wrapperId = 'wrapperTable';
  227.  
  228.  
  229. let strXmlTable = `&lt;skuid__table styleSettingsVariant="857e0841-d4d7-4dae-9cf8-76f6b52604c5" allowColumnFreezing="dragDrop" model="UIModel2" uniqueid="sk-VDG-42019" mode="readonly" pageSize="50"
  230.                     allowColumnOrdering="true" showErrorsInline="false" showListHeader="true"
  231.                     resetPaginationOnQuery="false" sortOnClient="true" rowHeightStrategy="fit" enableDrawers="true"  showSaveCancel="false"&gt;
  232.         &lt;fields&gt;
  233.             &lt;field id="Field1" uniqueid="fi-VDN-46551"/&gt;
  234.             &lt;field id="Field2" uniqueid="fi-VDN-46552"/&gt;
  235.             &lt;field id="Field3" horizontalAlignment="right" summaries="sum" defaultSummary="sum" uniqueid="fi-VIJ-16746"/&gt;
  236.         &lt;/fields&gt;
  237.         &lt;filtering enableSearch="false" searchMethod="client"/&gt;
  238.         &lt;rowActions/&gt;
  239.         &lt;massActions/&gt;
  240.         &lt;drawer&gt;
  241.             &lt;components&gt;
  242.                 &lt;skuid__text contents="Empty Drawer..." uniqueid="sk-VDP-47559"/&gt;
  243.             &lt;/components&gt;
  244.         &lt;/drawer&gt;
  245.     &lt;/skuid__table&gt;`;
  246.  
  247.  
  248.  
  249.  
  250. let xmlDef = skuid.utils.makeXMLDoc(strXmlTable);
  251.  
  252.  
  253. var dynamicChartComponent = skuid.$(
  254.     "#" + wrapperId
  255. );
  256.  
  257.  
  258.  
  259. dynamicChartComponent.empty();
  260. dynamicChartComponent.prepend('&lt;div id="new_div"&gt;&lt;/div&gt;');
  261. tempElement = dynamicChartComponent.find('#new_div');
  262.  
  263.  
  264. var myComponent = skuid.component.factory({
  265.     element: tempElement,
  266.     xmlDefinition: xmlDef
  267. });</jsitem>
  268.         </javascript>
  269.         <css/>
  270.         <actionsequences/>
  271.     </resources>
  272.     <styles>
  273.         <styleitem type="background" bgtype="none"/>
  274.     </styles>
  275. </skuid__page>
  276.  
RAW Paste Data