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:
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!
| 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="&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="&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}") %> <%#Eval("CreateDate","{0:t}") %> - <%#Eval("UserName")%>:</strong> <br /> |
| <br /> |
| <%#Eval("NoteText")%><br /> |
| <br /> |
| <strong style="color: Red">Requested Increase:</strong> |
| <%#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
0
Accepted
Hello Chris,
Please test the following approach:
I hope this helps.
Best regards,
Daniel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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
Rank 1
answered on 10 Nov 2008, 07:33 PM
Thanks! That did the trick very nicely!