This is a migrated thread and some comments may be shown as answers.

RadGrid inside RadComboBox

7 Answers 277 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Pete
Top achievements
Rank 1
Pete asked on 06 Oct 2008, 11:28 AM
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

7 Answers, 1 is accepted

Sort by
0
Rosi
Telerik team
answered on 06 Oct 2008, 02:33 PM
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.
0
Pete
Top achievements
Rank 1
answered on 06 Oct 2008, 03:42 PM
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 -
0
Accepted
Rosi
Telerik team
answered on 07 Oct 2008, 01:42 PM
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.
0
Pete
Top achievements
Rank 1
answered on 07 Oct 2008, 04:47 PM
Hi,

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

Best Regards,
Pete
0
Iggy
Top achievements
Rank 1
answered on 21 Jan 2009, 06:56 PM
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);  
}  
 

0
Zain
Top achievements
Rank 1
answered on 29 Sep 2014, 12:00 PM
How we can implement auto complete feature in this case (RadGrid inside RadCombobox). 

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


0
Hristo Valyavicharski
Telerik team
answered on 02 Oct 2014, 11:04 AM
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.

 
Tags
ComboBox
Asked by
Pete
Top achievements
Rank 1
Answers by
Rosi
Telerik team
Pete
Top achievements
Rank 1
Iggy
Top achievements
Rank 1
Zain
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Share this question
or