I get the Client id and add the onclick event to the RadDatePicker in the Grid's on ItemDataBound event.
In the Javascript function, I am using code recomended by Telerik to change the RadDatePicker's forground color (below), but it does not work as suggested.
Thank you,
SteveO
-----------------------------------------------------------------------------------------------------------------------------------
function HighlightRow(chkB) {
chkB.get_dateInput()._textBoxElement.style.forgroundColor =
"red";
}
-----------------------------------------------------------------------------------------------------------------------------------
protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
RadDatePicker rdp1 = e.Item.FindControl("nextactdate") as RadDatePicker;
RadDatePicker rdp2 = e.Item.FindControl("finalactdate") as RadDatePicker;
if (rdp1 != null && rdp2 != null)
{
rdp1.Attributes.Add(
"onclick", string.Format("HighlightRow({0})", rdp1.ClientID));
rdp2.Attributes.Add(
"onclick", string.Format("HighlightRow({0})", rdp2.ClientID));
}
}
19 Answers, 1 is accepted

<
telerik:GridTemplateColumn
>
<
ItemTemplate
>
</
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadDatePicker
ID
=
"RadDatePicker1"
runat
=
"server"
>
</
telerik:RadDatePicker
>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridEditableItem && e.Item.IsInEditMode)
{
GridEditableItem item = e.Item
as
GridEditableItem;
RadDatePicker RadDatePicker1 = item.FindControl(
"RadDatePicker1"
)
as
RadDatePicker;
RadDatePicker1.Attributes.Add(
"onclick"
,
"HighlightRowClick('"
+ RadDatePicker1.ClientID +
"');"
);
}
function
HighlightRowClick(obj) {
var
dp = $(
"#"
+ obj +
"_dateInput"
).get(0);
dp.style.border =
"1px solid Red"
;
}
Thanks,
Jayesh Goyani

Thank you for your quick responce to my post. Your example shows setting the border style, what I am looking for the to change the items forground color. Anyway I applied the recomended changes bu they did not work.
function
HighlightRowClick(obj) {
var
dp = $(
"#"
+ obj +
"_dateInput"
).get(0);
dp.style.border =
"1px solid Red"
;
}
Thanks,
SteveO

Try adding CSS class for the date input as shown below.
JS:
function
HighlightRowClick(obj)
{
var
date = $find(obj);
date._dateInput.addCssClass(
"color1"
);
}
.color
1
{
color
: Red
!important
;
}
Thanks,
Princy.

<
asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.style1
{
color: Red !important;
}
</style>
function HighlightRow(chkB) {
var date = $find(chkB);
date._dateInput.addCssClass(
"style1");
}
</script>
</telerik:RadCodeBlock>

I am not quite sure that I correctly understand the case you are describing. Could you please give us more details on what you are trying to achieve?
However, I guess you want to change the colour of the text onFocus event. In this case you can use the following CSS rule
html body span.RadInput_[SkinName] .riFocused
{
color
:
red
;
}
Also, you can change the colour on date selected event, e.g.
JS
function
onDateSelected(sender, args)
{
sender.get_element().parentNode.className +=
" color1"
;
}
CSS
html body div.color1
.riTextBox
{
color
: green;
}
Additionally, I am sending my tested sample page. You can find it in the attached file.
I hope this helps.
All the best,
Galin
the Telerik team

Thank you for your reply.
Basically, what I need to accomplish is; onFocus of a RadDatePicker - I want to change the background color of the object on the client (javascript). So far, I have not had any success on my own, or with any of the previous Telerik suggestions.
As you suggested, I have added an onDateSelected client event to apply a class name with the required color (Red); As of now, I have not had any success with this suggestion.
Please understand, the RadDatePicker in nested in an EditItemTemplate of a RadGrid. In code behind, in the OnDataBound event, I add the onDateChanged client event to the RadDatePicker object and pass the edit Item as an argument to the function.
if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
RadDatePicker rdp1 = e.Item.FindControl("nextactdate") as RadDatePicker;
RadDatePicker rdp2 = e.Item.FindControl("finalactdate") as RadDatePicker;
rdp1.Attributes.Add(
"onDateSelected", "onDateSelected('" + rdp1 + "');");
rdp2.Attributes.Add(
"onDateSelected", "onDateSelected('" + rdp2 + "');");
}
SteveO..

Try the following javascript to change the background color on focus of RadDatePicker.
C#:
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
((e.Item
is
GridEditFormItem && e.Item.IsInEditMode))
{
GridEditFormItem editFormItem = (GridEditFormItem)e.Item;
RadDatePicker pkr = (RadDatePicker)editFormItem.FindControl(
"RadDatePicker1"
);
pkr.Attributes.Add(
"onclick"
,
"focus('"
+ pkr.ClientID +
"');"
);
}
}
function
focus(obj)
{
var
date = $find(obj);
date.get_dateInput()._styles.FocusedStyle[0] +=
"background-color: red;"
;
}
Thanks,
Princy.

