1. AdvSearch
      1. AdvSearch.AdvSearch
        1. AdvSearch.AdvSearch.tpl
        2. AdvSearch.Advsearch.paging1Tpl
        3. AdvSearch.AdvSearch.paging0Tpl
        4. AdvSearch.AdvSearch.containerTpl
        5. Advsearch.AdvSearch.extractTpl
      2. AdvSearch.AdvSearchHelp
        1. AdvSearch.AdvSearchHelp.helplinkTpl
      3. AdvSearch.AdvSearchForm
        1. Advsearch.AdvSearchForm.tpl
    2. userTools
    3. ActivationEmail
    4. BotBlockX
    5. CacheClear
    6. CacheMaster
    7. Canonical
    8. Captcha
    9. CaseInsensitiveURLS
    10. ClassExtender
    11. ConstantContact
    12. ConvertDatabaseCharset
    13. DefaultResourceGroup
    14. DefaultUserGroup
    15. DirWalker
    16. EmailResource
    17. EZfaq
    18. FileUpload
    19. FixedPre
    20. getDynaDescription
    21. GoRevo
    22. LexiconHelper
    23. LogLogins
    24. LogPageNotFound
    25. MandrillX
    26. MessageManager
    27. NewsPublisher
    28. Notify
    29. ObjectExplorer
    30. Orphans
    31. Personalize
    32. QuickEmail
    33. ReflectBlock
    34. RefreshCache
    35. SiteAtoZ
    36. SiteCheck
    37. SizeMatters
    38. SPForm
    39. StageCoach
    40. Subscribe
    41. SyntaxHighlighter
    42. ThermX
    43. UpgradeMODX
    44. cookieJar
    45. getYoutube
    46. aliasid
    47. AddHeaderfiles
    48. AjaxUpload
    49. amazonSES mailing list
    50. Analytics
    51. Archivist
      1. Archivist.Archivist
        1. Archivist.Archivist.tpl
      2. Archivist.ArchivistGrouper
      3. Archivist.getArchives
        1. Archivist.getArchives.tpl
    52. Articles
      1. Articles.Theming Articles
      2. Articles.Roadmap
      3. Articles.Retrieving Articles Outside of Articles
      4. Articles.Creating a Blog
    53. Babel
      1. Babel.BabelLinks
      2. Babel.BabelTranslation
    54. BannerX
    55. BannerY
    56. Batcher
      1. Batcher.Roadmap
    57. bdListings
      1. bdListings.bdCategories
      2. bdListings.bdHookNewListing
      3. bdListings.bdListings
      4. bdListings.bdPriceGroups
      5. bdListings.bdRedirect
      6. bdListings.bdTargets
    58. boilerX
      1. bx-head-open
      2. bx-head-append
      3. bx-head-close
      4. bx-container-open
      5. bx-container-close
      6. bx-bottom-open
      7. bx-bottom-close
    59. BreadCrumb
      1. BreadCrumb.containerTpl
      2. BreadCrumb.currentCrumbTpl
      3. BreadCrumb.linkCrumbTpl
      4. BreadCrumb.maxCrumbTpl
      5. BreadCrumb.categoryCrumbTpl
      6. BreadCrumb.homeCrumbTpl
    60. Breadcrumbs
    61. BxrExtra
    62. cachebuster
    63. CamperManagement
      1. CamperManagement.Customizing the Component
      2. CamperManagement.Developing the front-end
        1. CamperManagement.cmCamperDetails Snippet
        2. CamperManagement.cmCampers Snippet
        3. CamperManagement.Placeholders you can use
      3. CamperManagement.Managing your vehicle
      4. CamperManagement.Module home
    64. Church Events Calendar
      1. ChurchEvents.MODX Manager functions
      2. ChurchEventsCalendar Snippet
        1. ChurchEvents.Managing events
      3. ChurchEventsList Snippet
      4. ChurchEventsRss Snippet
    65. Cliche
    66. ClientConfig
    67. CMPGenerator
      1. CMPGenerator.5 minute example
      2. CMPGenerator.Foreign Databases
    68. Collections
    69. ContextRouter
    70. CookieList
    71. CronManager
    72. cssSweet
      1. cssSweet.lighten
      2. cssSweet.modval
      3. cssSweet.prefix
    73. CustomUrls
    74. Databackup
    75. Discuss
      1. Discuss.ChunkMap
      2. Discuss.Contributing
      3. Discuss.Controllers
        1. Discuss.Controllers.board
          1. Discuss.Controllers.board.xml
        2. Discuss.Controllers.home
        3. Discuss.Controllers.login
        4. Discuss.Controllers.logout
        5. Discuss.Controllers.profile
        6. Discuss.Controllers.register
        7. Discuss.Controllers.search
        8. Discuss.Controllers.thread
      4. Discuss.Creating a Discuss Theme
      5. Discuss.Database Model
      6. Discuss.Features
      7. Discuss.Getting Started
      8. Discuss.Installation
        1. Discuss.Installation from Git
      9. Discuss.Roadmap
      10. Configuring Sphinx for Search
    76. DitsNews
    77. Eletters
      1. Eletters.API
      2. Eletters.FormIt
      3. Eletters.Import CSV
      4. Eletters.Templates
    78. EventManager
      1. EventManager.emListEvents
      2. EventManager.emNewReservationHook
    79. eventsCalendar2
      1. eventsCalendar2.eventsCalendar2
      2. eventsCalendar2.Generating events
      3. eventsCalendar2.tplCalendar2
      4. eventsCalendar2.tplCell2
      5. eventsCalendar2.tplEvent2
      6. eventsCalendar2.tplHead2
    80. EventsX
      1. EventsX.Examples
    81. ExerPlan
    82. fastField
    83. FileDownload R
      1. FileDownload R.FileDownload
      2. FileDownload R.FileDownloadLink
      3. FileDownload R.Plugins
    84. FileLister
      1. FileLister.FileLister
        1. FileLister.FileLister.directoryTpl
        2. FileLister.FileLister.fileLinkTpl
        3. FileLister.FileLister.fileTpl
        4. FileLister.FileLister.pathTpl
      2. FileLister.Roadmap
    85. FirstChildRedirect
    86. Flexibility
    87. ForcedPasswdChange
    88. FormIt
      1. FormIt.FormItCountryOptions
      2. FormIt.FormItRetriever
      3. FormIt.FormItStateOptions
      4. FormIt.Hooks
        1. FormIt.Hooks.email
        2. FormIt.Hooks.FormItAutoResponder
        3. FormIt.Hooks.math
        4. FormIt.Hooks.recaptcha
        5. FormIt.Hooks.redirect
        6. FormIt.Hooks.spam
        7. FormIt.Hooks.FormItSaveForm
      5. FormIt.Roadmap
      6. FormIt.Tutorials and Examples
        1. FormIt.Examples.Custom Hook
        2. FormIt.Examples.Simple Contact Page
        3. FormIt.Handling Selects, Checkboxes and Radios
        4. FormIt.Using a Blank NoSpam Field
        5. Form and anchors
      7. FormIt.Validators
    89. FormIt2db
    90. FormitFastPack
      1. FormitFastPack Tutorial
      2. fieldSetDefaults
      3. field
      4. fiGenerateReport
      5. fiProcessArrays
    91. FormSave
    92. FoundationX
      1. FoundationX.How to Use FoundationX
    93. FX2themebase
      1. FX2.How to Use FX2
        1. FX2.For Theme Authors
      2. FX2.Included Extras
    94. Gallery
      1. Gallery.Example1
      2. Gallery.Gallery
        1. Gallery.Gallery.containerTpl
        2. Gallery.Gallery.thumbTpl
        3. Assigning a Gallery album to a specifc resource
      3. Gallery.GalleryAlbums
        1. Gallery.GalleryAlbums.rowTpl
        2. Gallery.GalleryAlbums.containerTpl
      4. Gallery.GalleryItem
        1. Gallery.GalleryItem.albumTpl
        2. Gallery.GalleryItem.GalleryItemPagination
        3. Gallery.GalleryItem.tagTpl
        4. Gallery.GalleryItem.tpl
      5. Gallery.Plugins
        1. Gallery.Plugins.Galleriffic
        2. Gallery.Plugins.Slimbox
      6. Gallery.Roadmap
      7. Gallery.Setting Up the GalleryItem TV
      8. Gallery.Setting Up Your Gallery
    95. GatewayManager
    96. gCal
    97. getDate
    98. getFeed
      1. getFeed.Adding a Twitter Feed
    99. getPage
    100. getRelated
    101. getResourceField
    102. getResources
      1. getResources.Examples
        1. getResources.Building a RSS feed
        2. getResources.Category Index Page with Thumbnails
        3. getResources.Google XML Sitemap
    103. getUrlParam
    104. getRTImages
    105. getVimeo
    106. GoogleSiteMap
      1. GoogleSiteMap.GoogleSiteMap
        1. GoogleSiteMap.GoogleSiteMap.containerTpl
        2. GoogleSiteMap.GoogleSiteMap.itemTpl
      2. GoogleSiteMap.Roadmap
      3. GoogleSiteMapVersion1
    107. GridClassKey
    108. HandyMan
      1. HandyMan.Frequently Asked Questions
      2. HandyMan.Installation
      3. HandyMan.Roadmap
    109. Hits
    110. HitsPage
    111. HybridAuth
      1. HybridAuth.Integrating Facebook
      2. HybridAuth.Integrating Google
      3. HybridAuth.Integrating Twitter
      4. HybridAuth.Integrating VK.com
    112. If
    113. Image+
    114. imageHERE
    115. ImageStyles
    116. ImportX
    117. LexRating
    118. Lingua
    119. Login
      1. Login.ChangePassword
      2. Login.ConfirmRegister
      3. Login.ForgotPassword
      4. Login.Login
      5. Login.Profile
      6. Login.Register
        1. Register.Example Form 1
      7. Login.ResetPassword
      8. Login.Roadmap
      9. Login.Tutorials
        1. Login.Basic Setup
        2. Login.Extended User Profiles
        3. Login.Request Membership
        4. Login.User Profiles
        5. Login.Using Custom Fields
        6. Login.Using Pre and Post Hooks
      10. Login.UpdateProfile
    120. Loginza
      1. Loginza.Loginza
      2. tpl.Loginza.login
      3. tpl.Loginza.logout
      4. tpl.Loginza.profile
    121. mChimpX
    122. MetaX
    123. mhPayPal
      1. mhPayPal.Snippet Usage
        1. mhPayPal.Snippet Usage.Hooks
        2. mhPayPal.Snippet Usage.Templating
    124. MIGX
      1. MIGX.Backend-Usage
      2. MIGX.Data-Entry
      3. MIGX.Frontend-Usage
      4. MIGX.Tutorials
        1. MIGX.Fancybox-images with seperate placeholders in Richtext-Content
        2. MIGX.Simple opening hours table
        3. Using resource-specific mediasource and multifile-uploader with MIGX
        4. MIGX.Varying layout-boxes
          1. MIGX.Varying layout-boxes.Configurator-Version
        5. Creating Selectable and Sortable lists for MIGX
        6. MIGX.sortable resourcelist
        7. Using resource-specific mediasource and multifile-uploader with MIGX (Old Version)
        8. MIGX.Using Grid Inline Editing
    125. MIGXdb
      1. MIGXdb.Configuration
      2. MIGXdb.Tutorials
        1. MIGXdb.Create a basic gallery-management from scratch with MIGXdb
          1. Add resource-specific mediasource and multifile-uploader to the gallery
          2. Add Image-Tagging to the Gallery
        2. MIGXdb.Create doodles manager with help of MIGXdb
        3. MIGXdb.Manage Child-Resources in a grid-TV with help of MIGXdb
        4. MIGXdb.Manage Events-Resources in a CMP with help of MIGXdb
      3. MigxCalendars
    126. MinifyX
    127. miniShop2
      1. miniShop.Screenshots
    128. modActiveDirectory
    129. ModDef
    130. modExtra
    131. modMobile
    132. modSwiftMailer
    133. mxCalendar
      1. mxCalendar.Examples
      2. mxCalendar.Placeholders
    134. mxExtendedMenu
    135. mxFormBuilder
      1. mxFormBuilder.Create Form
      2. mxFormBuilder.Hooks
      3. mxFormBuilder.Field Types
      4. mxFormBuilder.Create Form List in TV
      5. mxFormBuilder.Fields
    136. mxHasTvs
    137. MoneyBird
      1. MoneyBird.Contacts
      2. MoneyBird.Invoices
      3. MoneyBird.NrFormat
    138. ObfuscateEmail-Revo
    139. PackMan
      1. PackMan.Roadmap
    140. PageBreaker
      1. PageBreaker.PageBreaker
      2. tpl.PageBreaker.ajax
      3. tpl.PageBreaker.navigation
    141. Peoples
      1. Peoples.PeopleGroup
        1. Peoples.PeopleGroup.userTpl
      2. Peoples.PeopleGroups
        1. Peoples.PeopleGroups.tpl
      3. Peoples.Peoples
        1. Peoples.Peoples.tpl
      4. Peoples.Roadmap
    142. PHP Tidy (plugin)
    143. phpThumbOf
    144. Polls
      1. Polls.Polls
      2. Polls.PollsLatest
      3. Polls.PollsPrevious
      4. Polls.PollsResult
    145. POI Manager
    146. QuickCrumbs
      1. QuickCrumbs.Example
    147. Quip
      1. Quip.Quip
        1. Quip.Quip.tplComment
        2. Quip.Quip.tplCommentOptions
        3. Quip.Quip.tplComments
        4. Quip.Quip.tplReport
      2. Quip.QuipCount
      3. Quip.QuipLatestComments
      4. Quip.QuipReply
        1. Quip.QuipReply.tplAddComment
        2. Quip.QuipReply.tplLoginToComment
        3. Quip.QuipReply.tplPreview
      5. Quip.QuipRss
      6. Quip.Roadmap
      7. Quip.Upgrading
        1. Quip.Upgrading to 1.0.1
    148. Rampart
      1. Rampart.hook.RampartFormIt
      2. Rampart.hook.RampartQuip
      3. Rampart.preHook.RampartRegister
    149. Redirector
    150. renderResources
    151. ResourceWatcher
    152. RezImgCrop
    153. Rowboat
      1. Rowboat.Rowboat
    154. sekFancyBox
      1. sekFancyBox & Gallery
    155. sekFormTools
      1. sekFormTools.input.autocomplete
      2. sekFormTools.input.combobox
      3. sekFormTools.input.datepicker
      4. sekFormTools.input.helper
      5. sekFormTools.input.textfield
      6. sekFormTools Advanced Examples
    156. sekSiteTools
      1. sekSiteTools.easytabs
      2. sekSiteTools.google.analytics
      3. sekSiteTools.printdiv
    157. sekUserGalleries
      1. sekUserGalleries.album.items.helper
      2. sekUserGalleries.album.items.manage
      3. sekUserGalleries.album.manage
      4. sekUserGalleries.album.view
      5. sekUserGalleries.browse.galleries
      6. sekUserGalleries.directory
      7. sekUserGalleries.image.information
      8. sekUserGalleries.search
      9. sekUserGalleries.users.gallery.manage
      10. sekUserGalleries.users.gallery.view
    158. selfLink
    159. Shopkeeper
    160. siblingNav
    161. SimpleCart
    162. SimpleSearch
      1. SimpleSearch.Roadmap
      2. SimpleSearch.SimpleSearch
        1. SimpleSearch.Faceted Search Through PostHooks
        2. SimpleSearch.SimpleSearch.containerTpl
        3. SimpleSearch.SimpleSearch.currentPageTpl
        4. SimpleSearch.SimpleSearch.pageTpl
        5. SimpleSearch.SimpleSearch.tpl
      3. SimpleSearch.SimpleSearchForm
        1. SimpleSearch.SimpleSearchForm.tpl
      4. SimpleSearch.Solr
    163. SiteEditor
    164. sitemapFriend
    165. Slideshow Manager
      1. jgSlideshow Snippet
      2. Slideshow Manager CMP
    166. sLink
    167. SmartOptimizer
    168. SmartTag
    169. StatCache
    170. SocialLogin
    171. SocialSuite
      1. SocialSuite.getFacebookPhotos
      2. SocialSuite.getFacebookProfile
      3. SocialSuite.getFacebookShares
      4. SocialSuite.getGooglePlusShares
      5. SocialSuite.getTwitterProfile
      6. SocialSuite.prettyNumbers
    172. spieFeed
    173. StaticSaver
    174. StoreLocator
    175. SubscribeMe
      1. SubscribeMe.Configuring API Credentials, IPN and going Live
      2. SubscribeMe.Setting up the Payment Flow
        1. SubscribeMe - Listing the Products
        2. SubscribeMe - Setting up the Payment Methods
        3. SubscribeMe - Subscription Confirmation Page
      3. SubscribeMe.User Account Management
    176. SyntaxChecker
    177. Tagger
    178. TaggingAtoZ
    179. tagLister
      1. tagLister.getResourcesTag
      2. tagLister.tagLister
        1. tagLister.tagLister.all
        2. tagLister.tagLister.tpl
      3. tagLister.tolinks
        1. tagLister.tolinks.tpl
    180. TinyMCE
      1. TinyMCE.Spellchecker
      2. TinyMCE.Table controls
      3. TinyMCE.Template
    181. Upload to Users CMP
    182. VersionX
      1. VersionX.Roadmap
    183. virtuNewsletter
      1. Mailgun integration
    184. Wayfinder
      1. Wayfinder Introductory Examples
    185. xFPC

