ui.igTreeGridPaging

ui.igTreeGridPaging_image

The igTreeGrid includes paging which allows the grid to render a limited number of rows of the underlying set of data to the user at a time. Depending on how the grid is configured, you can choose to send all or just a sub-set of data to the client at a time and you can control whether to page all records or the just root level rows. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
      <!DOCTYPE html>
      <html>
      <head>
          <!-- Infragistics Combined CSS -->
          <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
          <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />

          <!-- jQuery Core -->
          <script src="js/jquery.js" type="text/javascript"></script>

          <!-- jQuery UI -->
          <script src="js/jquery-ui.js" type="text/javascript"></script>

          <!-- Infragistics Combined Scripts -->
          <script src="js/infragistics.core.js" type="text/javascript"></script>
          <script src="js/infragistics.lob.js" type="text/javascript"></script>

          <script type="text/javascript">
              var employees = [
                  { "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
                  { "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
                  { "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
                  { "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },

                  // Andrew Fuller's direct reports
                  { "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
                  { "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
                  { "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
                  { "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },

                  // Janet Leverling's direct reports
                  { "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
                  { "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
                  { "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },

                  // Nancy Davolio's direct reports
                  { "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
                  { "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
                  { "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },

                  // Steve Buchanan's direct reports
                  { "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
                  { "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },

                  // Lacota Mufutau's direct reports
                  { "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
                  { "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
                  { "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },

                  // Dane Rodriquez's direct reports
                  { "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
                  { "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },

                  // Bernard Jarvis' direct report
                  { "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
              ];

             $(function () {
                 $("#treegrid").igTreeGrid({
                     dataSource: employees,
                     primaryKey: "employeeId",
                     foreignKey: "supervisorId",
                     autoGenerateColumns: false,
                     columns: [
                         { headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
                         { headerText: "First", key: "firstName", width: "150px", dataType: "string" },
                         { headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
                     ],
                     features: [
                         {
                             name: "Paging",
                             mode: "allLevels",
                             //mode: "rootLevelOnly",
                             pageSize: 10
                         }
                     ]
                 });
             });
          </script>
      </head>
      <body>
          <div id="treegrid"></div>
      </body>
      </html>
    

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.ui.treegrid.js
infragistics.util.js
infragistics.ui.grid.framework.js
infragistics.ui.grid.paging.js

Inherits

  • breadcrumbDelimiter

    Type:
    string
    Default:
    " &gt; "

    Sets/gets (it is set via $.html()) delimiter between ancestors in the breadcrumb trail. It is used only when contextRowMode is breadcrumb.

    Code Sample

     
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        contextRowMode: "breadcrumb",
                        breadcrumbDelimiter:">>" 
                    }
                ]
            });
            
            //Get
            var delimiter = $(".selector").igTreeGridPaging("option", "breadcrumbDelimiter");
    
            //Set
            $(".selector").igTreeGridPaging("option", "breadcrumbDelimiter", ">>");
  • breadcrumbKey

    Type:
    string
    Default:
    null

    Sets/gets the column key of ancestor to be shown in the breadcrumb trail. It is used only when contextRowMode is breadcrumb.

    Code Sample

          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        contextRowMode: "breadcrumb",
                        breadcrumbKey:"firstName" 
                    }
                ]
            });
            
            //Get
            var breadcrumbKey = $(".selector").igTreeGridPaging("option", "breadcrumbKey");
    
            //Set
            $(".selector").igTreeGridPaging("option", "breadcrumbKey", "firstName");
  • contextRowLoadingText

    Type:
    string
    Default:
    ""

    Sets/gets the text message shown while loading content of the context row(while processing breadcrumb/immediate parent row). It is set via $.html(). If set to null loading message is not shown.

    Code Sample

          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        contextRowMode: "breadcrumb",
                        contextRowLoadingText:"Loading context row" 
                    }
                ]
            });
            
            //Get
            var loadingText = $(".selector").igTreeGridPaging("option", "contextRowLoadingText");
    
            //Set
            $(".selector").igTreeGridPaging("option", "contextRowLoadingText", "Loading context row");
  • contextRowMode

    Type:
    enumeration
    Default:
    none

    When data flows to the next page there are a couple of different modes that can help communicate the context of a leaf level row. When mode option is "rootLevelOnly" then the context row always shows the value of the contextRowRootText option.

    Members

    • none
    • Type:string
    • Does not render the contextual row.
    • parent
    • Type:string
    • Renders a read-only representation of the immediate parent row.
    • breadcrumb
    • Type:string
    • Renders a read-only breadcrumb trail representing the full path through all ancestors.

    Code Sample

          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        contextRowMode: 'breadcrumb'
                    }
                ]
            });
            
            //Get
            var mode = $(".selector").igTreeGridPaging("option", "contextRowMode");
    
            //Set
            $(".selector").igTreeGridPaging("option", "contextRowMode", "parent");
  • contextRowRootText

    Type:
    string
    Default:
    ""

    Sets/gets the content of the context row when the first record in the page is root(hasn't ancestors) record. It is set via $.html().

    Code Sample

          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        contextRowMode: 'breadcrumb',
                        contextRowRootText: "First page"
                    }
                ]
            });
            
            //Get
            var rootText = $(".selector").igTreeGridPaging("option", "contextRowRootText");
    
            //Set
            $(".selector").igTreeGridPaging("option", "contextRowRootText", "First page");
  • currentPageDropDownLeadingLabel
    Inherited

    Type:
    string
    Default:
    ""

    Leading label for the dropdown from where the page index can be switched.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        currentPageDropDownLeadingLabel : "Current Page"
                    }
                ]
            });
            
            //Get
            var label = $(".selector").igTreeGridPaging("option", "currentPageDropDownLeadingLabel");
    
            //Set
            $(".selector").igTreeGridPaging("option", "currentPageDropDownLeadingLabel", "Current Page");
          
  • currentPageDropDownTooltip
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized tooltip for the page index dropdown.

    Code Sample

          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        currentPageDropDownTooltip : "Choose Page"
                    }
                ]
            });
            
            //Get
            var tooltip = $(".selector").igTreeGridPaging("option", "currentPageDropDownTooltip");
    
            //Set
            $(".selector").igTreeGridPaging("option", "currentPageDropDownTooltip", "Choose Page");
          
  • currentPageDropDownTrailingLabel
    Inherited

    Type:
    string
    Default:
    ""

    Localized trailing label for the dropdown from where the page index can be switched.

    Code Sample

     
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        currentPageDropDownTrailingLabel : "Pages"
                    }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridPaging("option", "currentPageDropDownTrailingLabel");
    
            //Set
            $(".selector").igTreeGridPaging("option", "currentPageDropDownTrailingLabel", "Pages");
          
  • currentPageIndex
    Inherited

    Type:
    number
    Default:
    0

    Current page index that's bound and rendered in the UI.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        currentPageIndex : 5
                     }
                ]
            });
    
            //Get
            var page = $(".selector").igTreeGridPaging("option", "currentPageIndex");
    
            //Set
            $(".selector").igTreeGridPaging("option", "currentPageIndex", 5);
          
  • defaultDropDownWidth
    Inherited

    Type:
    number
    Default:
    70

    Dropdown width for page size and page index dropdowns.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        defaultDropDownWidth : 100
                     }
                ]
            });
    
            //Get
            var width = $(".selector").igTreeGridPaging("option", "defaultDropDownWidth");
    
            //Set
            $(".selector").igTreeGridPaging("option", "defaultDropDownWidth", 100); 
          
  • delayOnPageChanged
    Inherited

    Type:
    number
    Default:
    350

    Time in milliseconds for which page dropdown will wait for keystrokes before changing the page.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        delayOnPageChanged : 500
                     }
                ]
            });
    
            //Get
            var delayOnPageChanged = $(".selector").igTreeGridPaging("option", "delayOnPageChanged");
          
  • firstPageLabelText
    Inherited

    Type:
    string
    Default:
    ""

    Localized text for the first page label.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        firstPageLabelText : "First"
                     }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridPaging("option", "firstPageLabelText");
    
            //Set
            $(".selector").igTreeGridPaging("option", "firstPageLabelText", "First");
          
  • firstPageTooltip
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized tooltip for the first. page button.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        firstPageTooltip : "Go to first page"
                     }
                ]
            });
    
            //Get
            var tooltip = $(".selector").igTreeGridPaging("option", "firstPageTooltip");
    
            //Set
            $(".selector").igTreeGridPaging("option", "firstPageTooltip", "Go to first page");
          
  • inherit
    Inherited

    Type:
    bool
    Default:
    false

    Enables/disables feature inheritance for the child layouts. NOTE: It only applies for igHierarchicalGrid.

  • lastPageLabelText
    Inherited

    Type:
    string
    Default:
    ""

    Localized text for the last page label.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        lastPageLabelText : "Last"
                     }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridPaging("option", "lastPageLabelText");
    
            //Set
            $(".selector").igTreeGridPaging("option", "lastPageLabelText", "Last");
          
  • lastPageTooltip
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized tooltip for the last. page button.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        lastPageTooltip : "Go to last page"
                     }
                ]
            });
    
            //Get
            var tooltip = $(".selector").igTreeGridPaging("option", "lastPageTooltip");
    
            //Set
            $(".selector").igTreeGridPaging("option", "lastPageTooltip", "Go to last page");
          
  • mode

    Type:
    enumeration
    Default:
    rootLevelOnly

    Sets gets paging mode.

    Members

    • rootLevelOnly
    • Type:string
    • Only pages records at the root of the tree grid are displayed.
    • allLevels
    • Type:string
    • includes all visible records in paging.

    Code Sample

           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        mode : "allLevels"
                     }
                ]
            });
    
            //Get
            var mode = $(".selector").igTreeGridPaging("option", "mode");
          
  • nextPageLabelText
    Inherited

    Type:
    string
    Default:
    ""

    Localized text for the next page label.

    Code Sample

           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        nextPageLabelText : "Next"
                     }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridPaging("option", "nextPageLabelText");
    
            //Set
            $(".selector").igTreeGridPaging("option", "nextPageLabelText", "Next");
          
  • nextPageTooltip
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized tooltip for the next. page button.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        nextPageTooltip : "Go to next page"
                     }
                ]
            });
    
            //Get
            var tooltip = $(".selector").igTreeGridPaging("option", "nextPageTooltip");
    
            //Set
            $(".selector").igTreeGridPaging("option", "nextPageTooltip", "Go to next page");
          
  • pageCountLimit
    Inherited

    Type:
    number
    Default:
    10

    Sets gets the number of pages which if exceeded a drop down list of page indices is displayed. If the number of pages is less than or equal to this option then page buttons are displayed.

    Code Sample

      
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageCountLimit : 5
                     }
                ]
            });
    
            //Get
            var count = $(".selector").igTreeGridPaging("option", "pageCountLimit");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageCountLimit", 5);
          
  • pageIndexUrlKey
    Inherited

    Type:
    string
    Default:
    null

    Denotes the name of the encoded URL parameter that will state what is the currently requested page index.

    Code Sample

     
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageIndexUrlKey : "page"
                     }
                ]
            });
    
            //Get
            var key = $(".selector").igTreeGridPaging("option", "pageIndexUrlKey");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageIndexUrlKey", "page");
          
  • pagerRecordsLabelTemplate
    Inherited

    Type:
    string
    Default:
    ""

    Custom pager records label template - in jQuery templating style and syntax.

    Code Sample

      
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pagerRecordsLabelTemplate : "From ${startRecord} to ${endRecord} of ${recordCount}"
                    }
                ]
            });
    
            //Get
            var labelTemplate = $(".selector").igTreeGridPaging("option", "pagerRecordsLabelTemplate");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pagerRecordsLabelTemplate", "From ${startRecord} to ${endRecord} of ${recordCount}");
          
  • pagerRecordsLabelTooltip
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized tooltip for the pager records label.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pagerRecordsLabelTooltip : "Current records"
                    }
                ]
            });
    
            //Get
            var labelTemplate = $(".selector").igTreeGridPaging("option", "pagerRecordsLabelTooltip");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pagerRecordsLabelTooltip", "Current records");
          
  • pageSize
    Inherited

    Type:
    number
    Default:
    25

    Default number of records per page.

    Code Sample

          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageSize : 10
                    }
                ]
            });
            
            //Get
            var pageSize = $(".selector").igTreeGridPaging("option", "pageSize");
            
            //Set
            $(".selector").igTreeGridPaging("option", "pageSize", 10);
          
  • pageSizeDropDownLabel
    Inherited

    Type:
    string
    Default:
    ""

    Label rendered in front of the page size dropdown.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageSizeDropDownLabel : "Rows"
                    }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridPaging("option", "pageSizeDropDownLabel");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageSizeDropDownLabel", "Rows");
          
  • pageSizeDropDownLocation
    Inherited

    Type:
    enumeration
    Default:
    above

    Page size dropdown location. Can be rendered above the grid header or inside the pager, next to the page links.

    Members

    • above
    • Type:string
    • it will be rendered above the grid header.
    • inpager
    • Type:string
    • it will be rendered next to page links.

    Code Sample

     
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageSizeDropDownLocation : "inpager"
                    }
                ]
            });
    
            //Get
            var location = $(".selector").igTreeGridPaging("option", "pageSizeDropDownLocation");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageSizeDropDownLocation", "inpager");
          
  • pageSizeDropDownTooltip
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized tooltip for the page size dropdown.

    Code Sample

     
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageSizeDropDownTooltip : "Choose page size"
                    }
                ]
            });
    
            //Get
            var tooltip = $(".selector").igTreeGridPaging("option", "pageSizeDropDownTooltip");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageSizeDropDownTooltip", "Choose page size");
          
  • pageSizeDropDownTrailingLabel
    Inherited

    Type:
    string
    Default:
    ""

    Trailing label for the page size dropdown.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageSizeDropDownTrailingLabel : "Rows"
                    }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridPaging("option", "pageSizeDropDownTrailingLabel");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageSizeDropDownTrailingLabel", "Rows");
          
  • pageSizeList
    Inherited

    Type:
    array
    Default:
    []
    Elements Type:
    object

    Default: [5, 10, 20, 25, 50, 75, 100]. contents of the page size dropdown indicating what preconfigured page sizes are available to the end user.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageSizeList : [10, 20, 30]
                    }
                ]
            });
    
            //Get
            var pagesList = $(".selector").igTreeGridPaging("option", "pageSizeList");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageSizeList", [10, 20, 30]);
          
  • pageSizeUrlKey
    Inherited

    Type:
    string
    Default:
    null

    Denotes the name of the encoded URL parameter that will state what is the currently requested page size.

    Code Sample

           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageSizeUrlKey : "psize"
                    }
                ]
            });
    
            //Get
            var key = $(".selector").igTreeGridPaging("option", "pageSizeUrlKey");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageSizeUrlKey", "psize");
          
  • pageTooltipFormat
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized format string for tooltips of buttons that directly jump to a particular page. The format string follows the jQuery templating style and syntax. See also the pageCountLimit option.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        pageTooltipFormat : "Open page"
                    }
                ]
            });
    
            //Get
            var key = $(".selector").igTreeGridPaging("option", "pageTooltipFormat");
    
            //Set
            $(".selector").igTreeGridPaging("option", "pageTooltipFormat", "Open page");
          
  • persist
    Inherited

    Type:
    bool
    Default:
    true

    Enables / disables paging persistence between states.

    Code Sample

     
          //Initialize
          $(".selector").igTreeGrid({
          features : [
            {
                name : "Paging",
                persist : false
            }
           ]
        });
     
        //Get
        var persist = $(".selector").igTreeGridPaging("option", "persist");
     
        //Set
        $(".selector").igTreeGridPaging("option", "persist", true);
          
  • prevPageLabelText
    Inherited

    Type:
    string
    Default:
    ""

    Localized text for the prev page label.

    Code Sample

     
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        prevPageLabelText : "Previous"           
                    }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridPaging("option", "prevPageLabelText");
    
            //Set
            $(".selector").igTreeGridPaging("option", "prevPageLabelText", "Previous");
          
  • prevPageTooltip
    Inherited

    Type:
    string
    Default:
    ""

    Custom localized tooltip for the prev. page button.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        prevPageTooltip : "Go to previous page"
                    }
                ]
            });
    
            //Get
            var tooltip = $(".selector").igTreeGridPaging("option", "prevPageTooltip");
    
            //Set
            $(".selector").igTreeGridPaging("option", "prevPageTooltip", "Go to previous page");
          
  • recordCountKey
    Inherited

    Type:
    string
    Default:
    null

    The property in the response that will hold the total number of records in the data source.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        recordCountKey : "totalCount"
                    }
                ]
            });
    
            //Get
            var totalCount = $(".selector").igTreeGridPaging("option", "recordCountKey");
    
            //Set
            $(".selector").igTreeGridPaging("option", "recordCountKey", "totalCount");
          
  • renderContextRowFunc

    Type:
    enumeration
    Default:
    null

    Reference to the (or name of )function, called before rendering context row content(rendering loading message/bread crumb/parent row). The function takes 4 arguments- dataRow, $textArea- jQuery representation of the text area of the context row(when mode is loading/breadcrumb then it is <span /> otherwise <tr />), array of parent rows and context mode - "loading"|"breadcrumb"|"parent". When the function returns string it is used as html set in $textArea. If the function does not return result or returns false/empty string then rendering of the content of the context row should be handled by the developer(similar to canceling rendering of context row content).

    Code Sample

     
             var contextRowFunc = function(dataRow, $textArea, parents, mode) {
                var contextRowText = "<div>";
                $(parents).each(function(index) {
                    contextRowText += "<div> Parent " + index + " :" + this.row["firstName"] + " " + this.row["lastName"] + "</div>";
                });
                contextRowText += "</div>";
                return contextRowText;
             } 
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        contextRowMode: 'breadcrumb',
                        renderContextRowFunc: contextRowFunc
                    }
                ]
            });
            
            //Get
            var contextRowFunc = $(".selector").igTreeGridPaging("option", "renderContextRowFunc");
    
            //Set
            $(".selector").igTreeGridPaging("option", "renderContextRowFunc", contextRowFunc);
  • showFirstLastPages
    Inherited

    Type:
    bool
    Default:
    true

    Option specifying whether to render the first and last page buttons.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        showFirstLastPages : false
                    }
                ]
            });
            
            //Get
            var showFirstLast = $(".selector").igTreeGridPaging("option", "showFirstLastPages");
    
            //Set
            $(".selector").igTreeGridPaging("option", "showFirstLastPages", false);
          
  • showPagerRecordsLabel
    Inherited

    Type:
    bool
    Default:
    true

    Option specifying whether to show summary label for the currently rendered records or not.

    Code Sample

     
            //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        showPagerRecordsLabel : false
                    }
                ]
            });
            
            //Get
            var showRecordsLabel = $(".selector").igTreeGridPaging("option", "showPagerRecordsLabel");
    
            //Set
            $(".selector").igTreeGridPaging("option", "showPagerRecordsLabel", false);
          
  • showPageSizeDropDown
    Inherited

    Type:
    bool
    Default:
    true

    If false, a dropdown allowing to change the page size will not be rendered in the UI.

    Code Sample

      
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        showPageSizeDropDown : false
                    }
                ]
            });
    
            //Get
            var showDropDown = $(".selector").igTreeGridPaging("option", "showPageSizeDropDown");
    
            //Set
            $(".selector").igTreeGridPaging("option", "showPageSizeDropDown", false);
          
  • showPrevNextPages
    Inherited

    Type:
    bool
    Default:
    true

    Option specifying whether to render the previous and next page buttons.

    Code Sample

     
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        showPrevNextPages : false
                    }
                ]
            });
    
            //Get
            var showPages = $(".selector").igTreeGridPaging("option", "showPrevNextPages");
    
            //Set
            $(".selector").igTreeGridPaging("option", "showPrevNextPages", false);
          
  • type
    Inherited

    Type:
    enumeration
    Default:
    null

    Members

    • remote
    • Type:string
    • request.
    • local
    • Type:string
    • paging on the client-side.

    Code Sample

     
          //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        type : "local"
                    }
                ]
            });
    
            //Get
            var type = $(".selector").igTreeGridPaging("option", "type");
    
            //Set
            $(".selector").igTreeGridPaging("option", "type", "local"); 
          
  • visiblePageCount
    Inherited

    Type:
    number
    Default:
    5

    Number of pages that are constantly visible. For the invisible pages, prev and next buttons are used.

    Code Sample

      
           //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Paging",
                        visiblePageCount : 10
                    }
                ]
            });
    
            //Get
            var visCount = $(".selector").igTreeGridPaging("option", "visiblePageCount");
    
            //Set
            $(".selector").igTreeGridPaging("option", "visiblePageCount", 10);
          

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details
  • contextRowRendered

    Cancellable:
    false

    Event fired context row content is rendered.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igTreeGridPaging.
    Use ui.dataRow to get reference to the first data row. Null if there are no records.
    Use ui.currentPageIndex to get current page index.
    Use ui.parentRows to get array of the parent rows(of the ui.dataRow). If the dataRow is null(for instance filter is applied and no records are shown) then it is empty array. Otherwise it contains all ancestors ordered by level(including the current dataRow) - the first item is root level, the last array item is the current ui.dataRow
    Use ui.contextRowMode to get the current context row mode.

    Code Sample

      
            //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingcontextrowrendered", function (evt, ui) {
               //return the triggered event
                evt;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the first data row
                ui.dataRow;
                
                 //	Get array of the parent rows(of the ui.dataRow)
                ui.parentRows;
                
                
                //	Get current page index
                ui.currentPageIndex;
    
                //	Get the current context row mode.
                ui.owner.contextRowMode;
    
            });
    
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    contextRowRendered: function (evt, ui) { ... }
                }]
            });  
  • contextRowRendering

    Cancellable:
    true

    Event fired before rendering context row content.
    Return false in order to cancel this event.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igTreeGridPaging.
    Use ui.dataRow to get reference to the first data row. Null if there are no records.
    Use ui.currentPageIndex to get current page index.
    Use ui.contextRowMode to get the current context row mode.

    Code Sample

            //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingcontextrowrendering", function (evt, ui) {
               //return the triggered event
                evt;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the first data row
                ui.dataRow;
                
                //	Get current page index
                ui.currentPageIndex;
    
                //	Get the current context row mode.
                ui.owner.contextRowMode;
    
            });
    
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    contextRowRendering: function (evt, ui) { ... }
                }]
            });
  • pageIndexChanged
    Inherited

    Cancellable:
    false

    Event fired after the page index is changed , but before grid data rebinds
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridPaging.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.pageIndex to get current page index.

    Code Sample

     
           //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingpageindexchanged", function (evt, ui) {
                //return browser event
                evt.originalEvent;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the igTreeGrid widget to which the idTreeGridPaging is bound
                ui.owner.grid;
    
                //	Get the current page index
                ui.pageIndex;
            });
    
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    pageIndexChanged: function (evt, ui) { ... }
                }]
            });
          
  • pageIndexChanging
    Inherited

    Cancellable:
    true

    Event fired before the page index is changed.
    Return false in order to cancel page index changing.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridPaging.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.currentPageIndex to get current page index.
    Use ui.newPageIndex to get new page index.

    Code Sample

     
            //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingpageindexchanging", function (evt, ui) {
                //return browser event
                evt.originalEvent;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the igTreeGrid widget to which the idTreeGridPaging is bound
                ui.owner.grid;
    
                //	Get the current page index
                ui.currentPageIndex;
    
                //	Get the index of the page that is about to be opened
                ui.newPageIndex;
            });
            
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    pageIndexChanging: function (evt, ui) { ... }
                }]
            });
          
  • pagerRendered
    Inherited

    Cancellable:
    false

    Event fired after the pager footer is rendered
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridPaging.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.dataSource to get reference to grid's data source.

    Code Sample

     
            //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingpagerrendered", function (evt, ui) {
                //return browser event
                evt.originalEvent;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the igTreeGrid widget to which the idTreeGridPaging is bound
                ui.owner.grid;
    
                //	Get the data source of the grid
                ui.dataSource;
            });
            
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    pagerRendered: function (evt, ui) { ... }
                }]
            });
          
  • pagerRendering
    Inherited

    Cancellable:
    true

    Event fired before the pager footer is rendered (the whole area below the grid records).
    Return false in order to cancel pager footer rendering.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridPaging.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.dataSource to get reference to grid's data source.

    Code Sample

     
            //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingpagerrendering", function (evt, ui) {
                //return browser event
                evt.originalEvent;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the igTreeGrid widget to which the idTreeGridPaging is bound
                ui.owner.grid;
    
                //	Get the data source of the grid
                ui.dataSource;
            });
            
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    pagerRendering: function (evt, ui) { ... }
                }]
            });
          
  • pageSizeChanged
    Inherited

    Cancellable:
    false

    Event fired after the page size is changed from the page size dropdown.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridPaging.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.pageSize to get current page size.

    Code Sample

     
           //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingpagesizechanged", function (evt, ui) {
                //return browser event
                evt.originalEvent;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the igTreeGrid widget to which the idTreeGridPaging is bound
                ui.owner.grid;
    
                //	Get the current page size in the grid
                ui.pageSize;
            });
            
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    pageSizeChanged: function (evt, ui) { ... }
                }]
            });
          
  • pageSizeChanging
    Inherited

    Cancellable:
    true

    Event fired when the page size is about to be changed from the page size dropdown.
    Return false in order to cancel page size changing.
    Function takes arguments evt and ui.
    Use ui.owner to get reference to igGridPaging.
    Use ui.owner.grid to get reference to igGrid.
    Use ui.currentPageSize to get current page size.
    Use ui.newPageSize to get new page size.

    Code Sample

     
          //Bind after initialization
            $(document).delegate(".selector", "igtreegridpagingpagesizechanging", function (evt, ui) {
                //return browser event
                evt.originalEvent;
    
                //	Get a reference to the igTreeGridPaging widget that fired the event
                ui.owner;
    
                //	Get a reference to the igTreeGrid widget to which the idTreeGridPaging is bound
                ui.owner.grid;
    
                //	Get the current page size in the grid
                ui.currentPageSize;
    
                //	Get the new page size in the grid that is about to be set
                ui.newPageSize;
            });
            
            //Initialize
            $(".selector").igTreeGrid({
                features: [{
                    name: "Paging",
                    pageSizeChanging: function (evt, ui) { ... }
                }]
            });
          
  • destroy

    .igTreeGridPaging( "destroy" );

    Destroys the igTreeGridPaging feature by removing all elements in the pager area, unbinding events, and resetting data to discard data filtering on paging.

    Code Sample

     
           $(".selector").igTreeGridPaging("destroy");
          
  • getContextRow

    .igTreeGridPaging( "getContextRow" );
    Return Type:
    object
    Return Type Description:
    jQuery representation of the context row.

    Get jQuery representation of of the context row. It is rendered in the header. If there isn't such element - creates it.

    Code Sample

     
           $(".selector").igTreeGridPaging("getContextRow");
          
  • getContextRowTextArea

    .igTreeGridPaging( "getContextRowTextArea" );
    Return Type:
    object
    Return Type Description:
    jQuery representation of the context row text area.

    Get jQuery representation of element that holds text area of the context row. If there isn't such element - creates it.

    Code Sample

     
           $(".selector").igTreeGridPaging("getContextRowTextArea");
          
  • pageIndex
    Inherited

    .igTreeGridPaging( "pageIndex", [index:number] );
    Return Type:
    number
    Return Type Description:
    if no param is specified, returns the current page index.

    Gets /sets the current page index, delegates data binding and paging to $.ig.DataSource.

    • index
    • Type:number
    • Optional
    • the page index to go to.

    Code Sample

     
           //Get
            var index = $(".selector").igTreeGridPaging("pageIndex");
            
            //Set
            $(".selector").igTreeGridPaging("pageIndex", 4);
          
  • pageSize
    Inherited

    .igTreeGridPaging( "pageSize", [size:number] );
    Return Type:
    number
    Return Type Description:
    if no param is specified, returns the current page size.

    Gets / sets the page Size. if no parameter is specified, just returns the current page size.

    • size
    • Type:number
    • Optional
    • the page size.

    Code Sample

          //Get
            var size = $(".selector").igTreeGridPaging("pageSize");
    
            //Set
            $(".selector").igTreeGridPaging("pageSize", 16);
          
  • ui-igtreegrid-contextrow

    Classes applied to the paging context row(&lt;TR&gt;).
  • ui-igtreegrid-contextrow-content

    Classes applied to the element showing context row content.
  • ui-igtreegrid-contextrow-icon ui-icon ui-icon-bookmark

    Classes applied to the element showing context row icon.
  • ui-igtreegrid-contextrow-container

    Classes applied to the element that holds context row container(holding context row SPAN and context row icon SPAN).
  • ui-iggrid-firstpage ui-iggrid-paging-item ui-state-default ui-corner-left

    Classes applied to the area where the first page button and label are rendered.
  • ui-iggrid-pageimg ui-iggrid-firstpageimg ui-icon ui-icon-arrowstop-1-w

    Classes applied to the first page area that holds the span for the icon.
  • ui-iggrid-pageimg ui-iggrid-firstpageimgdisabled ui-icon ui-state-disabled ui-icon-arrowstop-1-w

    Classes applied to the first page area that holds the span for the icon when it is disabled.
  • ui-iggrid-firstpagelabel

    Classes applied to the first page's label (span).
  • ui-iggrid-firstpagelabeldisabled ui-state-disabled

    Classes applied to the first page's label (span) when it's disabled.
  • ui-iggrid-lastpage ui-iggrid-paging-item ui-state-default ui-corner-right

    Classes applied to the area where the last page button and label are rendered.
  • ui-iggrid-pageimg ui-iggrid-lastpageimg ui-icon ui-icon-arrowstop-1-e

    Classes applied to the last page area that holds the span for the icon.
  • ui-iggrid-pageimg ui-iggrid-lastpageimgdisabled ui-icon ui-state-disabled ui-icon-arrowstop-1-e

    Classes applied to the last page area that holds the span for the icon when it is disabled.
  • ui-iggrid-lastpagelabel

    Classes applied to the last page's label (span).
  • ui-iggrid-lastpagelabeldisabled ui-state-disabled

    Classes applied to the last page's label (span) when it's disabled.
  • ui-iggrid-nextpage ui-iggrid-paging-item ui-state-default

    Classes applied to the area where the next page button and label are rendered.
  • ui-iggrid-pageimg ui-iggrid-nextpageimg ui-icon ui-icon-triangle-1-e

    Classes applied to the next page area that holds the span for the icon.
  • ui-iggrid-pageimg ui-iggrid-nextpageimgdisabled ui-icon ui-state-disabled ui-icon-triangle-1-e

    Classes applied to the next page area that holds the span for the icon when it is disabled.
  • ui-iggrid-nextpagelabel

    Classes applied to the next page's label (span).
  • ui-iggrid-nextpagelabeldisabled ui-state-disabled

    Classes applied to the next page's label (span) when it's disabled.
  • ui-iggrid-page ui-state-default ui-corner-all

    Classes applied to a page container element (list item).
  • ui-iggrid-pagecurrent ui-state-active ui-corner-all

    Clases applied to the current page (corresponding to the current page index).
  • ui-iggrid-pagedropdown

    Classes applied to the editor dropdown from where the page index can be changed.
  • ui-iggrid-pagedropdowncontainer

    Classes applied to the element holding the editor dropdown from where the page index can be changed.
  • ui-iggrid-pagedropdownlabels

    Classes applied to the spans that are before and after the dropdown editor from where the page index can be changed.
  • ui-iggrid-pagefocused ui-state-focus

    Classes applied to the current page that has focus (when keyboard anvigation is used).
  • ui-iggrid-page-hover ui-state-hover

    Classes applied to a page list item when it's hovered.
  • ui-iggrid-pagelink ui-helper-reset

    Classes applied to a page link that can be clicked with the mouse.
  • ui-iggrid-pagelinkcurrent

    Classes applied to the anchor of the current page item.
  • ui-helper-reset ui-iggrid-pagelist ui-iggrid-paging-item

    Classes applied to the UL list that holds all pages.
  • ui-widget ui-iggrid-pager ui-helper-clearfix ui-corner-bottom ui-widget-header ui-iggrid-footer

    Classes applied to the pager area.
  • ui-iggrid-pagerrecordslabel ui-iggrid-results

    Classes applied to the label showing how many records are rendered of some total number.
  • ui-iggrid-paging

    Classes applied to the area on the right of the footer where first, last, prev, next buttons as well as page links and page index dropdown are rendered.
  • ui-iggrid-pagesizedropdown

    Classes applied to the editor dropdown from where page size can be changed.
  • ui-helper-clearfix ui-iggrid-pagesizedropdowncontainer

    Classes applied to the element that holds the page size dropdown.
  • ui-widget ui-helper-clearfix ui-iggrid-pagesizedropdowncontainerabove ui-iggrid-toolbar ui-widget-header and ui-corner-top

    Classes applied to the container of the page size dropdown editor, when it is rendered above the header.
  • ui-iggrid-pagesizelabel

    Classes applied to the editor dropdown label from where page size can be changed.
  • ui-iggrid-results

    Classes applied around the label showing the currently rendered record indices out of some total value.
  • ui-iggrid-prevpage ui-iggrid-paging-item ui-state-default

    Classes applied to the area where the prev page button and label are rendered.
  • ui-iggrid-pageimg ui-iggrid-prevpageimg ui-icon ui-icon-triangle-1-w

    Classes applied to the prev page area that holds the span for the icon.
  • ui-iggrid-pageimg ui-iggrid-prevpageimgdisabled ui-icon ui-state-disabled ui-icon-triangle-1-w

    Classes applied to the prev page area that holds the span for the icon when it is disabled.
  • ui-iggrid-prevpagelabel

    Classes applied to the prev page's label (span).
  • ui-iggrid-prevpagelabeldisabled ui-state-disabled

    Classes applied to the prev page's label (span) when it's disabled.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.

#