[Solved] RadDatePicker Client Control

[JSON]

I have a RadDatePicker in an EditItemTemplate of a RadGrid that needs to change the forground color on an onclick event.
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));

 

}

}

[Jayesh Goyani]

Hello JSON,

<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

[JSON]

Jayesh,

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.

functionHighlightRowClick(obj) {
               vardp = $("#"+ obj +"_dateInput").get(0);
               dp.style.border = "1px solid Red";

           }

Thanks,

SteveO

[Princy]

Hello,

Try adding CSS class for the date input as shown below.
JS:

  function HighlightRowClick(obj)
{
     var date = $find(obj);
     date._dateInput.addCssClass("color1");
}

CSS:

.color1
{
 color: Red !important;
}

Thanks,
Princy.

[JSON]

I try your last suggestion, and it did not work either.

<

 

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>

 

[JSON]

I am anxiously awaiting a reply to my issue, I have deadlines!

[Galin]

Hello Steve,

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

[JSON]

Galin,

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..

[Princy]

Hello,

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 + "');");
 }
}

JS:

function focus(obj)
{
 var date = $find(obj);
 date.get_dateInput()._styles.FocusedStyle[0] += "background-color: red;";
}

Thanks,
Princy.

[JSON]

Hello Princy, thanks for your reply.

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...

[Princy]

Hello,

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.

[Galin]

Hi Steve,

Please check out the sample page in the attached file and let me know how it goes.


Kind regards,
Galin
the Telerik team

[JSON]

I never get an item of GridEditableItem in the OnItemDataBound event. The problem may be that I am using the "EditAll" command mode on this grid.

[Princy]

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.

[JSON]

Not sure what is meant by "attached the ItemDataBound event in aspx page" I am referencing it in the grid properties.
I have attached the pages code for your review.

Thank you,

SteveO...

[Princy]

Hello Steve,

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.

[JSON]

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...

[Galin]

Hello Steve,

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

[JSON]

Hi,

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

[Tsvetina]

Hello 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