Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[Solved] allowfiltering,paging,export

3 Answers 138 Views
Grid
This is a migrated thread and some comments may be shown as answers.
appdev
Top achievements
Rank 1
appdev asked on 20 Sep 2009, 03:37 AM

assume i have everything else correctly then i have below codes:

<telerik:AjaxSetting AjaxControlID="RadGrid1">  
                    <UpdatedControls>  
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting> 

then
 <telerik:RadGrid AutoGenerateColumns="true" ID="RadGrid1" 
     Width="760px" AllowFilteringByColumn="True" AllowSorting="True" 
     PageSize="15" ShowStatusBar="true" ShowFooter="True" AllowPaging="True" runat="server" 
     GridLines="None">  
     <PagerStyle Mode="NextPrevAndNumeric" />  
     <MasterTableView Summary="testing"></MasterTableView>  
</telerik:RadGrid> 

then assume rs is sqldatareader and now i am loading it to datatable.
Dim dt As Data.DataTable = New Data.DataTable  
        dt.Load(rs)  
        Me.radgrid1.datasource = dt 

so when i run this, i got data, However, when i try to click on the next page, it won't let me. I keep getting javascript error saying object required. and then when i type in a word for it to automatically filter it won't do anything. And when i type in the word i want to filter for and click on the filter drop down to get Contain, it postback with nothing. can you let me know what i'm missing here please or help me get this resolve. thank you very much. I must have the data dynamically generate from the server. thank you very much for your help.

3 Answers, 1 is accepted

Sort by
0
appdev
Top achievements
Rank 1
answered on 20 Sep 2009, 02:20 PM
after trying to create a separate project, i now know what the reason for why my grid doesn't get any data after i filter it. the reason is when i click on filter icon and select contain or anything in there, it goes back to pageload AsyncPostBack function. so if you dont have a getdata in pageload, it won't give you anything back. so is there away to not have it in pageload? because how can i tell when it is trigger by the grid? is there a function like on filter select or something so that it goes in there and reload the grid for the filtering part?

Second is my paging still got javascript error saying object required.

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Untitled Page</title> 
    <script type="text/javascript">  
        function RequestStart(sender, eventArgs)  
        {  
            var divElementStyle = document.getElementById("RadAjaxLoadingPanel1").style;  
            divElementStyle.position = 'absolute';  
            //position the loading panel  
            divElementStyle.left = eventArgs.get_eventTargetElement().offsetLeft + "px";  
            divElementStyle.top = eventArgs.get_eventTargetElement().offsetTop + "px";  
        }  
          
    </script>   
</head> 
<body> 
    <form id="form1" runat="server">  
        <telerik:radscriptmanager id="RadScriptManager1" runat="server" AsyncPostBackTimeout="0" /> 
        <telerik:radajaxmanager id="RadAjaxManager1" runat="server" EnableEmbeddedScripts="true" >    
            <ClientEvents OnRequestStart="RequestStart" />              
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadGrid1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:radajaxmanager>     
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" > 
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" /> 
        </telerik:RadAjaxLoadingPanel> 
          
        <telerik:RadGrid AutoGenerateColumns="true" ID="RadGrid1" 
            Width="760px" AllowFilteringByColumn="True" AllowSorting="True" 
            PageSize="15" ShowStatusBar="true" ShowFooter="True" AllowPaging="True" runat="server" 
            GridLines="None" OnExcelMLExportStylesCreated="RadGrid1_ExcelMLExportStylesCreated" 
            OnExcelMLExportRowCreated="RadGrid1_ExcelMLExportRowCreated">  
            <PagerStyle Mode="NextPrevAndNumeric" /> 
            <MasterTableView Summary="testing"></MasterTableView> 
        </telerik:RadGrid> 
        <asp:Button ID="Button1" CssClass="button" Width="150px" Text="Export to Excel" OnClick="Button1_Click" runat="server"></asp:Button> 
    </form> 
</body> 
</html> 
 
Imports System  
Imports System.Web  
Imports System.Web.UI  
Imports System.Web.UI.WebControls  
Imports System.Threading  
Imports System.Data  
Imports System.Data.SqlClient  
Imports Telerik.Web.UI  
Imports Telerik.QuickStart  
Imports System.Text  
Imports System.Collections.Generic  
Imports System.Globalization  
Imports Microsoft.VisualBasic  
Imports System.Web.Security  
Imports System.Web.UI.WebControls.WebParts  
Imports System.Web.UI.HtmlControls  
Imports InfoSoftGlobal  
 
