cancel
Showing results for 
Search instead for 
Did you mean: 

GRIDSTER - using 3rd party jquery plugin

Former Member
0 Kudos

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.

Accepted Solutions (1)

Accepted Solutions (1)

maartenf
Participant
0 Kudos

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

Former Member
0 Kudos

Hi

Do you mean to use GRIDSTER with fragments instead of the DIV or only fragments ?

The fragments alone dosn't handle events such as resize and position in container.

I need to limit the area of the navigation and fragments dosn't answers the requirement.

Thanks,

Arie.

maartenf
Participant
0 Kudos

Hi Arie,

I haven't used this JS library myself so I quickly checked the documentation. If I understand correctly the desired html structure is:

<div class="gridster">

     <ul>

          <li></li>

          ... some more li's

     </ul>

</div>

I would suggest adding the div and ul to your view using sap.ui.core.HTML. In your fragments you'll have to add the li-tags around the whole fragment. Doing it this way, I think you will be able to dynamically add/remove the required fragments to your view. Finally you'll have to call the plugin to achieve the desired gridster-effect.

Good luck!

Best regards,

Maarten

Former Member
0 Kudos

Hi,


Do you know what's the purpose of the of the 'ul'  'li'  tags ?

Part of the API or HTML mark ?

Best regards,

Arie.

maartenf
Participant
0 Kudos

Hi Arie,

These list and listitem tags seem part of the API. When reviewing the examples on Gridster.net they all work like this. I guess the the plugin will use the content of the li tags to create the widgets.

Best regards,

Maarten

Former Member
0 Kudos

Hi ,

How can i place a div inside XML view ?

I tried with sap.ui.core.HTML and other classes but it dosn't identify the div tag.

Any suggestions ?

maartenf
Participant
0 Kudos

Hi Arie,

You can find an example in the Explored section of the sapui5 demokit:

preview: SAPUI5 Explored

code: SAPUI5 Explored

(you can switch from the preview to the code by clicking on the code icon on the top right of the screen)

Best regards,

Maarten

Former Member
0 Kudos

Hi 

I've used :

<core:HTML  content='&Lt:div class=gridster;  /div&gt;'&gt;

</core:HTML>

Do you know what's the use of &Lt / & gt ?

Without them i'm getting "syntax error' unrecognized expression  : div class=gridster; /div&gt;

i'm trying to insert the <ul>  <li>  tags.

Is there any special chars to concatenate the divs ?

Thanks

Former Member
0 Kudos

&Lt =    >


&gt  =    <




maartenf
Participant
0 Kudos

Hi Arie,

This is indeed the < and the > html encoded (as you found out in the meantime). This might be a useful link for future reference.

&lt; (= less than, <)

&gt; (=greater than, >)

This is used to prevent cross site scripting (XSS) attacks.

Best regards,

Maarten

Former Member
0 Kudos

Hi

I've added this :

index.html  :

<script>

  sap.ui.localResources("js");    ==&gt; Gridster lib

</script>

&lt;link rel='stylesheet' href='js/jquery.gridster.css'&gt;

&lt;link rel='stylesheet'  href='js/jquery.gridster.css'&gt;

&lt;script  src="js/jquery.gridster.js"&gt;&lt;/script&gt;

XML view :

  &lt;core:HTML class='gridster'

 

  content='&lt;div class="gridster"&gt;

 

  &lt;ul&gt;

 

        &lt;li data-row="1" data-col="1" data-sizex="1" data-sizey="1"&gt;  Block 1  &lt;/li&gt;

        &lt;li data-row="2" data-col="1" data-sizex="1" data-sizey="1"&gt;  Block 2  &lt;/li&gt;

 

  &lt;/ul&gt;

 

    &lt;/div&gt;'

  >

 

  </core:HTML>

controller :

onAfterRendering: function() {

var gridster;

       $(function(){

         gridster = $(".gridster ul").gridster({

           widget_base_dimensions: [100, 55],

           widget_margins: [5, 5],

           autogrow_cols : true,

         }).data('gridster');

       });

     $(function(){ //DOM Ready

        var gridster = $(".gridster ul").gridster().data('gridster');

      });

},

When i'm running it inside a new project with simple xml view & controller it works but when i'm running inside a UX3 shell i'm getting  :

Uncaught TypeError: $(...).gridster is not a function.

Any idea why the gridster function is not recognized ?

Thanks,

Arie.

maartenf
Participant
0 Kudos

Hi Arie,

Can you check in debug when you execute the gridster function if the javascript file is correctly loaded in the network tab?

Best regards,

Maarten

Former Member
0 Kudos

Hi

It's loaded :

But i'm still getting this :

Maybe i need to place it some where in the shell ?

maartenf
Participant
0 Kudos

Hi Arie,

Can you share some code of the application when it is working and when not? As you say, I think you'll have to call the gridster-function in another place, but I'm not sure where at this point...

Best regards,

Maarten

Former Member
0 Kudos

Hi,

i've uploaded 2 project to   :

Dropbox - SDN

1.  "gridster" - project works fine.

2. "z_360_theme_13" -  gridster  inside UX3 shell , dosn't work. the gridstrer code is under

views=>360=> maps.view.xml  & controller.

Thanks for the effort,

Arie.

Message was edited by: Arie Helman

Message was edited by: Arie Helman   -

Former Member
0 Kudos

Any 1 ?

Former Member
0 Kudos

Hi ,

I've succeeded  to load the gridster component by using html view.

now i'm trying to call XML view / other elements  in each <li> .

For example :

I've tried to insert a button inside the <li > but the button is presented in the lower left of the screen.

<template data-controller-name="gridster">

</div>

<div class="gridster">

  <ul>

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

  1 <div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://nav-back">

  </li>

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

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

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

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

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

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

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

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

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

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

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

  </ul>

</div>

</div>

</template>

The only thing i'm missing is how to call XML VIEW inside each <li>.

Any one ?

Thanks,

Arie.

Former Member
0 Kudos

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>

Answers (0)