Unable to Find Control in Grid cell

[farzad]

Hi,

I'm using

I have a grid view with template columns containing Numeric TextBox as shown below

<telerik:RadGrid ShowStatusBar="True" ID="RadGrid1" runat="server" CellSpacing="0"<br>                    DataSourceID="SqlDataSource3" GridLines="None" AutoGenerateColumns="False" Width="100%"><br>                    <ClientSettings EnableRowHoverStyle="true"><br>                        <ClientEvents OnColumnDblClick="ColumnClick" OnRowDblClick="handleRowClick" /><br>                    </ClientSettings><br>                    <MasterTableView DataSourceID="SqlDataSource3" DataKeyNames="periodID" Dir="RTL"><br>                        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings><br>                        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"><br>                        </RowIndicatorColumn><br>                        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"><br>                        </ExpandCollapseColumn><br>                        <Columns><br>                            <telerik:GridBoundColumn DataField="PeriodName" FilterControlAltText="Filter PeriodName column"<br>                                ItemStyle-Width="100px" UniqueName="PeriodName" HeaderText="ساعت/روز"><br>                                <ItemStyle Width="100px"></ItemStyle><br>                            </telerik:GridBoundColumn><br>                            <telerik:GridTemplateColumn HeaderText="شنبه" UniqueName="col1"><br>                                <ItemTemplate><br>                                    <telerik:RadNumericTextBox ID="txtCostGrid1" runat="server" Culture="en-US" LabelWidth="64px"<br>                                        Width="50px" MaxValue="100" MinValue="0"><br>                                        <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat><br>                                    </telerik:RadNumericTextBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn><br>                            <telerik:GridTemplateColumn HeaderText="یکشنبه" UniqueName="col2"><br>                                <ItemTemplate><br>                                    <telerik:RadNumericTextBox ID="txtCostGrid2" runat="server" Culture="en-US" LabelWidth="64px"<br>                                        Width="50px" MaxValue="100" MinValue="0"><br>                                        <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat><br>                                    </telerik:RadNumericTextBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn><br>                            <telerik:GridTemplateColumn HeaderText="دوشنبه" UniqueName="col3"><br>                                <ItemTemplate><br>                                    <telerik:RadNumericTextBox ID="txtCostGrid3" runat="server" Culture="en-US" LabelWidth="64px"<br>                                        Width="50px" MaxValue="100" MinValue="0"><br>                                        <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat><br>                                    </telerik:RadNumericTextBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn><br>                            <telerik:GridTemplateColumn HeaderText="سه شنبه" UniqueName="col4"><br>                                <ItemTemplate><br>                                    <telerik:RadNumericTextBox ID="txtCostGrid4" runat="server" Culture="en-US" LabelWidth="64px"<br>                                        Width="50px" MaxValue="100" MinValue="0"><br>                                        <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat><br>                                    </telerik:RadNumericTextBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn><br>                            <telerik:GridTemplateColumn HeaderText="چهارشنبه" UniqueName="col5"><br>                                <ItemTemplate><br>                                    <telerik:RadNumericTextBox ID="txtCostGrid5" runat="server" Culture="en-US" LabelWidth="64px"<br>                                        Width="50px" MaxValue="100" MinValue="0"><br>                                        <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat><br>                                    </telerik:RadNumericTextBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn><br>                            <telerik:GridTemplateColumn HeaderText="پنجشنبه" UniqueName="col6"><br>                                <ItemTemplate><br>                                    <telerik:RadNumericTextBox ID="txtCostGrid6" runat="server" Culture="en-US" LabelWidth="64px"<br>                                        Width="50px" MaxValue="100" MinValue="0"><br>                                        <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat><br>                                    </telerik:RadNumericTextBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn><br>                            <telerik:GridTemplateColumn HeaderText="جمعه" UniqueName="col7"><br>                                <ItemTemplate><br>                                    <telerik:RadNumericTextBox ID="txtCostGrid7" runat="server" Culture="en-US" LabelWidth="64px"<br>                                        Width="50px" MaxValue="100" MinValue="0"><br>                                        <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat><br>                                    </telerik:RadNumericTextBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn><br>                        </Columns><br>                        <EditFormSettings><br>                            <EditColumn FilterControlAltText="Filter EditCommandColumn column"><br>                            </EditColumn><br>                        </EditFormSettings><br>                    </MasterTableView><br>                    <FilterMenu EnableImageSprites="False"><br>                    </FilterMenu><br>                </telerik:RadGrid>

