jetsum_dhtmlx_gantt

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="common/docs.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale = 1.0" /> <title>Gantt : Samples</title></title> </head> <body> <div class='abstop_header'> <div class='content_area'>   </div> </div> <div class="page_header"> <div class='page_inner_header'> <a href='https://dhtmlx.com'><div class='top_webix_logo'></div></a> Samples </div> </div> <div class="page_space"> <div class="webixdoc_page webixdoc_start"> <div id="webixContent" class='webixdoc_content'> <div class="webixdoc_content_inner"> <div class="webixdoc_breadcrumb nav_breadcrumb"> <a href="https://docs.dhtmlx.com/gantt/" class="webixdoc_back">Documentation</a> <a href="" class="webixdoc_back">Samples</a> </div> <table class='nav_table'> <tr> <td style=' width:30px; vertical-align:top '> <a href='01_initialization/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='01_initialization/'>Initialization</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/01_basic_init.html'>Basic initialization</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/02_load_json.html'>Load data from JSON file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/03_load_xml.html'>Load data from XML file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/04_save_rest.html'>Backend storage using REST API</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/06_touch_forced.html'>Forced touch mode</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/07_jquery.html'>jQuery integration</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/08_explicit_time_range.html'>Define date range</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/09_backward_compatibility.html'>Loading data in Gantt 1.6 format</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/10_fixed_size.html'>Fixed size gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/11_clickable_links.html'>Clickable links</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/12_localization.html'>Localization</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/13_project_duration.html'>Project duration</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/14_reinitializtion.html'>ReInit in different container</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/15_connector_json_enddate.html'>Loading tasks start/end dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/16_projects_and_milestones.html'>Projects and milestones</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/17_bootstrap.html'>Bootstrap layout</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/18_backward_planning.html'>Backward planning</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/19_tasks_without_dates.html'>Show Unscheduled Tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/20_tasks_outside_timescale.html'>Tasks outside timescale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/21_rollup_tasks.html'>Rollup tasks and milestones</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='02_extensions/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='02_extensions/'>Extensions</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/01_quickinfo.html'>QuickInfo extension</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/02_tooltip.html'>Tooltip</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/03_critical_path.html'>Critical path</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/04_grid_resize.html'>Resizable columns in grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/05_today_line.html'>Today and Status lines in Gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/06_dynamic_loading.html'>Loading subtasks on demand</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/07_managing_grid_columns.html'>Hiding grid columns</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/08_tasks_grouping.html'>Tasks grouping</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/09_multiselection.html'>Multiselection and Indent/Outdent tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/10_tasks_grouping_multilevel.html'>Multi level task grouping</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/11_full_screen.html'>Full Screen</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/12_auto_scheduling.html'>Auto Scheduling extension</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/13_smart_rendering.html'>Working with 30000 tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/14_undo.html'>Undo/Redo changes in Gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/16_keyboard_navigation.html'>Keyboard Navigation</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/17_keyboard_navigation_cell.html'>Keyboard Navigation - navigate cells</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/18_linked_tasks.html'>Auto Scheduling - Groups of connected tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/19_constraints_scheduling.html'>Schedule From Project Start & Constraints</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/20_backwards_scheduling.html'>Schedule From Project End</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/21_overlay.html'>Gantt chart with overlay</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/22_tooltip_api.html'>Custom Tooltips</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/23_click_drag_splittask.html'>Create split tasks by Drag and Drop</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/24_click_drag.html'>Create new tasks by Drag and Drop</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/25_click_drag_select_by_drag.html'>Select multiple tasks by Drag and Drop</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/26_full_screen_with_additional_elements.html'>Full Screen with additional elements</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/27_drag_timeline.html'>Drag timeline</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/28_row_resize.html'>Resizable rows in grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/28_tasks_grouping_relation_properties.html'>Task grouping, different relation property types</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='03_scales/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='03_scales/'>Scales</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/01_multiple_scales.html'>Multiple scales</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/02_month_days.html'>Month view</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/03_full_year.html'>Year scale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/04_days.html'>Day hours</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/05_dynamic_scales.html'>Dynamic scales</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/06_custom_scales.html'>Custom scales</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/07_minutes_scale.html'>Minutes timeline</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/08_scale_autoconfig.html'>Auto resize scale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/09_skip_weekends.html'>Not render weekends on the scale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/10_working_hours.html'>Show working hours</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/11_select_column.html'>Selecting columns</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/12_year_quarters.html'>Year quarters scale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/13_zoom_to_fit.html'>Zoom To Fit</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/14_scale_zoom_by_wheelmouse.html'>Mouse wheel zoom</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='04_customization/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='04_customization/'>Customization</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/01_outer_content.html'>Define side content</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/02_custom_tree.html'>Custom tree formatting</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/03_link_styles.html'>Link styles</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/04_task_styles.html'>Task styles</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/05_tree_template.html'>Template for tree nodes</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/06_highlight_weekend.html'>Highlighting weekends</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/07_progress_text.html'>Text in the Progress bar</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/08_templates.html'>Styling task bars with events</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/09_html_content.html'>Custom html content</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/10_context_menu.html'>Simple context menu</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/11_split_task.html'>Split task</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/12_custom_task_type.html'>Custom task type</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/13_autosize_container.html'>Expand container</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/14_deadline.html'>Displaying deadlines</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/15_baselines.html'>Display project baseline</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/16_inline_task_colors.html'>Specify inline colors for Tasks and Links</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/17_classic_gantt_look.html'>Classic Look</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/18_subtasks_displaying.html'>Display subtasks when the Project is closed</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/19_task_type.html'>Create summary tasks dynamically</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/20_message_types.html'>Gantt message types</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/21_open_split_task.html'>Expand and collapse split tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/22_draw_links_as_svg_images.html'>Draw links as SVG images</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='05_lightbox/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='05_lightbox/'>Lightbox</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/01_lightbox_customization.html'>Lightbox customization</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/02_checkbox.html'>Checkbox control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/02_progress_lightbox.html'>Progress lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/02_radio.html'>Radio control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/03_validation.html'>Validate lightbox values</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/04_custom_editor.html'>Custom control in the lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/05_template.html'>Template control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/06_custom_button.html'>Custom button in the lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/07_time.html'>Time control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/08_parent_selector.html'>Parent selector</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/09_years_selector_range.html'>Specify year selector range</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/10_progress_slider.html'>Slider control in lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/11_datepicker_for_lightbox.html'>Datepicker in lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/12_select.html'>Select control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/13_resources.html'>Resources control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/14_jquery_multiselect.html'>3rd party multiselect control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/15_readonly_lightbox.html'>Readonly lightbox</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='06_skins/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='06_skins/'>Skins</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/01_default.html'>Default skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/02_default_lightbox.html'>Task edit form</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/03_skyblue.html'>'Skyblue' skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/04_meadow.html'>'Meadow' skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/05_broadway.html'>'Broadway' skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/06_dynamic_skin.html'>Change skin dynamically</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/07_high_contrast_black.html'>High contrast theme - Black</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/08_high_contrast_white.html'>High contrast theme - White</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/09_material.html'>Material theme</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='07_grid/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='07_grid/'>Grid</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/01_builtin_sorting.html'>Built-in sorting</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/02_branch_ordering.html'>Branch ordering</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/03_filtering.html'>Filtering</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/04_custom_sorting.html'>Custom sorting function</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/05_sort_api.html'>Using sorting methods</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/06_without_grid.html'>Render Gantt chart without grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/07_custom_buttons.html'>Custom Buttons in a Grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/08_drag_between_levels.html'>Drag and drop rows in Grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/09_wbs_column.html'>Show Task WBS Codes (Outline Numbers)</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/10_scrollable_grid.html'>Horizontal scroll inside Grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/11_inline_edit_basic.html'>Inline editing</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/12_inline_edit_key_nav.html'>Inline editing - keyboard navigation mode</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/13_custom_mapping.html'>Inline editing - Custom keyboard mapping</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/14_branch_ordering_highlight.html'>Branch ordering - highlighting mode</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='08_api/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='08_api/'>Api</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/01_dnd_events.html'>D'n'D Events</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/02_constraints.html'>Limit drag and drop dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/03_validation.html'>Validation</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/04_limit_project.html'>Fixed project dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/05_limit_drag_dates.html'>Denying dragging tasks out of specific dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/06_export.html'>Export data from Gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/07_export_styles.html'>Task styles</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/08_export_other.html'>Export data : MS Project, PrimaveraP6, Excel & iCal</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/09_export_store.html'>Export data: store online</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/10_performance_tweaks.html'>Performance tweaks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/11_project_structure.html'>Predefined Project Structure</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/12_fit_task_text.html'>Dynamically move text content of a task</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/13_highlight_drag_position.html'>Highlight Task Position on Drag</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/14_critical_tasks_expanding.html'>Critical tasks expanding</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/15_show_dates_on_drag.html'>Show task dates on Drag and Drop</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/16_dynamic_progress.html'>Calculate Progress of Summary Tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/17_show_task_slack.html'>Show Slack time</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/18_load_from_mpp.html'>Import MS Project file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/18_load_from_primaverap6.html'>Import Primavera P6 file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/19_draggable_projects.html'>Draggable projects</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/21_load_from_excel.html'>Import Excel file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/22_data_processor.html'>Custom data api - using local storage</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='09_worktime/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='09_worktime/'>Worktime</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/01_working_hours_per_day.html'>Calculate working hours</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/02_working_days.html'>Working days as duration</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/03_exclude_holidays.html'>Exclude holidays</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/04_custom_workday_duration.html'>Custom working days and time</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/05_adjust_to_worktime.html'>Correct task position on drag</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/06_task_calendars.html'>Task level calendars</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/07_resource_calendars.html'>Resource level calendars</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/08_project_calendars.html'>Project level calendars</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/09_decimal_durations.html'>Decimal durations for tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/10_merge_calendars.html'>Merge work Calendars of different resources</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/11_working_hours_with_minutes.html'>Specify work time with minute precision (8:30-17:30)</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/12_calendar_ranges.html'>Different worktimes for different time periods</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='10_layout/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='10_layout/'>Layout</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/01_rightside_columns.html'>Grid columns rightside of gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/02_resource_panel.html'>Gantt chart with resource panel</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/03_scale_at_bottom.html'>Time scale at the bottom of gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/04_rtl.html'>Right to left gantt</a></li></ul> </details> </td> </tr> <tr> <td style=' width:30px; vertical-align:top '> <a href='11_resources/'><div class='nav_folder_img'> </div></a> </td> <td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> <details class='list_samples' style="display: inline;"> <summary> <a style='line-height: 20px;vertical-align: top;' href='11_resources/'>Resources</a> </summary> <ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/01_assigning_resources.html'>Assigning owners to tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/02_resource_calendars.html'>Resource calendars</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/03_break_down_by_resource.html'>Break down by resources</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/04_resource_usage_diagram.html'>Resource load diagram</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/05_resource_usage_templates.html'>Templates of the Resource diagram</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/06_assign_multiple_owners.html'>Assign multiple owners to a task</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/07_assign_multiple_resources.html'>Assign multiple resources</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/08_resource_usage_groups.html'>Group by multiple resources</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/09_resource_histogram.html'>Resource histogram</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertic