0

Gridster Integration

asked 2013-05-14 19:30:36 +0800

sanderson gravatar image sanderson
1

I'm attempting to integrate Gridster (gridster.net) into the dashboard for my company's project. We're using ZK version 6.5.2 to this project.

I have it working out-of-the-box for the most part, but I'm getting an error only in ZK:

Timestamp: 5/14/2013 12:39:46 PM
Error: TypeError: this.$container.on is not a function
Source File: localhost:8080/core/zk/web/cbdb6a5/js/gridster.js
Line: 434

This line contains functions dedicated to drag and drop functionality.

JavaScript Source: raw.github.com/ducksboard/gridster.js/master/dist/jquery.gridster.js

ZK Source:

<?page title="" contentType="text/html;charset=UTF-8"?>

<zk xmlns:h="xhtml" xmlns:w="ZK"> <custom-attributes org.zkoss.zul.image.preload="true"/>

<zscript>
    import com.test.core.zk.*;
    import com.test.core.zk.component.*;
    import com.test.core.util.*;
</zscript>

<script src="~./js/jquery.min.js"></script>
<script src="~./js/jquery-migrate-1.2.1.min.js"></script>
<script src="~./js/gridster.js"></script>
<script>
    window.onload = function(){
        jq.noConflict();
        jq(function(){ 
            var gridster = jq(".gridster > ul").gridster({
            widget_margins: [5, 5], // Default Margins
            widget_base_dimensions: [100, 100] // Base dimensions; the data-sizex="1" are data-sizey="1" multipliers to increase the size.
            }).data('gridster');
            gridster.enable();
        });
    };
</script>

