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

[Travis Lamkin]

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

[Martin]

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.

[Karl Wilkens]

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.

[Shinu]

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.

[Shinu]

.

[Martin]

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

[Karl Wilkens]

Hi,

Thanks! Initially missed the AllowKeyboardNavigation="True" part of your reply. Once I set that, it worked fine.

[Karl Wilkens]

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?

[Martin]

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

[TallOne]

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

[Martin]

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

[TallOne]

Thanks Martin! 

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

Thanks,
Jerry

[Ashwini]

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");

}

[BabaYa]

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

[Ashwini]

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>

[Retesh]

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.

[Pavlina]

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

 

 

[Roberto]

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

[Maria Ilieva]

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