Skip to Content
avatar image
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

  • 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>