Skip to Content
author's profile photo Former Member
Former Member

GRIDSTER - using 3rd party jquery plugin


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 ?



Add comment
10|10000 characters needed characters exceeded

1 Answer

  • Best Answer
    Posted on 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,


    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="">

      <html:div class="gridster">


      <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="" target="_blank">




      <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=""


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

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



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


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


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