GridClassKey

Created by Jay Gilmore on Mar 14, 2014. Last edited by Novriko Parhusip on Oct 21, 2014.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

GridClassKey is a custom class key for MODX Revolution's Manager to hide child resources inside container's grid.

You can switch the current resource to be this class key, AND it can be reverted back to the usual modResource by changing the Resource Type inside the Settings tab.

It only hides the child resources, and display them in the grid. Everything else is just as same as the usual modResource's form.

Any bugs or feature requests can be reported to here: https://github.com/goldsky/GridClassKey/issues

Settings

"Settings" are the place to configure the table/grid how it looks, and some of mouse-clicking behaviors.

Fields

In here, user can define what data they want to have on their grid.

  • As default, GCK sets id, pagetitle, longtitle, and description fields into the grid.
  • To delete the field, just click the red "delete" button on the right side.
  • To add new field, just select "Add Main Field", or "Add TV (Template Variable) Field", or "Add Snippet Field", then click the "Add" button to add the selected field into the fields grid.

Main field is the MODX's original fields of modx_site_content table.

To have TV or Snippet field, you must make sure that there is no dots on its name!

User can re-align the sorting by dragging-dropping the row of the field.

Each of the columns presents the variables/parameters attached to the fields of the resource grid.

User can define different values for the parameters, by double-clicking the cell:

  • Lexicon: user can set a MODX's lexicon string for a multilingual manager, or they can just set a plain text, eg: "Page Title"
  • Width: the width of the column
  • Fixed: to set whether the column can be dragged left-right to adjust its width
  • Sortable: to set whether the column is sortable or not
  • Hidden: a field can be hidden from the view, but it can be shown manually by an icon tool in the grid's header
  • Editor Type: all cells are editable, except the ID.
    On here, user can define what kind of editor they want to use to edit the content.
    The options are:
    • the name of any of ExtJs and MODX's xtype editors, or
    • (since 1.0.1-rc1) a json-parameter object of a complex set of an editor, eg:
      {xtype:"modx-combo",url:"path/to/connector",baseParams:{action:"something/getlist",combo:true}}
  • Output Filter: user can modify the output value of the grid when its rendered. It's just a MODX's Output Filter.
