Skip to Content
author's profile photo
Former Member

GRIDSTER - using 3rd party jquery plugin

Hi,

I had a requierement to design a view with several tiles / sub views that will present charts and texts.


I've closed this post ==> because i found 3rd party

JS component that answers all of my requirements ==> gridster.js

Demo » Add widgets dynamically » gridster.js

Hopefully that some one who's used this componenet will see the discussion header 😊

How can i use this component ?

I need to integrate this component inside a view in UX3 shell .

According to gridster.js i need to create few div's and then :

$(function(){ //DOM Ready $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140] });

});

How can i place the div's inside the xml view and that every div inside the main view will present different xml view ?

Thanks,

Arie.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Oct 19, 2015 at 06:23 AM

    Hi Arie,

    You could use fragments to achieve this. To simplify your jQuery selector, you can add a specific class to the fragments (using addStyleClass function).

    Good luck!

    Best regards,

    Maarten

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Done 😊

      <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"

      xmlns="sap.m" controllerName="gridster.grid" xmlns:html="http://www.w3.org/1999/xhtml">

      <html:div class="gridster">

      <html:ul>

      <html:li data-row="1" data-col="1" data-sizex="2" data-sizey="1">

      <html:div data-sap-ui-type="sap.ui.commons.Panel">

      <html:div data-sap-ui-aggregation="title"

      data-sap-ui-type="sap.ui.core.Title" data-text="SAPUI5 Content in HTML Table in SAPUI5 Panel"></html:div>

      <html:a href="http://www.sap.com" target="_blank">www.sap.com

      </html:a>

      </html:div>

      </html:li>

      <html:li data-row="3" data-col="1" data-sizex="1" data-sizey="1">

      <Button xmlns="sap.m" busy="false" busyIndicatorDelay="1000"

      visible="true" text="asdasd" type="Default" width="" enabled="true"

      icon="" iconFirst="true" activeIcon="" iconDensityAware="true"

      textDirection="Inherit" ariaDescribedBy="" ariaLabelledBy="" tap=""

      press="">

      <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->

      <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->

      </Button>

      </html:li>

      <html:li data-row="3" data-col="2" data-sizex="2" data-sizey="1">

      3</html:li>

      <html:li data-row="1" data-col="2" data-sizex="2" data-sizey="2">

      4</html:li>

      <html:li class="try" data-row="1" data-col="4" data-sizex="1"

      data-sizey="1" data-max-sizex="1" data-max-sizey="1"></html:li>

      <html:li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></html:li>

      <html:li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></html:li>

      <html:li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></html:li>

      <html:li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></html:li>

      <html:li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></html:li>

      <html:li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></html:li>

      <html:li data-row="2" data-col="6" data-sizex="1" data-sizey="1"

      id="__item107" data-sap-ui="__item107" tabindex="-1" role="option"

      class="sapMILI sapMLIB sapMLIB-CTX sapMLIBShowSeparator sapMLIBTypeInactive">

      </html:li>

      </html:ul>

      </html:div>

      </core:View>