[Solved] RadGrid Paging Jquery ProgressBar Issue

[Vishal]

Hello everyone,
I have a telerik grid in which I need to show Jquery Progressbar for every record.
It displays progressbars correctly for first page..
But when I do paging for that grid then the progressbars in the new page are not visible.

Please help me as to where/how I can show the progressbars for my new pages in the grid after paging...
 

Regard,

<script type="text/javascript">
               $(document).ready(function() {
                $('.pbcontainer').each(function() {
                    var valueFromHiddenField = $('input[type=hidden]', this).val();
                    $('.progressbar', this).progressbar({ value: parseInt(valueFromHiddenField) });
                })
            });
</script>



<telerik:RadGrid ID="GridLoanRequests" runat="server" AutoGenerateColumns="false" GridLines="None"
        Skin="Transparent1" EnableEmbeddedSkins="false" OnItemCommand="GridLoanRequests_ItemCommand"
        AllowFilteringByColumn="false" GroupingSettings-CaseSensitive="false" OnItemDataBound="GridLoanRequests_ItemDataBound"
        AllowPaging="true" PageSize="5" OnNeedDataSource="GridLoanRequests_NeedDataSource">
        <HeaderContextMenu>
        </HeaderContextMenu>
        <ClientSettings>
                <ClientEvents OnGridCreating="" />
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
        <MasterTableView DataKeyNames="LoanRequestID">
            <NoRecordsTemplate>
                <div style="background-color: #fff; height: 20px; color: Red; text-align: center;
                    font-size: 10pt; font-family: Verdana; font-weight: bold;">
                    <i>No Loan Requests Found.</i>
                </div>
            </NoRecordsTemplate>
            <Columns>
                <telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Funding Complete(%)" Visible="true">
                    <ItemStyle HorizontalAlign="Left" />
                    <ItemTemplate>
                        <asp:Label ID="lblFundCompletePercent"  runat="server"></asp:Label>
                        <div id="DivFundProgress" runat="server" class="FundProgress"></div>
                          <div class="pbcontainer">
                            <asp:HiddenField ID="hdnFundPercentComplete"  runat="server" />
                            <div id="Div1" runat="server" class="progressbar"></div>
                            </div></ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                </EditColumn>
            </EditFormSettings>
        </MasterTableView>
        <FilterMenu EnableImageSprites="False">
        </FilterMenu>
    </telerik:RadGrid>

Vishal

[Antonio Stoilkov]

Hello Vishal,

The described issue could be caused by ajaxification. You could try moving your document.ready logic to the pageLoad event which will be called on every ajax end request and will successfully update the progressbars. Additionally, you could ensure the hidden input that contains the progressbars information is also part of the updated controls.

function pageLoad()
{
    $('.pbcontainer').each(function() {
        var valueFromHiddenField = $('input[type=hidden]', this).val();
        $('.progressbar', this).progressbar({ value: parseInt(valueFromHiddenField) });
    });
}

Greetings,
Antonio Stoilkov
the Telerik team

[Vishal]

It worked out just fine ..

Thanks a lot... antonio..