Partial Class _Default  
    Inherits System.Web.UI.Page  
 
    Private sqlconnection As New SqlConnection(ConfigurationManager.ConnectionStrings("SalesConnectionString").ConnectionString.ToString)  
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
 
        sqlconnection.Open()  
        Dim rs As SqlDataReader = Nothing 
        Dim errmsg As String = "" 
        Dim objcmd As New SqlCommand("sales_getSectionReport", sqlconnection)  
        objcmd.CommandType = CommandType.StoredProcedure  
        objcmd.Parameters.AddWithValue("@report_id", 685)  
        objcmd.Parameters.AddWithValue("@store_number", 1)  
        objcmd.Parameters.AddWithValue("@dept_name", "BBQ")  
        objcmd.Parameters.AddWithValue("@Page", 1)  
        objcmd.Parameters.AddWithValue("Section_Name", "")  
        Try 
            rs = objcmd.ExecuteReader  
        Catch ex As Exception  
            errmsg = ex.Message  
        End Try 
        Dim DT As Data.DataTable = New Data.DataTable  
        DT.Load(rs)  
        RadGrid1.DataSource = DT  
        RadGrid1.DataBind()  
 
 
        sqlconnection.Close()  
        rs.Close()  
    End Sub 
 
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click  
        ConfigureExport()  
        RadGrid1.MasterTableView.ExportToExcel()  
    End Sub 
 
    Public Sub ConfigureExport()  
        RadGrid1.ExportSettings.ExportOnlyData = True 
        RadGrid1.ExportSettings.IgnorePaging = True 
        RadGrid1.ExportSettings.OpenInNewWindow = True 
    End Sub 
 
    Protected Sub RadGrid1_ExcelMLExportRowCreated(ByVal source As Object, ByVal e As Telerik.Web.UI.GridExcelBuilder.GridExportExcelMLRowCreatedArgs)  
        If e.RowType = Telerik.Web.UI.GridExcelBuilder.GridExportExcelMLRowType.DataRow Then 
            If e.Row.Cells(0) IsNot Nothing AndAlso (DirectCast(e.Row.Cells(0).Data.DataItem, String)).Contains("U") Then 
                e.Row.Cells(0).StyleValue = "MyCustomStyle" 
            End If 
        End If 
    End Sub 
 
 
    Protected Sub RadGrid1_ExcelMLExportStylesCreated(ByVal source As Object, ByVal e As Telerik.Web.UI.GridExcelBuilder.GridExportExcelMLStyleCreatedArgs)  
        For Each style As Telerik.Web.UI.GridExcelBuilder.StyleElement In e.Styles  
            If style.Id = "headerStyle" Then 
                style.FontStyle.Bold = True 
                style.FontStyle.Color = System.Drawing.Color.Gainsboro  
                style.InteriorStyle.Color = System.Drawing.Color.Wheat  
                style.InteriorStyle.Pattern = Telerik.Web.UI.GridExcelBuilder.InteriorPatternType.Solid  
            ElseIf style.Id = "itemStyle" Then 
                style.InteriorStyle.Color = System.Drawing.Color.WhiteSmoke  
                style.InteriorStyle.Pattern = Telerik.Web.UI.GridExcelBuilder.InteriorPatternType.Solid  
            ElseIf style.Id = "alternatingItemStyle" Then 
                style.InteriorStyle.Color = System.Drawing.Color.LightGray  
                style.InteriorStyle.Pattern = Telerik.Web.UI.GridExcelBuilder.InteriorPatternType.Solid  
            End If 
        Next 
 
        Dim myStyle As New Telerik.Web.UI.GridExcelBuilder.StyleElement("MyCustomStyle")  
        myStyle.FontStyle.Bold = True 
        myStyle.FontStyle.Italic = True 
        myStyle.InteriorStyle.Color = System.Drawing.Color.Gray  
        myStyle.InteriorStyle.Pattern = Telerik.Web.UI.GridExcelBuilder.InteriorPatternType.Solid  
        e.Styles.Add(myStyle)  
    End Sub 
 
End Class 
 
so what im trying to say is instead of having to load the grid again everytime page load, is there a filter function somewhere that it can go to when filter is applied like OnClick  function for button?  so when you type in something in the filter textbox and chose contain or whatever, it automatically goes to that ONCLICK funtion and apply the filtering for you. and please help me with that and paging issue and how do i just instead of selecting the filter but just tab over to the next box, it automatically trigger the filter for me? thanks a million
0
appdev
Top achievements
Rank 1
answered on 20 Sep 2009, 02:57 PM

