[Solved] Grid Client Side Grouping

[Aiyaz]

Hi there,
I'm trying to use a checkbox to group and ungroup the telerik mvc grid using the client side api.  It all works fine but what I want to do now is disable the checkbox while the grouping is being performed.  Is there a way to control the on start and on end behaviour while the grouping is performed.

var transactionGrid;
var transactionGridSelector = "#transactionGrid";

// click event to apply grouping
$("#GroupByItemConfig").click(function () {
        if ($(this).attr("checked")) {
            ApplyGrouping("Item Config", "asc");
        }
        else {
            ClearGrouping("Item Config");
        }
    });

  // click event to apply grouping
    $("#GroupByReference").click(function () {
        if ($(this).attr("checked")) {
            ApplyGrouping("Reference", "asc");
        }
        else {
            ClearGrouping("Reference");
        }
    });

function ApplyGrouping(columnName, orderBy) {
    var transactionGrid = $(transactionGridSelector).data('tGrid');
    if (transactionGrid.groups.length != 0) transactionGrid.unGroup(transactionGrid.groups[0].title);
    transactionGrid.group(columnName);
   }

function ClearGrouping(columnName) {
    var transactionGrid = $(transactionGridSelector).data('tGrid');
    transactionGrid.unGroup(columnName);
}

<input type="checkbox" id="GroupByItemConfig" value="Item Config" class="mutuallyexclusive" />
        <label for="GroupByItemConfig">Group By Item/Config</label>
        <input type="checkbox" id="GroupByReference" value="Reference" class="mutuallyexclusive" />
        <label for="GroupByReference">Group By Reference</label>

<%= Html.Telerik().Grid<ProcessTransactionModel>()
    .Name("transactionGrid")
    .ClientEvents(clientevents => clientevents
        .OnRowDataBound("onRowDataBound")
        .OnDataBound("onDataBound"))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxUnprocessedTransactionBinding", "ProcessTransaction", new { locationCode = "" }))
        .Columns(columns =>
        {
            columns.Bound(o => o.Date)
                .Sortable(false)
                .Width("150px")
                .Format("{0:dd/MM/yyyy hh:mm tt}");
            columns.Bound(o => o.ItemConfig)
                .Width("100px");
             columns.Bound(o => o.Name)
                 .Sortable(false);
            columns.Bound(o => o.Consumed)
                .Sortable(false)
                .Width("80px");
            columns.Bound(o => o.Level)
                .Sortable(false)
                .Width("80px");
            columns.Bound(o => o.Reference)
                .Width("100px");
            columns.Bound(o => o.StockTransactionID)
                .Sortable(false)
                .Width("100px")
                .ClientTemplate("<input type='checkbox' name='checkedRecords' onclick='GetCheckedTransactions();' class='chkAddToOrder' value='<#= StockTransactionID #>' Consumed='<#= Consumed #>' />")
                .Title("Add To Order");
            columns.Bound(o => o.StockTransactionID)
               .Width("50px")
               .ClientTemplate("<img src='" + Url.Content("~/Content/images/delete.png") + "' style='width:13px;cursor:hand;' onclick='DeleteItem(this);'  value='<#= StockTransactionID #>' class='deleteItem'  StockTransactionID='<#= StockTransactionID #>'  StockLevelID='<#= StockLevelID #>'/>")
               .Sortable(false)
               .Title("Delete");
        })
        .Scrollable()
        .Groupable()
        .Sortable()
%>

[Atanas Korchev]

Hi Aiyaz,

You can use the OnDataBinding and OnDataBound client events of the grid. They are raised when performing grouping.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Aiyaz]

Thanks for your response, I finally got it working using your approach.  I have another issue now, the column width size is lost when I group and ungroup using IE 7.  Works fine in other browsers. 

[Atanas Korchev]

Hello Aiyaz,

Can you reproduce this in any of our online demos? Also which version are you using?

All the best,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Aiyaz]

Im using ASPNET_MVC_2010_1_309 version.  I cant reproduce the problem in your online demos because they way Ive implented the grouping is different to the demo.  I have hidden the top grouping panel using css and added the grouping events to the radio buttons.  When a radio is checked the ApplyGrouping method is called to perform the grouping and ClearGrouping method is called when radio is unchecked. It works fine for the first 3-4 times but after that the column widths are lost.  Is there something else I need to add to the grouping methods to retain the columns width state? 

I have attached screen shots below to show how the widths have changed when the radio button is changed.

function ApplyGrouping(columnName, orderBy) {
    var transactionGrid = $(transactionGridSelector).data('tGrid');
    if (transactionGrid.groups.length != 0) {
        transactionGrid.unGroup(transactionGrid.groups[0].title);
        transactionGrid.showBusy();
        setTimeout("ApplyGrouping('" + columnName + "', '" + orderBy + "')", 500);
        return;
    }
    else {
        transactionGrid.hideBusy();
        transactionGrid.group(columnName);
        ResetOrderValues();
    }
}

function ClearGrouping(columnName) {
    var transactionGrid = $(transactionGridSelector).data('tGrid');
    transactionGrid.unGroup(columnName);
    LoadTransactionGridByLocation('');
    ResetOrderValues();
}

[Atanas Korchev]

Hi Aiyaz,

You can try two things:

1. Upgrade to a more recent version
2. Send us a sample project which shows your problem. You can use a public site to host the zip file - e.g. dropbox.com

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Aiyaz]

Thanks for your response, Ill try to upgrade the project to a new version first and will send you a copy of the project if it doesnt work.
Also here is the link to the staging site.  Can you please give me you email address so I can email you the username and password
http://portal.bjball.co.nz/staging/admin/consignment/ProcessTransaction
select ligadigi from the locations dropdown list, it will show a list of transaction in the grid.
Use the radio button to toggle grouping option to produce the column width behavior.

[Aiyaz]

sorry about the delay in responding.  The upgrade seems to have fixed the problem. Thanks a lot for your help.