Grid Groupable inside jQueryUI dialog

[Pierre]

Hi,

I have the following grid inside a jqueryui dialogbox:

<div id="dlgAddProduct" title="Select Product to Add">

    @(Html.Kendo().Grid(Model.productList.Products)   

        .Name("ProductGrid")

        .Columns(columns =>

        {

            columns.Bound(p => p.id).Title("ID").Groupable(false).Width(70);

            columns.Bound(p => p.catgDesc).Title("Category").Width(200).Groupable(true);

            columns.Bound(p => p.name).Title("Product Name").Groupable(false);

            columns.Bound(p => p.price).Title("Price").Width(100).Groupable(false);

        })

        .Resizable(resizing => resizing.Columns(true))

        .Groupable()

        .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))

        .Sortable()

        .Scrollable()

        .DataSource(dataSource => dataSource

            .Ajax()

            .ServerOperation(false)

        )

    )

</div>

The dialog is defined as follows:

$("#dlgAddProduct").dialog({

    autoOpen: false,

    height: 540,

    width: 765,

    modal: true,

    resizable: true,

    open: function () {

        if ($('#hidProdListOK').val() == "") {

            loadProducts();

        }

    },

    buttons: {

        "Reload": function () {

            loadProducts();

        },

        "Close": function () {

            $(this).dialog("close");

        },

        "Add Selection": function () {

            addSelected();

        },

    }

});

When I drag the groupable column to the group area on top of the grid the "no parking" sign is displayed not allowing me to create the group. 
When I move the grid outside of the dialogbox everything works fine.

I'm using jQuery 1.8.6, jqueryui 1.9.2 and kendoUI 2012.3.1114

Any help is greatly appreciated.

Thanks,

PT

[Petur Subev]

Hello Pierre,

Most probably the Grid is initialized multiple times because the script tag is moved and re-executed when the Window content is set.

Could you try to remove the initialization script before creating the jQueryUI dialog?

e.g.

$(function () {
        $('#ProductGrid').next('script').remove();
        $("#dlgAddProduct").dialog({
            autoOpen: true,
            height: 540,
            width: 765,
            modal: true
        });
    })

Kind Regards,
Petur Subev
the Telerik team

[Pierre]

Thanks, that worked perfect.