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

Unable to Find Control in Grid cell

5 Answers 303 Views
Grid
This is a migrated thread and some comments may be shown as answers.
farzad
Top achievements
Rank 1
farzad asked on 30 Dec 2012, 09:47 AM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Jan 2013, 05:17 AM
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
0
farzad
Top achievements
Rank 1
answered on 02 Jan 2013, 12:19 PM
Thanks Jayesh,

Your code does the trick with some changes.
0
farzad
Top achievements
Rank 1
answered on 03 Jan 2013, 08:22 AM
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
0
Accepted
Shinu
Top achievements
Rank 2
answered on 03 Jan 2013, 09:01 AM
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.
0
farzad
Top achievements
Rank 1
answered on 03 Jan 2013, 09:44 AM
Thanks Shinu
Tags
Grid
Asked by
farzad
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
farzad
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or