RadGrid inside RadComboBox

8 posts, 1 answers
  1. Pete
    Pete avatar
    25 posts
    Member since:
    Jun 2008

    Posted 06 Oct 2008 Link to this post

    Hi,

    Can you help me with the following.

    I'am using the RadGrid inside the RadComboBox itemtemplate and I have problems with setting the combobox selected text/value on grid's OnRowSelected client side event. When I select a row from grid after the page has been loaded then the combobox selected text will be every grid row's values concatenated but when I select a new row after that then the selected text will be displayed correctly. Can you tell me why this happens?

    I also want to access the combobox selected text/value on server side after postback. I added trackChanges() and commitChanges() methods like below but still the combo.ClientChanges count property is 0 e.g. after asp:button click.

    Grid is grouped by two columns, so is it possible to configure combobox so that if user clicks the category row then combobox should not be closed?


    <rad:RadCodeBlock ID="codeBlock" runat="server">  
        <script type="text/javascript">  
     
            function onRowSelected(sender, args)   
            {  
                var selectedText = args.getDataKeyValue("TypeName");  
                var selectedValue = args.getDataKeyValue("ID");  
     
                var combo = $find("rcb");  
     
                if (selectedValue.length > 0)   
                {  
                    combo.trackChanges();  
                    combo.set_text(selectedText);  
                    combo.set_value(selectedValue);  
                    combo.commitChanges();  
                    combo.hideDropDown();  
                }  
            }  
              
        </script> 
    </rad:RadCodeBlock> 
     
    <rad:RadComboBox ID="rcb" runat="server" Width="400px">  
        <Items> 
            <rad:RadComboBoxItem Selected="true" /> 
        </Items> 
        <ItemTemplate> 
            <rad:RadGrid    ID="rgRiskClasses"   
                            runat="server"   
                            Skin="Web20" 
                            OnItemCommand="rgRiskClasses_ItemCommand">  
     
                <MasterTableView    AutoGenerateColumns="false"   
                                    GroupLoadMode="Client"   
                                    GroupsDefaultExpanded="true" 
                                    ClientDataKeyNames="ID,TypeName">  
                    <Columns> 
                        <rad:GridBoundColumn DataField="id"></rad:GridBoundColumn> 
                        <rad:GridBoundColumn DataField="TypeName"></rad:GridBoundColumn> 
                    </Columns> 
                      
                    <GroupByExpressions> 
                        <rad:GridGroupByExpression> 
                            <GroupByFields> 
                                <rad:GridGroupByField FieldName="CategoryName" /> 
                            </GroupByFields> 
                            <SelectFields> 
                                <rad:GridGroupByField FieldName="CategoryName" /> 
                            </SelectFields> 
                        </rad:GridGroupByExpression> 
                        <rad:GridGroupByExpression> 
                            <GroupByFields> 
                                <rad:GridGroupByField FieldName="ClassName" /> 
                            </GroupByFields> 
                            <SelectFields> 
                                <rad:GridGroupByField FieldName="ClassName" /> 
                            </SelectFields> 
                        </rad:GridGroupByExpression> 
                    </GroupByExpressions> 
                </MasterTableView> 
                <ClientSettings AllowGroupExpandCollapse="false">  
                    <Selecting AllowRowSelect="True" /> 
                    <ClientEvents OnRowSelected="onRowSelected" /> 
                </ClientSettings> 
            </rad:RadGrid> 
        </ItemTemplate> 
     
    </rad:RadComboBox> 

    Thanks,
    Pete
  2. Rosi
    Admin
    Rosi avatar
    2527 posts

    Posted 06 Oct 2008 Link to this post

    Hello Pete,

    I suggest you try the following:

    1. Set the AutoPostBack property of RadComboBox to true.

    2. Edit your javascript code by the following way:
     function onRowSelected(sender, args)      
            {     
                var selectedText = args.getDataKeyValue("TypeName");     
                var selectedValue = args.getDataKeyValue("ID");     
        
                var combo = $find("rcb");     
        
                if (selectedValue.length > 0)      
                {     
                    combo.trackChanges();     
                    combo.set_text(selectedText);     
                    combo.findItemByBalue(selectedValue).select();     
                    combo.commitChanges();     
                    combo.hideDropDown();     
                }     
            }     
                 
     

    3. Try to access the text and value of RadComboBox on the server like this: rcb.Text and rcb.SelectedValue

    Also you can prevent RadComboBox from closing when the row is clicked if you set the CloseDropDownOnBlur property of RadComboBox to false. You can also set it again to true using javascript when you need it by the following code combo.set_closeDropDownOnBlur(true)

    Regards,
    Rosi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pete
    Pete avatar
    25 posts
    Member since:
    Jun 2008

    Posted 06 Oct 2008 Link to this post

    Hi,

    Thanks for your quick response!

    I tried what you suggested but unfortunately it didn't help. I got this error -> Microsoft JScript runtime error: 'findItemByValue(...)' is null or not an object when I added the following code.

    combo.findItemByBalue(selectedValue).select();     

    combo.findItemByValue(selectedValue) returns null, so the value is not set using set_value(selectedValue).


    3. Try to access the text and value of RadComboBox on the server like this: rcb.Text and rcb.SelectedValue

    Both of these properties are empty after I have selected a row from RadGrid.


    - Pete -
  5. Answer
    Rosi
    Admin
    Rosi avatar
    2527 posts

    Posted 07 Oct 2008 Link to this post

    Hello Pete,

    Could you please try the following code and let us know how this goes?:

            function onRowSelected(sender, args)      
            {     
                var selectedText = args.getDataKeyValue("TypeName");     
                var selectedValue = args.getDataKeyValue("ID");     
        
                var combo = $find("rcb");     
        
                if (selectedValue.length > 0)      
                {     
                   combo.trackChanges();     
                   combo.set_text(selectedText);     
                   combo.get_items().getItem(0).set_text = selectedText;  
                   combo.get_items().getItem(0).set_value(selectedValue);  
                   combo.commitChanges();     
                   combo.hideDropDown();     
                }     
            }   

    Regards,
    Rosi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Pete
    Pete avatar
    25 posts
    Member since:
    Jun 2008

    Posted 07 Oct 2008 Link to this post

    Hi,

    Yes, that worked. Thank you very much for your help!

    Best Regards,
    Pete
  7. Iggy
    Iggy avatar
    40 posts
    Member since:
    Jul 2005

    Posted 21 Jan 2009 Link to this post

    FYI... In case anybody else runs into this.

    I had the same issue but the solutions above did not resolve it.  The combobox text was being populated with text from all rows in the grid the very first time something was selected.  Then if you select another row it would work correctly.

    I was able to hack through it by doing the following in my OnRowSelected JS function:

    1. Create 2 variables outside the function.  One for the selectedText and one for the selectedCombo (since my comboboxes are created dynamically too and I have multiple combo controls on a page) and one of the selectedText to show in the combobox.

    2.  At the end of the OnRowSelected function add a setTimeout call to basically re-set the text on the combo after a specified timeout period.  I used 10ms and that seemed to work fine without any flashing on the UI.  For some reason by setting the text outside that function it seems to work correctly even the first time.

    Here's my final code.  Notice that I don't use the 'get_items().get_item(0).set_text' that was suggested.  I did try using it but it didn't make any difference in how it worked so I just left it out.

    var selectedCombo;  
    var selectedText;  
    function OnRowSelected(sender, args) {  
      selectedText = [args.getDataKeyValue("DataSource"), "\\", args.getDataKeyValue("Catalog"), "   Type: ",  
        args.getDataKeyValue("TypeType")].join("");  
     
      //Find the comboId that is stored in the grid row (so I know what combo to update)  
      selectedCombo = $find(args.getDataKeyValue("ContainerComboId"));  
      selectedCombo.hideDropDown();  
      selectedCombo.set_text(selectedText);  
        
      //setTimeout is used because for some stupid reason the first time you select an item it puts ALL grid text  
      //  into the combo text field, this will basically set it a second time after the function completes  
      setTimeout('selectedCombo.set_text(selectedText);', 10);  
    }  
     

  8. Zain
    Zain avatar
    7 posts
    Member since:
    May 2012

    Posted 29 Sep 2014 Link to this post

    How we can implement auto complete feature in this case (RadGrid inside RadCombobox). 

    I try with EnableTextSelection="true", but its not working.


  9. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 02 Oct 2014 Link to this post

    Hi Zain,

    This functionality is not supported our of the box, but it can be easily implemented. You need to grad the entered combo's input and filter the grid on the client, but putting a grid inside combo is a strange descision. Why don't you try to use Multi-Column combobox-es http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multicolumncombo/defaultcs.aspx

    Regards,
    Hristo Valyavicharski
    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.

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