Sorting

User can define by which field the grid is sorted, and to which direction, ascending or descending.

Container's Settings

User can change page's style, javascript's behavior, or change some buttons of the grid's manager.

The CSS file will be loaded for all Manager's pages, eg: the user wants to change the icons of resource tree.

The JS file(s) will only be loaded when the particular grid page is loaded. Developer can add their JS file to manipulate how the grid will perform.

Example of Custom Javascript

Adding a dropdown filter field that can be used by clients

The requirements:

  1. Each of resource contains a TV of the users from the "Author" usergroup
  2. Add a combo of users from "Author" usergroup into top of the grid
  3. Reload the grid after the combobox is selected
  4. Clear the filter when the "Clear" button is selected
1. Set Up the "Author" usergroup.

You can choose different name, this is an example.

Make sure to sync the name with other files that refer to this name.

2. Create the "author" Template Variable.

We need to create a TV that lists users from the "Author" usergroup.

On this example, let's named it "author".

We need a snippet that will list the users from this particular user group, we use @EVAL binding feature for this.

3. Create snippet to list the authors on Template Variable's values

On this example, let's name it "authorListTV".

<?php
$c = $modx->newQuery('modUser');
$c->leftJoin('modUserProfile', 'Profile', 'Profile.internalKey = modUser.id');
$c->leftJoin('modUserGroupMember', 'UserGroupMembers', 'UserGroupMembers.member = modUser.id');
$c->leftJoin('modUserGroup', 'UserGroup', 'UserGroup.id = UserGroupMembers.user_group');
$c->select(array(
    'modUser.id',
    'modUser.username',
    'Profile.fullname',
));
$c->where(array(
    'UserGroup.name' => 'Author'
));
$users = $modx->getCollection('modUser', $c);
if (!$users) {
    return;
}
$output = array();
foreach ($users as $user) {
    $userArray = $user->toArray();
    $output[] = (!empty($userArray['fullname']) ? $userArray['fullname'] : $userArray['username']) . '==' . $userArray['id'];
}
$output = implode('||', $output);
return $output;

