[Solved] GridGroupByExpression and selectItem on Clientside

[Dominic]

Hello,

is there a way to select all items in a group on clientside? I tried the following code but without any success.

Best regards,
Dominic

The Grid:

<

 

telerik:RadGrid ID="radGrid" AllowMultiRowSelection="true" ...>

 

 

<MasterTableView ...>

 

 

<GroupByExpressions>

 

 

<telerik:GridGroupByExpression>

 

 

<SelectFields>

 

 

<telerik:GridGroupByField FieldAlias="Zyklus" FieldName="Cycle" HeaderValueSeparator=": ">

 

 

</telerik:GridGroupByField>

 

 

</SelectFields>

 

 

<GroupByFields>

 

 

<telerik:GridGroupByField FieldName="Cycle" />

 

 

</GroupByFields>

 

 

</telerik:GridGroupByExpression>

 

 

</GroupByExpressions>

 

 

<Columns>

 

 

<telerik:GridClientSelectColumn UniqueName="appliedColumn" HeaderText="verabreicht" />
...

Inside the ItemDataBound Event

 

if

 

( e.Item is GridGroupHeaderItem )

 

{

 

    GridGroupHeaderItem item = ( GridGroupHeaderItem )e.Item;

 

 

    CheckBox check = new CheckBox();

 

    check.ID =

"CheckAll";

 

    check.Attributes.Add(

"onclick", "headerClick(this)");

 

    check.Text =

"Auswahl aller Anwendungen des Zyklus umkehren.";

 

    item.DataCell.Controls.Add( check );

}

The Javascipt:

 

function

 

headerClick(e)

 

{

 

var masterTable = $find( "ctl00_MasterContent_therapyFormView_tumourTherapy_therapyRadGrid" ).get_masterTableView();

 

 

var element = $(e).parent().parent().parent();

 

 

var children = $(element).find("~ tr");

 

 

for (var a = 0; a<children.length;a++)

 

{

 

if ($(children[a]).attr("class") == "rgRow" || $(children[a]).attr("class") == "rgAltRow" || $(children[a]).attr("class") == "rgRow rgSelectedRow" || $(children[a]).attr("class") == "rgAltRow rgSelectedRow")

 

{

 

if( e.checked ) {

 

masterTable.selectItem( $(children[a])[0] );

}

 

else {

 

masterTable.deselectItem( $(children[a])[0] );

}

}

 

else if ($(children[a]).attr("class") == "rgGroupHeader")

 

{

 

break;

 

}

}

}

[Martin]

Hello Dominic,

I would suggest you to review the following code library project:

Selecting all items in a group with a check box in the group header item

Regards,
Martin
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.

[Dominic]

Hello,

a postback for selecting is a very ugly user behavior. is there a way to do this on clientside.

Best regards,
Dominic

[Dominic]

I have found the problem.
Following code works as expected:

function onHeaderClick(e)
{
        var masterTable = $find( "<%= RadGrid1.ClientID %>" ).get_masterTableView();
        var element = $(e).parent().parent().parent();
        var children = $(element).find("~ tr");
        for (var a = 0; a<children.length;a++)
        {
            if ($(children[a]).attr("class") == "rgRow" || $(children[a]).attr("class") == "rgAltRow" || $(children[a]).attr("class") == "rgRow rgSelectedRow" || $(children[a]).attr("class") == "rgAltRow rgSelectedRow")
            {
                if (e.checked) {
                    if ($(children[a]).find("input[type=checkbox]").is(':disabled') == false) {
                            masterTable.selectItem($(children[a])[0]);
                    }
                 }
                 else {
                    if ($(children[a]).find("input[type=checkbox]").is(':disabled') == false) {
                            masterTable.deselectItem($(children[a])[0]);
                        }
                 }
            }
            else if ($(children[a]).attr("class") == "rgGroupHeader") {break;}
        }
}

In the RowSelection event i accept the selection only if the targetElement is of type checkbox. And there is the problem.

function RowSelection(sender,args) {
    var e = args.get_domEvent();
    var targetElement = e.srcElement || e.target;
    if (typeof (targetElement) != "undefined") {
        if (targetElement.tagName.toLowerCase() != "input" && (!targetElement.type || targetElement.type.toLowerCase() != "checkbox")) {
            args.set_cancel(true);
            return false;
        }
    }
    else {
        args.set_cancel(true);
        return false;
    }
}

The TargetElement is undefined. Ist there a way to raise the RowSelectiing event manually or to disable/enable in onHeaderClick?
Or is there any other possible solution.

Best Regards,
Dominic

[Dominic]

I have found a solution.

function onHeaderClick(e) {
        var grid = $find("<%= RadGrid1.ClientID %>");
        grid.remove_rowSelecting(RowSelecting);
        grid.remove_rowDeselecting(RowDeselecting);
        var masterTable = grid.get_masterTableView();
        var element = $(e).parent().parent().parent();
        var children = $(element).find("~ tr");
        for (var a = 0; a < children.length; a++) {
            if ($(children[a]).attr("class") == "rgRow" || $(children[a]).attr("class") == "rgAltRow" || $(children[a]).attr("class") == "rgRow rgSelectedRow" || $(children[a]).attr("class") == "rgAltRow rgSelectedRow") {
                if (e.checked) {
                    if ($(children[a]).find("input[type=checkbox]").is(':disabled') == false) {
                        masterTable.selectItem($(children[a])[0]);
                    }
                }
                else {
                    if ($(children[a]).find("input[type=checkbox]").is(':disabled') == false) {
                        masterTable.deselectItem($(children[a])[0]);
                    }
                }
            }
            else if ($(children[a]).attr("class") == "rgGroupHeader") { break; }
        }
        grid.add_rowSelecting(RowSelecting);
        grid.add_rowDeselecting(RowDeselecting);
}

Now it works.

Best regards,
Dominic

[Martin]

Hello Dominic,

Thank you for sharing your solution with us. I believe it would be helpful to other members of our community.

Please note that you can submit a full featured working project demonstrating the functionality in question using the Code Library section on our site. Based on the project complexity and usability you will be granted some Telerik points that you can use as discounts when purchasing new product licenses or subscription renewals. For more information on the matter, you can check the following help articles:

Code Library Instructions
Code Library FAQ
Telerik points

Regards,
Martin
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.