Thanks
9 Answers, 1 is accepted
You have correctly guessed that the server-side ItemDataBound event could be used for such requirement. In the ItemDataBound event handler you could get reference to the template column, then to the RadSlider control and finally, apply the customization:
<
telerik:RadGrid
ID
=
"RadGrid1"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
runat
=
"server"
OnItemDataBound
=
"RadGrid1_ItemDataBound"
>
<
MasterTableView
AutoGenerateColumns
=
"false"
>
<
Columns
>
<
telerik:GridTemplateColumn
UniqueName
=
"Slider"
>
<
ItemTemplate
>
<telerik:RadSlider ID="RadSlider1" runat="server" EnableDragRange="true" IsSelectionRangeEnabled="true"
MinimumValue="0" MaximumValue="30" SmallChange="5" LargeChange="10"
.....
.....
And the code-behind:
protected
void
RadGrid1_NeedDataSource(
object
sender, GridNeedDataSourceEventArgs e)
{
DataTable table =
new
DataTable();
table.Columns.Add(
"ID"
,
typeof
(
int
));
table.Columns.Add(
"RangeStart"
,
typeof
(
int
));
table.Columns.Add(
"RangeEnd"
,
typeof
(
int
));
table.Columns.Add(
"Color"
,
typeof
(
string
));
table.Rows.Add(1, 5, 10,
"#363636"
);
table.Rows.Add(2, 15, 20,
"#cc3636"
);
table.Rows.Add(3, 20, 30,
"#ff3636"
);
(sender
as
RadGrid).DataSource = table;
}
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridDataItem)
{
GridDataItem item = e.Item
as
GridDataItem;
RadSlider slider = item[
"Slider"
].FindControl(
"RadSlider1"
)
as
RadSlider;
slider.BackColor = System.Drawing.ColorTranslator.FromHtml((item.DataItem
as
DataRowView).Row[
"Color"
].ToString());
}
}
Another approach is to handle this entirely in the markup:
<
telerik:GridTemplateColumn
UniqueName
=
"Slider"
>
<
ItemTemplate
>
<
telerik:RadSlider
ID
=
"RadSlider1"
runat
=
"server"
EnableDragRange
=
"true"
IsSelectionRangeEnabled
=
"true"
MinimumValue
=
"0"
MaximumValue
=
"30"
SmallChange
=
"5"
LargeChange
=
"10"
SelectionStart='<%# decimal.Parse(DataBinder.Eval((Container as GridDataItem).DataItem, "RangeStart").ToString()) %>'
SelectionEnd='<%# decimal.Parse(DataBinder.Eval((Container as GridDataItem).DataItem, "RangeEnd").ToString()) %>'
BackColor= '<%# System.Drawing.ColorTranslator.FromHtml(DataBinder.Eval((Container as GridDataItem).DataItem, "Color").ToString()) %>'
>
</
telerik:RadSlider
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
Hope that helps.
Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Thanks
It is not possible to directly change the color of the selected part of the slider. You should have in mind that actually an image is used for that part.
Nevertheless, for your scenario I could suggest that you add the color to the ClientDataKeyNames collection and use the following code to get reference to that element in the slider and set the background color:
<
telerik:RadGrid
ID
=
"RadGrid1"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
runat
=
"server"
>
<
MasterTableView
AutoGenerateColumns
=
"false"
ClientDataKeyNames
=
"Color"
>
.......
And the JavaScript:
<telerik:RadCodeBlock runat=
"server"
>
<script type=
"text/javascript"
>
function
pageLoad(sender, args) {
var
grid = $find(
"RadGrid1"
);
var
dataItems = grid.get_masterTableView().get_dataItems();
for
(
var
i = 0; i < dataItems.length; i++) {
var
slider = $telerik.findControl(dataItems[i].get_element(),
"RadSlider1"
);
var
selectionElement = document.getElementById(
"RadSliderSelected_"
+ slider.get_id());
selectionElement.style.backgroundImage =
"none"
;
selectionElement.style.backgroundColor = dataItems[i].getDataKeyValue(
"Color"
);
}
}
</script>
</telerik:RadCodeBlock>
Hope that helps.
Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Thanks