<window id="portalwin" border="normal" hflex="full" sclass="portalWindow">  

    <div class="borderPaddingDiv" hflex="1" height="100%">

            <div class="gridster" id="portalGrid">
                <h:ul>
                    <h:li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="widgetBox">
                        <grid sclass="widgetGrid">
                            <rows>
                                <row>
                                    <cell align="center" valign="middle" sclass="widgetContents">
                                        <image src="~./test/img/zul/icons/tiles/gear-icon.png" />
                                    </cell>
                                </row>
                                <row>
                                    <cell align="center" valign="middle" height="25px">
                                        <label value="Administration" />
                                    </cell>
                                </row>
                            </rows>
                        </grid>
                    </h:li>
                    <h:li data-row="1" data-col="2" data-sizex="1" data-sizey="1" class="widgetBox">
                        <grid sclass="widgetGrid">
                            <rows>
                                <row>
                                    <cell align="center" valign="middle" sclass="widgetContents">
                                        <image src="~./test/img/zul/icons/tiles/batch-icon.png" />
                                    </cell>
                                </row>
                                <row>
                                    <cell align="center" valign="middle" height="25px">
                                        <label value="Batch" />
                                    </cell>
                                </row>
                            </rows>
                        </grid>
                    </h:li>
                    <h:li data-row="1" data-col="3" data-sizex="1" data-sizey="1" class="widgetBox indigo">
                        <grid sclass="widgetGrid">
                            <rows>
                                <row>
                                    <cell align="center" valign="middle" sclass="widgetContents">
                                        <image src="~./test/img/zul/icons/tiles/help-icon.png" />
                                    </cell>
                                </row>
                                <row>
                                    <cell align="center" valign="middle" height="25px">
                                        <label value="Help" />
                                    </cell>
                                </row>
                            </rows>
                        </grid>
                    </h:li>
                    <h:li data-row="1" data-col="4" data-sizex="4" data-sizey="4" class="widgetBox paper">
                        <grid sclass="widgetGrid">
                            <rows>
                                <row>
                                    <cell align="left" valign="top" sclass="widgetContents noPadding">
                                        <label value="Notifications" sclass="widgetHeader notifications" />
                                        <listbox zclass="widgetListbox">
                                            <listhead>
                                                <listheader width="55px" align="center" />
                                                <listheader width="6px" />
                                                <listheader align="left" />
                                                <listheader align="right" hflex="min" />
                                            </listhead>
                                            <listitem sclass="red">
                                                <listcell sclass="status">
                                                    <image src="~./test/img/zul/icons/status/denied.png" />
                                                    <label value="Denied" />
                                                </listcell>
                                                <listcell />
                                                <listcell>
                                                    <label value="Lorem Ipsum Dolor" />
                                                    <label value="Sed enim libero, pulvinar pret..." />
                                                </listcell>
                                                <listcell>
                                                    <label value="Type: Lorem Ipsum" />
                                                    <label value="Created: 02/05/2013" />
                                                </listcell>
                                            </listitem>
                                            <listitem sclass="green">
                                                <listcell sclass="status">
                                                    <image src="~./test/img/zul/icons/status/approved.png" />
                                                    <label value="Approved" />
                                                </listcell>
                                                <listcell />
                                                <listcell>
                                                    <label value="Something Approved" />
                                                    <label value="For: Something" />
                                                </listcell>
                                                <listcell>
                                                    <label value="Type: Something" />
                                                    <label value="Created: 00/00/2013" />
                                                </listcell>
                                            </listitem>
                                            <listitem>
                                                <listcell sclass="status">
                                                    <image src="~./test/img/zul/icons/status/pending.png" />
                                                    <label value="Pending" />
                                                </listcell>
                                                <listcell />
                                                <listcell>
                                                    <label value="Soemthing: #12345" />
                                                    <label value="For:  00/00/2013" />
                                                </listcell>
                                                <listcell>
                                                    <label value="Type: Dolor Sit Amet" />
                                                    <label value="Created: 00/00/2013" />
                                                </listcell>
                                            </listitem>
                                            <listitem sclass="teal">
                                                <listcell sclass="status">
                                                    <image src="~./test/img/zul/icons/status/forwarded.png" />
                                                    <label value="Forwarded" />
                                                </listcell>
                                                <listcell />
                                                <listcell>
                                                    <label value="Lorem Ipsum Dolor" />
                                                    <label value="Pellentesque habitant morbi..." />
                                                </listcell>
                                                <listcell>
                                                    <label value="Type: Lorem Ipsum" />
                                                    <label value="Created: 12/05/2012" />
                                                </listcell>
                                            </listitem>
                                        </listbox>
                                    </cell>
                                </row>
                                <row>
                                    <cell align="center" valign="middle" height="25px">
                                        <label value="Notebook Paper Example -- 300px Square" />
                                    </cell>
                                </row>
                            </rows>
                        </grid>
                    </h:li>
                    <h:li data-row="2" data-col="1" data-sizex="2" data-sizey="2" class="widgetBox medium-blue">
                        <grid sclass="widgetGrid" vflex="true">
                            <rows>
                                <row>
                                    <cell align="center" valign="middle" sclass="widgetContents">

                                    </cell>
                                </row>
                                <row>
                                    <cell align="center" valign="middle" height="25px">
                                        <label value="Big Box Example -- 200px Square" />
                                    </cell>
                                </row>
                            </rows>
                        </grid>
                    </h:li>
                </h:ul>
            </div>

    </div>
</window>

</zk>

Any thoughts or suggestions? Thanks :)

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2013-05-16 20:08:37 +0800

sanderson gravatar image sanderson
1

Gridster hasn't been tested on jQuery 2.0.0 yet, which seems to be the issue. I had to change the variables to the following to make it work as well:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="~./js/gridster.js"></script>
<script>
    window.onload = function(){
            var gridster = $(".gridster > ul").gridster({
                widget_margins: [5, 5],
                widget_base_dimensions: [100, 100]
            }).data('gridster');
    };
</script>
link publish delete flag offensive edit
0

answered 2014-05-06 18:38:29 +0800

jlsevasion gravatar image jlsevasion
3 1

Hi, need yout help if you got this to work. I am trying to build an app using gridster.js in zk 7.0.1. Would be great if you had some code working that I could take a look.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2013-05-14 19:30:36 +0800

Seen: 15 times

Last updated: May 06 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More