Radcombo inside radgrid

6 posts, 0 answers
  1. Regeesh Joseph
    Regeesh Joseph avatar
    55 posts
    Member since:
    May 2010

    Posted 15 Oct 2011 Link to this post

    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
  2. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 18 Oct 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Regeesh Joseph
    Regeesh Joseph avatar
    55 posts
    Member since:
    May 2010

    Posted 19 Oct 2011 Link to this post

    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
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 19 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 19 Oct 2011 Link to this post

    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
  7. Regeesh Joseph
    Regeesh Joseph avatar
    55 posts
    Member since:
    May 2010

    Posted 19 Oct 2011 Link to this post

    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

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017