.
​
function
pageLoad(sender, args) {
var
grid = $find(
"<%=RadGrid1.ClientID %>"
);
if
(grid) {
var
MasterTable = grid.get_masterTableView();
var
Rows = MasterTable.get_dataItems();
for
(
var
i = 0; i < Rows.length; i++) {
var
row = Rows[i];
row.set_selected(
true
);
var
childTable = row.get_nestedViews();
if
(childTable) {
if
(childTable.length > 0) {
var
childItems = childTable[0].get_dataItems();
for
(
var
i = 0; i < childItems.length; i++) {
var
slider = $telerik.findControl(childItems[i].get_element(),
"ComponentSlider"
);
var
selectionElement = document.getElementById(
"RadSliderSelected_"
+ slider.get_id());
selectionElement.style.backgroundImage =
"none"
;
selectionElement.style.backgroundColor = childItems[i].getDataKeyValue(
"DisplayColor"
);
}
}
}
}
}
}

I am making a new page and the grid is now in a RadPageView.
The document.getElementById("RadSliderSelected_" + slider.get_id()) returns a null
It finds the Slider control ok and the slider.get_id() is good but the get elementById returns null.
It works fine on same page when not in a RadPageView
Thanks
You can try to modify the JavaScript with the following and use $telerik.findElement(container, id) instead:
function
pageLoad(sender, args) {
var
grid = $find(
"RadGrid1"
);
var
dataItems = grid.get_masterTableView().get_dataItems();
for
(
var
i = 0; i < dataItems.length; i++) {
var
slider = $telerik.findControl(dataItems[i].get_element(),
"RadSlider1"
);
var
selectionElement = $telerik.findElement(dataItems[i].get_element(),
"RadSliderSelected_"
+ slider.get_id());
selectionElement.style.backgroundImage =
"none"
;
selectionElement.style.backgroundColor = dataItems[i].getDataKeyValue(
"Color"
);
}
}
Please give this a try and see if it will resolve the issue on your side too.
Regards,
Konstantin Dikov
Telerik

No luck ... selectionElement still a null:
var selectionElement = $telerik.findElement(dataItems[i].get_element(), "RadSliderSelected_" + slider.get_id());
After further testing I have noticed that when the RadPageView holding the RadGrid is not initially selected, the previous code will fail, because the RadSlider element will not be initialized at this point. If you set the Selected property of that RadPageView to true, everything should work correctly.
Now, since setting the Selected property might not be possible in your case, you could handle the client-side OnClientTabSelected event of the RadTabStrip and when the tab holding the grid is opened, execute the code from the previous post:
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function pageLoad(sender, args) {
}
function tabSelected(sender, args) {
if (args.get_tab().get_id() == 0) { //change this with the corresponding TAB index, where the grid is located
var grid = $find("RadGrid1");
var dataItems = grid.get_masterTableView().get_dataItems();
for (var i = 0; i <
dataItems.length
; i++) {
var slider = $telerik.findControl(dataItems[i].get_element(), "RadSlider1");
var selectionElement = $telerik.findElement(dataItems[i].get_element(), "RadSliderSelected_" + slider.get_id());
selectionElement.style.backgroundImage
=
"none"
;
selectionElement.style.backgroundColor
=
dataItems
[i].getDataKeyValue("Color");
}
}
}
</script>
</
telerik:RadCodeBlock
>
<
telerik:RadTabStrip
runat
=
"server"
ID
=
"RadTabStrip1"
MultiPageID
=
"RadMultiPage1"
OnClientTabSelected
=
"tabSelected"
>
<
Tabs
>
<
telerik:RadTab
PageViewID
=
"Page1"
></
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
runat
=
"server"
ID
=
"RadMultiPage1"
>
<
telerik:RadPageView
runat
=
"server"
Width
=
"100%"
ID
=
"Page1"
>
<
telerik:RadGrid
runat
=
"server"
ID
=
"RadGrid1"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
<
MasterTableView
ClientDataKeyNames
=
"Color"
>
<
Columns
>
<
telerik:GridTemplateColumn
>
<
ItemTemplate
>
<
telerik:RadSlider
runat
=
"server"
ID
=
"RadSlider1"
EnableDragRange
=
"true"
IsSelectionRangeEnabled
=
"true"
MinimumValue
=
"0"
MaximumValue
=
"30"
SmallChange
=
"5"
LargeChange
=
"10"
>
</
telerik:RadSlider
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
Regards,
Konstantin Dikov
Telerik