This is a migrated thread and some comments may be shown as answers.

Desire to cancel nested table client side selection

2 Answers 50 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 10 Nov 2008, 03:16 PM
I'm attempting to create a grid with a details table view. However, I do not want the user to be able to select items in the details view with a client side click on the row because it falsly selects the parent row that I'm using for another operation. Here's the relevant code:

    function EnableBulkEdit(isEnabled)  
    {  
        var Toolbar = $find('<%= MainToolBar.ClientID %>');  
        var BulkEditButton = Toolbar.findItemByText("Bulk Edit");  
        var BulkApproveButton = Toolbar.findItemByText("Bulk Approve");  
        if(isEnabled == true)  
        {  
            BulkEditButton.enable();  
            if (BulkApproveButton != null)  
            {  
                BulkApproveButton.enable();  
            }  
        }  
        else 
        {  
            BulkEditButton.disable();  
            if (BulkApproveButton != null)  
            {  
                BulkApproveButton.disable();  
            }  
        }  
    }  
      
    var currentCostCenters = new Array();  
    function CostCenterSelected(sender, args)  
    {  
        // get the ID of the cost center from the rad grid row.  
        var ccID = args.getDataKeyValue("CostCenterItemID");  
        var addToCollection = true;  
          
        // see if the item is already in the collection. Don't add it if already in collection.  
        for(i=0;i<currentCostCenters.length;i++)  
        {  
            if(currentCostCenters[i]==ccID)  
            {  
                addToCollection=false;  
                break;  
            }  
        }  
          
        // add the item to the selected cost centers  
        if(addToCollection == true)  
        {  
            var nextItem = currentCostCenters.length;  
            currentCostCenters[nextItem] = ccID;  
        }  
        EnableBulkEdit(currentCostCenters.length>0);  
    }  
    function CostCenterUnselected(sender, args)  
    {  
        // get the ID of the cost center from the rad grid row.  
        var ccID = args.getDataKeyValue("CostCenterItemID");  
        for(i=0;i<currentCostCenters.length;i++)  
        {  
            if(currentCostCenters[i]==ccID)  
            {  
                currentCostCenters[i] = ''// Set to an empty string  
                currentCostCenters.sort(); // Sort the array to place the string at the beginning  
                currentCostCenters.shift(); // Shift the array to remove the first element  
                break;  
            }  
        }  
        EnableBulkEdit(currentCostCenters.length>0);  
    }  
 
                <telerik:RadToolBar ID="MainToolBar" runat="server" Skin="Office2007" AutoPostBack="true">  
                    <ExpandAnimation Type="OutQuad" Duration="300" /> 
                    <CollapseAnimation Type="OutQuad" Duration="300" /> 
                    <Items> 
                        <telerik:RadToolBarDropDown runat="server" Text="Permissions" ImageUrl="~/Images/lock.gif" 
                            OnLoad="CheckForPortalAdmin">  
                            <Buttons> 
                                <telerik:RadToolBarButton runat="server" Text="Funds" ToolTip="Set permissions for the various funds in the system." 
                                    ImageUrl="~/Images/fund.gif" CommandName="FundPermissions">  
                                </telerik:RadToolBarButton> 
                                <telerik:RadToolBarButton runat="server" Text="Units" ToolTip="Set access permissions for units in the system." 
                                    ImageUrl="~/Images/unit.gif" CommandName="UnitPermissions">  
                                </telerik:RadToolBarButton> 
                            </Buttons> 
                        </telerik:RadToolBarDropDown> 
                        <telerik:RadToolBarButton runat="server" Text="Users" ImageUrl="~/Images/users.gif" 
                            CommandName="Users" OnLoad="CheckForPortalAdmin" /> 
                        <telerik:RadToolBarButton runat="server" IsSeparator="True" OnLoad="CheckForPortalAdmin">  
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Bulk Edit" PostBack="false" ToolTip="Allows you to apply changes to multiple cost centers at a time." /> 
                        <telerik:RadToolBarButton runat="server" Text="Bulk Approve" PostBack="false" ToolTip="Allows you to approve multiple cost centers at a time." 
                            OnLoad="CheckForPortalAdmin" /> 
                        <telerik:RadToolBarButton runat="server" Text="Export" ImageUrl="~/Images/export.gif" 
                            CommandName="Export">  
                        </telerik:RadToolBarButton> 
                    </Items> 
                </telerik:RadToolBar> 
 
                <telerik:RadGrid ID="CurrentCostCentersGrid" runat="server" Skin="Office2007" AllowMultiRowSelection="True" 
                    AllowMultiRowEdit="True" ShowGroupPanel="True" AllowPaging="True" DataSourceID="DataSourceUnits" 
                    GridLines="Horizontal" AutoGenerateColumns="False" PageSize="50" ShowFooter="true" 
                    Width="100%">  
                    <ClientSettings AllowDragToGroup="true" AllowGroupExpandCollapse="true" AllowColumnsReorder="true" 
                        AllowExpandCollapse="true">  
                        <Selecting AllowRowSelect="true" /> 
                        <ClientEvents OnRowSelected="CostCenterSelected" OnRowDeselected="CostCenterUnselected"/>  
                    </ClientSettings> 
                    <GroupPanel Enabled="true" Text="Groups">  
                    </GroupPanel> 
                    <PagerStyle Mode="NextPrevAndNumeric" NextPageText="Next" PrevPageText="Previous" /> 
                    <MasterTableView ShowGroupFooter="true" ShowFooter="true" DataSourceID="DataSourceUnits" 
                        DataKeyNames="CostCenterItemID" CommandItemDisplay="None" ClientDataKeyNames="CostCenterItemID">  
                        <CommandItemTemplate> 
                            <asp:Button ID="BulkApproveButton" runat="server" Text="Bulk Approve" /> 
                        </CommandItemTemplate> 
                        <RowIndicatorColumn> 
                            <HeaderStyle Width="20px"></HeaderStyle> 
                        </RowIndicatorColumn> 
                        <ExpandCollapseColumn Visible="False">  
                            <HeaderStyle Width="20px"></HeaderStyle> 
                        </ExpandCollapseColumn> 
                        <Columns> 
                            <telerik:GridClientSelectColumn> 
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" /> 
                            </telerik:GridClientSelectColumn> 
                            <telerik:GridBoundColumn HeaderText="Fund" DataField="FundID" AllowFiltering="true" 
                                DataType="System.Int32" SortExpression="FundID" ReadOnly="True" UniqueName="FundID">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Unit" DataField="UnitID" AllowFiltering="true" 
                                DataType="System.Int32" SortExpression="UnitID" ReadOnly="True" UniqueName="UnitID">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Line Item" DataField="LineItemID" AllowFiltering="true" 
                                DataType="System.Int32" SortExpression="LineItemID" ReadOnly="True" UniqueName="LineItemID">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn DataField="Category" EmptyDataText="&amp;nbsp;" HeaderText="Category" 
                                SortExpression="Category" UniqueName="Category">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" Wrap="false" Width="115px" 
                                    Font-Size="10px" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Description" DataField="LineItemName" SortExpression="LineItemName" 
                                UniqueName="Description" ReadOnly="true" Groupable="false">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Left" Wrap="true" Width="150px" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Previous Budget" DataField="PreviousBudget" 
                                AllowFiltering="true" DataType="System.Decimal" SortExpression="PreviousBudget" 
                                UniqueName="PreviousBudget" DataFormatString="{0:C}" ReadOnly="True" Aggregate="Sum" 
                                FooterAggregateFormatString="{0:C}" Groupable="false">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" /> 
                                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Previous Actual" DataField="PreviousActual" 
                                DataType="System.Decimal" SortExpression="PreviousActual" UniqueName="PreviousActual" 
                                DataFormatString="{0:C}" Groupable="false" Aggregate="Sum" FooterAggregateFormatString="{0:C}">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" /> 
                                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Current Budget" DataField="CurrentBudget" DataType="System.Decimal" 
                                SortExpression="CurrentBudget" UniqueName="CurrentBudget" DataFormatString="{0:C}" 
                                Groupable="false" Aggregate="Sum" FooterAggregateFormatString="{0:C}">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" /> 
                                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Current YTD" DataField="CurrentYTD" DataType="System.Decimal" 
                                SortExpression="CurrentYTD" UniqueName="CurrentYTD" DataFormatString="{0:C}" 
                                Groupable="false" Aggregate="Sum" FooterAggregateFormatString="{0:C}">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" /> 
                                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Proposed Budget" DataField="ProposedBudget" 
                                DataType="System.Decimal" SortExpression="ProposedBudget" UniqueName="ProposedBudget" 
                                Groupable="false" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataFormatString="{0:C}">  
                                <ItemStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" Width="100px" /> 
                                <FooterStyle VerticalAlign="Top" HorizontalAlign="Right" Wrap="false" /> 
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn DataField="StatusName" EmptyDataText="&amp;nbsp;" HeaderText="Status" 
                                SortExpression="StatusName" UniqueName="StatusName">  
                            </telerik:GridBoundColumn> 
                            <telerik:GridBoundColumn HeaderText="Modify Date" DataField="ModifyDate" DataType="System.DateTime" 
                                SortExpression="ModifyDate" UniqueName="ModifyDate" Groupable="false" /> 
                        </Columns> 
                        <DetailTables> 
                            <telerik:GridTableView DataSourceID="DataSourceHistory" AutoGenerateColumns="false" 
                                ShowHeader="false" GroupsDefaultExpanded="false" NoDetailRecordsText="No notes currently exist for this item" 
                                Width="100%" CommandItemDisplay="Top" Frame="Void">  
                                <CommandItemTemplate> 
                                    <telerik:RadToolBar ID="DetailsToolbar" runat="server" Skin="Office2007" Width="100%" 
                                        AutoPostBack="true" OnClientLoad="SetNestedToolbar">  
                                        <ExpandAnimation Type="OutQuad" Duration="150" /> 
                                        <CollapseAnimation Type="InQuad" Duration="150" /> 
                                        <Items> 
                                            <telerik:RadToolBarButton Text="Make Request" CommandName="MakeRequest" ImageUrl="Images/request.gif">  
                                            </telerik:RadToolBarButton> 
                                            <telerik:RadToolBarButton IsSeparator="true">  
                                            </telerik:RadToolBarButton> 
                                            <telerik:RadToolBarButton Text="Approval" CommandArgument="Approval" OnLoad="CheckForPortalAdmin"></telerik:RadToolBarButton> 
                                        </Items> 
                                    </telerik:RadToolBar> 
                                </CommandItemTemplate> 
                                <ParentTableRelation> 
                                    <telerik:GridRelationFields MasterKeyField="CostCenterItemID" DetailKeyField="ItemID" /> 
                                </ParentTableRelation> 
                                <RowIndicatorColumn> 
                                    <HeaderStyle Width="20px"></HeaderStyle> 
                                </RowIndicatorColumn> 
                                <ExpandCollapseColumn> 
                                    <HeaderStyle Width="20px"></HeaderStyle> 
                                </ExpandCollapseColumn> 
                                <Columns> 
                                    <telerik:GridTemplateColumn> 
                                        <ItemTemplate> 
                                            <strong> 
                                                <%#Eval("CreateDate","{0:d}") %>&nbsp;<%#Eval("CreateDate","{0:t}") %>&nbsp;-&nbsp;<%#Eval("UserName")%>:</strong>&nbsp;<br /> 
                                            <br /> 
                                            <%#Eval("NoteText")%><br /> 
                                            <br /> 
                                            <strong style="color: Red">Requested Increase:</strong>&nbsp;  
                                            <%#Eval("RequestedBudget", "{0:C}")%> 
                                        </ItemTemplate> 
                                    </telerik:GridTemplateColumn> 
                                </Columns> 
                            </telerik:GridTableView> 
                        </DetailTables> 
                        <PagerStyle Mode="NextPrevAndNumeric" /> 
                        <PagerTemplate> 
                            Item Description  
                        </PagerTemplate> 
                    </MasterTableView> 
                    <FilterMenu EnableTheming="True" Skin="Gray">  
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
                    </FilterMenu> 
                </telerik:RadGrid> 
 

I would actually prefer that the user be forced to select using the client side checkbox alone. All other clicks on the row or child items should be totally discarded in the selection process.

Thanks for any assistance!

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 10 Nov 2008, 05:59 PM
Hello Chris,

Please test the following approach:
<script type="text/javascript" language="javascript"
    function RowDeselecting(sender, args) 
    { 
        if (args.get_tableView().get_name() == "myDetailTable"
            args.set_cancel(true); 
 
        if (args.get_domEvent().target) 
        { 
            if (args.get_domEvent().target.type != "checkbox"
                args.set_cancel(true); 
        } 
        else if (!args.get_domEvent().srcElement) 
            args.set_cancel(true); 
    } 
</script> 


<telerik:RadGrid ID="RadGrid1" AllowMultiRowSelection="true" ... > 
.. 
<ClientSettings> 
    <Selecting AllowRowSelect="True" /> 
    <ClientEvents OnRowSelecting="RowDeselecting" OnRowDeselecting="RowDeselecting" /> 
</ClientSettings> 

I hope this helps.

Best regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Chris
Top achievements
Rank 1
answered on 10 Nov 2008, 07:33 PM
Thanks! That did the trick very nicely!
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Chris
Top achievements
Rank 1
Share this question
or