Radcombo inside radgrid

[Regeesh Joseph]

Hai,

I have a radgrid. In the template field, I have a radcombobox. Radcombox is filled in the Itemdatabound event of grid.

When the user select an item in the combox, I want a javascript validation, whether the selected item is already selected in any other radcombox in any other row of the grid.

So in the OnClientSelectedIndexChanged event of Radcombo, how can I access radcomboboxes in other rows of the radgrid?

Please help me.

Thanks
Regeesh

[Thad]

Hi Regeesh Joseph,

Probably the easiest way to get this to work is to set the CssClass attribute of the RadComboBox in your grid to something unique.  For the sake of this sample, I used "MyCoolClassName".  Then you can use the following jQuery/JavaScript to accomplish what you desire.

Note: I am typing in notepad, so this is not tested.  I may have a typo or three.

function myCombo_ClientSelectedIndexChanged(sender, eventArgs) {

    var thisComboBoxId = sender.get_id();
    var thisValue = eventArgs.get_item().get_value();

    // loop through all of the comboboxes with our fun class name
    $('.MyCoolClassName').each(function(index, element)
    {
        // don't check the combobox that was just changed
        if (element.id != thisComboBoxId) {
            var otherCombobox = $find(element.id);
            if (otherComboBox.get_value() == thisValue) {
                alert('Whoops! That is already selected');
                return; // might as well bail
            }
        }
    });
}

Hopefully that helps you out!
Thad

[Regeesh Joseph]

Hai,

In this javascript, what is that 'index' and 'element' ? Is it the row index of grid? Anyway am getting an error as : 'otherCombobox' is undefined. Plz help.

Thanks
Regeesh

[Dimitar Terziev]

Hello Regeesh,

You could get reference to all comboboxes on the page using the following java script which will return an array of client-side objects:

Telerik.Web.UI.RadComboBox.ComboBoxes

Kind regards,
Dimitar Terziev
the Telerik team

[Thad]

Hello,

Dimitar - That is correct, it would, but unfortunately that would return all RadComboBox instances, not just the ones that are in the column of the RadGrid that he is trying to evaluate.  Using the Class name allows him to target only the instances he is interested in without having to filter the results.

Regeesh, In jQuery, the each() function exposes two parameters, index, and Element.  http://api.jquery.com/each/
index is the ordinal position within the results, starting at 0
Element is the DOM element that is being evaluated.  It is the same as using the "this" identifier.

In this case, you could ignore these parameters and just use "this" instead, but I included the parameters for demonstration purposes.  Here is the shortened version of the code:

$('.MyCoolClassName').each(function()
{
    // don't check the combobox that was just changed
    if (this.id != thisComboBoxId) {
        var otherCombobox = $find(this.id);
        if (otherComboBox.get_value() == thisValue) {
            alert('Whoops! That is already selected');
            return; // might as well bail
        }
    }
});

Could you post the JavaScript you have and the declaration for the RadComboBox so that we can better evaluate what is going on?

Thanks,
Thad

[Regeesh Joseph]

Hai,

function

 

rcbRating_ClientSelectedIndexChanged(sender, eventArgs) {

 

 

    var thisComboBoxId = sender.get_id();

 

 

    var thisValue = eventArgs.get_item().get_value();

 

 

    debugger;

 

 

    // loop through all of the comboboxes with our fun class name

 

    $(

'.MyCoolClassName').each(function(index, element) {

 

 

        // don't check the combobox that was just changed

 

 

            if (element.id != thisComboBoxId) {

 

 

            var otherCombobox = $find(this.id);

 

 

            if (otherComboBox.get_value() == thisValue) {

 

            alert(

'This rating is already selected');

 

 

            return; // might as well bail

 

            }

        }

});

}

 

<

 

telerik:GridTemplateColumn HeaderText="Priority" Visible="true" >

 

 

 

 

 

    <HeaderStyle HorizontalAlign="Center" Font-Bold="true" Width="7%" />

 

 

 

 

 

    <ItemStyle HorizontalAlign="Center" Width="7%"></ItemStyle>

 

 

 

 

 

    <ItemTemplate>

 

 

 

 

 

    <telerik:RadComboBox ID="rcbRating" runat="server" CssClass="MyCoolClassName" AutoPostBack="true" DataTextField="Priority"

 

 

 

 

 

    DataValueField="Priority" DropDownWidth="70px" ShowToggleImage="true" AllowCustomText="True"

 

 

 

 

 

    MarkFirstMatch="False" HighlightTemplatedItems="True" TabIndex="2" Width="70px"

 

 

 

 

 

    EmptyMessage="-Select-" EnableLoadOnDemand="True" Skin="Web20" ToolTip="Please Select Priority"

 

 

 

 

 

    OnClientSelectedIndexChanged="rcbRating_ClientSelectedIndexChanged">

 

 

 

 

 

    </telerik:RadComboBox>

 

 

 

 

 

    <input id="hidSelectedPriority" type="hidden" runat="server" value='<%#Eval("Priority") %>' />

 

 

 

 

 

    </ItemTemplate>

 

 

 

 

 

</telerik:GridTemplateColumn>

Thanks
Regeesh