I wanted to set value of whole row textboxes to 50 on First Column of Row double click.
and set value of whole column textboxes to 50 on column double click.

I wrote the following JScript and I managed to do the first issue right. But for second problem which was column double click I don't know how to find the text box control inside column cell.

 function ColumnClick(sender, eventArgs) {<br><br>            var radG = $find("<%=RadGrid1.ClientID %>");<br>            var DataItems = radG.get_masterTableView().get_dataItems();<br>            var masterTableView = radG.get_masterTableView();<br>            for (i = 0; i < DataItems.length; i++) {<br>                var row = DataItems[i];<br>                var cell = masterTableView.getCellByColumnUniqueName(row, "col" + eventArgs.get_domEvent().target.cellIndex);<br>                var radTextBox1 = cell.getElementsByTagName("input")[0];<br>                radTextBox1.set_value(50);<br>            }<br>        }<br>        function getHeaderRow(sender) {<br>            var masterTable = sender.get_masterTableView();<br>            return masterTable.HeaderRow == null ? sender.get_masterTableViewHeader().get_element() : masterTable.HeaderRow;<br>        }<br><br>        function handleRowClick(sender, args) {<br>            var masterTable = sender.get_masterTableView();<br>            var cellIndex = args.get_domEvent().target.cellIndex;<br>            var colName = masterTable.getColumnUniqueNameByCellIndex(getHeaderRow(sender), cellIndex)<br>            if (colName == "PeriodName") {<br>                for (var i = 1; i < 8; i++) {<br>                    var radTextBox1 = args.get_item().findControl("txtCostGrid" + i);<br>                    radTextBox1.set_value(50);<br>                }<br>            }<br>        }

If I use the following code I will see the value inside TextBox but the value is not available server side.

var el = document.getElementsByTagName('input');<br>                    var len = el.length;<br>                    for (var i = 0; i < len; i++) {<br>                        if ((el[i].type == "text")) {<br>                            if (el[i].name.indexOf("txtCostGrid" + eventArgs.get_gridColumn().get_element().cellIndex) != -1) {<br>                                el[i].value=50;<br>                            }<br>                        }<br>                    }

Thanks for your help

[Jayesh Goyani]

Hello,

<telerik:RadGrid ShowStatusBar="True" ID="RadGrid2" runat="server" CellSpacing="0"
          OnNeedDataSource="RadGrid2_NeedDataSource" GridLines="None" AutoGenerateColumns="False"
          Width="100%">
          <ClientSettings EnableRowHoverStyle="true">
              <ClientEvents OnColumnDblClick="ColumnClick" OnRowDblClick="handleRowClick" />
          </ClientSettings>
          <MasterTableView DataKeyNames="ID">
              <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
              <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
              </RowIndicatorColumn>
              <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
              </ExpandCollapseColumn>
              <Columns>
                  <telerik:GridBoundColumn DataField="Name" FilterControlAltText="Filter PeriodName column"
                      ItemStyle-Width="100px" UniqueName="PeriodName" HeaderText="AAA">
                      <ItemStyle Width="100px"></ItemStyle>
                  </telerik:GridBoundColumn>
                  <telerik:GridTemplateColumn HeaderText="abc" UniqueName="col1">
                      <ItemTemplate>
                          <telerik:RadNumericTextBox ID="txtCostGrid1" runat="server" Culture="en-US" LabelWidth="64px"
                              Width="50px" MaxValue="100" MinValue="0">
                              <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat>
                          </telerik:RadNumericTextBox>
                      </ItemTemplate>
                  </telerik:GridTemplateColumn>
                  <telerik:GridTemplateColumn HeaderText="xyz" UniqueName="col2">
                      <ItemTemplate>
                          <telerik:RadNumericTextBox ID="txtCostGrid2" runat="server" Culture="en-US" LabelWidth="64px"
                              Width="50px" MaxValue="100" MinValue="0">
                              <NumberFormat ZeroPattern="n %" DecimalDigits="0"></NumberFormat>
                          </telerik:RadNumericTextBox>
                      </ItemTemplate>
                  </telerik:GridTemplateColumn>
              </Columns>
              <EditFormSettings>
                  <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                  </EditColumn>
              </EditFormSettings>
          </MasterTableView>
          <FilterMenu EnableImageSprites="False">
          </FilterMenu>
      </telerik:RadGrid>
      <asp:Button ID="Button1" runat="server" Text="get textbox value on server side"
          onclick="Button1_Click" />

