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. cookieJar
    3. getYoutube
    4. aliasid
    5. AddHeaderfiles
    6. AjaxUpload
    7. amazonSES mailing list
    8. Analytics
    9. Archivist
      1. Archivist.Archivist
        1. Archivist.Archivist.tpl
      2. Archivist.ArchivistGrouper
      3. Archivist.getArchives
        1. Archivist.getArchives.tpl
    10. Articles
      1. Articles.Theming Articles
      2. Articles.Roadmap
      3. Articles.Retrieving Articles Outside of Articles
      4. Articles.Creating a Blog
    11. Babel
      1. Babel.BabelLinks
      2. Babel.BabelTranslation
    12. BannerX
    13. BannerY
    14. Batcher
      1. Batcher.Roadmap
    15. bdListings
      1. bdListings.bdCategories
      2. bdListings.bdHookNewListing
      3. bdListings.bdListings
      4. bdListings.bdPriceGroups
      5. bdListings.bdRedirect
      6. bdListings.bdTargets
    16. 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
    17. BreadCrumb
      1. BreadCrumb.containerTpl
      2. BreadCrumb.currentCrumbTpl
      3. BreadCrumb.linkCrumbTpl
      4. BreadCrumb.maxCrumbTpl
      5. BreadCrumb.categoryCrumbTpl
      6. BreadCrumb.homeCrumbTpl
    18. Breadcrumbs
    19. BxrExtra
    20. cachebuster
    21. 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
    22. Church Events Calendar
      1. ChurchEvents.MODX Manager functions
      2. ChurchEventsCalendar Snippet
        1. ChurchEvents.Managing events
      3. ChurchEventsList Snippet
      4. ChurchEventsRss Snippet
    23. Cliche
    24. ClientConfig
    25. CMPGenerator
      1. CMPGenerator.5 minute example
      2. CMPGenerator.Foreign Databases
    26. Collections
    27. ContextRouter
    28. CookieList
    29. CronManager
    30. cssSweet
      1. cssSweet.lighten
      2. cssSweet.modval
      3. cssSweet.prefix
    31. CustomUrls
    32. Databackup
    33. 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
    34. DitsNews
    35. Eletters
      1. Eletters.API
      2. Eletters.FormIt
      3. Eletters.Import CSV
      4. Eletters.Templates
    36. EventManager
      1. EventManager.emListEvents
      2. EventManager.emNewReservationHook
    37. eventsCalendar2
      1. eventsCalendar2.eventsCalendar2
      2. eventsCalendar2.Generating events
      3. eventsCalendar2.tplCalendar2
      4. eventsCalendar2.tplCell2
      5. eventsCalendar2.tplEvent2
      6. eventsCalendar2.tplHead2
    38. EventsX
      1. EventsX.Examples
    39. ExerPlan
    40. fastField
    41. FileDownload R
      1. FileDownload R.FileDownload
      2. FileDownload R.FileDownloadLink
      3. FileDownload R.Plugins
    42. FileLister
      1. FileLister.FileLister
        1. FileLister.FileLister.directoryTpl
        2. FileLister.FileLister.fileLinkTpl
        3. FileLister.FileLister.fileTpl
        4. FileLister.FileLister.pathTpl
      2. FileLister.Roadmap
    43. FirstChildRedirect
    44. Flexibility
    45. ForcedPasswdChange
    46. 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
      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
      7. FormIt.Validators
    47. FormIt2db
    48. FormitFastPack
      1. FormitFastPack.Tutorial
      2. FormitFastPack.fieldSetDefaults
      3. FormitFastPack.field
      4. FormitFastPack.fiGenerateReport
    49. FormSave
    50. FoundationX
      1. FoundationX.How to Use FoundationX
    51. FX2themebase
      1. FX2.How to Use FX2
        1. FX2.For Theme Authors
      2. FX2.Included Extras
    52. Gallery
      1. Gallery.Example1
      2. Gallery.Gallery
        1. Gallery.Gallery.containerTpl
        2. Gallery.Gallery.thumbTpl
      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
    53. GatewayManager
    54. gCal
    55. getDate
    56. getFeed
      1. getFeed.Adding a Twitter Feed
    57. getPage
    58. getRelated
    59. getResourceField
    60. getResources
      1. getResources.Examples
        1. getResources.Building a RSS feed
        2. getResources.Category Index Page with Thumbnails
        3. getResources.Google XML Sitemap
    61. getUrlParam
    62. getRTImages
    63. getVimeo
    64. GoogleSiteMap
      1. GoogleSiteMap.GoogleSiteMap
        1. GoogleSiteMap.GoogleSiteMap.containerTpl
        2. GoogleSiteMap.GoogleSiteMap.itemTpl
      2. GoogleSiteMap.Roadmap
    65. GridClassKey
    66. HandyMan
      1. HandyMan.Frequently Asked Questions
      2. HandyMan.Installation
      3. HandyMan.Roadmap
    67. Hits
    68. HitsPage
    69. HybridAuth
      1. HybridAuth.Integrating Facebook
      2. HybridAuth.Integrating Google
      3. HybridAuth.Integrating Twitter
      4. HybridAuth.Integrating VK.com
    70. If
    71. Image+
    72. imageHERE
    73. ImageStyles
    74. ImportX
    75. LexRating
    76. Lingua
    77. 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
    78. Loginza
      1. Loginza.Loginza
      2. tpl.Loginza.login
      3. tpl.Loginza.logout
      4. tpl.Loginza.profile
    79. mChimpX
    80. MetaX
    81. mhPayPal
      1. mhPayPal.Snippet Usage
        1. mhPayPal.Snippet Usage.Hooks
        2. mhPayPal.Snippet Usage.Templating
    82. 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
        8. MIGX.Using Grid Inline Editing
    83. MIGXdb
      1. MIGXdb.Configuration
      2. MIGXdb.Tutorials
        1. MIGXdb.Create a basic gallery-management from scratch with MIGXdb
        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
    84. MinifyX
    85. miniShop
      1. miniShop.Screenshots
    86. modActiveDirectory
    87. ModDef
    88. modExtra
    89. modMobile
    90. modSwiftMailer
    91. mxCalendar
      1. mxCalendar.Examples
      2. mxCalendar.Placeholders
    92. mxExtendedMenu
    93. mxFormBuilder
      1. mxFormBuilder.Create Form
      2. mxFormBuilder.Hooks
      3. mxFormBuilder.Field Types
      4. mxFormBuilder.Create Form List in TV
      5. mxFormBuilder.Fields
    94. mxHasTvs
    95. MoneyBird
      1. MoneyBird.Contacts
      2. MoneyBird.Invoices
      3. MoneyBird.NrFormat
    96. ObfuscateEmail-Revo
    97. PackMan
      1. PackMan.Roadmap
    98. PageBreaker
      1. PageBreaker.PageBreaker
      2. tpl.PageBreaker.ajax
      3. tpl.PageBreaker.navigation
    99. 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
    100. PHP Tidy (plugin)
    101. phpThumbOf
    102. Polls
      1. Polls.Polls
      2. Polls.PollsLatest
      3. Polls.PollsPrevious
      4. Polls.PollsResult
    103. POI Manager
    104. QuickCrumbs
      1. QuickCrumbs.Example
    105. 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
    106. Rampart
      1. Rampart.hook.RampartFormIt
      2. Rampart.hook.RampartQuip
      3. Rampart.preHook.RampartRegister
    107. Redirector
    108. renderResources
    109. ResourceWatcher
    110. RezImgCrop
    111. Rowboat
      1. Rowboat.Rowboat
    112. sekFancyBox
      1. sekFancyBox & Gallery
    113. 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
    114. sekSiteTools
      1. sekSiteTools.easytabs
      2. sekSiteTools.google.analytics
      3. sekSiteTools.printdiv
    115. 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
    116. selfLink
    117. Shopkeeper
    118. siblingNav
    119. 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
    120. SiteEditor
    121. sitemapFriend
    122. Slideshow Manager
      1. jgSlideshow Snippet
      2. Slideshow Manager CMP
    123. sLink
    124. SmartOptimizer
    125. SmartTag
    126. StatCache
    127. SocialLogin
    128. SocialSuite
      1. SocialSuite.getFacebookPhotos
      2. SocialSuite.getFacebookProfile
      3. SocialSuite.getFacebookShares
      4. SocialSuite.getGooglePlusShares
      5. SocialSuite.getTwitterProfile
      6. SocialSuite.prettyNumbers
    129. spieFeed
    130. StaticSaver
    131. StoreLocator
    132. 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
    133. SyntaxChecker
    134. Tagger
    135. TaggingAtoZ
    136. tagLister
      1. tagLister.getResourcesTag
      2. tagLister.tagLister
        1. tagLister.tagLister.all
        2. tagLister.tagLister.tpl
      3. tagLister.tolinks
        1. tagLister.tolinks.tpl
    137. TinyMCE
      1. TinyMCE.Spellchecker
      2. TinyMCE.Table controls
      3. TinyMCE.Template
    138. Upload to Users CMP
    139. VersionX
      1. VersionX.Roadmap
    140. virtuNewsletter
    141. VisionCart
      1. VisionCart.Back-end
        1. VisionCart.Category management
        2. VisionCart.Module management
        3. VisionCart.Option management
        4. VisionCart.Order management
        5. VisionCart.Product management
        6. VisionCart.Shop management
      2. VisionCart.Front-end
        1. VisionCart.vcGetCategories
          1. VisionCart.vcGetCategories.tpl
        2. VisionCart.vcGetProducts
          1. VisionCart.vcGetProducts.tpl
        3. VisionCart.vcWayfinder
      3. VisionCart.General
        1. VisionCart.Templating
        2. VisionCart.UserManagement
      4. VisionCart.vcGetProductImages
      5. VisionCart.vcGetProductOptions
    142. Wayfinder
      1. Wayfinder Introductory Examples
    143. 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.

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).