https://www.infragistics.com/community/product_platforms/aspnet/en-USTelligent Community 10 Non-Productionhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/34/learn-to-build-a-webdatagrid-custom-pagerTue, 14 Jul 2020 14:30:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:70a5978d-99cb-4ec7-9080-328d146e2c8eJason ZajacWatch the video here This article demonstrates how to implement a WebDataGrid custom pager with the following features: First, previous, next and last buttons Direct access to individual pages Display of current page number Display of total record count Manipulation of page size This article will teach you how to extend the WebDataGrid’s default paging behavior and integrate a WebSlider control drive changes to the grid’s page size. Create the Host Page To begin, create a page and name it Pager.aspx and add a ScriptManager and drag a WebDataGrid to the page. Next switch to design view and open the Smart Tag on the grid and click on Edit Behaviors . Once the Smart Tag is open, check the checkbox next to Paging . Once the paging behavior is turned on, switch back to the markup and locate the nodes and add a node. Your code should now look like this: view plaincopy to clipboardprint Notice that the width of the grid is constrained to 650 pixels. This is necessary to make sure there is enough room on the page to the right of the grid for the slider that will allow the user to adjust the page size. ASP.NET Page Event Lifecycle Recap Before continuing let’s take a moment to review some of the nuances of the event methods found in ASP.NET pages and user controls. While Page_Load is certainly the most famous page event method, there are a few others that are worthwhile being familiar. For an in-depth discussion on the different methods available on an ASP.NET page, check out this podcast: Using the ASP.NET Page Lifecycle . For the solution presented in this article, you will use each of the below methods for different reasons: Initialize Page Page_Init The first event method to fire during the page life cycle that is safe to add program code. This method is best used or constructing objects, subscribing to events and other general setup type operations. Load Page Page_Load Load is the often the best place to get the data your page will work with and prepare resources for the page Pre-render Page Page_PreRender PreRender is the last method in the page event lifecycle and is best used to do final manipulation of UI controls once all logic has been performed The event methods created from events from controls you add to the page fire in between page load and pre-render. This gives you a reliable path to prepare data on load, manipulate with UI controls and finally make last-minute formatting decisions during pre-render. Bind to Data Open the code behind to bind your grid to a data source. In this case the grid is binding to a collection from the BookRepository. Note : For more information on the BookRepository, please check out: The Illusion of Persistence: Saving Test Data The Page_Load event method will handle filling up a member variable with the data from the repository. The Pre_Render event method is responsible for binding the data to the grid. Enter the following code in Pager.aspx.cs: view plaincopy to clipboardprint protected BookCollection _books; ... protected void Page_Load( object sender, EventArgs e) { this ._books = BookRepository.Instance.GetBooks(100); } protected void Page_PreRender( object sender, EventArgs e) { this .wdg.DataSource = this ._books; this .wdg.DataBind(); } protected BookCollection _books; ... protected void Page_Load(object sender, EventArgs e) { this._books = BookRepository.Instance.GetBooks(100); } protected void Page_PreRender(object sender, EventArgs e) { this.wdg.DataSource = this._books; this.wdg.DataBind(); } Run Pager.aspx and you should see a grid filled with data. Create Pager User Control Create a new user control in the same folder as Pager.aspx and name it CustomPager.ascx. The following image gives you an idea of what the finished product looks like. In order to achieve the features found in this pager you must begin by adding the appropriate controls to the user control. Enter the following markup into CustomPager.aspx: view plaincopy to clipboardprint Page of ( items) Page of ( items) There is a lot of markup here, so we’ll step through each part with care. The first part of this markup is a simple DIV responsible for centering the controls in the paging template. After looking carefully at the code you will notice a Literal/LinkButton pair pattern of controls. The arrows on the pager will at certain times be enabled and other times disabled. For instance, when you are on the last page the link to go to the last page should not be enabled. The control’s visibility are alternately toggled depending on the context of the control. The next section of pager is the set of controls that exposes a DropDownList and is accompanied by some expressions to expose the number of pages and total number of records. You will implement the properties needed to support these expressions in the code-behind later in this article. Be aware that often in ASP.NET development each server control has it’s own event method in the code-behind. In the interest of simplifying the code for this solution, notice that each LinkButton and the DropDownList are pointing to the the changePage method in their respective event handlers. The code-behind will implement some simple logic to determine which control is initiating the command and what the appropriate action is to take. Also notice that on each LinkButton the command argument is either: first, prev, next or last. These arguments will drive the logic used to help change the page later in this article. The DropDownList must have it’s AutoPostBack property set to true to allow the paging template to immediately respond to the user’s request to change the page. Implement Pager Code-Behind Switch to the code-behind in CustomPager.ascx.cs to begin implementing the logic for this page. For now you must add a stub for the changePage method. view plaincopy to clipboardprint protected void changePage(object sender, EventArgs e) { } protected void changePage(object sender, EventArgs e) { } The body of this method will be added later in the article, but for now this stub will keep your page from experiencing compilation errors. Initially the user control must know about the context of the grid that it is hosted. To get the information from it’s context and to provide the properties that are exposed in the above markup to report the total number of pages and total number of records, enter the following code: view plaincopy to clipboardprint public int TotalRecordCount { get; set; } public int PageSize { get; set; } public void SetContext( int totalRecordCount, int initialPageSize) { this .TotalRecordCount = totalRecordCount; this .PageSize = initialPageSize; } public int TotalRecordCount { get; set; } public int PageSize { get; set; } public void SetContext(int totalRecordCount, int initialPageSize) { this.TotalRecordCount = totalRecordCount; this.PageSize = initialPageSize; } This code simply injects the context-data needed for the control into the appropriate properties. Tracking Page Numbers Next you must add two properties that simplify the work of dealing with page numbers. At different times in your code you will want to use the page number and other times the page index. While these values essentially point to the same information, having to continually use one property and increment or decrement the value depending on the situation creates sloppy code. Therefore implementing these two properties helps keep the code readable and succinct. Enter the following code into the code-behind: view plaincopy to clipboardprint protected int PageNumber { get { if ( this .ViewState[ "PageNumber" ] != null ) { return Convert.ToInt32( this .ViewState[ "PageNumber" ]); } else { this .ViewState.Add( "PageNumber" , 1); return 1; } } set { if ( this .ViewState[ "PageNumber" ] != null ) { this .ViewState[ "PageNumber" ] = value; } else { this .ViewState.Add( "PageNumber" , value); } } } protected int PageIndex { get { if ( this .PageNumber > 1) { return this .PageNumber - 1; } else { return 0; } } } protected int PageNumber { get { if (this.ViewState["PageNumber"] != null) { return Convert.ToInt32(this.ViewState["PageNumber"]); } else { this.ViewState.Add("PageNumber", 1); return 1; } } set { if (this.ViewState["PageNumber"] != null) { this.ViewState["PageNumber"] = value; } else { this.ViewState.Add("PageNumber", value); } } } protected int PageIndex { get { if (this.PageNumber > 1) { return this.PageNumber - 1; } else { return 0; } } } The PageNumber properties uses ViewState to persist it’s value between requests to the page. If the ViewState entry does not exist the code presumes that the grid should begin on page one. The PageIndex property imply looks at the PageNumber and tries to figure out what the appropriate index is for the current page. Next create another helper property that will return the total number of pages: view plaincopy to clipboardprint protected int TotalNumberOfPages { get { return ( this .TotalRecordCount / this .PageSize); } } protected int TotalNumberOfPages { get { return (this.TotalRecordCount / this.PageSize); } } This property simply divides the total records by the page size to come up with the total number of pages. Next you will create some helper methods that are called during Page_PreRender to format the UI controls just before the page is released back to the browser. If you recall, the pager template featured a drop-down list that allows the user to choose a page to navigate to directly. The drop-down must be cleared and then re-filled upon each request to accommodate any changes in page size and thus the number of pages in the list. Create the following method in your code-behind: view plaincopy to clipboardprint private void FillPageNumbersList() { this .ddlPageNumbers.Items.Clear(); for ( int i = 1; i = this .PageNumber) { this .ddlPageNumbers.SelectedIndex = this .PageIndex; } else { this .ddlPageNumbers.SelectedIndex = 0; } } private void FormatPageNumbersList() { if (this.ddlPageNumbers.Items.Count >= this.PageNumber) { this.ddlPageNumbers.SelectedIndex = this.PageIndex; } else { this.ddlPageNumbers.SelectedIndex = 0; } } This method sets the drop-down’s selected index equal to the PageIndex as long as there are more items than the selected page number. Next, for the arrow controls, there is some logic required to make sure the arrows show up either as text or links, depending on the content. Enter the following method into your code-behind for CustomPager.ascx: view plaincopy to clipboardprint private void FormatArrowControls() { int pgNo = this .PageNumber; this .btnFirstPage.Visible = (pgNo != 1); this .btnPrevPage.Visible = (pgNo != 1); this .btnNextPage.Visible = (pgNo != this .TotalNumberOfPages); this .btnLastPage.Visible = (pgNo != this .TotalNumberOfPages); this .litFirstPage.Text = this .btnFirstPage.Text; this .litPrevPage.Text = this .btnPrevPage.Text; this .litNextPage.Text = this .btnNextPage.Text; this .litLastPage.Text = this .btnLastPage.Text; this .litFirstPage.Visible = ! this .btnFirstPage.Visible; this .litPrevPage.Visible = ! this .btnPrevPage.Visible; this .litNextPage.Visible = ! this .btnNextPage.Visible; this .litLastPage.Visible = ! this .btnLastPage.Visible; } private void FormatArrowControls() { int pgNo = this.PageNumber; this.btnFirstPage.Visible = (pgNo != 1); this.btnPrevPage.Visible = (pgNo != 1); this.btnNextPage.Visible = (pgNo != this.TotalNumberOfPages); this.btnLastPage.Visible = (pgNo != this.TotalNumberOfPages); this.litFirstPage.Text = this.btnFirstPage.Text; this.litPrevPage.Text = this.btnPrevPage.Text; this.litNextPage.Text = this.btnNextPage.Text; this.litLastPage.Text = this.btnLastPage.Text; this.litFirstPage.Visible = !this.btnFirstPage.Visible; this.litPrevPage.Visible = !this.btnPrevPage.Visible; this.litNextPage.Visible = !this.btnNextPage.Visible; this.litLastPage.Visible = !this.btnLastPage.Visible; } The first order of business is to set aside the value for PageNumber. If you remember that the PageNumber property is implemented as a wrapper around a ViewState entry. Instead of forcing the page to convert the un-typed data in ViewState back to an integer each time the value is required, this method sets aside the value into a local variable. Once the page number is located each button’s visibility is set depending on how it must appear based on the page number. Recall from the template that you implemented pairs of links and literals to show the arrows as links or as simple text. The second section of this method will set the value of the corresponding literals to what is entered in the LinkButtons. This way whatever text is set for the LinkButtons, the Literal controls will automatically get the same Text value. Finally, the last section reverses the visibility on the literals from how the links were previously set. This ensures only one control out of each pair will appear on the page. The next step is to call the three methods you just implemented from the Page_PreRender method in CustomPager.ascx: view plaincopy to clipboardprint protected void Page_PreRender( object sender, EventArgs e) { this .FillPageNumbersList(); this .FormatPageNumbersList(); this .FormatArrowControls(); } protected void Page_PreRender(object sender, EventArgs e) { this.FillPageNumbersList(); this.FormatPageNumbersList(); this.FormatArrowControls(); } Setup the Pager User Control on the Host Page Now that the pager control is starting to take shape return to Pager.aspx and switch to Design Mode. Drag the user control CustomPager.ascx on to the design surface for Pager.aspx. Switch to the markup view and move the user control markup in between the elements. Your markup should now look like this: view plaincopy to clipboardprint Note : To keep the naming clean the ID is now customPager not customPager1 Now that the user control is nested inside the WebDataGrid, Visual Studio will no longer generate a protected property that grants automatic access to the control in the code-behind. Therefore what you need to do is open the code-behind and provide programmatic access to the instance of the user control. Todo this, you will use the Page_Init method to setup a local member variable that points to the custom pager control. Drop to the code-behind of Pager.aspx and enter the following code: view plaincopy to clipboardprint private WebDataGrid_CustomPaging_test_CustomPager _customPager; protected void Page_Init( object sender, EventArgs e) { this ._customPager = this .wdg.Behaviors.Paging.PagerTemplateContainer.FindControl( "customPager" ) as WebDataGrid_CustomPaging_test_CustomPager; } private WebDataGrid_CustomPaging_test_CustomPager _customPager; protected void Page_Init(object sender, EventArgs e) { this._customPager = this.wdg.Behaviors.Paging.PagerTemplateContainer.FindControl("customPager") as WebDataGrid_CustomPaging_test_CustomPager; } First declare a private member typed as the pager control. The type name for this control is easiest found by opening the user control’s code-behind file and copying the type name and pasting it here. Be sure you have the proper type name for the _customPager variable. The directory structure in your solution is likely different from what you see above and will need what matches your class. Next, in the Page_Init you must drill into the WebDataGrid’s Paging behavior and call FindControl to locate the instance of the pager control inside the grid. Lastly you must cast the returning object into the same type as the pager template. Setting the Context Now that you have an instance of the custom pager, you can call the SetContext method to provide the control with its initial values. Update Page_Load to set the control context. Your Page_Load should now look like this: view plaincopy to clipboardprint protected void Page_Load(object sender, EventArgs e) { this._books = BookRepository .Instance.GetBooks(100); this._customPager.SetContext(this._books.Count, this.wdg.Behaviors.Paging.PageSize); } protected void Page_Load(object sender, EventArgs e) { this._books = BookRepository.Instance.GetBooks(100); this._customPager.SetContext(this._books.Count, this.wdg.Behaviors.Paging.PageSize); } The SetContext method requires the result set count and the initial page size. These values are passed in from the collection class count and the page size of the grid. Changing the Page The approach used in this solution that notifies the host page, where the grid is instantiated, it to raise an event telling the page to take some sort of action. The following code implements an EventArgs class that will carry the information required to allow the grid to respond to changes in page numbers and page sizes. Create a new class in the App_Code folder (or in the root of your project if you don’t have an App_Code folder) and name it PageSettingsChangedEventArgs.cs. Enter the code for this class as: view plaincopy to clipboardprint public class PageSettingsChangedEventArgs : System.EventArgs { public int PageNumber { get ; set ; } public int PageSize { get ; set ; } public int TotalNumberOfPages { get ; set ; } public int PageIndex { get { return this .PageNumber - 1; } } public PageSettingsChangedEventArgs() { } } public class PageSettingsChangedEventArgs : System.EventArgs { public int PageNumber { get; set; } public int PageSize { get; set; } public int TotalNumberOfPages { get; set; } public int PageIndex { get { return this.PageNumber - 1; } } public PageSettingsChangedEventArgs() { } } This class inherits from System.EventArgs so it may be used to raise events. The class explicitly tracks the PageNumber, PageSize and TotalNumberOfPages. The PageIndex is calculated from the PageNumber. At different times each of these properties are used to send messages to the grid. Previously in the article you created a stub for the changePage method. Now that some of the supporting properties are now implemented in your user control you can now proceed to filling out the body of the changePage method. Begin by opening the code-behind for CustomPager.ascx. The following code will replace the stub you have for changePage: view plaincopy to clipboardprint protected void changePage( object sender, EventArgs e) { if (sender is DropDownList) { this .PageNumber = Convert.ToInt32(((DropDownList)sender).SelectedValue); } else if (sender is LinkButton) { switch (((LinkButton)sender).CommandArgument) { case "first" : this .PageNumber = 1; break ; case "prev" : this .PageNumber--; break ; case "next" : this .PageNumber++; break ; case "last" : this .PageNumber = this .TotalNumberOfPages; break ; default : break ; } } else { throw new NotImplementedException( "changePage is not implemented for " + sender.GetType().Name); } this .RaiseChangePageEvent( this .PageNumber); } public event EventHandler PageChanged; private void RaiseChangePageEvent( int pageNumber) { if ( this .PageChanged != null ) { this .PageChanged( this , new PageSettingsChangedEventArgs() { PageNumber = this .PageNumber, TotalNumberOfPages = this .TotalNumberOfPages }); } } protected void changePage(object sender, EventArgs e) { if (sender is DropDownList) { this.PageNumber = Convert.ToInt32(((DropDownList)sender).SelectedValue); } else if (sender is LinkButton) { switch (((LinkButton)sender).CommandArgument) { case "first": this.PageNumber = 1; break; case "prev": this.PageNumber--; break; case "next": this.PageNumber++; break; case "last": this.PageNumber = this.TotalNumberOfPages; break; default: break; } } else { throw new NotImplementedException("changePage is not implemented for " + sender.GetType().Name); } this.RaiseChangePageEvent(this.PageNumber); } public event EventHandler PageChanged; private void RaiseChangePageEvent(int pageNumber) { if (this.PageChanged != null) { this.PageChanged(this, new PageSettingsChangedEventArgs() { PageNumber = this.PageNumber, TotalNumberOfPages = this.TotalNumberOfPages }); } } Starting from the top, the changePage method’s body is now responsible for sending messages out that the page number is changed, no matter what type of control the change was initiated. Line 3 attempts to look at the type of the sender argument to see if the DropDownList initiated the request. If the change came from the drop-down, then the code reaches into the SelectedValue property and sets it to the PageNumber property. If the request is not originating from the drop-down then it tries to see if perhaps a LinkButton was used to call the method. Recall from the markup for the pager template’s UI controls, each of the LinkButtons had a CommandArgument that matches each item in the switch statement beginning on line 9. From there the switch statement takes the appropriate action based on how the user is expecting the page number to change. Line 29 attempts to warn the the user if a new control that is not accounted for in this procedure tries to call the changePage method. (This exception will likely only seen by developer who may be tasked with updating the control.) Line 32 calls a method that is responsible for raising the event signaling that the page number is changed. Line 35 declares the PageChanged event using a generic EventHandler typed as the new EventArgs class you previously created in this section. Finally, line 37 contains the method for doing the work of raising the event. In standard C# notation, the object must first check to see if any other objects have subscribed to the event the method is preparing to raise. If there are objects observing this event, then the event is raised and the custom EventArgs class is filled with the new PageNumber and the updated TotalNumber of pages. Once this method is fired code in Pager.aspx will handle the event. Return to the code-behind for Pager.aspx and update the Page_Init method to match the following code: view plaincopy to clipboardprint protected void Page_Init( object sender, EventArgs e) { this ._customPager = this .wdg.Behaviors.Paging.PagerTemplateContainer.FindControl( "customPager" ) as WebDataGrid_CustomPaging_test_CustomPager; this ._customPager.PageChanged += new EventHandler (_customPager_PageChanged); } void _customPager_PageChanged( object sender, PageSettingsChangedEventArgs e) { if ((e.TotalNumberOfPages -1) (_customPager_PageChanged); } void _customPager_PageChanged(object sender, PageSettingsChangedEventArgs e) { if ((e.TotalNumberOfPages -1) Page Size Page Size The opening DIV found on line 1 of the above listing should come directly after the closing DIV tag that surrounds the set of Literal and LinkButton controls implemented in the previous section. The DIV will also get some styling from a style sheet entry you are soon to create. The next set of elements are a simple label to give a hint to the user as to the purpose of the slider. The many of slider’s properties are self-explanatory, so only this discussion will only focus on items significant to it’s behavior. The orientation is set to vertical so the slider may be comfortably placed next to the side of the grid. The LargeChangeAsString and SmallChangeAsString are constrained to 5 unit increments to force the slider to change with 5 possible points. The idea here is to only allow the slider to be set to a pre-defined number of values making it easy to work with the data and make the change easily understood by the user. The small set of values is enforced by the MaxValueAsString and MinValueAsString. So in the end the page size may be 5 items at a minimum and 25 items at most. Then page sizes in between may only be 10, 15 or 20 items per page. The properties ThumbsInteractionMode and SnapToSmallChange are set appropriately to allow the slider to naturally move to the next increment. This approach works well in this situation because the user doesn’t have to be precise about clicking on such a small control – the control will move it to the closest acceptable value based on where the user clicked on the control. The WebSlider control by default features buttons at the edges of the slider to provide fine-grained control over changing the values. In this case these buttons are not necessary and are hidden from the user. The AutoPostBackFlags have the ValueChanged event turned on so when a change to the slider is made the page will respond to the event. Finally the slider’s onvaluechanged event handler is pointing to the slPageSize_ValueChanged method. Open the code-behind of CustomPager.ascx and enter the following code: view plaincopy to clipboardprint public event EventHandler PageSizeChanged; protected void slPageSize_ValueChanged( object sender, Infragistics.Web.UI.EditorControls.SliderValueChangedEventArgs e) { if ( this .PageSizeChanged != null ) { this .PageSize = Convert.ToInt32( this .slPageSize.Value); if ( this .TotalNumberOfPages PageSizeChanged; protected void slPageSize_ValueChanged(object sender, Infragistics.Web.UI.EditorControls.SliderValueChangedEventArgs e) { if (this.PageSizeChanged != null) { this.PageSize = Convert.ToInt32(this.slPageSize.Value); if (this.TotalNumberOfPages (_customPager_PageChanged); this ._customPager.PageSizeChanged += new EventHandler (_customPager_PageSizeChanged); } void _customPager_PageSizeChanged( object sender, PageSettingsChangedEventArgs e) { this .wdg.Behaviors.Paging.PageSize = e.PageSize; if ((e.TotalNumberOfPages - 1) (_customPager_PageChanged); this._customPager.PageSizeChanged += new EventHandler (_customPager_PageSizeChanged); } void _customPager_PageSizeChanged(object sender, PageSettingsChangedEventArgs e) { this.wdg.Behaviors.Paging.PageSize = e.PageSize; if ((e.TotalNumberOfPages - 1) tag: view plaincopy to clipboardprint With this styling in place you may now run your page and the custom pager template is fully functional! Conclusion In this article you learned to implement a custom pager template which allows the user to change pages and page sizes, reports the current page number, total number of page and total number of records. You learned to extend the built-in paging features of the WebDataGrid and use the WebSlider to power the page size.WebSliderWebDataGridhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/25/webdatagrid-import-data-from-excel-export-to-excel-pdf-or-xpsTue, 14 Jul 2020 14:29:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:d0d42bd9-473a-42c1-8a70-864079610091Jason ZajacIf you’ve used our Excel or Document APIs, then you may already know where is article is headed. There have been numerous posts on how our Excel and Document APIs can be used to import and export data when working with our controls. In this post, we will focus on the newly released WebDataGrid control. Currently, it doesn’t have built-in support for exporting contents to Excel, PDF or XPS, ofcourse something that will be included in future. Here you can learn how to use the Excel API's load method to grab data from an excel sheet and display it within the WebDataGrid. Once the data is connected to the grid, you can then let the user do any grid operations like filter, sort, edit..etc. Once the user decides to export the displaying data, you can use the same API Engines to export the modified data and view back to Excel, PDF or XPS formats. If you are only interested in learning how to export your data, you can skip the first section below. Importing Data Let’s start off by assigning some local variables that are going to help us accomplish the task. //Create the temporary table to store data DataTable myDataTable = new DataTable(); DataColumn myDataColumn; DataRow myDataRow; //MIN/MAX Values used to frame the working size of the Excel data to be imported. int minCellRow = Int32.MaxValue; int maxCellRow = Int32.MinValue; int minCellColumn = Int32.MaxValue; int maxCellColumn = Int32.MinValue; Now, using an Excel sheet that has the NorthWind customer data, call the load method off of the Excel API to read the data and then construct a dataset. Workbook internalWorkBook = Workbook.Load(Request.PhysicalApplicationPath + "Northwind.xls"); The load method will read the excel contents and return us an Excel workbook object. Once we have the workbook, we can search for the work sheet that contains the data and start constructing our data object that we will later bind to our WebDataGrid. In this example we are using a DataTable. First, need to determine the bounds of our data, the column structure so that we can create the skeleton our data object accordingly. Using the workbook object, we can iterate through the rows and cells to determine the max and min of cells and rows that are contained within our worksheet that we want to load in our WebDataGrid. foreach (Infragistics.Excel.WorksheetRow row in internalWorkBook.Worksheets["Customers"].Rows) { foreach (Infragistics.Excel.WorksheetCell cell in row.Cells) { if (cell.Value != null) { //Logic For Determining the Range of Rows/Columns in the Excel File. minCellRow = Math.Min(minCellRow, cell.RowIndex); maxCellRow = Math.Max(maxCellRow, cell.RowIndex); minCellColumn = Math.Min(minCellColumn, cell.ColumnIndex); maxCellColumn = Math.Max(maxCellColumn, cell.ColumnIndex); } } } After we’ve collected the structural infromation of our worksheet, we can create columns for our datatable, and at the same time construct the columns of our WebDataGrid too. Here is where you can modify or remove colunms that you don’t want to import or setup properties on the WebDataGrid columns that you are creating. for (int i = minCellColumn; i <= maxCellColumn; i++) { //Get the column name string columnName = internalWorkBook.Worksheets["Customers"].Rows[minCellRow].Cells[ i].Value.ToString(); //The export that was demonstrated earlier utilizes the first row //for the column header. We can now use that to give column names. myDataColumn = new DataColumn(columnName); //Add the columns to the datatable. myDataTable.Columns.Add(myDataColumn); //Create WebDataGrid Columns and enable settings BoundDataField bdf = new BoundDataField(true); bdf.DataFieldName = columnName; bdf.Key = columnName; bdf.Header.Text = columnName; bdf.Width = Unit.Pixel(100); importGrid.Columns.Add(bdf); } Finally, now it’s time to push the data from our worksheet into our DataTable. for (int rowIndex = minCellRow + 1; rowIndex <= maxCellRow; rowIndex++) { //Create a new DataRow myDataRow = myDataTable.NewRow(); //Loop through the columns and associate the value to each cell for (int columnIndex = minCellColumn; columnIndex <= maxCellColumn; columnIndex++) { myDataRow[columnIndex] = internalWorkBook.Worksheets["Customers"].Rows[rowIndex].Cells[columnIndex].Value; } //Add The Row to a DataTable myDataTable.Rows.Add(myDataRow); } Ok, so now we have all we need in our DataTable, our WebDataGrid columns are setup as we want, let's go ahead and databind our WebDataGrid. //Set the primary key so that the WebDataGrid can perform Auto Crud myDataTable.PrimaryKey = new DataColumn[] { myDataTable.Columns["CustomerID"] }; //ImportGrid below is the grid that we have on our page importGrid.DataSource = myDataTable; importGrid.DataBind(); To download the sample that includes the source code, use the link at the end of this post. Note: The code assumes that you have the XLS file on the server, so that you can feed it in the Excel engine and can import data within the WebDataGrid. If you want to extend the behavior such that the client should be able to import an Excel file from his/her machine, then you will have to add the ability for the client to be able to upload that file onto the server first. Once, it is on the server, you can then simply use the import method to extract data from it. Exporting Data The idea behind exporting data to any of the formats using the APIs is the same. Basically, you iterate through the WebDataGrid columns first to create the column structure of the exported document and then iterate through the rows of the WebDataGrid to create rows for the data you want to export. Since the code is mostly the same when exporting to any of the formats, we will only going to run through exporting to excel in the post, you can download the sample from link below to get code for all formats. First we need to create the workbook and worksheet object of excel that we are going to export our data into and some helper variables that will help us accomplish the task. //Create workbook and worksheet object for Excel Workbook theWorkbook = new Workbook(); Worksheet theWorkSheet = theWorkbook.Worksheets.Add("WorkSheet1"); int iRow = 1; int iCell = 1; Now, iterate through the WebDataGrid columns to create the excel sheet columns and go through your rows to fill up the cells in those columns. //Iterate through the columns of the WebDataGrid and create // columns within the worksheet that will be exported. foreach(GridField gridField in this.WebDataGrid1.Columns) { iRow = 1; theWorkSheet.Rows[iRow].Cells[iCell].Value = gridField.Header.Text; theWorkSheet.Columns[iCell].Width = 5000; iRow += 1; //Now iterate through the grid rows to add rows to the worksheet foreach(GridRecord gridRecord in this.WebDataGrid1.Rows) { theWorkSheet.Rows[iRow].Cells[iCell].Value = gridRecord.Items[iCell-1].Text; iRow += 1; } iCell += 1; } In the sample attached you will find some extra code for formatting your cells while they are being exported. Once you’ve create your worksheet and exported the data, you can now go ahead and write the excel sheet to your stream, so that the client can view it. //Create the Stream class System.IO.MemoryStream theStream = new System.IO.MemoryStream(); //Write the in memory Workbook object to the Stream theWorkbook.Save(theStream); //Create a Byte Array to contain the stream and send the exported sheet to the client byte[] byteArr = (byte[])Array.CreateInstance(typeof(byte), theStream.Length); theStream.Position = 0; theStream.Read(byteArr, 0, (int)theStream.Length); theStream.Close(); Response.Clear(); Response.AddHeader("content-disposition", "attachment; filename=ExportedTo.xls"); Response.BinaryWrite(byteArr); Response.End(); That’s it! Using the code samples above you should be able to import your data from Excel and export it to Excel, PDF or XPS using the APIs that we ship along with our product. Download the source code of this tutorial from the link below. Download Source Code: ExportWebDataGridContents.zip Note: Sample is using 2008 Volume 3 of our control set and uses C#. These APIs demonstrated here are not directly connected to any control or component, so you can use it for any custom exporting requirement that you may have. To view more examples on the usage of the API, please check out the following resource. Manually Create Excel Files Excel I/0 Coloring Keywords in your Excel Worksheet Export WPF XamDataGrid to Excel Export WinChart to Excel Export WinTree to Excel Happy Coding !https://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/45/asp-net-performance---a-place-to-startTue, 14 Jul 2020 14:23:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:619db9fe-7801-4380-a806-eada1ad47356Jason ZajacIntroduction At least once per week I get the question - “How can I make this page run faster”. We can break down ASP.NET performance into two main categories, size and speed. Not surprisingly, size has a direct correlation with speed. But the total time to last byte (page load time) is more involved than just the size of the HTML. So the focus is generally broken up into separate categories – server-side performance, and client-side HTML. Server-Side Performance Even with the advent of AJAX, many ASP.NET applications still suffer from too many postbacks. In an AJAX model, a postback is done silently, rather than causing the entire page to refresh. But that doesn’t mean the postback isn’t happening. If your page_load takes a long time to execute on the serer, your AJAX callbacks are going to take a long time to execute as well. The solution? Well, for starters limit the number of postbacks (including AJAX callbacks) in your application. And for the times that you do need to postback, make sure your server-side code can execute quickly and efficiently. Here are some tips: Cache. You’ve probably heard this a hundred times, but caching is a huge performance booster. Whether you’re using output caching on your page or user-control , or you’re sticking some data in the Application cache , you’re shortening the access time, which improves performance. Just be cautious. If you’re caching using session state, you could blow up the memory consumption on your server. Data Access . Everyone knows about paging results in a grid, but only a small minority are actually paging results through to the backend database. By chunking data up into pages and sending it down to the browser you can cut the size of the HTML, and hence cut the time to load the page. The same is true for chunking data between your web server and your database server (even if it’s the same hardware). The LINQDataSource and the ObjectDataSource are both Pageable datasources in ASP.NET. In other words, when you ask the LINQDataSource to return the second page of results, it reaches into the Database and pulls out only the second page of results. This can speed up your server-side processing tremendously depending on the size of your database. And while we’re talking about databases, you might want to run a profiler against your DB and verify that your indexes are set up to ensure speedy results. Indexes really become important as you surpass the 500k record mark. It could mean the difference between a session time-out and a sub-second response. Client-Side Performance One of my favorite things to do is take a look at the HTML markup generated from an ASP.NET web application, and look for ways to improve the performance. Searching through the HTML, looking for clues as to what’s going on and what can be improved is like going on a treasure hunt. Here are some of the items I find on a recurring basis. Cache . Are you caching your images and script files? Chances are the answer is yes, since these items are set to be cached in IIS by default. But sometimes a quick sanity check can drive you insane. Running a utility like Fiddler or FireBug will show you the cache policy for all of the items loaded when your page loads. If you notice that your webresource.axd files aren’t being cached, that’s a problem, and it almost always points to a “Debug=True” attribute in your web.config file. To verify that the files are being cached, you want a result code of 304 for the HTTP Request as shown in Figure 2 below. If you see a result code of 200 and “Caching” shows up as “Private” as shown in Figure 1 below, that’s a good indicator that your application is running in Debug via the Web.Config setting. The behavior is there to prevent you from looking at stale javascript files when debugging your application, but it can slow down your site performance if that setting leaks out onto your production or test environment. In addition to forcing the JS resources to be downloaded for each page, Debug=True also slows down the server-side execution of code since it enables logging and instrumentation. One word of caution, don’t try to make sense of caching with the ASP.NET WebDevServer (file system project). The caching behavior of that simple web server doesn’t appear to follow the same rules as IIS. And here’s a quick tip that will prevent you from ever deploying a web site in debug mode. Add retail=true to your machine.config on your web server as shown in listing 1 below. Listing 1: Using the retail=true attribute to prevent running a production site in debug mode. Figure 1: Fiddler result of a non-cached response Figure 2: Fiddler result of a cached response ReallyLongIdStringsBecauseWebFormsIsUserFriendly. ASP.NET WebForms makes controls addressable through an ID property. The ID’s are then ensured to be unique through the UniqueID property by prepending each control’s ID with the ID of it’s Parent or Container. This is a very nice convenience for developers, especially when using UserControls where you may not have direct control over the ID of the child control. The problem though, is that the ID’s can become ridiculously long. The average WebForms application starts out with a MasterPage with ContentTemplates. So you’re already starting out one level deep in a control hierarchy for any content controls. But most content controls are then placed in panels, which house UserControls. You get the point. Before you know it, the UniqueID of a control consists of the ID of 4 other controls. Want to reduce the size of the rendered HTML? Reduce the length of the ID’s of the controls. This is one case where you may have to sacrifice readability for performance. Alternatively, you can try changing the ID of the controls in the Page_Load event, just be cautious. Changing ID’s of controls partway through the page lifecycle may disrupt some controls, you should certainly test this one before diving in. On the bright side, ASP.NET 4.0 promises to fix this problem, by adding a ClientIdMode property . Viewstate . Though many times thought of as the enemy, Viewstate is your best friend, of the high maintenance variety. Viewstate is the glue that makes a series of disconnected postbacks feel like a continuous application. Viewstate can reduce the number of times you have to hit your database, and is the reason behind the TextBox ValueChanged event. But with great power comes great responsibility. Since Viewstate is passed between the client and server as a hidden input field, it acts as a double whammy during a postback. First the data must be sent up to the server in the form Post (including an AJAX callback), and then the data must be sent back down to the client browser as part of the HTML response content. Keep in mind that on most internet connections, upload speed is much slower than download speeds, even in today’s broadband world. The form post is an upload, which means the Viewstate data will take longer to post up to the server than to download to the client browser. Viewstate isn’t a bad thing, but it should be used in moderation. In my experience, Viewstate isn’t necessary the majority of the time, which means unless you need to use it, you should disable it. If you’re used to using Viewstate, the one big change you’ll need to make is the check for if(!IsPostback) in your page_load. With Viewstate disabled, changes you make in the page_load will no longer be saved from one post to the next. But just thin about the overhead you incurred by taking a value, encoding it, sending it to the client, posting it back to the server, decoding it, all just to set a property on a control? That’s an example of where Viewstate just isn’t necessary, and can easily be turned off. Compression . As we’ve seen, making the page load faster usually boils down to reducing the size of the HTML content. One quick and easy way to shrink the HTTP response is to enable compression on your web server . HTTP Compression, also sometimes referred to as gzip compression is used to compress the response from the server, which is then decompressed when it reaches the client browser. All modern browsers (IE 4 and up, Every version of Firefox, Netscape 6.02 and up, Opera 5.12 via http://www.http-compression.com/ ) support http compression. Compression also works wonders on JavaScript files, which are usually full of whitespace characters. Inline CSS, JavaScript . Above we talked about the importance and benefits of caching. Every character of inline CSS and JavaScript that you put in an ASPX page, is a character that could have been cached but isn’t. Luckily, this is one of the easiest fixes out there – just move the CSS and JavaScript code off to an external file. Improving performance of a web application doesn’t have to be mad science, and doesn’t need to be done with expensive profilers. There are a number of steps you can take before going down to that level. The ideas above should give you a good start, and hopefully a better understanding of what to look for the next time you’re tweaking a page for performance. Keep in mind that each of the items listed above need to be examined to understand the value. If turning off Viewstate is going to take you 2 weeks to rework your code, and you’re only going to trim 1kb from a page that’s 800kb in size, the effort is far larger than the reward. As a general rule, I try to aim for <500kb for a web page. If you’ve tried all of the above, and still can’t get your page size under control, look at what the major constituents of that size is. Sometimes it means reworking your UI, and splitting one page up into two. Sometimes it means turning on Load On Demand functionality for data rich items like Trees, Drop Down lists, or Grids. Whatever the case may be, your first step to discovering the problem is a simple “View Source” away.ASP.NETPerformanceWebGridWebDataGridhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wikiFri, 01 Dec 2017 07:35:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:e358305c-f46a-47a4-a548-2d44e68a4c63Anonymoushttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/52/webdatagrid-dataviewstate-vs-viewstate?CommentId=95a3e24e-3c7c-4799-834a-4b24f98d987cThu, 05 Jul 2012 11:58:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:95a3e24e-3c7c-4799-834a-4b24f98d987cEmileeSo, when I'm using DataViewState, so I still need to reload (usually from the session) my grid's datasource for every post back.. www.writers-write.co.uk/c++programming-assignment.phphttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/4/understanding-script-combining?CommentId=684ca783-1a01-44af-a7d1-b6182dc32f49Sun, 17 Jun 2012 23:27:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:684ca783-1a01-44af-a7d1-b6182dc32f49huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../card-reader.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/39/persisting-moved-webdatagrid-columns?CommentId=8b5a18f0-9c1a-4ffb-8cae-e7c3c7797254Sun, 17 Jun 2012 23:27:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:8b5a18f0-9c1a-4ffb-8cae-e7c3c7797254huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../case-cover.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/40/introduction-to-the-infragistics-web-drag-and-drop-framework?CommentId=e1065f4d-7d32-4635-a969-1668db973901Sun, 17 Jun 2012 23:27:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:e1065f4d-7d32-4635-a969-1668db973901huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../card-reader.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/26/show-wait-indicator-during-webdatagrid-s-ajax-requests?CommentId=b813bad7-f208-4f45-9893-0847555e7ec3Sun, 17 Jun 2012 23:27:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:b813bad7-f208-4f45-9893-0847555e7ec3huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../case-cover.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/28/building-an-ajax-master-detail-page-with-the-webdatagrid?CommentId=742b8fdf-0eb5-4575-8231-d6de12297d0cSun, 17 Jun 2012 23:25:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:742b8fdf-0eb5-4575-8231-d6de12297d0chuangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../case-cover.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/34/learn-to-build-a-webdatagrid-custom-pager?CommentId=13e1ba47-e902-4f6c-884c-21e131b1e509Sun, 17 Jun 2012 23:25:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:13e1ba47-e902-4f6c-884c-21e131b1e509huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../adapter.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/29/implementing-an-ajax-live-form-with-netadvantage-webclient-controls?CommentId=56f46e81-aa1f-4444-a379-04343c840cc4Sun, 17 Jun 2012 23:24:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:56f46e81-aa1f-4444-a379-04343c840cc4huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../adapter.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/46/building-webparts-with-netadvantage-asp-net-controls?CommentId=5b48fda5-ceeb-4c42-8a0f-317022bf6f3eSun, 17 Jun 2012 23:24:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:5b48fda5-ceeb-4c42-8a0f-317022bf6f3ehuangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../charger.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/50/webdatagrid-101-fill-the-grid-with-data-and-change-the-look-and-feel?CommentId=5fb4d238-1fcb-4e28-b7ac-087297a4c14fSun, 17 Jun 2012 23:22:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:5fb4d238-1fcb-4e28-b7ac-087297a4c14fhuangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../keyboard.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/2/getting-started-with-netadvantage-asp-net?CommentId=a528e62b-9dcf-4624-a803-cde1c1f816bdSun, 17 Jun 2012 23:21:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:a528e62b-9dcf-4624-a803-cde1c1f816bdhuangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../keyboard.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/58/using-ado-net-to-perform-crud-operations-with-the-webdatagrid?CommentId=9dc51577-2c19-4924-a5c4-b133eafcfb1fSun, 17 Jun 2012 23:20:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:9dc51577-2c19-4924-a5c4-b133eafcfb1fhuangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../screen-protectors.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/25/webdatagrid-import-data-from-excel-export-to-excel-pdf-or-xps?CommentId=d5a47a82-5355-4dd4-8de1-9f69c8b3a7edSun, 17 Jun 2012 23:20:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:d5a47a82-5355-4dd4-8de1-9f69c8b3a7edhuangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../dock.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/27/implementing-webdatagrid-client-side-search?CommentId=a2b28ba9-3a37-4532-a512-c33d00fcfae9Sun, 17 Jun 2012 23:19:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:a2b28ba9-3a37-4532-a512-c33d00fcfae9huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../dock.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/48/accessing-extra-data-in-data-bound-controls?CommentId=37417097-cfdc-47ee-8d42-9916f3810485Sun, 17 Jun 2012 23:19:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:37417097-cfdc-47ee-8d42-9916f3810485huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../cable.htmlhttps://www.infragistics.com/community/product_platforms/aspnet/w/aspnet-wiki/45/asp-net-performance---a-place-to-start?CommentId=21119979-def5-4532-b914-8e8e8cebfd20Sun, 17 Jun 2012 23:19:00 GMT7a8b7c76-b7ad-48e0-9694-5b04ca132ed0:21119979-def5-4532-b914-8e8e8cebfd20huangThank you very much for you can share your post,the article content written very well, writes fluent,extremely is worth my study www.pandawill.com/.../cable.html