RadGrid in RadMultiPage Slider problem

[Dan]

Hi,
I have an issue very similar to the one discussed in  RadSlider inside initially hidden elements (e.g. RadToolTip) except what I have is a RadGrid on a RadMultiPage where the PagerStyle is set to "Slider". 

What happens is that when the page is loaded and I click on the History tab, the slider comes up looking like the attached sliderissuea.png.  If I click on another tab then return to the History tab, the slider comes up looking as it ought to (see sliderissueb.png).

As an experiment, I tried loading the page directly to the History tab and it renders correctly in that scenario.  Is there a fix for the PagerStyle Slider within a RadGrid that is similar to the one described for the RadSlider in the above link?

Thanks,
Dan

[Marin]

Hello Dan,

 The issue is due to the same fact described in the referenced KB article - the slider's parent is not visible at the moment of initialization of the slider. So you should try the same approach calling the repaint() method of the slider when the grid is initialized e.g. OnGridCreated event and finding the slider control inside it using jQuery and DOM operations.

Greetings,
Marin
the Telerik team

[Dan]

Marin,
Thanks. That's helpful, except I seem to be stuck on finding the slider control. I found in the documentation how to access the OnGridCreated and I see from the link you provided how to find a RadSlider, but that example requires knowing the ID of the RadSlider, but in the case of a <PagerStyle Mode="Slider" Position="Bottom" /> line in a RadGrid declaration I don't find a way to assign an ID to the slider portion.

I guess that's a long way to say, Could you help me with finding the slider in this scenario?

Thanks again,
Dan 

[Marin]

Hello Dan,

Here is sample code showing one way to do that. The ID of the slider in the grid contains the string "GridPagerSlider" so I iterate through all RAD controls on the page and find the proper one.

function Grid_Created(sender, args)
    {
        var radControls = $telerik.radControls;
        for (var i = 0; i < radControls.length; i++)
        {
            var id = radControls[i].get_element().id;
            if (id.indexOf("GridSliderPager")!=-1)
            {
                var slider = radControls[i];
                slider.repaint();
            }
        }
    }

All the best,
Marin
the Telerik team

[Dan]

Marin,
Thanks again for your help.  Two things:  First, is it GridSliderPager or GridPagerSlider?  You had one in your description and another in the code sample.

Regardless, inserting an alert I found that neither is showing up.  Rather, this code seems to search through the controls on the page, not the controls on the controls.  Specifically, it found the RadGrid control but did not find the GridPagerSlider (GridSliderPager) in the RadGrid control.

I tried an inner loop like below, but that threw an error.  Probably I can't do the "var gridControls = grid.Controls" line.

Thanks again,
Dan

function GridCreated(sender, args) {
    var radControls = $telerik.radControls;
    for (var i = 0; i < radControls.length; i++) {
        var id = radControls[i].get_element().id;
        if (id.indexOf("WorkOrderHistoryGrid") != -1) {
            var grid = radControls[i];
            var gridControls = grid.Controls
            for (var j = 0; j < gridControls.length; j++) {
                var gridId = gridControls[i].get_element().id;
                if (gridId.indexOf("GridPagerSlider") != -1) {
                    var slider = gridControls[j];
                    slider.repaint();
                }
            }
        }
    }
}

[Marin]

Hi Dan,

The correct id of the slider contains the string "GridSliderPager" (the one from the code snippet). You can use FireBug or similar tool to examine the HTML element of the slider and see the what the id looks like. $telerik.radControls should return all the registered RadControls on the page regardless of their nested level. Is it possible to post the declaration of the grid so that we can have a look at it. Additionally I am attaching a sample page that worked correctly on my end.

Kind regards,
Marin
the Telerik team

[Dan]

Marin,
I have posted the grid's declaration below.  A few things I have discovered - The GridCreated function only seems to get called when the page is loaded, not when a new tab is selected so I tried putting the code in OnTabSelecting and then it was being hit when I switched tabs, but still it does not find anything in radControls with "GridSliderPager"in it.  I looked at the script documents while the application was running and there is a \"ctl00_QAppContent_EventApprovals_userControl_EventGrid_ctl00_ctl03_ctl01_GridSliderPager\"
control on the page.
Once more Thanks,
Dan

