Get current RowID of RadGrid on OnClientSelectedIndexChanged event of RadComboBox in a GridTemplateColumn

19 posts, 0 answers
  1. Travis Lamkin
    Travis Lamkin avatar
    3 posts
    Member since:
    May 2010

    Posted 20 May 2010 Link to this post

    Telerik Support,

    I have a RadGrid in Edit mode. The RadGrid has several GridTemplateColumn columns containing both RadComboBox and RadTextBox controls.

    On the OnClientSelectedIndexChanged event of the RadComboBox column, I need to interact with the RadTextBox and RadComboBox controls in the other GridTemplateColumn(s) on the current RadGrid row. To accomplish this I will need the IndexID of the RadGrid row containing the RadComboBox control that the user changed the value of. However, I cannot find a good way to discover the row's IndexID inside the OnClicentSelectedIndexChanged event.

    Can you suggest a possible solution for this challenge?

    Please note that my business requirements state the solution must be entirely client-side (no AJAX postbacks).

    Thanks in advance for your help,
    Wes
  2. Martin
    Admin
    Martin avatar
    811 posts

    Posted 26 May 2010 Link to this post

    Hello Wes Kennedy,

    You do not need the item id in order to achieve the desired functionality. Additionally note that when you use in-forms edit mode, the edited item does not have an id.

    Instead I would suggest that you try the following approach:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script type="text/javascript">
            function RadComboBox1_SelectedIndexChanged(sender, args)
            {
                var node = getElement(sender.get_element());
     
                var foundElement = null;
                while (node)
                {
                    foundElement = $telerik.findElement(node, "TextBox1");
                    if (foundElement)
                        break;
                    node = getElement(node.parentNode);
                }
     
                if (foundElement)
                    foundElement.value = args.get_item().get_text();
            }
            function getElement(element)
            {
                return Telerik.Web.UI.Grid.GetFirstParentByTagName(element, "tr");
            }
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView>
            <Columns>
                <telerik:GridEditCommandColumn UniqueName="EditCol" ButtonType="ImageButton">
                </telerik:GridEditCommandColumn>
                <telerik:GridBoundColumn DataField="ID" HeaderText="RowNumber" UniqueName="ID" ReadOnly="true">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="TextBoxColumn" HeaderText="TextBox Column"
                    AllowFiltering="false">
                    <EditItemTemplate>
                        <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="ComboColumn" HeaderText="ComboColumn">
                    <EditItemTemplate>
                        <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
                            <Items>
                              <telerik:RadComboBoxItem Text="1" Value="1" />
                              <telerik:RadComboBoxItem Text="2" Value="2" />
                              <telerik:RadComboBoxItem Text="3" Value="3" />
                            </Items>
                        </telerik:RadComboBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <EditFormSettings>
                <EditColumn ButtonType="ImageButton" />
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>


    Code behind:

    protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        for (int i = 0; i < 10; i++)
        {
            table.Rows.Add(i);
        }
        RadGrid1.DataSource = table;
    }

    I hope this helps,
    Martin
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Karl Wilkens
    Karl Wilkens avatar
    206 posts
    Member since:
    Oct 2012

    Posted 13 Apr 2011 Link to this post

    Hi,

    I have a slightly different scenario in that I need the Row of the combobox not in edit mode but as part of the regular ItemDisplay. I would like a RadComboBox to, when selectedIndexChanged fires on the client side, be able to highlight the row of the grid that the combobox resides in. Any assistance appreciated.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Apr 2011 Link to this post

    Hello Karl,

    You can achieve this by attaching 'onChange' client event to DropDownList by passing item index to event handler. In that event handler identify the corresponding row using this index value and then set the style for the row.
    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
       {
        if (e.Item is GridDataItem)
               {
                   GridDataItem item = (GridDataItem)e.Item;
                   DropDownList list = (DropDownList)item.FindControl("DropDownList1");//accessing the control
                   list.Attributes.Add("onChange", "OnSelectedIndexChange('" + item.ItemIndex + "');");//attatching the client side event.
               }
        }

    Javascript:
    function OnSelectedIndexChange(rowindex)
      {
          var grid = $find("<%=RadGrid1.ClientID %>");
          var MasterTable = grid.get_masterTableView();
          var row = MasterTable.get_dataItems()[rowindex];
          MasterTable.get_dataItems()[rowindex]._element.style.backgroundColor = "Yellow";
      }

    Thanks,
    Shinu.
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Apr 2011 Link to this post

    .
  7. Martin
    Admin
    Martin avatar
    811 posts

    Posted 14 Apr 2011 Link to this post

    Hello Karl Wilkens,

    You can use the approach demonstrated in my previous post along with RadGrid's set_activeRow client side property to achieve the desired functionality. Note that setting a row to be highlighted (active row) requires that you set ClientSettings-AllowKeyboardNavigation="true". Here is the modified code:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script type="text/javascript">
            function RadComboBox1_SelectedIndexChanged(sender, args)
            {
                var grid = $find("<%= RadGrid1.ClientID %>");
                var node = getElement(sender.get_element());
     
                var foundElement = null;
                while (node)
                {
                    foundElement = $telerik.findElement(node, "TextBox1");
                    if (foundElement)
                        break;
                    node = getElement(node.parentNode);
                }
                if (foundElement)
                {
                    grid.set_activeRow(node);
                }
            }
            function getElement(element)
            {
                return Telerik.Web.UI.Grid.GetFirstParentByTagName(element, "tr");
            }
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView>
            <Columns>
                <telerik:GridEditCommandColumn UniqueName="EditCol" ButtonType="ImageButton">
                </telerik:GridEditCommandColumn>
                <telerik:GridBoundColumn DataField="ID" HeaderText="RowNumber" UniqueName="ID" ReadOnly="true">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="TextBoxColumn" HeaderText="TextBox Column"
                    AllowFiltering="false">
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="ComboColumn" HeaderText="ComboColumn">
                    <ItemTemplate>
                        <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
                            <Items>
                                <telerik:RadComboBoxItem Text="1" Value="1" />
                                <telerik:RadComboBoxItem Text="2" Value="2" />
                                <telerik:RadComboBoxItem Text="3" Value="3" />
                            </Items>
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true"></ClientSettings>
    </telerik:RadGrid>

    I hope this helps.

    All the best,
    Martin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Karl Wilkens
    Karl Wilkens avatar
    206 posts
    Member since:
    Oct 2012

    Posted 14 Apr 2011 Link to this post

    Hi,

    Thanks! Initially missed the AllowKeyboardNavigation="True" part of your reply. Once I set that, it worked fine.
  9. Karl Wilkens
    Karl Wilkens avatar
    206 posts
    Member since:
    Oct 2012

    Posted 14 Apr 2011 Link to this post

    Hi, I am running into an unrelated issue on this. I need to get the Client datakeyvalue of the row that has just been selected via client script, but it appears that after you call

    grid.set_activeRow(node);

    The row is not selected as far as the rest of the client library is concerned.

    var MasterTable = grid.get_masterTableView();
    var selectedRows = MasterTable.get_selectedItems();
                       alert(selectedRows.length);

    results in zero and we can't get the datakeyvalues. Any thoughts?
  10. Martin
    Admin
    Martin avatar
    811 posts

    Posted 15 Apr 2011 Link to this post

    Hello Karl Wilkens,

    Your initial post requires that "I would like a RadComboBox to ... be able to highlight the row of the grid that the combobox resides in" which is different than selecting an item. That is why no items are selected.

    However, you can achieve item selection using exactly the the same approach. Just use the MasterTableView's selectItem method as demonstrated bellow:

    function RadComboBox1_SelectedIndexChanged(sender, args)
    {
        ...
        if (foundElement)
        {
            //grid.set_activeRow(node);
            grid.get_masterTableView().selectItem(node);
        }
    }

    Certainly the code above will require that you enable grid's client side selection:

    <ClientSettings Selecting-AllowRowSelect="true">
    </ClientSettings>

    I hope this helps.

    Best wishes,
    Martin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  11. TallOne
    TallOne avatar
    21 posts
    Member since:
    Aug 2009

    Posted 23 Apr 2011 Link to this post

    Hello,

    I've used the code provided to Wes Kennedy by Martin but I have one problem.  After the value of the textbox(RadNumericTextBox) is set, I cannot see the value until I set focus.  I try setting focus via javascript but the error tells me that the element is not visible.  Any ideas??  My grid uses multi-row update.

    Thanks,
    Jerry
  12. Martin
    Admin
    Martin avatar
    811 posts

    Posted 26 Apr 2011 Link to this post

    Hello Jerry,

    When RadNumericTextBox is used you should ensure that its value is set through the API of its client side object. The Telerik static client library could be helpful in this scenario. Here is how the modified code looks (the server side code is omitted because it is the same as in my first post):

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script type="text/javascript">
            function RadComboBox1_SelectedIndexChanged(sender, args)
            {
                var node = getElement(sender.get_element());
                var foundElement = null;
                while (node)
                {
                    foundElement = $telerik.findControl(node, "RadNumericTextBox1");
                    if (foundElement)
                        break;
                    node = getElement(node.parentNode);
                }
     
                if (foundElement)
                    foundElement.set_value(args.get_item().get_text());
            }
            function getElement(element)
            {
                return Telerik.Web.UI.Grid.GetFirstParentByTagName(element, "tr");
            }
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource"
        AllowMultiRowEdit="true" OnUpdateCommand="RadGrid1_UpdateCommand">
        <MasterTableView>
            <Columns>
                <telerik:GridEditCommandColumn UniqueName="EditCol" ButtonType="ImageButton">
                </telerik:GridEditCommandColumn>
                <telerik:GridBoundColumn DataField="ID" HeaderText="RowNumber" UniqueName="ID" ReadOnly="true">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="TextBoxColumn" HeaderText="TextBox Column"
                    AllowFiltering="false">
                    <EditItemTemplate>
                        <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox1">
                        </telerik:RadNumericTextBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="ComboColumn" HeaderText="ComboColumn">
                    <EditItemTemplate>
                        <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
                            <Items>
                                <telerik:RadComboBoxItem Text="1" Value="1" />
                                <telerik:RadComboBoxItem Text="2" Value="2" />
                                <telerik:RadComboBoxItem Text="3" Value="3" />
                            </Items>
                        </telerik:RadComboBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <EditFormSettings>
                <EditColumn ButtonType="ImageButton" />
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>

    I hope this helps.

    All the best,
    Martin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  13. TallOne
    TallOne avatar
    21 posts
    Member since:
    Aug 2009

    Posted 26 Apr 2011 Link to this post

    Thanks Martin! 

    That is exactly what I needed! Have a great day!

    Thanks,
    Jerry
  14. Ashwini
    Ashwini avatar
    2 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    Hello,

    I have radGrid which is always in edit Mode.Two radCombobox controls are in Template columns.Onselectedindexchaged event of first radcombo i want to disable second radcombo control.I need this to happen on client side.I have done this using below code.But i m unable to gray out the second radcombo box which is is disable mode.Please suggest some solution.

    function

     

    OnClientSelectedIndexChangingHandler(sender, args) {

    var node = getElement(sender.get_element());

    var foundElement = null;

    while (node) {

    foundElement = $telerik.findElement(node,

    "_drdActivityLevel");

    if (foundElement)

    break;

    node = getElement(node.parentNode);

    }

     

     

    if (foundElement && args.get_item().get_text() == 'Muscle - General') {

     foundElement.control._enabled = false;

     

     

     

     

     

    }

    }

    function getElement(element) {

    return Telerik.Web.UI.Grid.GetFirstParentByTagName(element, "tr");

    }


  15. BabaYa
    BabaYa avatar
    16 posts
    Member since:
    Dec 2011

    Posted 12 Jan 2012 Link to this post

    Hi

    I thik you have to use combo client object for thsi case:

    function RadComboBox1_SelectedIndexChanged(sender, args)
                {
                    var node = getElement(sender.get_element());
                    var foundElement = null;
                    while (node)
                    {
                        foundElement = $telerik.findControl(node, "RadComboBox2");
                        if (foundElement)
                            break;
                        node = getElement(node.parentNode);
                    }

                    if (foundElement)
                    {
                        if (args.get_item().get_text() == 'Muscle - General')
                        {
                            foundElement.disable();
                        }
                        else
                        {
                            foundElement.enable();
                        }
                    }
                }
                function getElement(element)
                {
                    return Telerik.Web.UI.Grid.GetFirstParentByTagName(element, "tr");
                }

    Thanks

    BabaYa
  16. Ashwini
    Ashwini avatar
    2 posts
    Member since:
    Jan 2012

    Posted 12 Jan 2012 Link to this post

    HI BabaYa,

    I have used the  OnClientSelectedIndexChanged event for first radcombobox control.
    When i call  foundElement.disable(); inside javascript i m getting javascript error.
    When i have used  foundElement.control._enabled = false its working but I am unable to grayed out the second combo control as i mentioned in previous post.

    .aspx page code

    <telerik:GridTemplateColumn UniqueName="DropDownTemp" ItemStyle-HorizontalAlign="Left"

    HeaderText="Activity">

    <ItemTemplate>

    <asp:Label ID="lblActivity" runat="server"></asp:Label>

    </ItemTemplate>

    <EditItemTemplate>

    <telerik:RadComboBox ID="_drdActivity" AutoPostBack="false" OnClientLoad="OnClientLoadActivity"

    runat="server" OnClientSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

    <Items>

    <telerik:RadComboBoxItem Text="Aerobics" Value="Aerobics" />

    <telerik:RadComboBoxItem Text="Muscle - General" Value="Muscle - General" />

    <telerik:RadComboBoxItem Text="Muscle - Upper Body" Value="Muscle - Upper Body" />

    <telerik:RadComboBoxItem Text="Rowing" Value="Rowing" />

    <telerik:RadComboBoxItem Text="Running" Value="Running" />

    </Items>

    </telerik:RadComboBox>

    </EditItemTemplate>

    </telerik:GridTemplateColumn>

    <telerik:GridTemplateColumn UniqueName="DropDownTemp1" ItemStyle-HorizontalAlign="Left"

    HeaderText="Level">

    <ItemTemplate>

    <asp:Label ID="lblActivityLevel" runat="server"></asp:Label>

    </ItemTemplate>

    <EditItemTemplate>

    <telerik:RadComboBox ID="_drdActivityLevel" runat="server" AutoPostBack="false" >

    <Items>

    <telerik:RadComboBoxItem Text="Please select-" />

    <telerik:RadComboBoxItem Text="Moderate" Value="Moderate" />

    <telerik:RadComboBoxItem Text="Vigorous" Value="Vigorous" />

    </Items>

    </telerik:RadComboBox>

  17. Retesh
    Retesh avatar
    1 posts
    Member since:
    Jan 2014

    Posted 14 Oct 2014 in reply to Martin Link to this post

    hi,
           My requirement is like this only, but i am using the Batch edit mode.
           This code do not work for the Batch editing.
    please, tell me is there any way to access the controls on this Batch edit mode.
    The node  values comes tr#gvItem_ctl00__-1.rgRow  as -1,-2,-3
    if i add the many rows in this mode.
    Please provide me the  solution for this.
    Thank you.
  18. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 17 Oct 2014 Link to this post

    Hi,

    In order to achieve your goal you can use the MasterTableView private method _getCellByColumnUniqueNameFromTableRowElement(trElement, "columnUniqueName").  Then you can use the BatchEditingManager to change the cell from the other column with the changeCellValue(cell, value) method.

    How these methods could be used is demonstrated below:
    var grid = $find("<%=RadGrid1.ClientID%>");
    var secondComboCell= grid.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(trElement, "columNUniqueName");
    var batchManager = grid.get_batchEditingManager();
    batchManager.changeCellValue(secondComboCell, someNewValue);

    More information for the batch editing is available here:
    http://www.telerik.com/help/aspnet-ajax/grid-batch-editing.html


    Regards,
    Pavlina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  19. Roberto
    Roberto avatar
    1 posts
    Member since:
    Dec 2015

    Posted 17 May in reply to Shinu Link to this post

    Hi Shinu,

    The previous post solved a similar problem that I had in my RadGrid.  The problem that I am encountering is when I publish my website, the functionality ceases to work.  I do not receive any run time errors to indicate a problem, it just simply does not seem to fire the OnSelectedIndexChange() function.  When I run my application within Visual Studio in debug mode under localhost, everything runs perfectly fine.  Have you ever encountered a similar issue?  Any suggestions would be greatly appreciated.

    Kind Regards,

    Roberto

  20. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 20 May Link to this post

    Hi Roberto,

    In case you are using IE browser, can you please check if it run in compatibility mode after deploying the application. If this is the case change the IIS settings to not force the compatibility mode of the browser and see how it goes.


    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017