This will list the users from this specific user group on resource.

4. Prepare files for the Feature

We will create some files for this additional feature.

On this example, let's say it as "customize-gck".

4. Add a combo of users from "Author" usergroup into top of the grid

We need to adjust the settings.

From the "Add TV Field", select "author" to add it to the grid.

On the Output Filter of the "author" field, double click the cell, and define a snippet name that will convert the value of the TV, which is actually an ID, to be some name to make it convenient for users to see the output.

On this example, let's name it "authorNameOF".

<?php
$output = $input;
if (is_numeric($input)) {
    $user = $modx->getObject('modUser', $input);
    if ($user) {
        $profile = $user->getOne('Profile');
        $fullname = $profile->get('fullname');
        $output = !empty($fullname) ? $fullname : $user->get('username');
    }
}
return $output;

Then go to the "Container's Settings" tab to define our custom Javascript file.

On this example, it's "../assets/components/customize-gck/js/mgr/widgets/customize-gck.js".

// Define the combo
GridClassKey.combo.Users = function(config) {
    config = config || {};
    Ext.applyIf(config, {
        // this goes to a custom connector, to refer the custom path of the processor
        url: MODx.config.base_url + 'assets/components/customize-gck/connector.php'
        , baseParams: {
            action: 'authors/getlist'
        }
        , fields: ['id', 'name']
        , width: config.comboWidth || 190
        /**
         * Don't give name, exclude this combo out of the saving
         */
//        , name: 'mainfield'
//        , hiddenName: 'mainfield'
        , displayField: 'name'
        , valueField: 'id'
        , listeners: {
            select: {
                fn: function(combo, record, index) {
                    this.filter(record);
                },
                scope: this
            }
        }
    });
    GridClassKey.combo.Users.superclass.constructor.call(this, config);
};
Ext.extend(GridClassKey.combo.Users, MODx.combo.ComboBox, {
    filter: function(record) {
        var grid = Ext.getCmp('gridclasskey-grid-children');
        if (typeof (grid) === 'undefined') {
            return false;
        }
        var s = grid.getStore();
        s.baseParams.advancedSearch = true;
        s.baseParams.fields = JSON.stringify([{
                'name': 'author', // name of the TV
                'value': record['id']
        }]);
        grid.getBottomToolbar().changePage(1);
        grid.refresh();
    }
});
Ext.reg('gridclasskey-combo-users', GridClassKey.combo.Users);
// Manipulate the grid to add above combo to its top toolbar
Ext.onReady(function() {
    var grid = Ext.getCmp('gridclasskey-grid-children');
    if (typeof (grid) === 'undefined') {
        return false;
    }
    // get top toolbar, add more stuffs
    var tbar = grid.getTopToolbar();
    var newTbar = new Ext.Toolbar({
        renderTo: tbar.id,
        anchor: '100%',
        items: [
            '->', {
                xtype: 'panel',
                html: 'Filter by user:'
            }, {
                xtype: 'gridclasskey-combo-users',
                id: 'gridclasskey-combo-users'
            }
        ]
    });
    newTbar.show();
    // reset users combo when "Clear" button is clicked
    var btns = tbar.findByType('button');
    var clearBtn;
    Ext.each(btns, function(item){
        if (item.iconCls === "icon-gridclasskey-filter-delete") {
            clearBtn = item;
        }
    });
    clearBtn.on('click', function(e){
        var usersCombo = Ext.getCmp('gridclasskey-combo-users');
        usersCombo.reset();
    });
});

