locked
JQuery Gridster with HTML/Javascript Windows 8 Store App

    Question

  • I decided to create my first windows store app with html/javascript and since you cannot do drag and drop with javascript and listview i have looked for alternatives. Windows store apps support jquery so I found Gridster. It is a jquery plugin to display stuff in a grid with draggable reordering. Each item can be resized as well. I want to use this in my windows store app. Here is a fiddle of the code i inputted into blend, into the html page

    var layout;
    var grid_size = 100;
    var grid_margin = 5;
    var block_params = {
        max_width: 6,
        max_height: 6
    };
    $(function() {
    
    layout = $('.layouts_grid ul').gridster({
        widget_margins: [grid_margin, grid_margin],
        widget_base_dimensions: [grid_size, grid_size],
        serialize_params: function($w, wgd) {
            return {
                x: wgd.col,
                y: wgd.row,
                width: wgd.size_x,
                height: wgd.size_y,
                id: $($w).attr('data-id'),
                name: $($w).find('.block_name').html(),
            };
        },
        min_rows: block_params.max_height
    }).data('gridster');
    
    $('.layout_block').resizable({
        grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
        animate: false,
        minWidth: grid_size,
        minHeight: grid_size,
        containment: '#layouts_grid ul',
        autoHide: true,
        s
            var resized = $(this);
            setTimeout(function() {
                resizeBlock(resized);
            }, 300);
        }
    });
    
    $('.ui-resizable-handle').hover(function() {
        layout.disable();
    }, function() {
    
        layout.enable();
    });
    
    function resizeBlock(elmObj) {
    
        var elmObj = $(elmObj);
        var w = elmObj.width() - grid_size;
        var h = elmObj.height() - grid_size;
    
        for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {
    
            grid_w++;
        }
    
        for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {
    
            grid_h++;
        }
    
        layout.resize_widget(elmObj, grid_w, grid_h);
    }
    });​

    The js references and css can be seen in the source here (where i got the code)

    jsfiddle - /maxgalbu/UfyjW/


    I got it working and can drag the boxes around and reorder and resize them...my issue now is how to get it to expand horizontal instead of vertically..the more stuff i put into it, they all go to the bottom. I would like it to expand to the right as new items get added (like the start menu)...it would be perfect if i could turn the grid counter clockwise and keep the items the same orientation..but i know it may not be that easy

    i have tried changing some values in the script (in the above code sample) in the html and got some more columns for the boxes to snap to..but eventually they all just revert to snapping to the bottom of one of the first columns...do i have to edit the referenced js files? There's like 4 of them, which one?


    Monday, December 03, 2012 6:14 AM

Answers

  • Since you are not using ListView you will need to come up with your own way to do this.  Also please post new questions as their own separate questions instead of adding on to an existing different post.

    Thanks!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, December 05, 2012 6:59 PM
    Moderator

All replies

  • anyone?
    Monday, December 03, 2012 2:20 PM
  • okay i really don't understand what i am doing wrong with theme forums....this is one of many forums i have posted this question...and guess how many replies i have gotten...ZERO....please if you are reading this and notice something wrong with my question please tell me? am i just asking a hard question? because people are viewing it but not answering (on all forums i posted too) I seriously expected to get replies here but guess i was wrong....i changed from making android stuff to windows because forum support for android sucked and now its the same for windows 8 apps...oh lord i guess IOS it is :S.
    Monday, December 03, 2012 7:23 PM
  • I've looked through the Gridster issues and found this feature request:

    https://github.com/ducksboard/gridster.js/issues/54

    Is this what you need?


    Also I wouldn't expect much help on things that are not directly related to the WinJS apps. at least not here.

    • Proposed as answer by AndreyR1231 Tuesday, December 04, 2012 2:56 AM
    Monday, December 03, 2012 8:47 PM
  • wow yes this is exactly the right direction i wanted thank you!! i didnt know about this park of github (im still new haha) but thank you, this will save me from asking questions in forums to much...

    i also found something like gridster called shapeshift..it allows multiple containers so i can hopefully create groups and emulate the listview the best i can...i might try and use that instead...

    "Also I wouldn't expect much help on things that are not directly related to the WinJS apps. at least not here."

    haha i realized that after my little rant above so thank you..ill be sure to keep my questions related to the winjs apps :)

    now i have another question...how can i input the data from a datasource (like picturelibrary) into the child elements of a css script...is that possible?  I am not using listview so will i have to create a way for the images to be inputted into my "jquery listview" 

    Monday, December 03, 2012 9:11 PM
  • Since you are not using ListView you will need to come up with your own way to do this.  Also please post new questions as their own separate questions instead of adding on to an existing different post.

    Thanks!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, December 05, 2012 6:59 PM
    Moderator