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

Client-Side Insertion into RadGrid not rendering properly

2 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 2
Dan asked on 19 Feb 2010, 09:36 PM

Hi:

We've had an ongoing issue that your associate, Daniel, has spoken to in the past. Unfortunately the issue still persists and it would be helpful if we could figure it out and move on. We appreciate any help you can provide.

We desire to bind to a RadGrid using Client-side techniques to avoid long waits for our users.

The binding needs to support adding rows to the grid, updating information currently in the grid, and deleting rows from the grid.

We have followed your examples and have produced JavaScript routines and Web Services to do what is needed. We are confident that this code is correct because much of the client-side functionality works very well.

We can delete any row in our grid and, if we choose delete all of the rows. This functions perfectly.

We can update any row in the grid. Again this functions perfectly.

The problem comes when we try and insert new rows into the grid. When we do this the grid actually does contain the newly added row. We can see the data in the JavaScript Object. However when the Grid is ‘redrawn’ on the page, the newly added row never appears. The following code snippet is where we believe the problem to be occurring (or not such as the case may be)…

 

        var numofRows = new Number(result.length);

 

        var tableView = $find("<%= SummaryGrid_West.ClientID %>").get_masterTableView();

        tableView.set_dataSource(result);

        tableView.set_virtualItemCount(numofRows);

        tableView.dataBind();

 

        if (result.length != 0)

        {   

            var row = tableView.get_dataItems()[numofRows-1]

            row.set_selected(true);

            row.set_visible(true);

        }       

        tableView.dataBind();

       

        var grid = $find("<%= SummaryGrid_West.ClientID %>");

        grid.repaint();

 

 

 As you can see, we  acquire a reference to the last row in the grid --- the one that was just added, select it, and explicitly  make it visible. This does not allow us to see the newly added row.

Curiously if we change the second dataBind() call to be instead tableView.rebind(), the new row is displayed --- after a long delay. I am told that this happens because the server side code is called. This is precisely what we are trying to avoid doing and, although it does suggest that the other mechanics of the process are working correctly, we would really prefer to keep all of this functionality on the server side.

It should be noted that, although we have active licenses for your product, we have been unable to utilize the latest release (Q4) because of some serious issues with the cosmetic rendering of your controls. I believe we are still on the Q3 – 2008 controls and perhaps this might explain some of our issues.

Hopefully you can help us with these issues. If, in fact, the best solution involves moving to the Q4 2009 controls, then we would need help in assuring thet they render correctly.

Thanks for your efforts in this matter.

2 Answers, 1 is accepted

Sort by
0
Dan
Top achievements
Rank 2
answered on 23 Feb 2010, 07:07 PM

Hi:

We were hoping that perhaps we might have heard something from you by now. But in a way it is good that we have not because it gives us a chance to update the information here.