Now we need to create a connector for the combo, "assets/components/customize-gck/connector.php"

<?php
// beware of the location of this file!
require_once dirname(dirname(dirname(dirname(__FILE__)))) . '/config.core.php';
require_once MODX_CORE_PATH . 'config/' . MODX_CONFIG_KEY . '.inc.php';
require_once MODX_CONNECTORS_PATH . 'index.php';
$corePath = $modx->getOption('gridclasskey.core_path', null, $modx->getOption('core_path') . 'components/gridclasskey/');
require_once $corePath . 'model/gridclasskey.class.php';
$modx->gridclasskey = new GridClassKey($modx);
$modx->lexicon->load('gridclasskey:default');
/* handle request */
$modx->request->handleRequest(array(
    'processors_path' => $modx->getOption('core_path') . 'components/customize-gck/processors/',
    'location' => '',
));

Now let's add the combo's processor, "core/components/customize-gck/processors/authors/getlist.class.php"

<?php
class AuthorUsersGetListProcessor extends modObjectGetListProcessor {
    /** @var string $objectType The object "type", this will be used in various lexicon error strings */
    public $objectType = 'gridclasskey.AuthorUsersGetList';
    /** @var string $classKey The class key of the Object to iterate */
    public $classKey = 'modTemplateVarResource';
    /** @var string $defaultSortField The default field to sort by */
    public $defaultSortField = 'id';
    /**
     * Can be used to adjust the query prior to the COUNT statement
     *
     * @param xPDOQuery $c
     * @return xPDOQuery
     */
    public function prepareQueryBeforeCount(xPDOQuery $c) {
        $c->distinct();
        $c->leftJoin('modTemplateVar', 'TemplateVar', 'TemplateVar.id = ' . $this->classKey . '.tmplvarid');
        $c->leftJoin('modUser', 'User', 'User.id = ' . $this->classKey . '.value');
        $c->leftJoin('modUserProfile', 'UserProfile', 'UserProfile.internalKey = User.id');
        $c->select(array(
            $this->classKey . '.*',
            'User.username',
            'UserProfile.fullname',
        ));
        $c->where(array(
            'TemplateVar.name' => 'author' // XXX: Adjust this!
        ));
        return $c;
    }
    /**
     * Prepare the row for iteration
     * @param xPDOObject $object
     * @return array
     */
    public function prepareRow(xPDOObject $object) {
        $objectArray = $object->toArray();
        $outputArray = array(
            'id' => $objectArray['value'],
            'name' => (!empty($objectArray['fullname']) ? $objectArray['fullname'] : $objectArray['username']),
        );
        return $outputArray;
    }
}
return 'AuthorUsersGetListProcessor';

