or
<
telerik:RadButton
ID
=
"buttonReport"
runat
=
"server"
AutoPostBack
=
"true"
Text
=
"Summary"
Font-Size
=
"X-Small"
BackColor
=
"LightBlue"
Icon-PrimaryIconCssClass
=
"rbPrint"
/>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
>Untitled Page</
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
/>
<
script
>
function onCellSelected(sender, a_args)
{
var v_gridItem = a_args.get_gridDataItem();
console.log(v_gridItem._element.sectionRowIndex);
var selectedColumn = a_args.get_column();
var dataItem = a_args.get_gridDataItem();
var output = String.format("The selected cell is located in column with name: " + selectedColumn.get_uniqueName() + " and in row with index: " + dataItem.get_itemIndexHierarchical() + ".");
console.log(output);
}
</
script
>
<
div
>
<
telerik:RadGrid
runat
=
"server"
ID
=
"RadGrid1"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
<
ClientSettings
>
<
Selecting
AllowRowSelect
=
"False"
EnableDragToSelectRows
=
"false"
CellSelectionMode
=
"SingleCell"
/>
<
ClientEvents
OnCellSelected
=
"onCellSelected"
/>
</
ClientSettings
>
<
MasterTableView
EditMode
=
"Batch"
AutoGenerateColumns
=
"False"
>
<
BatchEditingSettings
EditType
=
"Cell"
/>
<
Columns
>
<
telerik:GridTemplateColumn
UniqueName
=
"Data"
ItemStyle-BackColor
=
""
FilterControlWidth
=
"100px"
ItemStyle-Width
=
"100px"
Resizable
=
"false"
HeaderStyle-Width
=
"110px"
DataField
=
"Col2"
HeaderText
=
"Col0"
FilterImageUrl
=
"~/images/funnel-icon.png"
>
<
ItemTemplate
>
<%# Eval("Col2")%>
</
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadComboBox
ID
=
"RadComboBoxData"
runat
=
"server"
EnableViewState
=
"false"
IsCaseSensitive
=
"False"
DropDownAutoWidth
=
"Enabled"
Height
=
"125"
Width
=
"113%"
DropDownWidth
=
"250"
NoWrap
=
"true"
OnClientKeyPressing
=
""
EnableItemCaching
=
"true"
/>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridBoundColumn
DataField
=
"Col1"
UniqueName
=
"Col1"
HeaderText
=
"Col1"
HeaderStyle-Width
=
"60px"
Resizable
=
"false"
AllowFiltering
=
"false"
ReadOnly
=
"False"
Display
=
"true"
Visible
=
"true"
ItemStyle-ForeColor
=
"Blue"
HeaderStyle-HorizontalAlign
=
"Center"
/>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
div
>
</
form
>
</
body
>
</
html
>
using
System;
using
System.Data;
using
Telerik.Web.UI;
public
partial
class
_Default : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
protected
void
RadGrid1_NeedDataSource(
object
source, GridNeedDataSourceEventArgs e)
{
DataTable dt =
new
DataTable();
dt.Columns.Add(
"Col1"
);
dt.Columns.Add(
"Col2"
);
for
(
int
i = 0; i < 20; i++)
{
dt.Rows.Add(
new
object
[] {i,
string
.Format(
"desc_{0}"
, i)});
}
RadGrid1.DataSource = dt;
}
}
<
telerik:RibbonBarSplitButton
Size
=
"Large"
Text
=
"Days"
Value
=
"TypeInterval"
ImageUrlLarge
=
"~/Images/Calendar32.png"
>
<
Buttons
>
<
telerik:RibbonBarButton
Value
=
"TypeCalendar"
ImageUrl
=
"~/Images/Calendar16.png"
Text
=
"Days"
/>
<
telerik:RibbonBarButton
Value
=
"TypeTime"
ImageUrl
=
"~/Images/Time16.png"
Text
=
"Times"
/>
</
Buttons
>
</
telerik:RibbonBarSplitButton
>
function
findSplitButton(sender, buttonValue) {
for
(
var
i = 0; i < sender.get_tabs().get_count() ; i++) {
var
tab = sender.get_tabs().getTab(i);
for
(
var
j = 0; j < tab.get_groups().get_count() ; j++) {
var
group = tab.get_groups().getGroup(j);
for
(
var
k = 0; k < group.get_items().get_count() ; k++) {
var
item = group.get_items().getItem(k);
var
customAttribute = item.get_element().getAttribute(
'Value'
);
if
(customAttribute !=
null
&& customAttribute == buttonValue) {
return
item;
}
}
}
}
}
function
MenuItem(sender, args) {
var
value = args.get_button().get_value();
var
button = findSplitButton(sender,
'TypeInterval'
);
switch
(value) {
case
"TypeCalendar"
:
button.set_imageUrlLarge(
"~/Images/Calendar32.png"
);
break
;
case
"TypeTime"
:
button.set_imageUrlLarge(
"~/Images/Time32.png"
);
break
;
}
}