[Solved] client-side dataBind grouping problem

[Alex]

Hi, i've updated version to 2011 Q2 from 2011 Q1 and now have exception while grouping.

i have a grid that binds by ajax with additional form values to action:

function OnGridDataBinding(e) {
            if (!bindingEnabled) {
                e.preventDefault();
            } else {
                e.preventDefault();
                SetGridLoader(true);
                var grid = GetGridData();


                var formValues = $("#FilterForm").formSerialize();
                var urlCommands =
                    '&' + grid.queryString.page + '=' + grid.currentPage +
                    '&' + grid.queryString.orderBy + '=' + (grid.orderBy || '~') +
                    '&' + grid.queryString.groupBy + '=' + (grid.groupBy || '~') +
                    '&' + grid.queryString.filter + '=' + (encodeURIComponent(grid.filterBy) || '~') +
                    '&' + grid.queryString.size + '=' + (grid.pageSize || '~');
                var url = "/Order/_GetIndexOrderItems?" + formValues + urlCommands;


                $.ajax({
                    url: url,
                    type: 'post',
                    //dataType: 'text',
                    success: function (data) {
                        grid.total = data.total;
                        grid.dataBind(data.data);
                    },
                    error: function (data, message) {
                        ShowAjaxError(message, data.responseText);
                    }
                });
            }
        }

i got Uncaught ReferenceError: Id is not defined in jquery-1.5.1-min.js:16
in method grid.dataBind(data.data) and only when grouping has been applied.

data is formatted by GridActionAttribute.

here is the grid:

@(Html.Telerik().Grid(this.Model.FilteredItems).Localizable("ru-RU").Name("OrderItemsGrid").PrefixUrlParameters(false)
            .DataBinding(q => q.Ajax().Select("_GetIndexOrderItems", "Order"))
            .Columns(c =>
            {
                c.Bound(q => q.OrderId).ClientTemplate("<input id=\"Items_<#= Id #>__OrderId\" name=\"Items[<#= Id #>].OrderId\" type=\"hidden\" value=\"<#= OrderId #>\" />").Hidden(true);
                c.Bound(q => q.OrderItemsCount).ClientTemplate("<input id=\"Items_<#= Id #>__OrderItemsCount\" name=\"Items[<#= Id #>].OrderItemsCount\" type=\"hidden\" value=\"<#= OrderItemsCount #>\" />").Hidden(true);
                c.Bound(q => q.ResellerId).ClientTemplate("<input id=\"Items_<#= Id #>__ResellerId\" name=\"Items[<#= Id #>].ResellerId\" type=\"hidden\" value=\"<#= ResellerId #>\" />").Hidden(true);
                c.Bound(q => q.InvoiceId).ClientTemplate("<input id=\"Items_<#= Id #>__InvoiceId\" name=\"Items[<#= Id #>].InvoiceId\" type=\"hidden\" value=\"<#= InvoiceId #>\" />").Hidden(true);
                c.Bound(q => q.ItemStateId).ClientTemplate("<input id=\"Items_<#= Id #>__ItemStateId\" name=\"Items[<#= Id #>].ItemStateId\" type=\"hidden\" value=\"<#= ItemStateId #>\" />").Hidden(true);
                c.Bound(q => q.ProductId).ClientTemplate("<input id=\"Items_<#= Id #>__ProductId\" name=\"Items[<#= Id #>].ProductId\" type=\"hidden\" value=\"<#= ProductId #>\" />").Hidden(true);
                //c.Bound(q => q.Quantity).ClientTemplate("<input id=\"Items_<#= Id #>__Quantity\" name=\"Items[<#= Id #>].Quantity\" type=\"hidden\" value=\"<#= Quantity #>\" />").Hidden(true);
                c.Bound(q => q.PaymentCategoryId).ClientTemplate("<input id=\"Items_<#= Id #>__PaymentCategoryId\" name=\"Items[<#= Id #>].PaymentCategoryId\" type=\"hidden\" value=\"<#= PaymentCategoryId #>\" />").Hidden(true);
                c.Bound(q => q.Vat).ClientTemplate("<input id=\"Items_<#= Id #>__Vat\" name=\"Items[<#= Id #>].Vat\" type=\"hidden\" value=\"<#= Vat #>\" />").Hidden(true);
                c.Bound(q => q.InvoiceLabel).ClientTemplate("<input id=\"Items_<#= Id #>__InvoiceLabel\" name=\"Items[<#= Id #>].InvoiceLabel\" type=\"hidden\" value=\"<#= InvoiceLabel #>\" />").Hidden(true);


                c.Bound(q => q.CreateSameProductAllowed).Hidden(true);
                c.Bound(q => q.CreateRenewalProductAllowed).Hidden(true);
                c.Bound(q => q.AllOrderItemsAreFree).Hidden(true);
                c.Bound(q => q.IsInClosedInvoice).Hidden(true);
                               
                c.Bound(q => q.Id).ClientTemplate("<input id=\"ItemSelector_<#= Id #>\" type=\"checkbox\" value=\"<#= Id #>\" />").Title(string.Empty).Sortable(false)
                        .HeaderTemplate("<input id=\"AllItemsSelector\" type=\"checkbox\" />").HtmlAttributes(new { align = "center" }).HeaderHtmlAttributes(new { style = "text-align: center;" });
                c.Bound(q => q.StatusIconName).ClientTemplate("<img src=\"" + @Url.Content("~/Content/images/") + "<#= StatusIconName != null && StatusIconName != \"\" ? StatusIconName : \"blank.jpg\" #>\" style=\"cursor: pointer; display: <#= StatusIconName == null || StatusIconName == \"\" ? \"none\" : \"block\"#>\" title=\"<#= StatusIconTitle #>. Нажмите, чтобы скрыть это уведомление\" onclick=\"SetNotifyViewDate('<#= StatusIconId #>', this)\" />").Sortable(false).Title(string.Empty);
                c.Bound(q => q.OrderSequentialNumber).Title("Заказ").HtmlAttributes(new { align = "center" }).HeaderHtmlAttributes(new { style = "font-weight: bolder;" })
                    .ClientTemplate("<a target=\"_blank\" href=\"#\" onclick=\"window.open('" + @Url.Action("Edit", "Order") + "/<#= OrderId #>'); return false;\" style=\"display:<#= OrderId != null ? \"inline\" : \"none\" #>\" ><#= OrderSequentialNumber #></a>");
                c.Bound(q => q.InvoiceSequentialNumber).Title("Счет").HtmlAttributes(new { align = "center" }).HeaderHtmlAttributes(new { style = "font-weight: bolder;" })
                    .ClientTemplate("<a target=\"_blank\" href=\"#\" onclick=\"window.open('" + @Url.Action("Edit", "Invoice") + "/<#= InvoiceId #>'); return false;\" style=\"display:<#= InvoiceId != null ? \"inline\" : \"none\" #>\" ><#= InvoiceSequentialNumber #></a>");
                c.Bound(q => q.CreateDate).Title("Дата").Format("{0:dd.MM.yyyy}").HeaderHtmlAttributes(new { style = "font-weight: bolder;" });
                c.Bound(q => q.ItemStateName).Title("Статус").HeaderHtmlAttributes(new { style = "font-weight: bolder;" });
                                
                c.Bound(q => q.CustomerCompanyName).Title("Покупатель").HeaderHtmlAttributes(new { style = "font-weight: bolder;" });
                c.Bound(q => q.ProductName).Title("Продукт").HeaderHtmlAttributes(new { style = "font-weight: bolder;" });
                c.Bound(q => q.Quantity).Title("Кол-во").HtmlAttributes(new { align = "right" }).HeaderHtmlAttributes(new { style = "font-weight: bolder;" });
                
                c.Bound(q => q.Price).Title("Цена").Format("{0:### ### ##0.00}").HeaderHtmlAttributes(new { style = "font-weight: bolder;" }).HtmlAttributes(new { align = "right", @class = "nowrap" });
                c.Bound(q => q.Amount).Title("Сумма").Format("{0:### ### ##0.00}").HeaderHtmlAttributes(new { style = "font-weight: bolder;" }).HtmlAttributes(new { align = "right", @class = "nowrap" });
                c.Bound(q => q.ActivationExists).Title("").ClientTemplate("<a title=\"Скачать коды/ключи\" style=\"display:<#= ActivationExists ? \"block\" : \"none\" #>\" href=\"" + @Url.RouteUrl(new { controller = "GetResult", action = "Index", id = "" }) + "/<#= Id #>\" ><img src=\"" + @Url.Content("~/Content/images/icon_document.png") + "\" /></a>").Sortable(false).HtmlAttributes(new { align = "center" });
            })
            .ClientEvents(events => events.OnDataBound("OnGridDataBound").OnDataBinding("OnGridDataBinding").OnRowDataBound("OnRowDataBound"))
            .Sortable(sorting => sorting.Enabled(true).OrderBy(q => q.Add(s => s.CreateDate).Descending()))
            .NoRecordsTemplate("Позиции не найдены. Попробуйте изменить условия поиска.")
            .Pageable(paging => paging.PageSize(this.Model.PageSize).Position(GridPagerPosition.Bottom).Style(GridPagerStyles.NextPreviousAndNumeric).Enabled(true))
            .Groupable(settings => settings.Enabled(true)))