We first noticed this problem in early December 2009 and eventually entered a support ticket (#266717) to further document it. The program in which this problem occurs is exceptionally large (some 25,000 lines including both the aspx and the code behind) so it is really very hard to share all of it with you.

We have used your products for several years now and find them outstanding. We have also been very impressed with your forums and the excellent customer service that you provide. We also realize that the issue that we are describing here would seem to be something that really should not be happening based on everything that we've read. Indeed one of your support people commented that "I believe that this [ i.e newly added items not appearing in ther RadGrid ] is an unusual behavior that won't happen under normal circumstances since by default the new rows will be added regardless of the current page size". Unfortunately the "unusual behavior" described by your associate is what almost always happens for us (the grid populates correctly perhaps 5 percent of the time and with no obvious pattern). Although our program is inordinately large the processing we're talking about here follows exactly the pattern we've observed in your examples. We realise and greatly appreciate your company's commitment to excellent customer service and would be pleased to do anything we can to make it easier for you to look into this issue. We have a facility close to your Massachusetts location and could dispactch a person with a laptop containing the application if this would be helpful.

 

Unfortunately this problem is forcing us to hold back a portion of a software release that should be delivered next week, so we are really hoping that we can work with you soon to get this matter resolved.

 

Once again thank you for all of your help in the past.  

--------------------------------------------------------------------------------------------------------------------------------

Here is the code that is failing:

            var numofRows = new Number(result.length);

            var tableView = $find("<%= SummaryGrid_West.ClientID %>").get_masterTableView();
            tableView.clearSelectedItems(); // to assure that, for adds, only the last row is selected
            tableView.set_dataSource(result);
            tableView.set_virtualItemCount(numofRows - 1);
            tableView.dataBind();

            if (result.length != 0)
            {   
                var row = tableView.get_dataItems()[numofRows-1]
                row.set_selected(true);
                row.set_visible(true);
            }       
            tableView.dataBind();
       
            var grid = $find("<%= SummaryGrid_West.ClientID %>");
            grid.repaint();

Here is the definition of the RadGrid that is not populating correctly

                <telerik:RadGrid
                    ID="SummaryGrid_West"  
                    runat="server"
                    CssClass="RadGrid"
                    Skin="Outlook"
                    EnableAJAX="True" 
                    GridLines="Horizontal"
                    PageSize="25"
                    AllowPaging="True"
                    AllowSorting="True"
                    AutoGenerateColumns="False"
                    ShowGroupPanel="False"
                   
                    EditItemStyle-BackColor="#B4D6FE" 
                    AlternatingItemStyle-BackColor="#D3E7FE"
                    OnNeedDataSource="SummaryGrid_NeedDataSource_West"
                    OnDeleteCommand = "SummaryGrid_ItemDeleted_West"
                    OnItemDataBound = "SummaryGrid_ItemDataBound_West"
                    DataKeyFields="ActivityID,ActivityDetailID"
                    >
                    
                    <SelectedItemStyle CssClass="selectedRow" />
                   
                    <ClientSettings
                        AllowDragToGroup="True"
                        
                        AllowColumnsReorder="True"
                        Resizing-AllowColumnResize="True"
                        Resizing-EnableRealTimeResize="True"
                        Resizing-ClipCellContentOnResize="True"
                        Resizing-ResizeGridOnColumnResize="True" >
                       

                        <ClientEvents
                            OnCommand="SummaryWest_Command"
                            OnRowClick="SummaryClick_West">
                        </ClientEvents>
                       
                        <Selecting AllowRowSelect="True"></Selecting>
                       
                        <Scrolling AllowScroll="true"
                         ScrollHeight="150" SaveScrollPosition="true" UseStaticHeaders="true"/>

                        <Resizing
                            AllowRowResize="False" 
                            EnableRealTimeResize="True"
                            ResizeGridOnColumnResize="True"
                            AllowColumnResize="True">
                        </Resizing>
                        <%--<DataBinding
                            EnableCaching="true"
                            >
                        </DataBinding>--%>
                    </ClientSettings>
                                   
                    <MasterTableView Width="98.5%" 
                        CommandItemDisplay="None"  
                        DataKeyNames="ActivityID,ActivityDetailID"
                        ShowHeadersWhenNoRecords="True" 
                        HorizontalAlign="Left"
                        NoMasterRecordsText="No Summary Records to display."
                        AlternatingItemStyle-BackColor="#D3E7FE" AlternatingItemStyle-ForeColor="Black"
                        GroupLoadMode="Client">
 
                        <Columns>
                            <telerik:GridTemplateColumn
                                UniqueName="ActivityID"
                                Display="false">
                                <ItemTemplate>
                                    <asp:Label ID="ActivityID"
                                        runat="server"
                                        Text='<%# Eval("ActivityID") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                UniqueName="ActivityDetailID"
                                Display="false">
                                <ItemTemplate>
                                    <asp:Label ID="ActivityDetailID"
                                        runat="server"
                                        Text='<%# Eval("ActivityDetailID") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                UniqueName="Value_Row"
                                Display="false">
                                <ItemTemplate>
                                    <asp:Label ID="Value_Row"
                                        runat="server"
                                        Text='<%# Eval("Value_Row") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                UniqueName="Value_Col"
                                Display="false">
                                <ItemTemplate>
                                    <asp:Label ID="Value_Col"
                                        runat="server"
                                        Text='<%# Eval("Value_Col") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                UniqueName="Hours_Dollars"
                                Display="false">
                                <ItemTemplate>
                                    <asp:Label ID="Hours_Dollars"
                                        runat="server"
                                        Text='<%# Eval("Hours_Dollars") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="ActivityNumber"
                               
                                GroupByExpression="ActivityNumber ActivityNumber, Sum(totalhours) TotalHours[Hours] , Sum(totaldollars) TotalDollars[Dollars] Group By ActivityNumber"
                                ItemStyle-HorizontalAlign="Center"
                               
                               
                                Display="false"
                                UniqueName="ActivityNumber">
                                <ItemTemplate>
                                    <asp:Label ID="ActivityNumber"
                                        runat="server"
                                        Text='<%# Eval("ActivityNumber") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="ActivityStartMonth"
                               
                                GroupByExpression="ActivityStartMonth ActivityStartMonth Group By ActivityStartMonth"
                                UniqueName="ActivityStartMonth"
                                
                               
                                Display="false"
                                >
                                <ItemTemplate>
                                    <asp:Label ID="ActivityStartMonth"
                                        runat="server"
                                        Text='<%# Eval("ActivityStartMonth") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="ActivityEndMonth"
                               
                                GroupByExpression="ActivityEndMonth ActivityEndMonth Group By ActivityEndMonth"
                                UniqueName="ActivityEndMonth"
                                
                                ItemStyle-HorizontalAlign="Center"
                                Display="false"
                                >
                                <ItemTemplate>
                                    <asp:Label ID="ActivityEndMonth"
                                        runat="server"
                                        Text='<%# Eval("ActivityEndMonth") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="ActivityDescription"
                                HeaderStyle-HorizontalAlign="Center"
                                GroupByExpression="ActivityNumber ActivityNumber, Sum(TotalHours) TotalHours[Hours] , Sum(TotalDollars) TotalDollars[Dollars] Group By ActivityDescription"
                                ItemStyle-Width="200px" HeaderStyle-Width="200px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderText="Activity Description"
                                UniqueName="ShortActivityDescription">
                                <ItemTemplate>
                                    <asp:Label ID="ShortActivityDescription"
                                        runat="server"
                                        Text='<%# Eval("ShortActivityDescription")%>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                           
                            <telerik:GridTemplateColumn
                                SortExpression="BidCode"
                                HeaderStyle-HorizontalAlign="Center"
                                ItemStyle-HorizontalAlign="Center"
                                GroupByExpression="BidCode BidCode, Sum(Hours) TotalHRS[Hours] , Sum(Dollars) TotalDOLS[Dollars] Group By BidCode"
                                ItemStyle-Width="70px" HeaderStyle-Width="70px"
                                HeaderText="Bid<br/>Code"
                                UniqueName="BidCode">
                                <ItemTemplate>
                                    <asp:Label ID="BidCode"
                                        runat="server"
                                        Text='<%# Eval("BidCode") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="BidCodeDescription"
                                HeaderStyle-HorizontalAlign="Center"
                                GroupByExpression="BidCodeDescription BidCodeDescription, Sum(Hours) TotalHRS[Hours] , Sum(Dollars) TotalDOLS[Dollars]  Group By BidCodeDescription"
                                ItemStyle-HorizontalAlign="Center"
                                ItemStyle-Width="200px" HeaderStyle-Width="200px" 
                                HeaderText="Bid Code Description"
                                UniqueName="BidCodeDescription">
                                <ItemTemplate>
                                    <asp:Label ID="BidCodeDescription"
                                        runat="server"
                                        Text='<%# Eval("BidCodeDescription") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="Discipline"
                                HeaderStyle-HorizontalAlign="Center"
                                GroupByExpression="Discipline Discipline Group By Discipline"
                                ItemStyle-Width="165px" HeaderStyle-Width="165px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderText="Discipline"  
                                UniqueName="Discipline">
                                <ItemTemplate>
                                    <asp:Label ID="Discipline"
                                        runat="server"
                                        Text='<%# Eval("Discipline") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="CostCurve"
                                HeaderStyle-HorizontalAlign="Center"
                                GroupByExpression="CostCurve CostCurve, Sum(Hours) TotalHRS[Hours] , Sum(Dollars) TotalDOLS[Dollars]  Group By CostCurve"
                                ItemStyle-Width="70px" HeaderStyle-Width="70px"
                                ItemStyle-HorizontalAlign="Center" 
                                HeaderText="Cost<br/>Curve"
                                UniqueName="CostCurveCode">
                                <ItemTemplate>
                                    <asp:Label ID="CostCurveCode"
                                        runat="server"
                                        Text='<%# Eval("CostCurveCode") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="Hours"
                                HeaderStyle-HorizontalAlign="Center"
                                GroupByExpression="Hours Hours Group By Hours"
                                ItemStyle-Width="70px" HeaderStyle-Width="70px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderText="Hours"
                                UniqueName="Hours_Formated">
                                <ItemTemplate>
                                    <asp:Label ID="Hours_Formated"
                                        runat="server"
                                        Text='<%# Eval("Hours_Formated") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="Dollars"
                                HeaderStyle-HorizontalAlign="Center"
                                GroupByExpression="Dollars Dollars Group By Dollars"
                                ItemStyle-Width="70px" HeaderStyle-Width="70px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderText="Dollars"
                                UniqueName="Dollars_Formated">
                                <ItemTemplate>
                                    <asp:Label ID="Dollars_Formated"
                                        runat="server"
                                        Text='<%# Eval("Dollars_Formated") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                           
                            <telerik:GridTemplateColumn
                                HeaderStyle-HorizontalAlign="Center"
                                ItemStyle-Width="20px" HeaderStyle-Width="20px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderText="Link Col"
                                UniqueName="Col_West">
                                <ItemTemplate>
                                    <asp:Label ID="Col_West"
                                        runat="server"
                                        Text='<%# Eval("Col_West") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                HeaderStyle-HorizontalAlign="Center"
                                ItemStyle-Width="20px" HeaderStyle-Width="20px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderText="Link Row"
                                UniqueName="Row_West">
                                <ItemTemplate>
                                    <asp:Label ID="Row_West"
                                        runat="server"
                                        Text='<%# Eval("Row_West") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                           
                            <telerik:GridTemplateColumn 
                                SortExpression="ActivityStartDate"
                                GroupByExpression="ActivityStartDate ActivityStartDate Group By ActivityStartDate"
                                ItemStyle-Width="60px" HeaderStyle-Width="60px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderStyle-HorizontalAlign="Center"
                                HeaderText="Start<br />Date"
                                UniqueName="ActivityStartDate">
                                <ItemTemplate>
                                    <asp:Label ID="ActivityStartDate"
                                        runat="server"
                                        Text='<%# Eval("ActivityStartDate") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn
                                SortExpression="ActivityEndDate"
                                GroupByExpression="ActivityEndDate ActivityEndDate Group By ActivityEndDate"
                                ItemStyle-Width="60px" HeaderStyle-Width="60px"
                                ItemStyle-HorizontalAlign="Center"
                                HeaderStyle-HorizontalAlign="Center"
                                HeaderText="End<br />Date"
                                UniqueName="ActivityEndDate">
                                <ItemTemplate>
                                    <asp:Label ID="ActivityEndDate"
                                        runat="server"
                                        Text='<%# Eval("ActivityEndDate") %>'>
                                    </asp:Label>   
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <%--<telerik:GridButtonColumn
                                ButtonType="ImageButton"
                                CommandName="Delete"
                                ConfirmDialogType="RadWindow"
                                ConfirmText="Delete this Summary?"
                                ConfirmTitle="Delete"
                                HeaderText="Delete"
                                UniqueName="ActivityDeletebtn1">
                                <HeaderStyle Width="20px" />
                                <ItemStyle HorizontalAlign="Center" />
                            </telerik:GridButtonColumn>--%>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

0
Daniel
Telerik team
answered on 24 Feb 2010, 05:12 PM
Hello Dan,

I already answered to your support ticket.
May I ask you to stick to that ticket until we find a feasible solution to the depicted problem? As soon as we find an acceptable resolution, I will post the details in the current forum thread.

Best regards,
Daniel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
Dan
Top achievements
Rank 2
Answers by
Dan
Top achievements
Rank 2
Daniel
Telerik team
Share this question
or