And now ALL are set.

If you change the drop down, because it's listening to "select" event, the grid will be filtered out to the selected user.

Click the "Clear" button to clear the filter(s).

Custom Inline Editor

If you want to create a custom inline editor, you can also do similar thing like above.

This example is a simple one, you can adjust more in your Javascript's class file.

What it needs is the definition of the editor.

  1. Create the component
  2. Load the file
  3. Edit the GridClassKey's setting

1. Component

GridClassKey.combo.Availability = function (config) {
    config = config || {};
    Ext.applyIf(config, {
        store: new Ext.data.SimpleStore({
            fields: ['d', 'v']
            , data: [['Available', 'Available'], ['Not Available', 'Not Available']]
        })
        , displayField: 'd'
        , valueField: 'v'
        , listWidth: 150
    });
    GridClassKey.combo.Availability.superclass.constructor.call(this, config);
};
Ext.extend(GridClassKey.combo.Availability, MODx.combo.Boolean);
Ext.reg('gridclasskey-combo-availability', GridClassKey.combo.Availability);

On here, this component extends "MODx.combo.Boolean" with obvious values, just for the sake of simplicity.

You can extends any available MODx's JS components.

2. Load the file

Let's say we save the above code as "../assets/components/customize-gck/js/mgr/widgets/combo.availability.js"

