Retrieve RadGrid Template Column Textboxes via Client Side

[Atlas]

Hello!

I've spent quite a bit of time researching this, but could not find a solution - so please forgive me if I'm posting a new thread on something that has already been answered.

The functionality I'm looking for is to simply enable/disable a textbox inside of a template column that belongs to a radgrid on that radgrid's client event: OnRowSelected (using a GridClientSelectColumn). I understand how to retrieve actual values via ClientDataKeyNames, but I'm looking to just manipulate the actual textbox control - not retrieve any values. Is there anything you could point me to in order to get me going in the right direction? Any help is greatly appreciated!

(Desired behavior: OnRowSelected --> txtScore.disabled = false;)

Here's my radgrid:

<telerik:RadGrid runat="server" ID="gridEmployees" AllowMultiRowSelection="true"
           OnNeedDataSource="gridEmployees_NeedDataSource" Width="25%" OnDataBinding="gridEmployees_DataBinding"
           AutoGenerateColumns="false" Style="margin: 10px auto 0px auto;" GridLines="None"
           Skin="WebBlue" EnableAJAX="true" ClientSettings-EnablePostBackOnRowClick="false">
           <MasterTableView Name="EmployeeTable" ClientDataKeyNames="EmployeeID, FirstName"
               DataKeyNames="EmployeeID" AllowMultiColumnSorting="False">
               <Columns>
                   <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">
                   </telerik:GridClientSelectColumn>
                   <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="Employee" AllowFiltering="true"
                       HeaderButtonType="TextButton" DataField="FirstName" UniqueName="FirstName" FilterControlWidth="65px" />
                   <telerik:GridTemplateColumn HeaderText="Score">
                       <ItemStyle Width="100px" />
                       <ItemTemplate>
                           <telerik:RadTextBox ID="txtScore" runat="server" Enabled="false" />
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
                   <telerik:GridTemplateColumn HeaderText="Notes">
                       <ItemStyle Width="100px" />
                       <ItemTemplate>
                           <telerik:RadTextBox ID="txtNotes" runat="server" Enabled="false" />
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
                   <telerik:GridTemplateColumn HeaderText="Failed">
                       <ItemStyle Width="20px" />
                       <ItemTemplate>
                           <asp:CheckBox ID="chkFailed" Text="" runat="server" Enabled="false" />
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
               </Columns>
           </MasterTableView>
           <ClientSettings EnableRowHoverStyle="true">
               <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
               <ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" />
           </ClientSettings>
       </telerik:RadGrid>

[Shinu]

Hi,

Try the following code to achieve your scenario.
JS:

function OnRowSelected(sender, args)
 {
        var masterTable = sender.get_masterTableView();
        var row = masterTable.get_dataItems();
        for (var i = 0; i < row.length; i++)
       {
            masterTable.get_dataItems()[i].findControl("txtNotes").set_enabled(false);
        }
}

Thanks,
Shinu.

[Atlas]

Hi Shinu,

Thank you for your reply! That didn't seem to work. The JS you provided did not successfully disable/enable the Notes textbox. It was able to successfully traverse the different rows. I also just want to disable/enable the Notes textbox only on the row being selected, not all of the rows.

Here's a little more information about my solution that may help. That radgrid that I posted above sits on a web user control that is used as an editform for a radgrid on its parent page. On my web user control that contains the radgrid (gridEmployees) shown above, I have a radscriptblock which contains the JavaScript that I'm using to attempt to disable/enable txtNotes on row select. I also have a RadAjaxManagerProxy as displayed here:

<telerik:RadAjaxManagerProxy ID="ctrlAjaxManager" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="gridEmployees">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="gridEmployees" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

[Shinu]

Hi,

Try the following code to achieve your scenario.
JS:

function OnRowSelected(sender, args)
    {
      var masterTable = sender.get_masterTableView();
       masterTable.get_dataItems()[args.get_itemIndexHierarchical()].findControl("txtNotes").set_enabled(false);

   }

Thanks,
Shinu.

[Atlas]

Shinu,

That worked perfectly, but it unfortunately uncovered another issue. The textbox (when disabling through your method) looks disabled and the mouse-over icon implies it's disabled, but it still allows a user to click within the textbox and enter text. I tried to set it to readOnly = true, but that didn't work either. Any ideas?

I've included a before and after screen capture. In the 'after' screenshot, I was able to type in the disabled textbox after it was disabled through your code snippet.

[Atlas]

The following gave me the desired functionality of disabling the textbox and preventing a user from entering values into the input:

function RowSelected(sender, eventArgs) {
            var masterTable = sender.get_masterTableView();
            masterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()].findControl("txtNotes").disable();
        }

Thank you for all your help Shinu!