Retrieve RadGrid Template Column Textboxes via Client Side

6 posts, 1 answers
  1. Atlas
    Atlas avatar
    10 posts
    Member since:
    Nov 2012

    Posted 17 Dec 2012 Link to this post

    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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Dec 2012 Link to this post

    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.
  3. Atlas
    Atlas avatar
    10 posts
    Member since:
    Nov 2012

    Posted 18 Dec 2012 Link to this post

    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>
  4. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Dec 2012 Link to this post

    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.
  5. Atlas
    Atlas avatar
    10 posts
    Member since:
    Nov 2012

    Posted 19 Dec 2012 Link to this post

    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.
  6. Atlas
    Atlas avatar
    10 posts
    Member since:
    Nov 2012

    Posted 19 Dec 2012 Link to this post

    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!
Back to Top