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

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • FAQ
  • Developer FAQ
  • Developer Guide
  • Module Setup

Tag Cloud

node solmsted davglass io async lsmith satyam caridy plugin nzakas table foxxtrot jafl animation model yql datatable widget css greghinch form liferay apipkin event ericf

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: 05/10/12
    + 0 -

    John Lindal

    YUI Contributor

    See 43 more by this user.

    Created: 02/3/11
    Last CDN Push: 7 hours ago
    Build Tag: gallery-2012.05.16-20-37
    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:
    • jafl
    • table
    • datatable
    • edit
    • quickedit
    • 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-2012.05.16-20-37'
    }).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-2011 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