• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    QuickEdit for DataTable (gallery-quickedit) on cdn

    Last Updated: 04/7/13
    + 0 -

    John Lindal

    YUI Contributor

    See 50 more by this user.

    Created: 02/3/11
    Last CDN Push: 04/3/13
    Build Tag: gallery-2013.04.03-19-53
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.5.1
    Free for use.

    QuickEdit converts all displayed values (in the columns you choose to configure) into input fields so the user can change all the values in a single bulk operation.

    • Tags:
    • quickedit
    • edit
    • datatable
    • table
    • jafl
    • plugin
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    Example of how to configure the DataTable.

    Code Sample

    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    YUI({
        //Last Gallery Build of this module
        gallery: 'gallery-2013.04.03-19-53'
    }).use('gallery-quickedit', function(Y) {
     
    	var cols = [
    		{ key: 'title', label: 'Title', quickEdit: true },
    		{ key: 'year', label: 'Year' },
    		{ key: 'quantity', label: 'Quantity',
    			quickEdit: {
    				validation: { css: 'yiv-required yiv-integer:[0,]' }
    			}
    		}
    	];
     
    	var table = new Y.DataTable.Base({columnset: cols});
    	table.plug(Y.Plugin.DataTableDataSource, {datasource: ds});
    	table.plug(Y.Plugin.DataTableQuickEdit, {changesAlwaysInclude: ['id']});
     
    	table.render("#table");
     
    });

    Forum Posts

    Subject Author Date
    Quick Edit is not working with YUI3 upk0000 06/22/11
    Quick Edit is not working with YUI3 upk0000 06/23/11
    Re: Quick Edit is not working with YUI3 John Lindal 07/5/11
    Re: Quick Edit is not working with YUI3 John Lindal 07/5/11
    Examples for implementing QuickEdit Formatters Jon Sword 10/12/11
    Re: Examples for implementing QuickEdit Formatters Jon Sword 10/12/11
    Datatable QuickEdit cols[this._getColumnKey(e)] is undefined Jon Sword 10/18/11
    Re: Datatable QuickEdit cols[this._getColumnKey(e)] is undef Jon Sword 10/18/11
    Re: Examples for implementing QuickEdit Formatters John Lindal 10/25/11
    Re: Examples for implementing QuickEdit Formatters John Lindal 10/25/11

    © 2006-2013 Yahoo! Inc. All rights reserved.
    All code on this site is licensed under the BSD License unless stated otherwise.
    About This Site · Security Contact Info