I'm trying to replicate the behaviour in the attached series of jpgs. ( was going to be avideo but can't attach it ). If a user just clicks on a grid row then the row should highlight and an indicator should appear to the left of the grid. If the user actually clicks the check box the row is highlighted, has the indicator and the check box is ticked. There should also be a check box in the grid header to select all rows and show them as ticked or to reset all check boxes back to empty if it is itself ticked. The last clicked row should retain the indicator.
I thought i could use a GridClientSelectColumn to do this but it's behaviour is not quite what I want to replicate.
The application whose functionality i'm trying to replicate uses CSS to overwrite the different check box symbols. It has 4 images, 1 with an empty tick box, 1 with an empty tick box and the indicator, 1 with a ticked box and 1 with ticked box and indicator. I tried to do this by using a GridButtonColumn but that doen't put a button into the header row.
I have a sample app where I'm trying various method but again a can't attach it to the post so here's the code for my grid...
<telerik:RadGrid ID="rgProducts" runat="server" Width="100%" AllowMultiRowSelection="true"
AllowSorting="true" RenderMode="Lightweight" CssClass="RadGrid_RoundCorners" Skin="Max2017" EnableEmbeddedSkins="false"
OnNeedDataSource="rgProducts_NeedDataSource" OnItemCreated="rgProducts_ItemCreated" OnItemDataBound="rgProducts_ItemDataBound"
OnUpdateCommand="rgProducts_UpdateCommand" OnInsertCommand="rgProducts_InsertCommand" OnDeleteCommand="rgProducts_DeleteCommand"
OnItemCommand="rgProducts_ItemCommand">
<MasterTableView DataKeyNames="Product_Id" ClientDataKeyNames="Product_Id" AllowMultiColumnSorting="true" AutoGenerateColumns="false" CommandItemDisplay="Top" >
<Columns>
<telerik:GridBoundColumn DataField="Product_Id" UniqueName="ProductId" Display="false">
</telerik:GridBoundColumn>
<telerik:GridClientSelectColumn UniqueName="rgProductSelectCol">
<HeaderStyle Width="30px" />
</telerik:GridClientSelectColumn>
<telerik:GridImageColumn UniqueName="gic" >
<HeaderStyle CssClass="row_selector" Width="32px" />
<ItemStyle CssClass="row_selector" />
</telerik:GridImageColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" ButtonCssClass="row_selector" Resizable="false" UniqueName="freddy"
CommandName="gbc" HeaderImageUrl="/images/ico_entry_unchecked.png">
<HeaderStyle Width="32px" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="Product_Code" HeaderText="Product Code" SortExpression="Product_Code"
UniqueName="ProductCode">
<HeaderStyle Width="12%" Font-Bold="true" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Product_Description" HeaderText="Product Description" SortExpression="Product_Description"
UniqueName="ProductDescription">
<HeaderStyle Width="30%" Font-Bold="true" />
</telerik:GridBoundColumn>
<telerik:GridNumericColumn DataField="Unit_Sell" HeaderText="Unit Sell" SortExpression="Unit_Sell"
UniqueName="UnitSell" DataType="System.Double" DataFormatString="{0:#,##0.00}">
<HeaderStyle Width="7%" HorizontalAlign="Right" Font-Bold="true" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridNumericColumn>
<telerik:GridNumericColumn DataField="Unit_Cost" HeaderText="Unit Cost" SortExpression="Unit_Cost"
UniqueName="UnitCost" DataType="System.Double" DataFormatString="{0:#,##0.00}">
<HeaderStyle Width="7%" HorizontalAlign="Right" Font-Bold="true" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridNumericColumn>
<telerik:GridNumericColumn DataField="Renewal_Cost" HeaderText="Renewal Cost" SortExpression="Renewal_Cost"
UniqueName="RenewalCost" DataType="System.Double" DataFormatString="{0:#,##0.00}">
<HeaderStyle Width="9%" HorizontalAlign="Right" Font-Bold="true" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridNumericColumn>
<telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments"
UniqueName="Comments">
<HeaderStyle Font-Bold="true" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true" >
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
<%--<ClientEvents OnRowContextMenu="RowContextMenu" OnGridCreated="GridCreated" OnRowClick="GridRowClicked" />--%>
<ClientEvents OnGridCreated="GridCreated" OnRowClick="GridRowClicked" />
</ClientSettings>
</telerik:RadGrid>
And my CSS for the images ...
.mainSelector{ cursor:pointer; width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; position:absolute; }
.mainSelectorChecked{ width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; background-image:url(../images/ico_entry_checked.png); background-repeat:no-repeat; }
.mainSelectorUnChecked { width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; background-image:url(../images/ico_entry_unchecked.png); background-repeat:no-repeat; }
.row_selector { background-image: url("../images/ico_entry_unchecked.png"); background-position: center 6px; background-repeat: no-repeat; clear: left; float: left; min-height: 18px; padding-top: 4px; width: 16px; }
.row_selectorCurrent { }
.row_selectorCurrentChecked { background-image: url("../images/ico_currrentEntry_checked.png"); }
.row_selectorCurrentUnChecked { background-image: url("../images/ico_currrentEntry_unchecked.png"); }
.row_selectorChecked { background-image: url("../images/ico_entry_checked.png"); }
.row_selectorSelected { }
Has anyone any ideas how i might achieve this ?