Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

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  ==> Growing tile / sub view functionality 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 ?



Former Member
Former Member replied


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





0 View this answer in context

Helpful Answer

Not what you were looking for? View more on this topic or Ask a question