This is a migrated thread and some comments may be shown as answers.

RadDatePicker Client Control

19 Answers 329 Views
Grid
This is a migrated thread and some comments may be shown as answers.
JSON
Top achievements
Rank 1
JSON asked on 16 Mar 2012, 08:47 PM
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));

 

}

}


19 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 17 Mar 2012, 09:34 AM
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
0
JSON
Top achievements
Rank 1
answered on 19 Mar 2012, 12:34 PM
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
0
Princy
Top achievements
Rank 2
answered on 19 Mar 2012, 01:59 PM
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.
0
JSON
Top achievements
Rank 1
answered on 19 Mar 2012, 03:10 PM
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>

 

0
JSON
Top achievements
Rank 1
answered on 22 Mar 2012, 12:05 PM
I am anxiously awaiting a reply to my issue, I have deadlines!
0
Galin
Telerik team
answered on 22 Mar 2012, 02:39 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
JSON
Top achievements
Rank 1
answered on 22 Mar 2012, 03:07 PM
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..
0
Princy
Top achievements
Rank 2
answered on 23 Mar 2012, 10:33 AM
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.
0
JSON
Top achievements
Rank 1
answered on 23 Mar 2012, 02:10 PM
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...
0
Princy
Top achievements
Rank 2
answered on 23 Mar 2012, 02:28 PM
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.
0
Galin
Telerik team
answered on 23 Mar 2012, 03:21 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
JSON
Top achievements
Rank 1
answered on 23 Mar 2012, 03:33 PM
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.
0
Princy
Top achievements
Rank 2
answered on 26 Mar 2012, 01:07 PM

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.

0
JSON
Top achievements
Rank 1
answered on 26 Mar 2012, 02:32 PM
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...
0
Princy
Top achievements
Rank 2
answered on 27 Mar 2012, 07:01 AM
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.
0
JSON
Top achievements
Rank 1
answered on 27 Mar 2012, 01:22 PM
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...
0
Galin
Telerik team
answered on 28 Mar 2012, 02:06 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
JSON
Top achievements
Rank 1
answered on 28 Mar 2012, 02:13 PM
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
0
Tsvetina
Telerik team
answered on 02 Apr 2012, 11:56 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
JSON
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
JSON
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Galin
Telerik team
Tsvetina
Telerik team
Share this question
or