RadTextBox behaviour not correct inside RadGrid with Javascript

[Dharmesh Barochia]

I am facing problem with RadGrid when I try to hide/show RadTextBox using javaScript inside Grid’s EditFormSettings tag.

This happens when CheckBox value is false at the time of add/Edit record.

I call javascript function that hide/show telerik textbox, assume that checkbox value is false in this case telerik textbox will be disappear.

After page load when I tick checkbox now I again call javascript function and set Telerik Textbox visible, that display on the screen but when I try to write in textbox it disappear.

 

This work fine if I replace telerik textbox with asp Textbox.

Here is my code.

I have written following javascript to show/hide textbox out side the Grid.

<telerik:RadScriptBlock ID="ScriptPanelHideShow" runat="server">

<script type="text/javascript">

//Javascript Function this will hide and show textbox.

function IsCanceledChange() {

var chk_IsCancel = GetRegisteredServerElement("chk_IsCancel");

var txt_Cancel = GetRegisteredServerElement("txt_Cancel_Text");

if (chk_IsCancel.checked == true)                             

txt_Cancel.style.display = 'inline';

else

txt_Cancel.style.display = 'none';

}

var registeredElements = []; //Store/Register grid’s control ID

          //Find Grid’s element

function GetRegisteredServerElement(serverID) {

var clientID = "";

for (var i = 0; i < registeredElements.length; i++) {

              clientID = registeredElements[i];

if (clientID.indexOf(serverID) >= 0)

          break;

              }

          return $get(clientID);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadGrid...

<MasterTableView...

<EditFormSettings

<FormTemplate>

//CheckBox and TextBox

<asp:CheckBox ID="chk_IsCancel" runat="server"

Checked='<%# Bind("IsCancel")%>' onclick="IsCanceledChange()" />

<telerik:RadTextBox ID="txt_Cancel" runat="server" >

</telerik:RadTextBox>

//Register control id into variable

<telerik:RadScriptBlock ID="rsb_RegisterElement" runat="server">

 

<script type="text/javascript">

registeredElements.push('<%# Container.FindControl("chk_IsCancel").ClientID %>');

registeredElements.push('<%# Container.FindControl("txt_Cancel").ClientID %>' + "_Text");

IsCanceledChange(); //Call Javascript function

</script>

</telerik:RadScriptBlock>

</FormTemplate>

</EditFormSettings

</MasterTableView

</telerik:RadGrid>

[Pavlina]

Hi Dharmesh,

Javascript methods to show/hide RadTextBoxes are get_visible() and set_visible(). Please find more info in the following article:
RadTextBox Client Object

Additionally, I suggest you use FindControl()  method which takes control id for an argument and returns the corresponding client object of RadControl or ASP.NET AJAX control inside the grid row.
FindControl()

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dharmesh Barochia]

Hi,

When I try to use set_visible(true) and set_visible(false) it throws me error “Object doesn't support this property or method” I also try to use style.cssText = "display:block;" and style.cssText = "display:none;" but here also I face the same problem, when I click on textbox it disappear this might be because my control are inside telerik grid’s FormTemplate.

 

Is there any other way so I can hide/display telerik textbox?

 

[arnaud]

Hi,

You could try this way :

<script type="text/javascript">

var txt_cancel_box = null;

function Loadtxt_cancel(sender, args) {
                txt_cancel_box = sender;
            }

function IsCanceledChange() {
                var chk_IsCancel = GetGridServerElement("chk_IsCancel", "input");
                if (chk_IsCancel.checked == true)
                    txt_cancel_box.set_visible(true);
                else
                    txt_cancel_box.set_visible(false);
            }

function GetGridServerElement(serverID, tagName) {
                if (!tagName)
                    tagName = "*"; //* means all elements

                var grid = $get("<%=RadGrid1.ClientID %>");
                var elements = grid.getElementsByTagName(tagName);
                for (var i = 0; i < elements.length; i++) {
                    var element = elements[i];
                    if (element.id.indexOf(serverID) >= 0)
                        return element;
                }
            }
</script>

<FormTemplate> <asp:CheckBox ID="chk_IsCancel" runat="server" onclick="IsCanceledChange()" />