i've tried to comment column c.Bound(q => q.Id).ClientTemplate("<input id=\"ItemSelector_<#= Id #>\" type=\"checkbox\" value=\"<#= Id #>\" />").Title(string.Empty).Sortable(false) 
but it gives the same result.

how can i fix this issue?

[Rosen]

Hello Alex,

Could you please provide a small sample in which this error can be recreated locally?

All the best,
Rosen
the Telerik team

[Alex]

Here is the samle project.

i've discovered just now that if i comment out all hiddens there is no OrderId reference error but the grid is empty when grouped 
but we need hiddens to post an array of items to action method on form submit and save 'em.

btw in IE7 browser mode of IE9 there is no cells displayed in our production but in this sample displayed just amount cells

thanks for your time.

[Rosen]

Hi Alex,

Thanks for the sample, we have managed to recreate the issue and to address it. I have attached an internal build for you to try.

Also instead of the approach from the sample, you may consider sending the additional data through the data property of dataBinding event argument:

function OnGridDataBinding(e) {
    var grid = GetGridData();
    $("#FilterForm").find(":input").each(function() {
        var obj = {},
            input = $(this);

        obj[input.attr("name")] = input.val();

        e.data = $.extend(e.data, obj);
    });
}

All the best,
Rosen
the Telerik team

[Alex]

Hi, Rosen,

Thank you very much now it works!!! And thanks for a different approach.. i tried that while ago but coudnt figure out how to do it this way using $.extend. 

I have a comment about this fix. It's now looking css files like telerik.common.css not in ~/Content/2011.2.712/telerik.common.css but just in  ~/Content/telerik.common.css.. and same situation about the scripts.. i've just copied it to Content and Scripts respectively and its fine.

Tell me please how can i apply formatting to groups? For example we have a column c.Bound(q => q.CreateDate).Format("{0:dd.MM.yyyy}"); and it's displayed fine w/o grouping but when i group by CreateDate i have group names like
"Create Date: /Date(1295463600000)/" etc..

Thank you for your time.

[Rosen]

Hello Alex,

You may use ClientGroupHeaderTemplate as shown in this online demo.

All the best,
Rosen
the Telerik team

[Alex]

Thank you Rosen! It works now!