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

MIGXdb.Manage Child-Resources in a grid-TV with help of MIGXdb

Last edited by Bruno Perner on Jan 23, 2014.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

Manage Child-Resources in a grid-TV with help of MIGXdb

Often we have the problem with lots of Resources in the Resource-Tree to be very confused at some point and we wish, we would have a better way to manage them in a paginated grid view.

In this Tuorial we will learn how to create a TV which shows a grid of child-resources,
where you can add, delete, remove, edit, publish, unpublish, filter, bulk-update child-resources of the currently edited Resource (parent-folder)

First we will create a basic Configuration where we can just add new Child-Resources and edit the pagetitle, longtitle and Content-field of our Children.
Later we want to add one or more TVs, which we want to have editable and we want to add some filters, where we can filter our children.

Requirements

First off we will need to install MIGX by package-management, if not already done, and do some basic configurations.
Minimum Required version: MIGX 2.2.3 (31.07.2012
We need also install the latest package of migxchildresources from github

Import the Configuration

Now we want to import the example - configuration for the MIGXdb-TV.

Go to the main-tab 'MIGX'

There should be a grid with some buttons above.

We click 'Import from package'

In the opening window we type: 'migxchildresources'

Click 'Ok'

We should see a new imported record in our grid.

You can check what it has done by right-clicking the record and choose 'edit' and go through the tabs and their nested grids.

Set the Templates for our parent and children

We want all our children have a given template. So we need to set the template-value somehow.

Create the template for the Child resources to use - we'll need the ID of this template for the configuration.

This can be done by a hidden-field in our form.
To do so:
1. right-click our childstutorial - record in the MIGX-configurator-grid and click 'Edit'
2. open the tab 'formtabs'
3. right-click on 'Resource' and click 'Edit'
4. right-click on 'template' and click 'Edit'
5. open the tab 'Input Options' and change the Default-Value to the template-ID, which our child-resources should have.
6. click done, done, done on all three windows to save the changes we made.

Create another template for the Parent resource. This template will be the one used to hold the grid TV.

Create the MIGXdb - TV

now we create our MIGXdb - TV.
Create a new TV.
Name: childstutorial

Go to the tab: 'Input Options'

Select Input Type: 'migxdb'
Under 'Configurations' add: 'childstutorial'

This says MIGX to search for configurations with name 'childstutorial' This can be configuration-records as we have done above or php-files as it is done for the MIGX-configs-CMP. The MIGX-config-CMP is itself nothing more than a MIGXdb-CMP.

Assign this 'childstutorial' TV to our Parent resource's template.

click 'Save' to save the newly created TV.

Creating and Editing child-Resources

Create a parent-Resource in the resource-tree using your Parent-resource-template.

Go to the TV-tab.
By clicking 'Load grid' this should load our db-grid where we can add,edit,delete child-resources of our parent-Resource.

Now we have created a very basic child-Resources-management, which should already work for minimal requirements.

When using the grid in TV tab don't set the grid to "autoload" (in MIGXdb Settings tab in the MIGX configurator) because the grid will not render to full width, as explained here: https://github.com/Bruno17/MIGX/issues/75#issuecomment-15505640
Some of the next steps are allready done with the import of the configuration. They are left in this Tutorial to document, how it was done.

Adding some TVs to our form

In this step we want to add three TVs to our form:

  • MIGX-TV to add and manage some images to our child-resource
  • Text-TV for a Price-field
  • Multiselect-TV for choosing one or more Categories for our child-resource

The MIGX-TV for some images

Create a new TV:
Name: images
Type: migx
Formtabs:

[
{"caption":"Image", "fields": [
    {"field":"title","caption":"Title","description":"Title for the image."},
    {"field":"image","caption":"Image","inputTVtype":"image"}
]}
]

Grid Columns:

[
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"},
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

"Add Item" Replacement: Add Image

Text-TV for a Price-field

Name: price
Type: text

Multiselect-TV for choosing one or more Categories for our child-resource

Name: categories
Type: listbox multiple
Input-option-values:
---==||categoryA||categoryB||categoryC||categoryD

Add this TVs to your child-resources-template, but not to your parent-resource-template!

Adding the TVs to our Form

Go to the MIGX-Management-Component into the TAB 'MIGX'
-> right click to the record 'childstutorial' -> click 'edit'
-> go to 'Formtabs'
-> click 'Add Item'
caption: TVs
fields: -> Add three items

fieldname: price
caption: Price

fieldname: images
caption: Images
iputTV: images

fieldname: categories
Caption: Categories
inputTV: categories

to save them, click ->Done

Register the TVs for our processors (getlist,fields)

We need to register TVs to include them in the getlist- and fields-processors.
Todo so we need a new config-file under /core/components/migx/configs/

with the same name as our MIGX-configuration: childstutorial.config.inc.php (should already be installed with the MIGX-package)
and this content:

/core/components/migx/configs/childstutorial.config.inc.php
<?php
$this->customconfigs['includeTVs'] = 1;
$this->customconfigs['includeTVList'] = 'price,images,categories';
All TVs you want to edit or you want to show in the grid needs to be in the includeTVList - customconfig
Pay attention on how you name the TVs and fields, they should not contain any dots "." inside their names because that is used for extended fields and results in unexpected behavior with MIGXdb as explained here: http://forums.modx.com/thread/83428/strange-issue-migxdb-childresources-tutorial-tvs-not-saved#dis-post-460312

Fieldnames and TV names should be the same.

Add a sortable price-column to the grid

Go to the TAB 'Columns'
-> click 'Add Item'
Header: Price
Field: price
width: 20
sortable: yes

Now we should be able to update this TVs in our grids-editor-window.

Adding Filters

In this step we add some filters to our grid.

  • Textbox-filter to search in pagetitle,longtitle and content
  • dropdown-filter to filter by category

Go to MIGX-Management and open our configuration (childstutorial)
Open the TAB 'DB-Filters'
Click 'Add Item' to add a new filter.

Textbox Filter for searching in some fields

filter Name: search
label: search
empty text: search...
getlist-where:

{"pagetitle:LIKE":"%[[+search]]%","OR:longtitle:LIKE":"%[[+search]]%","OR:content:LIKE":"%[[+search]]%"}

Dropdown Filter for filtering by categories

filter Name: category
label: category
empty text: - category filter -
filter type: combobox
getlist-where:

tvFilter::categories=inArray=[[+category]]

getcombo processor: getTVcombo
getcombo textfield: categories (this is used in our getTVcombo-processor to get the input-options of the TV 'categories' for our filter-dropdown)

Save them all with clicking 'Done' on all windows

Now you should be able to filter the child-resources by searching and/or choosing a category

Hiding children from tree

Hiding our child-resources from resource-tree is very easy.

go to the MIGX-Configurator and add a new field to one of the formtabs:

Fieldname: show_in_tree
Caption: Show in Tree
inputTVtype: listbox

inputOptionValues: no==0||yes==1

You can also show the status of this field in the grid by adding a new column:

Header: Show in Tree
Field: show_in_tree
width: 20
Renderer: this.RenderCrossTick


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.