Hello,

I just wanted to point out that I figured out the problem and it was because I thought I needed both delegate and initialization functions.  Sorry but I'm new to your components.  Your samples are correct and this delegate works for me:

        $(document).delegate("#Grid", "iggridrowsrendered", function (evt, ui) {
            $("#Grid tbody").sortable({
                containment: "parent",
                start: function (evt, ui) {
                    var children = ui.item.children();
                    $("#Grid_headers thead th").each(function (ix, el) {
                        // set the width of each td to its header width
                        $(children[ix]).width($(el).width());
                    });
                }
            });
        });

I'm able to drag the rows to re-arrange the order within the igGrid MVC.  Hope this helps someone out there.

Hi,

I wanted to follow-up on this, I'm having trouble getting the delegate example you pointed out to work with the sortable function I have.  Can you please give me a working MVC sample with the function I have:

rowsRendered: function(evt, ui) {
// initialize sortable on the grid tbody
initSortable();
}

function initSortable() {
$( "#grid1 tbody" ).sortable({
containment: "parent",
start: function(evt, ui) {
var children = ui.item.children();
$("#grid1_headers thead th").each(function(ix, el) {
// set the width of each td to its header width
$(children[ix]).width($(el).width());
});
}
});

Hopefully I can receive a sample soon as the project I'm working on is time sensitive.  Thank you so much.

Hi,

Sorry but I think I spoke too soon.  Trying the above code on my MVC wrapper didn't enable the sortable function. Here's my code:

@(Html.Infragistics()
        .Grid(Model)
        .ID("Grid")

         ...........

        //Delegate
        $(document).delegate("#Grid", "iggridrowsrendered", function (evt, ui) {
            //return reference to igGrid
            ui.owner;
            //return grid's table body DOM element
            ui.tbody;
        });
 
        //Initialize
        $(".selector").igGrid({
            rowsRendered: function(evt, ui) {
                // initialize sortable on the grid tbody
                initSortable();
            }
        });

        function initSortable() {
            $("#Grid tbody").sortable({
                containment: "parent",
                start: function (evt, ui) {
                    var children = ui.item.children();
                    $("#Grid_headers thead th").each(function (ix, el) {
                        // set the width of each td to its header width
                        $(children[ix]).width($(el).width());
                    });
                }
            });
        }

Maybe this is just a syntax issue but the delegate doesn't seem to work for me.  I should be able to sort the rows by dragging them on the grid.  This works with a javascript igGrid widget.  Please help.

Hi Zdravko,

Thank you, that's exactly what I needed!  I have another question that hopefully you can answer that might be doable using a delegate.  How would I prevent the user from clicking away from a row when a new row is added.  I've noticed when I add a new row and click away from it, the new data gets lost.  I want to force the user to either click Done or Cancel when adding a new row and not be able to click away from the row being added, is that possible with a delegate?  I'd like to know how to use this with the MVC wrapper and I'd appreciate if you can show me an example.  Thanks so much.