<telerik:RadGrid
    ID="EventGrid"
    runat="server"
    CssClass="RadGrid"
    GridLines="None"
    AllowPaging="true"
    PageSize="10"
    AllowSorting="true"
    AutoGenerateColumns="False"
    ShowStatusBar="true"
    HorizontalAlign="NotSet"
    ItemStyle-VerticalAlign="Top"
    AlternatingItemStyle-VerticalAlign="Top"
    AllowMultiRowEdit="False"
    AllowMultiRowSelection="true"
    EnableHeaderContextMenu="true"
    OnNeedDataSource="EventGrid_NeedDataSource"
    OnItemDataBound="EventGrid_ItemDataBound"
    >
    <MasterTableView
        CommandItemDisplay="None"
        DataKeyNames="Id"
        EditMode="EditForms"
        TableLayout="Fixed"
        >
        <Columns>
            <telerik:GridClientSelectColumn
                Reorderable="False"
                UniqueName="ClientSelectColumn"
                ItemStyle-VerticalAlign="Top"
                >
                <HeaderStyle Width="30px"></HeaderStyle>
            </telerik:GridClientSelectColumn>
            <telerik:GridTemplateColumn
                HeaderText="Event Name"
                UniqueName="Edit"
                DataField="EventTitle"
                SortExpression="Name"
                HeaderStyle-Width="150"
                ItemStyle-Width="150"
                >
                <ItemTemplate >
                    <asp:HyperLink runat="server" Text="Edit" ID="lnkEdit" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn
                DataField="EventTitle"
                HeaderText="Event Name"
                UniqueName="Name"
                SortExpression="Name"
                HeaderStyle-Width="150"
                ItemStyle-Width="150"
                >
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn
                DataField="Description"
                HeaderText="Description"
                UniqueName="Description"
                HeaderStyle-Width="150"
                ItemStyle-Width="150"
                >
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn
                DataField="LocationNameWithLabels"
                HeaderText="Location"
                UniqueName="Location"
                HeaderStyle-Width="150"
                ItemStyle-Width="150"
                >
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn
                DataField="AssociatedStartDates"
                HeaderText="Dates"
                UniqueName="Dates"
                ItemStyle-HorizontalAlign="Left"
                HeaderStyle-Width="60"
                ItemStyle-Width="60"
                >
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn
                DataField="StatusName"
                HeaderText="Status"
                UniqueName="Status"
                HeaderStyle-Width="100"
                ItemStyle-Width="100"
                >
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn
                HeaderText="Conflict"
                UniqueName="Conflict"
                HeaderStyle-Width="50"
                ItemStyle-Width="50"
                DataField="HasConflict"
                >
                <ItemTemplate >
                    <asp:HyperLink runat="server" Text="Conflict" ID="lnkConflict" ForeColor="Red" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn
                HeaderText="Delete"
                UniqueName="DeleteEvent"
                DataField="Deleted"
                HeaderStyle-Width="40"
                ItemStyle-Width="40"
                ItemStyle-HorizontalAlign="Center"
                >
                <ItemTemplate >
                    <asp:ImageButton runat="server" CommandName="DeleteEvent" Id="DeleteEventIcon" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <NoRecordsTemplate>
            <div style="padding: 5px;">No events exist.</div>
        </NoRecordsTemplate>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <asp:Panel runat="server" ID="EditForm" />
            </FormTemplate>
        </EditFormSettings>
<%--            <CommandItemTemplate>
            <table width='100%' cellpadding="5">
                <tr>
                    <td
                        id="Td1"
                        runat="server"
                        align="left"
                        Visible='<%# !EventGrid.MasterTableView.IsItemInserted %>'
                        >
                        <a href='EventFormManagement.aspx?id=0'>
                            <asp:Image
                                style="border:0px;vertical-align:middle;"
                                runat="server"
                                ID="imgBtnAddRecord"
                            />

                            Create New Event
                        </a>
                    </td>
                    <td
                        id="Td2"
                        runat="server"
                        align="right"
                        Visible='<%# AppSession.LoggedInUser.HasPrivilege("DELEVNTS") %>'
                        >
                        <telerik:RadButton
                            runat="server"
                            ID="ckShowDeleted"
                        />
                    </td>
                </tr>
            </table>
        </CommandItemTemplate>--%>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true">
        <ClientEvents OnGridCreated="GridCreated" />
    </ClientSettings>
    <PagerStyle Mode="Slider" Position="TopAndBottom" />
</telerik:RadGrid>

[Marin]

Hi Dan,

Another approach might be if you try to locate the slider manually within the grid's cell. I am attaching a sample page showing this approach using the grid declaration that you provided and called the code from the OnClientTabSelecting event handler. Here is the basic code snippet:

function tabSelecting(sender, args)
            {
                //sometimes a certain timeout may be needed in order for the repaint method to execute properly
                setTimeout("repaintSlider()", 20);
            }

            //called twice because there are two sliders on the page
            function repaintSlider()
            {
                var grid = $find("<%= EventGrid.ClientID %>");
                var sliderCells = $telerik.$(grid.get_element()).find("td[class*='rgPagerCell Slider']");
                for (var i = 0; i < sliderCells.length; i++)
                {
                    var slider = $telerik.findControl(sliderCells[i], "GridSliderPager");
                    if (slider)
                    {
                        slider.repaint();
                        alert(slider + " with id " + slider.get_id());
                    }
                }
            }

If the problem persists I will appreciate if you could post a sample page reproducing the issue.

Regards,
Marin
the Telerik team