I am assuming I am to call the RadGrid1_ItemCreated method in the RadGrid OnItemCreated event. The only problem is, the item will never be in EditMode in this event, thus the onclick event will never be assigned to the RadDataPicker control.
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
((e.Item
is
GridEditFormItem && e.Item.IsInEditMode))
{
GridEditFormItem editFormItem = (GridEditFormItem)e.Item;
RadDatePicker pkr = (RadDatePicker)editFormItem.FindControl(
"RadDatePicker1"
);
pkr.Attributes.Add(
"onclick"
,
"focus('"
+ pkr.ClientID +
"');"
);
}
}
I have tried your suggestion in the OnItemDataBound event, with unsuccessful results.
Thank you,
SteveO...

I suppose the grid is not entering into edit mode because you are using InPlace mode for editing. If so try accessing using GridEditableItem.
C#:
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridEditableItem && e.Item.IsInEditMode)
{
//your code
}
}
Thanks,
Princy.
Please check out the sample page in the attached file and let me know how it goes.
Kind regards,
Galin
the Telerik team


Hi Steve,
I guess you are making the entire grid in edit mode by clicking the ‘Edit All’ button in CommandItemTemplate. But still it will enter into the Edit mode condition in ItemdataBound event. Can you please cross check whether you attached the ItemDataBound event in aspx page? Please paste your complete code for further assistance.
ASPX:
<
telerik:RadGrid
ID
=
"RadGrid2"
runat
=
"server"
AutoGenerateColumns
=
"false"
DataSourceID
=
"SqlDataSource1"
OnItemDataBound
=
"RadGrid2_ItemDataBound"
OnItemCommand
=
"RadGrid2_ItemCommand"
AllowMultiRowEdit
=
"true"
>
<
MasterTableView
DataKeyNames
=
"EmployeeID"
CommandItemDisplay
=
"Top"
>
<
CommandItemTemplate
>
<
asp:LinkButton
ID
=
"btnEditSelected"
runat
=
"server"
Text
=
"Edit All"
CommandName
=
"EditAll"
Visible
=
'true'
/>
</
CommandItemTemplate
>
<
Columns
>
<
telerik:GridBoundColumn
HeaderText
=
"EmployeeID"
DataField
=
"EmployeeID"
UniqueName
=
"EmployeeID"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderText
=
"FirstName"
DataField
=
"FirstName"
UniqueName
=
"FirstName"
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
C#:
protected
void
RadGrid2_ItemCommand(
object
sender, GridCommandEventArgs e)
{
if
(e.CommandName ==
"EditAll"
)
{
foreach
(GridItem item
in
RadGrid1.MasterTableView.Items)
{
if
(item
is
GridEditableItem)
{
GridEditableItem editableItem = item
as
GridDataItem;
editableItem.Edit =
true
;
}
}
}
RadGrid1.Rebind();
}
protected
void
RadGrid2_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridEditableItem && e.Item.IsInEditMode)
{
//your code
}
}
Thanks
Princy.

I have attached the pages code for your review.
Thank you,
SteveO...

From your code, I can find that you are using InPlace edit mode and accessing it as GridEditFormItem in itemDataBound and ItemCreated event. Try accessing it as GridEditableItem as shown below.
C#:
protected
void
grid1_ItemDataBound(
object
sender, Telerik.Web.UI.GridItemEventArgs e)
{
if
(e.Item
is
GridEditableItem && e.Item.IsInEditMode)
{
GridEditableItem it = (GridEditableItem)e.Item;
RadDatePicker pkr = (RadDatePicker)it.FindControl(
"nextactdate"
);
}
}
Thanks,
Princy.

Thank you, that did work. The only thing is when another field is selected it does not persist state (red color) of the previously selected value. It resets the color to the default. What the user wants to see is every item selected to display a red background until "SaveAll" is selected.
Thanks again,
SteveO...
In this case could you use the source in the project, which is attached to my previous post. There is not problem with losing the styles on changing the state.
I hope this helps.
Kind regards,
Galin
the Telerik team

I have no idea what you mean, nor how to accomplish this. I do need to persist the current state of styles as they are changed - until changes are saved.
Thanks,
Steve
Try the attached modified version of my colleague's sample and let me know if this is how you want the pickers to be styled. If not, please provide a screenshot explaining your requirement.
Greetings,
Tsvetina
the Telerik team