<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AllowPaging
=
"True"
PageSize
=
"5"
Width
=
"100%"
OnPageIndexChanged
=
"RadGrid1_PageIndexChanged"
GridLines
=
"None"
Skin
=
"Vista"
AllowMultiRowSelection
=
"True"
>
<
MasterTableView
>
<
Columns
>
<
telerik:GridClientSelectColumn
UniqueName
=
"ClientSelectColumn"
></
telerik:GridClientSelectColumn
>
</
Columns
>
<
RowIndicatorColumn
>
<
HeaderStyle
Width
=
"20px"
/>
</
RowIndicatorColumn
>
<
ExpandCollapseColumn
>
<
HeaderStyle
Width
=
"20px"
/>
</
ExpandCollapseColumn
>
<
PagerStyle
Mode
=
"NextPrev"
/>
</
MasterTableView
>
<
HeaderStyle
Font-Bold
=
"True"
Font-Italic
=
"False"
Font-Overline
=
"False"
Font-Strikeout
=
"False"
Font-Underline
=
"False"
Wrap
=
"True"
/>
<
ClientSettings
EnableRowHoverStyle
=
"true"
>
<
Selecting
AllowRowSelect
=
"True"
UseClientSelectColumnOnly
=
"true"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
protected void Ok_Click(object sender, System.EventArgs e)
{
foreach (GridDataItem item in RadGrid1.SelectedItems)
{
CheckBox chk = (CheckBox)item["ClientSelectColumn"].Controls[0];
id = item["ID"].Text; // get the id with its column name
name = item["NAME"].Text; // get the name with its column name
chec = chk.Checked;
}
}
protected
void
btnDel_Click(
object
sender, EventArgs e)
{
string
id;
bool
chec;
foreach
(GridDataItem item
in
RadGrid2.Items)
{
CheckBox chk = (CheckBox)item[
"CheckboxColumn"
].Controls[0];
id = item[
"codigo"
].Text;
chec= chk.Checked;
}
}
<
telerik:RadGrid
ID
=
"RadGrid2"
runat
=
"server"
AllowMultiRowSelection
=
"true"
Width
=
"300px"
OnNeedDataSource
=
"RadGrid2_NeedDataSource"
>
<
MasterTableView
AutoGenerateColumns
=
"False"
CommandItemDisplay
=
"Top"
CommandItemSettings-AddNewRecordText
=
"Novo Registro"
CommandItemSettings-RefreshText
=
"Atualizar"
DataKeyNames
=
"codigo"
>
<
Columns
>
<
telerik:GridClientSelectColumn
UniqueName
=
"CheckboxColumn"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Código"
DataField
=
"codigo"
UniqueName
=
"codigo"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Descrição"
DataField
=
"descricao"
UniqueName
=
"descricao"
/>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
EnablePostBackOnRowClick
=
"True"
>
<
Selecting
AllowRowSelect
=
"true"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
<
asp:Button
ID
=
"btnDeletar"
CommandName
=
"Delete"
runat
=
"server"
Text
=
"Deletar Items"
onclick
=
"btnDeletar_Click"
/>
You may see it on the official : http://demos.telerik.com/aspnet-ajax/button/examples/rendermode/defaultcs.aspx?skin=Black
Checkboxes and Radio are not properly visualized in the Classic Rendering mode.
The issue is reproduced with any browser.
public partial class JobseekerHome : BasePage |
{ |
#region RadStripBar |
protected override void Page_Load(object sender, System.EventArgs e) |
{ |
if (!Page.IsPostBack) |
{ |
AddTab("LanguageUC", "Mini profile"); |
AddPageView(RadTabStrip1.FindTabByText("LanguageUC")); |
AddTab("OrdersCS", "Experience"); |
AddTab("ProjectUC", "Experience"); |
} |
} |
private void AddTab(string tabValue, string tabName) |
{ |
RadTab tab = new RadTab(); |
tab.Text = tabValue; |
tab.Value = tabName; |
RadTabStrip1.Tabs.Add(tab); |
} |
protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e) |
{ |
string userControlName = e.PageView.ID + ".ascx"; |
Control userControl = Page.LoadControl(userControlName); |
userControl.ID = e.PageView.ID + "_userControl"; |
e.PageView.Controls.Add(userControl); |
e.PageView.FindControl(RadTabStrip1.FindTabByText("LanguageUC").Text="Language"); |
e.PageView.FindControl(RadTabStrip1.FindTabByText("OrdersCS").Text = "Orders"); |
} |
private void AddPageView(RadTab tab) |
{ |
RadPageView pageView = new RadPageView(); |
pageView.ID = tab.Text; |
RadMultiPage1.PageViews.Add(pageView); |
pageView.CssClass = "pageView"; |
tab.PageViewID = pageView.ID; |
} |
protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e) |
{ |
AddPageView(e.Tab); |
e.Tab.PageView.Selected = true; |
} |
#endregion |
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 ?