Select Column Type
ZingGrid provides a
<zg-column type="select">
column type. While editing the cell, the input field will be a select dropdown or multi-select dropdown.
Result
Full
HTML
CSS
JS
Edit
Download
Full Code
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script> <style> .zg-body { background: #e6e6e6; } .zg-body zing-grid[loading] { height: 400px; } zing-grid[loading] { height: 451px; } </style> </head> <body class="zg-body"> <zing-grid caption="<code>select</code> Column Type" search sort editor-controls> <zg-colgroup> <zg-column index="name"></zg-column> <zg-column index="gender" header="Select" type="select" type-select-options="Male, Female"></zg-column> <zg-column index="species" type="select" header="Multi Select" type-select-options="Alien, Human, Robot, Mutant Human" type-select-multiple="true"></zg-column> </zg-colgroup> <zg-data data='[ { "id": 1, "name": "Philip J. Fry", "actor": "Billy West", "job": "Delivery Boy", "age": 1025, "hourly_salary": 11.25, "email": "philipJFried@aol.com", "telephone": "+18584905281", "birth_date": "9/14/1974", "main_character": true, "origin": "Earth", "home_town": "New York City", "gender": "Male", "species": "Human", "place_of_origin": "New York City, New York, United States", "description": "Protagonist, from the 20th century. Delivery boy. Many times great-uncle to Professor Hubert Farnsworth. Suitor of Leela.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Philip_Fry.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 2, "name": "Turanga Leela", "actor": "Katey Sagal", "job": "Captain", "age": 44, "hourly_salary": 150.00, "email": "tLeela@planetexpress.com", "telephone": "+18584905281", "birth_date": "7/29/2975", "main_character": true, "origin": "Earth", "home_town": "New New York City Sewers", "gender": "Female", "species": "Mutant Human", "place_of_origin": "New York City, New York, United States", "description": "Mutant cyclops. Captain of the Planet Express Ship. Love interest of Fry.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Turanga_Leela.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 3, "name": "Bender Bending Rodriguez", "actor": "John DiMaggio", "job": "Chef", "age": 24000, "hourly_salary": 25.00, "email": "bRodriguez@planetexpress.com", "telephone": "+18584905281", "birth_date": "8/04/0001", "main_character": true, "origin": "Earth", "gender": "Male", "species": "Robot", "description": "A kleptomaniacal, lazy, cigar-smoking, heavy-drinking robot who is Fry`s best friend. Built in Tijuana, Mexico, he is the Planet Express Ship`s cook.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Bender_Rodriguez.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 4, "name": "Amy Wong", "actor": "Lauren Tom", "job": "Intern", "age": 40, "hourly_salary": 14.75, "email": "aWong@hotmail.com", "telephone": "+18584905281", "birth_date": "05/04/2979", "main_character": true, "origin": "Mars", "gender": "Female", "species": "Alien", "description": "Intern. Holds her Ph.D in Applied Physics from Mars University. Wife of Kif Kroker.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Amy_Wong.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 5, "name": "Doctor John Zoidberg", "actor": "Billy West", "job": "Staff Doctor", "age": 92, "hourly_salary": 45.00, "email": "dr.JZoidberg@planetexpress.com", "telephone": "+18584905281", "birth_date": "5/05/2001", "main_character": true, "origin": "Decapod 10", "gender": "Male", "species": "Alien", "description": "Alien from Decapod 10. Planet Express` staff doctor and steward. Has a medical degree and Ph.D in art history.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Dr_John_Zoidberg.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 6, "name": "Lord Nibbler", "actor": "Frank Welker", "job": "Ambassador to Earth", "age": 3294, "hourly_salary": 0.00, "email": "lordNibler@legend.com", "telephone": "+18584905281", "birth_date": "01/01/0001", "main_character": false, "origin": "Eternium", "gender": "Male", "species": "Alien", "description": "Nibblonian ambassador to Earth. Poses as Leela`s pet.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/nibler.jpg", "first_episode": "Love`s Labours Lost in Space", "episode_link": "https://en.wikipedia.org/wiki/Love%27s_Labours_Lost_in_Space" } ]'></zg-data> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script> </head> <body class="zg-body"> <zing-grid caption="<code>select</code> Column Type" search sort editor-controls> <zg-colgroup> <zg-column index="name"></zg-column> <zg-column index="gender" header="Select" type="select" type-select-options="Male, Female"></zg-column> <zg-column index="species" type="select" header="Multi Select" type-select-options="Alien, Human, Robot, Mutant Human" type-select-multiple="true"></zg-column> </zg-colgroup> <zg-data data='[ { "id": 1, "name": "Philip J. Fry", "actor": "Billy West", "job": "Delivery Boy", "age": 1025, "hourly_salary": 11.25, "email": "philipJFried@aol.com", "telephone": "+18584905281", "birth_date": "9/14/1974", "main_character": true, "origin": "Earth", "home_town": "New York City", "gender": "Male", "species": "Human", "place_of_origin": "New York City, New York, United States", "description": "Protagonist, from the 20th century. Delivery boy. Many times great-uncle to Professor Hubert Farnsworth. Suitor of Leela.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Philip_Fry.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 2, "name": "Turanga Leela", "actor": "Katey Sagal", "job": "Captain", "age": 44, "hourly_salary": 150.00, "email": "tLeela@planetexpress.com", "telephone": "+18584905281", "birth_date": "7/29/2975", "main_character": true, "origin": "Earth", "home_town": "New New York City Sewers", "gender": "Female", "species": "Mutant Human", "place_of_origin": "New York City, New York, United States", "description": "Mutant cyclops. Captain of the Planet Express Ship. Love interest of Fry.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Turanga_Leela.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 3, "name": "Bender Bending Rodriguez", "actor": "John DiMaggio", "job": "Chef", "age": 24000, "hourly_salary": 25.00, "email": "bRodriguez@planetexpress.com", "telephone": "+18584905281", "birth_date": "8/04/0001", "main_character": true, "origin": "Earth", "gender": "Male", "species": "Robot", "description": "A kleptomaniacal, lazy, cigar-smoking, heavy-drinking robot who is Fry`s best friend. Built in Tijuana, Mexico, he is the Planet Express Ship`s cook.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Bender_Rodriguez.png", "first_episode": "Space Pilot 3000", "episode_link": "https://en.wikipedia.org/wiki/Space_Pilot_3000" }, { "id": 4, "name": "Amy Wong", "actor": "Lauren Tom", "job": "Intern", "age": 40, "hourly_salary": 14.75, "email": "aWong@hotmail.com", "telephone": "+18584905281", "birth_date": "05/04/2979", "main_character": true, "origin": "Mars", "gender": "Female", "species": "Alien", "description": "Intern. Holds her Ph.D in Applied Physics from Mars University. Wife of Kif Kroker.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Amy_Wong.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 5, "name": "Doctor John Zoidberg", "actor": "Billy West", "job": "Staff Doctor", "age": 92, "hourly_salary": 45.00, "email": "dr.JZoidberg@planetexpress.com", "telephone": "+18584905281", "birth_date": "5/05/2001", "main_character": true, "origin": "Decapod 10", "gender": "Male", "species": "Alien", "description": "Alien from Decapod 10. Planet Express` staff doctor and steward. Has a medical degree and Ph.D in art history.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/Dr_John_Zoidberg.png", "first_episode": "The Series Has Landed", "episode_link": "https://en.wikipedia.org/wiki/The_Series_Has_Landed" }, { "id": 6, "name": "Lord Nibbler", "actor": "Frank Welker", "job": "Ambassador to Earth", "age": 3294, "hourly_salary": 0.00, "email": "lordNibler@legend.com", "telephone": "+18584905281", "birth_date": "01/01/0001", "main_character": false, "origin": "Eternium", "gender": "Male", "species": "Alien", "description": "Nibblonian ambassador to Earth. Poses as Leela`s pet.", "img": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/nibler.jpg", "first_episode": "Love`s Labours Lost in Space", "episode_link": "https://en.wikipedia.org/wiki/Love%27s_Labours_Lost_in_Space" } ]'></zg-data> </zing-grid> </body> </html>
.zg-body {background:#e6e6e6;} .zg-body zing-grid[loading] { height:400px; }
// No JS code
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!