3. Edit the GridClassKey's setting

Then change the Field's setting.

And it's done.

Children's Settings

This settings try to override the specified settings of the child resource when it is being created under this grid container.

Again, only applies when it is being created, not being updated.

For "Text for "Back to Container" button" field, you can define a lexicon string, or just plain text on it.

The "Properties" are a modx_site_content field to store some properties for particular plugins/extras.
It's a json format comma delimited properties.
Please refer to their documentation of the parameters.

Permissions

GridClassKey has some set of permissions.

On the grid, if the user does not have permission to delete, edit, or publish, then the Action Icon regarding to the permission will be disappeared.

There is also permission to limit user to access "Batch Actions" and the "Advanced Search" buttons.

On Access Control page, you will see that it added a Policy named "GridClassKey".

If you Right Click > Update Policy, you will see that actually it only manages 2 permissions: accesses to Batch Actions and Advanced Search buttons.

So if you are setting up some usergroups, make sure you add this permission for the usergroup that is allowed to access those buttons.

From the top menu " Security", select "Access Controls".

Then on the specified usergroup, Right Click > Update User Group

On the Context Access tab, click the "Add Context" button.

Set up the the window form like this:

Then after you save it, you will see a new permission appears to the specified usergroup on manager context.

Comment Policy

Comments intended to help other users with this document are welcome! If you have a suggestion for this Extra document, please attempt to contact the author directly, possibly on GitHub or in the MODX Community Forums.

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab) or become an editor of the MODX Documentation.