my radgrid from some reason doesn't refresh when i apply filter when it is in this structure. 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Report.aspx.vb" Inherits="Report" %>  
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>  
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title>Sales Report</title>  
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>  
    <script type="text/javascript">  
        function RequestStart(sender, eventArgs)  
        {  
            var divElementStyle = document.getElementById("RadAjaxLoadingPanel1").style;  
            divElementStyle.position = 'absolute';  
            //position the loading panel  
            divElementStyle.left = eventArgs.get_eventTargetElement().offsetLeft + "px";  
            divElementStyle.top = eventArgs.get_eventTargetElement().offsetTop + "px";  
        }  
          
    </script>   
 
    <style type="text/css">  
        .CustomCssClass1 .rspPaneTabText, .rspPane, .RadSplitter  
        {  
            color: white !important;  
            border-color: white !important;  
        }  
        .CustomCssClass2 .rspSlideTitle     
        {  
            color: white !important;  
        }   
    </style>     
</head>      
<body style="background-color:#3d766f;; font-family:Verdana; font-size:12px;">  
    <form id="form1" runat="server">  
        <telerik:radscriptmanager id="RadScriptManager1" runat="server" AsyncPostBackTimeout="0" />  
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Office2007" DecoratedControls="All" />  
        <telerik:radajaxmanager id="RadAjaxManager1" runat="server" EnableEmbeddedScripts="true" >    
            <ClientEvents OnRequestStart="RequestStart" />              
            <AjaxSettings>  
                <telerik:AjaxSetting AjaxControlID="RadGrid1">  
                    <UpdatedControls>  
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />  
                        <telerik:AjaxUpdatedControl ControlID="tbl_data" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting>  
                <telerik:AjaxSetting AjaxControlID="ddl_Stores">  
                    <UpdatedControls>                          
                        <telerik:AjaxUpdatedControl ControlID="ddl_Paging1" />  
                        <telerik:AjaxUpdatedControl ControlID="tbl_data" LoadingPanelID="RadAjaxLoadingPanel1" />  
                        <telerik:AjaxUpdatedControl ControlID="PivotTable" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting>  
                <telerik:AjaxSetting AjaxControlID="ddl_Departments">  
                    <UpdatedControls>                          
                        <telerik:AjaxUpdatedControl ControlID="ddl_Paging1" />  
                        <telerik:AjaxUpdatedControl ControlID="tbl_data" LoadingPanelID="RadAjaxLoadingPanel1" />  
                        <telerik:AjaxUpdatedControl ControlID="PivotTable" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting>  
                <telerik:AjaxSetting AjaxControlID="ddl_Sections">  
                    <UpdatedControls>  
                        <telerik:AjaxUpdatedControl ControlID="tbl_data" LoadingPanelID="RadAjaxLoadingPanel1" />  
                        <telerik:AjaxUpdatedControl ControlID="PivotTable" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting>  
                <telerik:AjaxSetting AjaxControlID="ddl_Paging1">  
                    <UpdatedControls>                          
                        <telerik:AjaxUpdatedControl ControlID="ddl_Paging1" />  
                        <telerik:AjaxUpdatedControl ControlID="tbl_data" LoadingPanelID="RadAjaxLoadingPanel1" />  
                        <telerik:AjaxUpdatedControl ControlID="PivotTable" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting>  
                <telerik:AjaxSetting AjaxControlID="ddlcharttype">  
                    <UpdatedControls>  
                        <telerik:AjaxUpdatedControl ControlID="literal_adhoc_Graph" LoadingPanelID="RadAjaxLoadingPanel1" />  
                    </UpdatedControls>  
                </telerik:AjaxSetting>  
            </AjaxSettings>  
        </telerik:radajaxmanager>     
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >  
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />  
        </telerik:RadAjaxLoadingPanel>  
        <asp:Table ID="tbl_Report" runat="server" BorderColor="black" cellpadding="5" cellspacing="0" width="100%" HorizontalAlign="center" height="100%" BackColor="#ffffff">  
            <asp:TableRow>  
                <asp:TableCell ColumnSpan="2"><asp:Label ID="lb_Error" runat="server" Font-Bold="true" ForeColor="red" /></asp:TableCell>  
            </asp:TableRow>                                                        
            <asp:TableRow  ID="row_adhoc" runat="server"  Visible="false">  
                <asp:TableCell VerticalAlign="top" ColumnSpan="2" Width="100%" Height="100%" BackColor="white">  
                    <telerik:RadSplitter id="RadSplitter_Adhoc" runat="server" CssClass="CustomCssClass1" Skin="Telerik" Width="100%" Height="1024px" Orientation="horizontal">                                                      
                                <telerik:RadPane ID="Graph" runat="server" Width="100%" Height="350px" Scrolling="none">  
                                    <telerik:RadComboBox ID="ddlcharttype" Font-Size="12px" runat="server" Skin="Forest" AutoPostBack="true">                                                                                                  
                                        <Items>  
                                            <telerik:RadComboBoxItem Text="Select a chart type" Value="" />  
                                            <telerik:RadComboBoxItem Text="Area" Value="Area" />  
                                            <telerik:RadComboBoxItem Text="Bar" Value="Bar" />  
                                            <telerik:RadComboBoxItem Text="Column" Value="Column" />  
                                            <telerik:RadComboBoxItem Text="Line" Value="Line" />  
                                        </Items>  
                                    </telerik:RadComboBox> <br />   
                                    <div id="printer"><asp:Literal ID="literal_adhoc_Graph" runat="server" /></div>                                      
                                </telerik:RadPane>  
                                 <telerik:RadSplitBar id="RadSplitbar1" runat="server" CollapseMode="Forward" ></telerik:RadSplitBar>                                      
                                 <telerik:RadPane ID="Adhoc" runat="server" Width="100%" height="800" Scrolling="both" ForeColor="black">                                   
                                    <asp:Literal ID="literal_Adhoc" runat="server" />     
                                 </telerik:RadPane>  
                            </telerik:RadSplitter>                              
                    </asp:TableCell>                         
            </asp:TableRow>  
            <asp:TableRow runat="server" ID="row_company" Visible="false">  
                <asp:TableCell VerticalAlign="top" ColumnSpan="2" Width="100%" Height="100%" BackColor="white">                      
                            <table border="0" cellpadding="5" cellspacing="0">  
                                <tr>  
                                    <td><telerik:RadComboBox ID="ddl_Stores" AutoPostBack="true" runat="server" Visible="false" Width="120px" Skin="Forest" /></td>  
                                    <td><telerik:RadComboBox ID="ddl_Departments" AutoPostBack="true"  runat="server" Visible="false" Width="200px" Skin="Forest"/></td>  
                                    <td><telerik:RadComboBox ID="ddl_Sections" AutoPostBack="true"  runat="server" Visible="false" Width="200px" Skin="Forest"/></td>  
                                    <td><telerik:RadComboBox ID="ddl_Paging1" AutoPostBack="true" runat="server" Visible="false" Width="100px" Skin="Forest"/></td>  
                                    <td><asp:Button ID="btn_Home" runat="server" Text="Home" /></td>  
                                    <td><asp:Button ID="ExportToExcel2" runat="server" Text="Export" /></td>                                             
                                </tr>                                                                  
                            </table>     
                            <asp:Table Width="100%" Height="100%" ID="tbl_data" runat="server">  
                                <asp:TableRow>  
                                    <asp:TableCell>  
                                        <%--<telerik:RadSplitter id="RadSplitter1" runat="server" ForeColor="black" Skin="Vista" Width="100%" Height="800" Orientation="horizontal">  
                                            <telerik:RadPane ID="test" runat="server" ForeColor="black" Scrolling="both" Height="800">  
                                                <asp:Literal ID="PivotTable" runat="server" />                                  
                                            </telerik:RadPane>  
                                        </telerik:RadSplitter>--%>  
                                         <telerik:RadGrid AutoGenerateColumns="true" ID="RadGrid1" 
                                            Width="760px" AllowFilteringByColumn="True" AllowSorting="True" 
                                            PageSize="15" ShowStatusBar="true" ShowFooter="True" AllowPaging="True" runat="server" 
                                            GridLines="None" OnExcelMLExportStylesCreated="RadGrid1_ExcelMLExportStylesCreated" 
                                            OnExcelMLExportRowCreated="RadGrid1_ExcelMLExportRowCreated" OnNeedDataSource="RadGrid1_NeedDataSource">  
                                            <PagerStyle Mode="NextPrevAndNumeric" />  
                                            <MasterTableView Summary="testing"></MasterTableView>  
                                        </telerik:RadGrid>  
                                    </asp:TableCell>  
                                </asp:TableRow>                                  
                            </asp:Table>  
                </asp:TableCell>  
            </asp:TableRow>                                                                
            <asp:TableRow>  
                <asp:TableCell ColumnSpan="2">  
                    <asp:Button ID="ExportToExcel" runat="server" Text="Export" />  
                </asp:TableCell>  
            </asp:TableRow>  
        </asp:Table>  
    </form>  
</body>  
</html>  
 

but it will work if i move radgrid out of the <asp:table> structure and move it right before </form> can you explain to me why.
Also for some reasons, it goes through the OnNeedDataSource function twice. I dont want that because it will slow down the app if the data return is way too big right? and my paging still giving me the object required. thank you very much 

0
Yavor
Telerik team
answered on 24 Sep 2009, 06:10 AM
Hi Duy,

I reviewed the code carefully, and the logic seems correct.
If the problem persists, please open a formal support ticket, demonstrating your logic, and showing the unwanted behavior.
We will review it locally, and get back to you with additional information.

Kind regards,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Grid
Asked by
appdev
Top achievements
Rank 1
Answers by
appdev
Top achievements
Rank 1
Yavor
Telerik team
Share this question
or