<telerik:RadTextBox ID="txt_Cancel" runat="server">

<ClientEvents OnLoad="Loadtxt_cancel" />

</telerik:RadTextBox>

<script type="text/javascript">

registeredElements.push('<%# Container.FindControl("chk_IsCancel").ClientID %>');

</script> </FormTemplate>

Regards,
Arnaud Boiselle

[Sundar Ramadoss]

Hi Arnaud,

I am trying a sample program, to get the textbox (declared in the Form Template of Radgrid) reference in the client code. When I execute your code, it is not calling Loadtxt_cancel and the value for the txt_cancel_box is always null.

It will be very much helpful, if you can attach a sample project. I am trying to access the text box in the row_click of the radgrid.

Thanks,
Sundar

[Shinu]

Hello Sundar,

I guess you want to access the RadTextBox in editform when clicking on another row in RadGrid. If so you can try the folowing code snippet.
ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server">
    <MasterTableView CommandItemDisplay="Top" DataKeyNames="EmployeeID">
        <Columns>
           .   .   .   .    .   .   .   .
        </Columns>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <telerik:RadTextBox ID="txt_Cancel" runat="server">
                    <ClientEvents OnLoad="Loadtxt_cancel" />
                </telerik:RadTextBox>
           </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnRowClick="RowClick" />
    </ClientSettings>
</telerik:RadGrid>

Java Script:

<script type="text/javascript">
    var txt_cancel_box = null;
    function Loadtxt_cancel(sender, args) {
        txt_cancel_box = sender;
    }
    function RowClick(sender, args) {
           .  .   .   .   .   .
          txt_cancel_box.set_visible(false);
    }
</script>

Another option is storing the ClientID of RadTextBox in a HiddenField variable when the grid is in edit mode. Then in RowClick event access the TextBox using Hiddenfield.

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
       {
           GridEditFormItem item = e.Item as GridEditFormItem;
           RadTextBox txtbox = (RadTextBox)item.FindControl("txt_Cancel");
           HiddenField1.Value = txtbox.ClientID;
        }
   }

<script type="text/javascript">
    function RowClick(sender, args) {
         var txtbox = $find(document.getElementById('HiddenField1').value);
    }
</script>

-Shinu.

[Sundar Ramadoss]

Thanks Shinu.
My problem is I am trying to access the Edit Form Textbox in RowClick. I changed my logic to Load event and it worked fine. Thanks for your help.
Now, I am stuck up with selecting the group of columns and assigning color to that. Like in excel worksheet. if you can direct me to the right place will be of much helpful.
Thanks,
Sundar

[Shinu]

Hello Sundar,

If you want to set background color for columns when clicking on the column header, try the following code snippet.
C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridHeaderItem)
       {
           GridHeaderItem headerItem = (GridHeaderItem)e.Item;
           foreach (GridColumn col in RadGrid1.Columns)
           {
               headerItem[col.UniqueName].Attributes.Add("onclick", "headerClick('" + col.UniqueName + "');");
           }
       }
   }

Java Script:

<script type="text/javascript">
     function headerClick(colname) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        for (var i = 0; i < length; i++) {
            MasterTable.get_dataItems()[i].get_cell(colname).style.backgroundColor = "red";
            MasterTable.get_dataItems()[i].get_cell(colname).style.backgroundImage = "none";
        }
     }
</script>

-Shinu.

[Sundar Ramadoss]

Thanks Shinu.

In the last moment my requirement is changed. Now on right click of the cell, display the colors and set the selected color to the cell.

I have fixed that on Row Context click. Below is the code I used for it.

function

 

OnClientItemClicked(sender, eventArgs){

    rowindex = eventArgs.get_itemIndexHierarchical();

    columnName = eventArgs.get_tableView().get_columns()[cellIndexGroupRowContext].get_uniqueName();

    $find("RadGrid").get_masterTableView().getCellByColumnUniqueName($find("RadGrid").get_masterTableView().get_dataItems()[rowindex], columnName).bgColor = eventArgs.get_item().get_text();
}

Thanks,
Sundar