Radgrid in RadCombobox disappears after Paging Event

[Andrew]

Hi All

Strange behaviour , and I have searched and cannot find what I am sure is a simple answer.

I have a RadGrid in a RadCombobox, which works fine on first page load.
( Uses ItemTemplate as per Templates demo on Telerik site )

If I choose the "Next Page" option for the RadGrid, the whole page Postsback, and the RadGrid disappears.

Am I missing something here :

 <telerik:RadGrid ID="RadGrid2" AllowSorting="True"
                                AllowPaging="True" PageSize="5" Skin="Office2007" runat="server" GridLines="None"
                                Width="100%" AutoGenerateColumns="false" >
                                <MasterTableView ClientDataKeyNames="IdNo">
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="IdNo" HeaderText="ID">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Members" HeaderText="Name&nbsp;&nbsp;">
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>
                                <ClientSettings>
                                    <Selecting AllowRowSelect="True" />
                                    <ClientEvents OnRowSelected="onRowSelected" />
                                </ClientSettings>

                                <PagerStyle NextPageText="Next" PrevPageText="Prev"></PagerStyle>
                            </telerik:RadGrid>

Andrew

[Konstantin Petkov]

Hi Andrew,

The disappearing Grid is often caused by an incorrect data-binding. You can read about the requirements when binding the Grid through the so called "simple data-binding" here. I'd suggest you give the Advanced data-binding technique a try, though.

Let us know if further assistance is needed.

Greetings,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Paul]

Hi i have the same problem

i follow this demo http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridincombobox/defaultcs.aspx?product=combobox
and i bind the grid with NeedDataSource this is my code 

 RadGrid grid = source as RadGrid;
            List<Instance> ar = new List<Instance>((ICollection<Instance>)Cache["Instances"]);
            if (rcCustomer.Text != "")
            {
                List<Instance> filterList = ar.FindAll(t => t.Name.ToUpper().StartsWith(rcCustomer.Text.ToUpper()));
                grid.DataSource = filterList;
            }
            else
            {
                grid.DataSource = ar;
            }
and aspx

   function ShouldInitiateAjaxRequest(comboText) {
                if (comboText.length > 2) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadFilteredData");
                    return true;
                }
                else {
                    return false;
                }
            }
            function HandleOpen(sender, args) {

                var flag = ShouldInitiateAjaxRequest(sender.get_text());

                if (!flag) {
                    args.set_cancel(true);
                }
            }
            function HandleKeyPressed(sender) {
                var combo = $find(sender.id);

                ShouldInitiateAjaxRequest(combo.get_text());
                combo.showDropDown();
            }
            function RowSelected(sender, args) {
                var selectedText = args.getDataKeyValue("Name");
                var selectedValue = args.getDataKeyValue("InstanceID");

                var combo = $find('<%= rcCustomer.ClientID %>');

                if (selectedValue.length > 0) {
                    combo.trackChanges();
                    combo.set_text(selectedText);
                    combo.set_value(selectedValue);
                    combo.get_items().getItem(0).set_text(selectedText);
                    combo.get_items().getItem(0).set_value(selectedValue);
                    combo.commitChanges();
                }
                __doPostBack(combo.id, "TextChange");
            }
            var grid;
            function GridCreated(sender, args) {
                grid = sender;
            }

 <telerik:RadComboBox ID="rcCustomer" Width="310px" AutoPostBack="true" EmptyMessage="Select Customer"
                    runat="server" AllowCustomText="True" OnClientDropDownOpening="HandleOpen" ExpandAnimation-Type="None"
                    CollapseAnimation-Type="None" OnSelectedIndexChanged="rcCustomer_SelectedIndexChanged">
                    <ItemTemplate>
                        <telerik:RadAjaxPanel ID="rpanel" runat="server">
                            <telerik:RadGrid AllowPaging="true" ID="RadGrid1" Width="275px" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
                                OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnPageIndexChanged="RadGrid1_PageChanged">
                                <MasterTableView NoMasterRecordsText="" AutoGenerateColumns="False" DataKeyNames="InstanceID,Name,DomainName"
                                    ClientDataKeyNames="InstanceID,Name,DomainName" TableLayout="Fixed">
                                    <Columns>
                                        <telerik:GridBoundColumn HeaderText="ID" DataField="InstanceID" UniqueName="InstanceID">
                                            <HeaderStyle Width="40px" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name">
                                            <HeaderStyle Width="75px" />
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                    <DetailTables>
                                        <telerik:GridTableView DataMember="Organization" AutoGenerateColumns="false" Caption="Company per Organization"
                                            AllowSorting="false" Width="100%" PageSize="7">
                                            <ParentTableRelation>
                                                <telerik:GridRelationFields DetailKeyField="InstanceID" MasterKeyField="InstanceID" />
                                            </ParentTableRelation>
                                            <Columns>
                                                <telerik:GridBoundColumn SortExpression="InstanceID" HeaderText="InstanceID" HeaderButtonType="TextButton"
                                                    DataField="InstanceID" Resizable="True" Reorderable="True" />
                                                <telerik:GridBoundColumn SortExpression="Name" HeaderText="Company Name" HeaderButtonType="TextButton"
                                                    DataField="Name" Resizable="True" Reorderable="True" />
                                                <%--   <telerik:GridBoundColumn SortExpression="DomainName" HeaderText="DomainName" HeaderButtonType="TextButton"
                                                DataField="DomainName" Resizable="True" Reorderable="True" />--%>
                                            </Columns>
                                        </telerik:GridTableView>
                                    </DetailTables>
                                </MasterTableView>
                                <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="false">
                                    <Selecting AllowRowSelect="true" />
                                    <ClientEvents OnRowSelected="RowSelected" />
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="200px" />
                                   
                                </ClientSettings>
                            </telerik:RadGrid>
                        </telerik:RadAjaxPanel>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadComboBoxItem Text="" runat="server" />
                    </Items>
                    <ExpandAnimation Type="None"></ExpandAnimation>
                    <CollapseAnimation Type="None"></CollapseAnimation>
                </telerik:RadComboBox>

[Kalina]

Hi Paul Ponce,

I am afraid that the paging of a RadGrid nested within RadComboBox is not officially supported.

You can try to wrap the RadGrid that you have nested within the RadComboBox ItemTemplate in a div tag. 
Then add “onclick” event handler at the div and stop the propagation of the "click" event.

<ItemTemplate>
  <div onclick="StopPropagation(event)">
    <telerik:RadGrid ID="RadGrid1" Width="325px" runat="server"
        OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView ...
        ...
        ...
        ...
        </MasterTableView>
    </telerik:RadGrid>
    </div>
</ItemTemplate>

function StopPropagation(e) {
    //cancel bubbling
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
}

I modified the demo sample in order to illustrate this approach – please find it attached.

Best wishes,
Kalina
the Telerik team