function handleRowClick(sender, args) {

                var MasterTable = sender.get_masterTableView();
                var Rows = MasterTable.get_dataItems();
                var row = Rows[args._itemIndexHierarchical];
                row.findControl("txtCostGrid1").set_value(50);
                row.findControl("txtCostGrid2").set_value(50);
            }

            function ColumnClick(sender, args) {
                var MasterTable = sender.get_masterTableView();
                var Rows = MasterTable.get_dataItems();
                for (var i = 0; i < Rows.length; i++) {
                    var row = Rows[i];
                    var txtId = row.get_cell(args._gridColumn.get_uniqueName()).getElementsByTagName('input')[0].id;
                    var txt = $find(txtId);
                    txt.set_value(50);
                }

            }

protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
  {
      dynamic data = new[] {
          new { ID = 1, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(1)},
          new { ID = 2, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(2)},
          new { ID = 3, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(3)},
           new { ID = 4, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(4)},
          new { ID = 5, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(5)},
           new { ID = 6, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(6)},
          new { ID = 7, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(7)},
          new { ID = 8, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(8)},
           new { ID = 9, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(9)},
          new { ID = 10, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(10)},
           new { ID = 11, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(11)},
          new { ID = 12, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(12)},
          new { ID = 13, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(13)},
           new { ID = 14, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(14)},
          new { ID = 15, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(150)}

      };

      RadGrid2.DataSource = data;

  }
  protected void Button1_Click(object sender, EventArgs e)
  {
      foreach (GridDataItem item in RadGrid2.MasterTableView.Items)
      {
          Response.Write((item.FindControl("txtCostGrid1") as RadNumericTextBox).Value + ":" + (item.FindControl("txtCostGrid2") as RadNumericTextBox).Value);
          Response.Write("<br/>");
      }
  }

Note : i have used jquery.

For more info. about how to access grid on client please check below link.
http://jayeshgoyani.blogspot.in/2012/07/access-radgrid-on-client.html

Thanks,
Jayesh Goyani

[farzad]

Thanks Jayesh,

Your code does the trick with some changes.

[farzad]

Another similar problem is I have a grid full of check boxes. I want to enable on rowclick event for first column to check all related check boxes in the same row. It doesn't seem difficult but my code is not working. would anyone please implement the desired functionality?

My grid columns are like this:

<Columns>
                            <telerik:GridBoundColumn DataField="PeriodName" FilterControlAltText="Filter PeriodName column"
                                ItemStyle-Width="100px" UniqueName="PeriodName" HeaderText="Day/Time">
                                <ItemStyle Width="100px"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Saturday">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chk1" runat="server"/>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Sunday">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chk2" runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
 </Columns>

Thanks for your concern

[Shinu]

Hi,

Try the following javascript to achieve your scenario.
JS:

  function OnRowClick(sender, args) {
    var masterTable = sender.get_masterTableView();
    masterTable.get_dataItems()[args.get_itemIndexHierarchical()].findElement("chk1").checked = true;
    masterTable.get_dataItems()[args.get_itemIndexHierarchical()].findElement("chk2").checked = true;
}

Thanks,
Shinu.

[farzad]

Thanks Shinu