diff --git a/docs/guides/integration.md b/docs/guides/integration.md index 57b4d811..88367904 100644 --- a/docs/guides/integration.md +++ b/docs/guides/integration.md @@ -1,10 +1,10 @@ --- -sidebar_label: Integration with DHTML widgets -title: Integration with DHTML widgets +sidebar_label: Integration with DHTMLX widgets +title: Integration with DHTMLX widgets description: You can learn about the integration in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. --- -# Integration with DHTML widgets +# Integration with DHTMLX widgets You can integrate DHTMLX Kanban with other DHTMLX widgets (for instance, [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/)). Check the examples below. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md index cdcbfd2d..b58c46ec 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md @@ -1,10 +1,10 @@ --- -sidebar_label: Integration mit DHTML-Widgets -title: Integration mit DHTML-Widgets +sidebar_label: Integration mit DHTMLX-Widgets +title: Integration mit DHTMLX-Widgets description: Informationen zur Integration finden Sie in der Dokumentation der DHTMLX JavaScript Kanban-Bibliothek. Durchstöbern Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX Kanban herunter. --- -# Integration mit DHTML-Widgets +# Integration mit DHTMLX-Widgets Sie können DHTMLX Kanban mit anderen DHTMLX-Widgets integrieren (zum Beispiel mit [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/)). Sehen Sie sich die folgenden Beispiele an. diff --git a/i18n/en/code.json b/i18n/en/code.json deleted file mode 100644 index a817b071..00000000 --- a/i18n/en/code.json +++ /dev/null @@ -1,444 +0,0 @@ -{ - "theme.ErrorPageContent.title": { - "message": "This page crashed.", - "description": "The title of the fallback page when the page crashed" - }, - "theme.BackToTopButton.buttonAriaLabel": { - "message": "Scroll back to top", - "description": "The ARIA label for the back to top button" - }, - "theme.blog.archive.title": { - "message": "Archive", - "description": "The page & hero title of the blog archive page" - }, - "theme.blog.archive.description": { - "message": "Archive", - "description": "The page & hero description of the blog archive page" - }, - "theme.blog.paginator.navAriaLabel": { - "message": "Blog list page navigation", - "description": "The ARIA label for the blog pagination" - }, - "theme.blog.paginator.newerEntries": { - "message": "Newer entries", - "description": "The label used to navigate to the newer blog posts page (previous page)" - }, - "theme.blog.paginator.olderEntries": { - "message": "Older entries", - "description": "The label used to navigate to the older blog posts page (next page)" - }, - "theme.blog.post.paginator.navAriaLabel": { - "message": "Blog post page navigation", - "description": "The ARIA label for the blog posts pagination" - }, - "theme.blog.post.paginator.newerPost": { - "message": "Newer post", - "description": "The blog post button label to navigate to the newer/previous post" - }, - "theme.blog.post.paginator.olderPost": { - "message": "Older post", - "description": "The blog post button label to navigate to the older/next post" - }, - "theme.tags.tagsPageLink": { - "message": "View all tags", - "description": "The label of the link targeting the tag list page" - }, - "theme.colorToggle.ariaLabel": { - "message": "Switch between dark and light mode (currently {mode})", - "description": "The ARIA label for the navbar color mode toggle" - }, - "theme.colorToggle.ariaLabel.mode.dark": { - "message": "dark mode", - "description": "The name for the dark color mode" - }, - "theme.colorToggle.ariaLabel.mode.light": { - "message": "light mode", - "description": "The name for the light color mode" - }, - "theme.docs.breadcrumbs.navAriaLabel": { - "message": "Breadcrumbs", - "description": "The ARIA label for the breadcrumbs" - }, - "theme.docs.DocCard.categoryDescription.plurals": { - "message": "1 item|{count} items", - "description": "The default description for a category card in the generated index about how many items this category includes" - }, - "theme.docs.paginator.navAriaLabel": { - "message": "Docs pages", - "description": "The ARIA label for the docs pagination" - }, - "theme.docs.paginator.previous": { - "message": "Previous", - "description": "The label used to navigate to the previous doc" - }, - "theme.docs.paginator.next": { - "message": "Next", - "description": "The label used to navigate to the next doc" - }, - "theme.docs.tagDocListPageTitle.nDocsTagged": { - "message": "One doc tagged|{count} docs tagged", - "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" - }, - "theme.docs.tagDocListPageTitle": { - "message": "{nDocsTagged} with \"{tagName}\"", - "description": "The title of the page for a docs tag" - }, - "theme.docs.versionBadge.label": { - "message": "Version: {versionLabel}" - }, - "theme.docs.versions.unreleasedVersionLabel": { - "message": "This is unreleased documentation for {siteTitle} {versionLabel} version.", - "description": "The label used to tell the user that he's browsing an unreleased doc version" - }, - "theme.docs.versions.unmaintainedVersionLabel": { - "message": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.", - "description": "The label used to tell the user that he's browsing an unmaintained doc version" - }, - "theme.docs.versions.latestVersionSuggestionLabel": { - "message": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).", - "description": "The label used to tell the user to check the latest version" - }, - "theme.docs.versions.latestVersionLinkLabel": { - "message": "latest version", - "description": "The label used for the latest version suggestion link label" - }, - "theme.common.editThisPage": { - "message": "Edit this page", - "description": "The link label to edit the current page" - }, - "theme.common.headingLinkTitle": { - "message": "Direct link to {heading}", - "description": "Title for link to heading" - }, - "theme.lastUpdated.atDate": { - "message": " on {date}", - "description": "The words used to describe on which date a page has been last updated" - }, - "theme.lastUpdated.byUser": { - "message": " by {user}", - "description": "The words used to describe by who the page has been last updated" - }, - "theme.lastUpdated.lastUpdatedAtBy": { - "message": "Last updated{atDate}{byUser}", - "description": "The sentence used to display when a page has been last updated, and by who" - }, - "theme.NotFound.title": { - "message": "Page Not Found", - "description": "The title of the 404 page" - }, - "theme.navbar.mobileVersionsDropdown.label": { - "message": "Versions", - "description": "The label for the navbar versions dropdown on mobile view" - }, - "theme.tags.tagsListLabel": { - "message": "Tags:", - "description": "The label alongside a tag list" - }, - "theme.admonition.caution": { - "message": "caution", - "description": "The default label used for the Caution admonition (:::caution)" - }, - "theme.admonition.danger": { - "message": "danger", - "description": "The default label used for the Danger admonition (:::danger)" - }, - "theme.admonition.info": { - "message": "info", - "description": "The default label used for the Info admonition (:::info)" - }, - "theme.admonition.note": { - "message": "note", - "description": "The default label used for the Note admonition (:::note)" - }, - "theme.admonition.tip": { - "message": "tip", - "description": "The default label used for the Tip admonition (:::tip)" - }, - "theme.admonition.warning": { - "message": "warning", - "description": "The default label used for the Warning admonition (:::warning)" - }, - "theme.AnnouncementBar.closeButtonAriaLabel": { - "message": "Close", - "description": "The ARIA label for close button of announcement bar" - }, - "theme.blog.sidebar.navAriaLabel": { - "message": "Blog recent posts navigation", - "description": "The ARIA label for recent posts in the blog sidebar" - }, - "theme.CodeBlock.copied": { - "message": "Copied", - "description": "The copied button label on code blocks" - }, - "theme.CodeBlock.copyButtonAriaLabel": { - "message": "Copy code to clipboard", - "description": "The ARIA label for copy code blocks button" - }, - "theme.CodeBlock.copy": { - "message": "Copy", - "description": "The copy button label on code blocks" - }, - "theme.CodeBlock.wordWrapToggle": { - "message": "Toggle word wrap", - "description": "The title attribute for toggle word wrapping button of code block lines" - }, - "theme.DocSidebarItem.expandCategoryAriaLabel": { - "message": "Expand sidebar category '{label}'", - "description": "The ARIA label to expand the sidebar category" - }, - "theme.DocSidebarItem.collapseCategoryAriaLabel": { - "message": "Collapse sidebar category '{label}'", - "description": "The ARIA label to collapse the sidebar category" - }, - "theme.NavBar.navAriaLabel": { - "message": "Main", - "description": "The ARIA label for the main navigation" - }, - "theme.navbar.mobileLanguageDropdown.label": { - "message": "Languages", - "description": "The label for the mobile language switcher dropdown" - }, - "theme.NotFound.p1": { - "message": "We could not find what you were looking for.", - "description": "The first paragraph of the 404 page" - }, - "theme.NotFound.p2": { - "message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.", - "description": "The 2nd paragraph of the 404 page" - }, - "theme.TOCCollapsible.toggleButtonLabel": { - "message": "On this page", - "description": "The label used by the button on the collapsible TOC component" - }, - "theme.blog.post.readMore": { - "message": "Read more", - "description": "The label used in blog post item excerpts to link to full blog posts" - }, - "theme.blog.post.readMoreLabel": { - "message": "Read more about {title}", - "description": "The ARIA label for the link to full blog posts from excerpts" - }, - "theme.blog.post.readingTime.plurals": { - "message": "One min read|{readingTime} min read", - "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" - }, - "theme.docs.breadcrumbs.home": { - "message": "Home page", - "description": "The ARIA label for the home page in the breadcrumbs" - }, - "theme.docs.sidebar.collapseButtonTitle": { - "message": "Collapse sidebar", - "description": "The title attribute for collapse button of doc sidebar" - }, - "theme.docs.sidebar.collapseButtonAriaLabel": { - "message": "Collapse sidebar", - "description": "The title attribute for collapse button of doc sidebar" - }, - "theme.docs.sidebar.navAriaLabel": { - "message": "Docs sidebar", - "description": "The ARIA label for the sidebar navigation" - }, - "theme.docs.sidebar.closeSidebarButtonAriaLabel": { - "message": "Close navigation bar", - "description": "The ARIA label for close button of mobile sidebar" - }, - "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { - "message": "Toggle navigation bar", - "description": "The ARIA label for hamburger menu button of mobile navigation" - }, - "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { - "message": "← Back to main menu", - "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" - }, - "theme.docs.sidebar.expandButtonTitle": { - "message": "Expand sidebar", - "description": "The ARIA label and title attribute for expand button of doc sidebar" - }, - "theme.docs.sidebar.expandButtonAriaLabel": { - "message": "Expand sidebar", - "description": "The ARIA label and title attribute for expand button of doc sidebar" - }, - "theme.SearchPage.documentsFound.plurals": { - "message": "One document found|{count} documents found", - "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" - }, - "theme.SearchPage.existingResultsTitle": { - "message": "Search results for \"{query}\"", - "description": "The search page title for non-empty query" - }, - "theme.SearchPage.emptyResultsTitle": { - "message": "Search the documentation", - "description": "The search page title for empty query" - }, - "theme.SearchPage.inputPlaceholder": { - "message": "Type your search here", - "description": "The placeholder for search page input" - }, - "theme.SearchPage.inputLabel": { - "message": "Search", - "description": "The ARIA label for search page input" - }, - "theme.SearchPage.algoliaLabel": { - "message": "Search by Algolia", - "description": "The ARIA label for Algolia mention" - }, - "theme.SearchPage.noResultsText": { - "message": "No results were found", - "description": "The paragraph for empty search result" - }, - "theme.SearchPage.fetchingNewResults": { - "message": "Fetching new results...", - "description": "The paragraph for fetching new search results" - }, - "theme.SearchBar.seeAll": { - "message": "See all {count} results" - }, - "theme.SearchBar.label": { - "message": "Search", - "description": "The ARIA label and placeholder for search button" - }, - "theme.SearchModal.searchBox.resetButtonTitle": { - "message": "Clear the query", - "description": "The label and ARIA label for search box reset button" - }, - "theme.SearchModal.searchBox.cancelButtonText": { - "message": "Cancel", - "description": "The label and ARIA label for search box cancel button" - }, - "theme.SearchModal.startScreen.recentSearchesTitle": { - "message": "Recent", - "description": "The title for recent searches" - }, - "theme.SearchModal.startScreen.noRecentSearchesText": { - "message": "No recent searches", - "description": "The text when no recent searches" - }, - "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { - "message": "Save this search", - "description": "The label for save recent search button" - }, - "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { - "message": "Remove this search from history", - "description": "The label for remove recent search button" - }, - "theme.SearchModal.startScreen.favoriteSearchesTitle": { - "message": "Favorite", - "description": "The title for favorite searches" - }, - "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { - "message": "Remove this search from favorites", - "description": "The label for remove favorite search button" - }, - "theme.SearchModal.errorScreen.titleText": { - "message": "Unable to fetch results", - "description": "The title for error screen of search modal" - }, - "theme.SearchModal.errorScreen.helpText": { - "message": "You might want to check your network connection.", - "description": "The help text for error screen of search modal" - }, - "theme.SearchModal.footer.selectText": { - "message": "to select", - "description": "The explanatory text of the action for the enter key" - }, - "theme.SearchModal.footer.selectKeyAriaLabel": { - "message": "Enter key", - "description": "The ARIA label for the Enter key button that makes the selection" - }, - "theme.SearchModal.footer.navigateText": { - "message": "to navigate", - "description": "The explanatory text of the action for the Arrow up and Arrow down key" - }, - "theme.SearchModal.footer.navigateUpKeyAriaLabel": { - "message": "Arrow up", - "description": "The ARIA label for the Arrow up key button that makes the navigation" - }, - "theme.SearchModal.footer.navigateDownKeyAriaLabel": { - "message": "Arrow down", - "description": "The ARIA label for the Arrow down key button that makes the navigation" - }, - "theme.SearchModal.footer.closeText": { - "message": "to close", - "description": "The explanatory text of the action for Escape key" - }, - "theme.SearchModal.footer.closeKeyAriaLabel": { - "message": "Escape key", - "description": "The ARIA label for the Escape key button that close the modal" - }, - "theme.SearchModal.footer.searchByText": { - "message": "Search by", - "description": "The text explain that the search is making by Algolia" - }, - "theme.SearchModal.noResultsScreen.noResultsText": { - "message": "No results for", - "description": "The text explains that there are no results for the following search" - }, - "theme.SearchModal.noResultsScreen.suggestedQueryText": { - "message": "Try searching for", - "description": "The text for the suggested query when no results are found for the following search" - }, - "theme.SearchModal.noResultsScreen.reportMissingResultsText": { - "message": "Believe this query should return results?", - "description": "The text for the question where the user thinks there are missing results" - }, - "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { - "message": "Let us know.", - "description": "The text for the link to report missing results" - }, - "theme.SearchModal.placeholder": { - "message": "Search docs", - "description": "The placeholder of the input of the DocSearch pop-up modal" - }, - "theme.blog.post.plurals": { - "message": "One post|{count} posts", - "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" - }, - "theme.blog.tagTitle": { - "message": "{nPosts} tagged with \"{tagName}\"", - "description": "The title of the page for a blog tag" - }, - "theme.blog.author.pageTitle": { - "message": "{authorName} - {nPosts}", - "description": "The title of the page for a blog author" - }, - "theme.blog.authorsList.pageTitle": { - "message": "Authors", - "description": "The title of the authors page" - }, - "theme.blog.authorsList.viewAll": { - "message": "View all authors", - "description": "The label of the link targeting the blog authors page" - }, - "theme.blog.author.noPosts": { - "message": "This author has not written any posts yet.", - "description": "The text for authors with 0 blog post" - }, - "theme.contentVisibility.unlistedBanner.title": { - "message": "Unlisted page", - "description": "The unlisted content banner title" - }, - "theme.contentVisibility.unlistedBanner.message": { - "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.", - "description": "The unlisted content banner message" - }, - "theme.contentVisibility.draftBanner.title": { - "message": "Draft page", - "description": "The draft content banner title" - }, - "theme.contentVisibility.draftBanner.message": { - "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.", - "description": "The draft content banner message" - }, - "theme.ErrorPageContent.tryAgain": { - "message": "Try again", - "description": "The label of the button to try again rendering when the React error boundary captures an error" - }, - "theme.common.skipToMainContent": { - "message": "Skip to main content", - "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" - }, - "theme.tags.tagsPageTitle": { - "message": "Tags", - "description": "The title of the tag list page" - } -} diff --git a/i18n/en/docusaurus-plugin-content-docs/current.json b/i18n/en/docusaurus-plugin-content-docs/current.json deleted file mode 100644 index 3cefdb5b..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current.json +++ /dev/null @@ -1,134 +0,0 @@ -{ - "version.label": { - "message": "Next", - "description": "The label for version current" - }, - "sidebar.docs.category.What's new and migration": { - "message": "What's new and migration", - "description": "The label for category What's new and migration in sidebar docs" - }, - "sidebar.docs.category.What's new and migration.link.generated-index.title": { - "message": "What's new and migration", - "description": "The generated-index page title for category What's new and migration in sidebar docs" - }, - "sidebar.docs.category.API": { - "message": "API", - "description": "The label for category API in sidebar docs" - }, - "sidebar.docs.category.Kanban methods": { - "message": "Kanban methods", - "description": "The label for category Kanban methods in sidebar docs" - }, - "sidebar.docs.category.Kanban internal API": { - "message": "Kanban internal API", - "description": "The label for category Kanban internal API in sidebar docs" - }, - "sidebar.docs.category.Kanban internal API.link.generated-index.title": { - "message": "Internal API overview", - "description": "The generated-index page title for category Kanban internal API in sidebar docs" - }, - "sidebar.docs.category.Event Bus methods": { - "message": "Event Bus methods", - "description": "The label for category Event Bus methods in sidebar docs" - }, - "sidebar.docs.category.Export methods": { - "message": "Export methods", - "description": "The label for category Export methods in sidebar docs" - }, - "sidebar.docs.category.State methods": { - "message": "State methods", - "description": "The label for category State methods in sidebar docs" - }, - "sidebar.docs.category.Kanban events": { - "message": "Kanban events", - "description": "The label for category Kanban events in sidebar docs" - }, - "sidebar.docs.category.Kanban properties": { - "message": "Kanban properties", - "description": "The label for category Kanban properties in sidebar docs" - }, - "sidebar.docs.category.Toolbar methods": { - "message": "Toolbar methods", - "description": "The label for category Toolbar methods in sidebar docs" - }, - "sidebar.docs.category.Toolbar properties": { - "message": "Toolbar properties", - "description": "The label for category Toolbar properties in sidebar docs" - }, - "sidebar.docs.category.Common settings": { - "message": "Common settings", - "description": "The label for category Common settings in sidebar docs" - }, - "sidebar.docs.category.Backend API": { - "message": "Backend API", - "description": "The label for category Backend API in sidebar docs" - }, - "sidebar.docs.category.Backend API.link.generated-index.title": { - "message": "Backend API", - "description": "The generated-index page title for category Backend API in sidebar docs" - }, - "sidebar.docs.category.RestDataProvider API": { - "message": "RestDataProvider API", - "description": "The label for category RestDataProvider API in sidebar docs" - }, - "sidebar.docs.category.RestDataProvider API.link.generated-index.title": { - "message": "RestDataProvider API", - "description": "The generated-index page title for category RestDataProvider API in sidebar docs" - }, - "sidebar.docs.category.REST methods": { - "message": "REST methods", - "description": "The label for category REST methods in sidebar docs" - }, - "sidebar.docs.category.REST routes": { - "message": "REST routes", - "description": "The label for category REST routes in sidebar docs" - }, - "sidebar.docs.category.GET routes": { - "message": "GET routes", - "description": "The label for category GET routes in sidebar docs" - }, - "sidebar.docs.category.GET routes.link.generated-index.title": { - "message": "GET routes", - "description": "The generated-index page title for category GET routes in sidebar docs" - }, - "sidebar.docs.category.POST routes": { - "message": "POST routes", - "description": "The label for category POST routes in sidebar docs" - }, - "sidebar.docs.category.POST routes.link.generated-index.title": { - "message": "POST routes", - "description": "The generated-index page title for category POST routes in sidebar docs" - }, - "sidebar.docs.category.PUT routes": { - "message": "PUT routes", - "description": "The label for category PUT routes in sidebar docs" - }, - "sidebar.docs.category.PUT routes.link.generated-index.title": { - "message": "PUT routes", - "description": "The generated-index page title for category PUT routes in sidebar docs" - }, - "sidebar.docs.category.DELETE routes": { - "message": "DELETE routes", - "description": "The label for category DELETE routes in sidebar docs" - }, - "sidebar.docs.category.DELETE routes.link.generated-index.title": { - "message": "DELETE routes", - "description": "The generated-index page title for category DELETE routes in sidebar docs" - }, - "sidebar.docs.category.Backend and frameworks integration": { - "message": "Backend and frameworks integration", - "description": "The label for category Backend and frameworks integration in sidebar docs" - }, - "sidebar.docs.category.Backend and frameworks integration.link.generated-index.title": { - "message": "Backend and frameworks integration", - "description": "The generated-index page title for category Backend and frameworks integration in sidebar docs" - }, - "sidebar.docs.category.Guides": { - "message": "Guides", - "description": "The label for category Guides in sidebar docs" - }, - "sidebar.docs.category.Guides.link.generated-index.title": { - "message": "Guides", - "description": "The generated-index page title for category Guides in sidebar docs" - } -} diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/common/js_kanban_meta_parameter.md b/i18n/en/docusaurus-plugin-content-docs/current/api/common/js_kanban_meta_parameter.md deleted file mode 100644 index 91372f62..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/common/js_kanban_meta_parameter.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -sidebar_label: $meta -title: $meta parameter -description: You can learn about the $meta parameter in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# $meta - -### Description - -@short: An object containing extra settings to customize Kanban methods and events - -:::important -The `$meta` object provides additional parameters that help configure methods related to Kanban events. -::: - -### Usage - -~~~jsx {} -$meta?: { - skipHistory?: boolean -}; -~~~ - -### Parameters - -The `$meta` object includes the following parameter: - -- `skipHistory` - (optional) controls whether an operation is recorded in the Kanban history or not - -### Example - -~~~jsx {11-13} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// add new card and skip this action in history of Kanban -board.addCard({ - id: 1, - columnId: "backlog", - card: { label: "New card" }, - $meta: { - skipHistory: true - } -}); -~~~ - -**Change log:** The `$meta` parameter was introduced in v1.3 - -**Related article:** [`history`](api/config/js_kanban_history_config.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardheight_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardheight_config.md deleted file mode 100644 index f78ed0a7..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardheight_config.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -sidebar_label: cardHeight -title: cardHeight Config -description: You can learn about the cardHeight config in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# cardHeight - -### Description - -@short: Optional. Sets the height of the cards. - -### Usage - -~~~jsx {} -cardHeight?: number; // px -~~~ - -:::important -When using [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) together with [`scrollType: "default"`](api/config/js_kanban_scrolltype_config.md), it's important to define a fixed height for cards using the `cardHeight` property. Without this, cards won't be visible. -When you use [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) with [`scrollType: "column"`](api/config/js_kanban_scrolltype_config.md), you should also fix the height of cards via the `cardHeight` property. Although a variable height of cards is supported for this type of layout, it may not work in a stable manner with custom card content. -::: - -### Example - -~~~jsx {4} -new kanban.Kanban("#root", { - cards, - columns, - cardHeight: 150, // px - // other parameters -}); -~~~ - -**Change log:** This property was introduced in version 1.2 - -**Related articles:** [Configuration](guides/configuration.md#cards) - -**Related sample:** [Kanban. Lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cards_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cards_config.md deleted file mode 100644 index 49ba1116..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cards_config.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -sidebar_label: cards -title: cards Config -description: Explore the cards configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try live demos and code examples, and download a free 30-day trial of DHTMLX Kanban. ---- - -# cards - -### Description - -@short: Optional. An array of objects holding the cards data - -### Usage - -~~~jsx {} -cards?: [ - { - id?: string | number, - label?: string, - description?: string, - progress?: number, - start_date?: Date, - end_date?: Date, - attached?: [ - { - id: string | number, - url?: string, - previewURL?: string, - coverURL?: string, - name?: string, - isCover?: boolean - size?: number - }, {...} - ], - color?: string, - users?: array | string | number, - // users?: array - for multiple users, if you use the "multiselect" editor type to assign users - // users?: string | number - for a single user, if you use the "combo" or "select" editor type to assign a user - priority?: string | number, - css?: string, - votes?: array, - comments?: [ - { - id: string | number, - userId: string | number, - cardId: string | number, - text?: string, - date?: Date, - }, {...} - ], - [custom_key: string]?: any - }, {...} // other cards data -]; -~~~ - -### Parameters - -Each card can include the following parameters (data): - -- `id` - (optional) the card's **ID**. This is used for managing the card through related methods -- `label` - (optional) the card's label, shown in the **Label** field -- `description` - (optional) a description for the card, displayed in the **Description** field -- `progress` - (optional) progress bar value from 0 to 100. Displayed in the **Progress bar** field -- `start_date` - (optional) a Date object representing the start date (avoid using string dates). Shown in the **Start date** field -- `end_date` - (optional) a Date object representing the end date (avoid using string dates). Shown in the **End date** field -- `attached` - (optional) an array of objects representing attached files. Shown in the **Attachment** field. Each object can include: - - `id` - (required) the **ID** of the attached file - - `url` - (optional) the file path - - `previewURL` - (optional) path to the preview image - - `coverURL` - (optional) path to the cover image - - `name` - (optional) file name - - `isCover` - (optional) if **true**, sets the cover image using the "coverURL" - - `size` - (optional) file size in bytes -- `color` - (optional) a HEX color code, which sets the color of the card's top line -- `users` - (optional) either an **array** of user IDs for multiple assigned users or a **string | number** for a single assigned user. To assign users, define an array of user data in the [cardShape.users](api/config/js_kanban_cardshape_config.md) property. These users appear in the **Users** field - -:::info -`users?: array` - use an **array** of user **ID**s when using the [**multiselect**](api/config/js_kanban_editorshape_config.md#parameters-for-combo-select-and-multiselect-types) editor type to assign multiple users - -`users?: string | number` - use a single **ID** when using the [**combo** or **select**](api/config/js_kanban_editorshape_config.md#parameters-for-combo-select-and-multiselect-types) editor types to assign one user -::: - -- `priority` - (optional) the card's priority **ID**. Define an array with priority data in the [cardShape.priority](api/config/js_kanban_cardshape_config.md) property. Displayed in the **Priority** field -- `css` - (optional) custom CSS styles for the individual card -- `votes` - (optional) an array of user IDs representing votes -- `comments` - (optional) an array of comment objects. Each comment can have: - - `id` - (required) the comment's **ID** - - `userId` - (required) user **ID** who posted the comment - - `cardId` - (required) the card's **ID** the comment belongs to - - `text` - (optional) the comment text, which may include HTML markup - - `date` - (optional) a Date object representing when the comment was posted (not updated after edits) -- `custom_key` - (optional) custom keys for placing the card into specific columns or rows. See [columnKey](../js_kanban_columnkey_config) and [rowKey](api/config/js_kanban_rowkey_config.md) properties - -:::info -To dynamically load new card data, you can use the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method! -::: - -### Example - -~~~jsx {1-41,45} -const cards = [ - { - id: 1, - label: "Integration with React", - description: "Some description", - progress: 25, - start_date: new Date("02/24/2022"), - end_date: new Date("02/24/2023"), - attached: [ - { - id: 234, - url: "../assets/img-1.jpg", - previewURL: "../assets/img-1.jpg", - coverURL: "../assets/img-1.jpg", - name: "img-1.jpg", - isCover: true, - size: 11979 - }, {...} // other attached files data - ], - color: "#65D3B3", - users: [1,2], - votes: [3,6,8], - comments: [ - { - id: 1, - userId: 1, - cardId: 1, - text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays. ", - date: new Date(), - }, {...} // other comments - ], - priority: 1, - // custom field to place the card into the "feature" row - // the rowKey config needs to be set to the "type" value - type: "feature", - // custom field to place the card into the "backlog" column - // the columnKey config needs to be set to the "stage" value - stage: "backlog", - css: "red", - }, {...} // other cards data -]; - -new kanban.Kanban("#root", { - columns, - cards, - // other parameters -}); -~~~ - -**Change log:** The ***css***, ***comments***, and ***votes*** parameters were introduced in v1.4 - -**Related articles:** -- [Working with data](guides/working_with_data.md) -- [updateCard()](api/methods/js_kanban_updatecard_method.md) - -**Related sample:** [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardshape_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardshape_config.md deleted file mode 100644 index c419a1ff..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardshape_config.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -sidebar_label: cardShape -title: cardShape Config -description: Explore the cardShape configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, live demos, and grab a free 30-day trial of DHTMLX Kanban. ---- - -# cardShape - -### Description - -@short: Optional. Settings object to customize the appearance of cards - -### Usage - -~~~jsx {} -cardShape?: { - label?: boolean | { show?: boolean }, - description?: boolean | { show?: boolean }, - progress?: boolean | { show?: boolean }, - attached?: boolean | { show?: boolean }, - cover?: boolean | { show?: boolean }, - comments?: boolean | { show?: boolean }, - confirmDeletion?: boolean | { show?: boolean }, - start_date?: boolean | { - show?: boolean, - format?: string - }, - end_date?: boolean | { - show?: boolean, - format?: string - }, - color?: boolean | { - show?: boolean, - values?: array - }, - menu?: boolean | { - show?: boolean, - items?: [ - { - id?: string, - icon?: string, - text?: string, - disabled? boolean, - onClick?: ({ id, item, card }) => void, - data?: array // an array of menu subitems - }, - {...} - ] | ({ card, readonly }) => array | null - }, - users?: boolean | { - show?: boolean, - values: [ - { - id: string | number, - label?: string, - avatar?: string - }, - {...} // other users data - ], - maxCount?: number | false - }, - priority?: boolean | { - show?: boolean, - values?: [ - { - id: string | number, - label?: string, - color: string - }, - {...} // other priorities data - ] - }, - votes?: boolean | { - show?: boolean, - clickable?: boolean - }, - css?: (card) => string, - headerFields?: [ - { - key: string, - label?: string, - css?: string - }, - {...} // other fields data - ] -}; -~~~ - -### Parameters - -:::info -Sometimes, parameters can be set using either a **short** or **extended** format. Here's how it looks: - -~~~jsx {3,6} - label: boolean | { show?: boolean } - // short format - label: true - // or - // extended format - label: { show: true } -~~~ -::: - -The **cardShape** object lets you customize various aspects of the card's look through these options: - -- `label` - (optional) toggles visibility of the **label** field -- `description` - (optional) toggles visibility of the **description** field -- `progress` - (optional) toggles visibility of the **progress** field -- `attached` - (optional) toggles visibility of the **attachment** field -- `cover` - (optional) toggles visibility of the **card image** -- `comments` - (optional) toggles visibility of **comments** on cards -- `confirmDeletion` - (optional) toggles the **confirmation dialog** for deleting cards -- `start_date` - (optional) settings for the **start date** field - - `show` - (optional) toggles visibility of the start date - - `format` - (optional) defines the date format, with options listed [here](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/) -- `end_date` - (optional) settings for the **end date** field - - `show` - (optional) toggles visibility of the end date - - `format` - (optional) defines the date format, with options listed [here](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/) -- `color` - (optional) settings for the **top color line** on the card - - `show` - (optional) toggles visibility of the top color line - - `values` - (optional) array of valid HEX color codes -- `menu` - (optional) settings for the **card context menu**, including: - - `show` - (optional) enables or disables the context menu - - `items` - (optional) array of menu item objects, each supporting: - - `id` - (optional) menu item ID. Built-in actions include: - - ***"set-edit"*** for editing the card name - - ***"delete-card"*** for deleting the card - - `icon` - (optional) icon class name (e.g., *mdi-delete*) - - `text` - (optional) menu item label - - `disabled` - (optional) boolean to enable or disable the item - - `onClick` - (optional) callback function receiving: - - ***id*** - current menu item ID - - ***item*** - current menu item data object - - ***card*** - target card data object - - `data` - (optional) array of submenu items - - :::info - You can also provide a function for `menu.items` that receives: - - ***card*** - current card data object - - ***readonly*** - readonly state properties ([details](api/internal/js_kanban_getstate_method.md)) - - This function lets you customize or disable the menu for specific cards by returning an array or *null*/*false*: - - ~~~jsx {} - items: ({ card, readonly }) => { - if (card.id === 1){ - return false; - } - - const menu = []; - - if (!readonly.delete){ - menu.push({ - id: "delete-card", icon: "wxi-delete", label: "Delete" - }); - } - - if (!readonly.edit){ - menu.push({ - id: "set-edit", icon: "wxi-edit", label: "Edit" - }); - } - return menu.length ? menu : null; - } - ~~~ - ::: - -- `users` - (optional) settings for the **users** field - - `show` - (optional) toggles visibility of assigned users - - `values` - (required) array of user objects, each including: - - `id` - (required) user ID - - `label` - (optional) user name - - `avatar` - (optional) user avatar image path - - `maxCount` - (optional) maximum number of users shown on the card, or ***false*** to show all - - You can specify a number for `maxCount` to limit how many users appear on a card. Setting it to `false` will display all assigned users. - - :::info - The ***users*** field is off by default. To activate it, set `show` to `true` and provide user data in `values`. To assign users through the editor, configure the relevant control via the [`editorShape`](api/config/js_kanban_editorshape_config.md#parameters-for-combo-select-and-multiselect-types) property. Use the ***select*** type for single user assignment or ***multiselect*** for multiple users. - - ~~~jsx {} - cardShape: { - users: { - show: true, - values: [ - { id: 1, label: "John Smith", avatar: "../assets/user.jpg" }, - { id: 2, label: "Aaron Short" } - ], - maxCount: 4 // only 4 users shown on the card - } - } - ~~~ - ::: - -- `priority` - (optional) settings for the **priority** field - - `show` - (optional) toggles visibility of the card priority - - `values` - (optional) array of priority objects, each including: - - `id` - (required) priority ID - - `label` - (optional) priority name - - `color` - (required) valid HEX color code -- `votes` - (optional) controls the **votes** feature - - `show` - (optional) toggles visibility of the vote icon on cards and in the editor - - `clickable` - (optional) if true, users can vote directly on the card; otherwise, voting is only available via the editor -- `css` - a function that returns a CSS class name to apply conditionally to cards -- `headerFields` - (optional) array of custom field objects, each with: - - `key` - (required) custom field key, used in editor configuration via [editorShape](api/config/js_kanban_editorshape_config.md) - - `label` - (optional) custom field label - - `css` - (optional) CSS class for the custom field - -:::info -If you don't specify card settings via **cardShape**, the widget uses the **defaultCardShape** parameters automatically. -::: - -### Default config - -~~~jsx {} -const defaultPriorities = [ - { id: 1, color: "#FE6158", label: "High" }, - { id: 2, color: "#F1B941", label: "Medium" }, - { id: 3, color: "#77D257", label: "Low" } -]; - -const defaultColors = ["#33B0B4", "#0096FA", "#F1B941"]; - -export const getDefaultCardMenuItems = ({ readonly }: { readonly: DataStore }) => { - const { readonly } = readonly.getState(); - const baseItems = [ - { id: "duplicate-card", icon: "wxi-content-copy", text: "Duplicate" }, - { id: "delete-card", icon: "wxi-delete-outline", text: "Delete" } - ]; - - if (!readonly?.select && readonly?.edit) { - return [ - { id: "set-edit", icon: "wxi-edit-outline", text: "Edit" }, - ...baseItems, - ]; - } - return baseItems; -}; - -const defaultCardShape = { - label: { show: true }, - description: { show: false }, - progress: { show: false }, - start_date: { show: false }, - end_date: { show: false }, - users: { show: false }, - confirmDeletion: { show: true }, - priority: { - show: false, - values: defaultPriorities - }, - color: { - show: false, - values: defaultColors - }, - cover: { show: false }, - attached: { show: false }, - menu: { show: true } -}; -~~~ - -### Example - -~~~jsx {14-49,54} -const users = [ // users data - { id: 1, label: "John Smith", avatar: "../assets/user.jpg" }, - { id: 2, label: "Aaron Short" } -]; - -const cardPriority = [ // card priority data - { id: 1, color: "#FF5252", label: "high" }, - { id: 2, color: "#FFC975", label: "medium" }, - { id: 3, color: "#0AB169", label: "low" } -]; - -const cardColors = ["#65D3B3", "#FFC975", "#58C3FE"]; - -const cardShape = { // card settings - label: true, - description: true, - progress: true, - start_date: true, - end_date: true, - menu: true, - attached: true, - cover: false, - comments: false, - confirmDeletion: false, - color: { - show: true, - values: cardColors - }, - users: { - show: true, - values: users, - maxCount: false - }, - priority: { - show: true, - values: cardPriority - }, - votes: { - show: true, - clickable: true - }, - css: (card) => card.type == "feature" ? "green" : "red", - headerFields: [ - { // custom field - key: "sprint", - css: "custom_style", - label: "Sprint" - } - ] -}; - -new kanban.Kanban("#root", { - cards, - columns, - cardShape, - // other parameters -}); -~~~ - -**Change log:** -- Added ***comments***, ***css***, and ***votes*** parameters in v1.4 -- Replaced ***menu.items[0].label*** with ***menu.items[0].text*** in v1.4 -- Replaced ***menu.items[0].items*** with ***menu.items[0].data*** in v1.4 -- Introduced ***users.maxCount*** and ***votes.clickable*** in v1.6 -- Removed ***menu.items[0].label*** and ***menu.items[0].items*** in v1.7 -- Updated ***menu.items*** function: replaced **store** parameter with **readonly** in v1.7 - -**Related articles:** [Configuration](guides/configuration.md#cards) - -**Related samples:** -- [Kanban. Swimlanes, comments, votes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban) -- [Kanban. Highlighting outdated and active tasks](https://snippet.dhtmlx.com/7fvc3rr1?tag=kanban) -- [Kanban. Styling cards](https://snippet.dhtmlx.com/qu6rpktk?tag=kanban) -- [Kanban. Unlimited user assignments per task](https://snippet.dhtmlx.com/w205dvzg?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardtemplate_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardtemplate_config.md deleted file mode 100644 index 6b05ecad..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_cardtemplate_config.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -sidebar_label: cardTemplate -title: cardTemplate Config -description: Find out how to use the cardTemplate config in the DHTMLX JavaScript Kanban library documentation. Explore developer guides and API references, check out code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# cardTemplate - -### Description - -@short: Optional. Returns and applies a custom HTML template for the card. - -### Usage - -~~~jsx -function cardTemplate ({ cardFields, selected, dragging, cardShape }){ - return "HTML template of the card"; -}; -~~~ - -### Parameters - -The callback function receives an object containing these parameters: - -- `cardFields` - the card's data object -- `selected` - indicates if the card is selected -- `dragging` - indicates if the card is being dragged -- `cardShape` - the card's configuration object - -:::important -To add a context menu inside the card template, include a custom icon in the template markup and use the `data-menu-id=${cardFields.id}` attribute as demonstrated in the example below. -::: - -### Example - -~~~jsx {1-23,28} -const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => { - const { label, color, id } = cardFields; - if (selected) { - return ` -
-
-
- -
- Selected:${label} -
- `; - } - return ` -
-
-
- -
- ${label} -
- `; -} - -new kanban.Kanban("#root", { - cards, - columns, - cardTemplate: kanban.template(card => cardTemplate(card)), - // other parameters -}); -~~~ - -**Change log:** Support for displaying a context menu was introduced in v1.4 - -**Related articles:** [Customization](guides/customization.md#custom-cards) - -**Related sample:** [Kanban. Custom card](https://snippet.dhtmlx.com/8rhdq81d?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columnkey_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columnkey_config.md deleted file mode 100644 index 033556dc..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columnkey_config.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -sidebar_label: columnKey -title: columnKey Config -description: Explore the columnKey configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# columnKey - -### Description - -@short: Optional. Specifies which column a card belongs to. - -:::info -To organize cards into columns, assign a key (**column** or a *custom* one) to the **ID** of the target column within the card data object. The **columnKey** property in the widget configuration should be set to this key. -::: - -### Usage - -~~~jsx {} -columnKey?: string; -~~~ - -### Default config - -:::note -If you don't set a column key using the **columnKey** property, the widget defaults to using the **"column"** key. In that case, the **column** key in the card data object must be set to the appropriate column **ID**. - -~~~jsx {3} -const cards = [ - { - column: "backlog", - // other data - } -]; -~~~ -::: - -### Example - -~~~jsx {4,8,15} -const cards = [ - { - label: "Backlog task", - column_custom_key: "backlog" - }, - { - label: "In progress task", - column_custom_key: "inprogress" - } -]; - -new kanban.Kanban("#root", { - columns, - cards, - columnKey: "column_custom_key", - // other parameters -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columns_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columns_config.md deleted file mode 100644 index 206a0f3f..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columns_config.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -sidebar_label: columns -title: columns Config -description: Discover how to configure columns in the DHTMLX JavaScript Kanban library. Explore developer guides, API references, try code samples and live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# columns - -### Description - -@short: Optional. An array of objects holding the columns data - -### Usage - -~~~jsx {} -columns?: [ - { - id: string, - label?: string, - collapsed?: boolean, - limit?: number | object, - strictLimit?: boolean, - css?: string, - overlay?: any - }, - {...} // other columns data -]; -~~~ - -### Parameters - -Each column can include the following properties (data): - -- `id` - (required) the column **ID** used to manage the column via its methods -- `label` - (optional) the column label shown in the column header -- `collapsed` - (optional) the column's initial state. If ***true***, the column starts collapsed. Default is ***false*** (expanded) -- `limit` - (optional) this can be either: - - `number` - maximum number of cards allowed in the column - - `object` - an object specifying card limits per row (swimlane) by ID -- `strictLimit` - (optional) enforces the limit strictly. If ***true***, users cannot add cards beyond the set **limit**. Default is ***false*** -- `css` - (optional) applies custom CSS styles to the column -- `overlay` - (optional) adds an overlay layer to the column. You can specify a template that covers the column like this: - - ~~~jsx {} - overlay: template(` -
- Drop is not allowed - Only testers can move cards to this - column -
`) - ~~~ - -:::info -To load new column data dynamically, the [`setConfig()`](../../methods/js_kanban_setconfig_method) or [`parse()`](../../methods/js_kanban_parse_method) method can be used. -::: - -### Example - -~~~jsx {1-31,34} -const columns = [ - { - label: "Backlog", - id: "backlog", - collapsed: true, - limit: 3, - strictLimit: true, - css: "red" - }, - { - label: "In progress", - id: "inprogress", - collapsed: false, - limit: { - // limits cards in the "Feature" and "Task" rows of the "In progress" column - feature: 3, - task: 2 - }, - strictLimit: false - }, - { - label: "Done", - id: "done", - overlay: template(` -
- Drop is not allowed - Only testers can move cards to this - column -
`) - } -]; - -new kanban.Kanban("#root", { - columns, - cards, - rows, - // other parameters -}); -~~~ - -### Custom styling - -To style columns with the `css` parameter, define CSS rules for your custom class. - -```css -.wx-header .wx-column.red, -.wx-column.red { - background: #FFA29C; -} -``` - -If your styles don't apply, check that: - -- The selector includes enough context (like parent and DHTMLX internal classes) -- If inline styles override your styles, consider using `!important` - -**Change log:** The **css** and **overlay** options were introduced in v1.4 - -**Related article:** -- [Working with data](guides/working_with_data.md) -- [updateColumn()](api/methods/js_kanban_updatecolumn_method.md) - -**Related samples:** -- [Kanban. Limits for columns and swimlanes](https://snippet.dhtmlx.com/2blo6hx8?tag=kanban) -- [Kanban. Changing color of column via custom menu](https://snippet.dhtmlx.com/fnlvd2g5?tag=kanban) -- [Kanban. Disabling drag and drop to specific columns](https://snippet.dhtmlx.com/nfv59yif?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columnshape_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columnshape_config.md deleted file mode 100644 index 6fc4aa05..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_columnshape_config.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -sidebar_label: columnShape -title: columnShape Config -description: Discover the columnShape config in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try code examples and live demos, and get a free 30-day evaluation version of DHTMLX Kanban. ---- - -# columnShape - -### Description - -@short: Optional. A settings object to customize the appearance of columns. - -### Usage - -~~~jsx {} -columnShape?: { - menu?: { - show?: boolean, - items?: [ - { - id?: string, - icon?: string, - text?: string, - disabled?: boolean, - onClick?: ({ id, item, column }) => void, - data?: array // an array of menu subitems - }, - {...} - ] | ({ column, columnIndex, columns, readonly }) => array | null - }, - fixedHeaders?: boolean, - css?: (column, cards) => string, - headerTemplate?: template(column => { - return "The HTML template of the column header in the expanded state"; - }), - collapsedTemplate?: template(column => { - return "The HTML template of the column header in the collapsed state"; - }), - confirmDeletion?: boolean -}; -~~~ - -### Parameters - -To control how columns look, the **columnShape** object lets you set these options: - -- `menu` - (optional) an object defining the column context menu. It includes: - - `show` - (optional) toggles the column context menu on or off - - `items` - (optional) an array of menu item objects. Each item can have: - - `id` - (optional) the menu item's ID. Use these values for built-in actions: - - ***"add-card"*** - adds a new card - - ***"set-edit"*** - edits the column name - - ***"move-column:left"*** - moves the column left - - ***"move-column:right"*** - moves the column right - - ***"delete-column"*** - deletes the column - - - `icon` - (optional) the icon class name for the menu item, compatible with icon fonts (e.g., *mdi-delete*) - - `text` - (optional) the menu item's label - - `disabled` - (optional) whether the menu item is active or disabled (boolean) - - `onClick` - (optional) a custom callback function receiving: - - ***id*** - the current menu item's ID - - ***item*** - the current menu item's data object - - ***column*** - the target column's data object - - - `data` - (optional) an array of submenu item objects - - :::info - Alternatively, `menu.items` can be a custom function receiving: - - ***column*** - the current column data object - - ***columnIndex*** - the index of the current column - - ***columns*** - an array of all columns data - - ***readonly*** - an object with readonly [state properties](api/internal/js_kanban_getstate_method.md) - - This lets you customize the menu for each column or disable it for specific columns by returning *null* or *false*: - - ~~~jsx {} - items: ({ column }) => { - if(column.id === "inprogress"){ - return null; - } - if (column.id === "backlog"){ - return [ - { id: "set-edit", icon: "wxi-edit", text: "Rename" }, - { - id: "delete-card", - icon: "wxi-delete", - text: "Remove card" - } - ]; - } - } - ~~~ - ::: - -- `fixedHeaders` - (optional) keeps column headers visible during vertical scrolling (*true* by default). Requires scroll enabled in Kanban (limited height) -- `css` - (optional) a function returning a CSS class to apply conditionally to columns -- `headerTemplate` - (optional) HTML template for the column header when expanded -- `collapsedTemplate` - (optional) HTML template for the column header when collapsed -- `confirmDeletion` - (optional) toggles a confirmation dialog for deleting columns - -### Default config - -~~~jsx {} -const getDefaultColumnMenuItems = ({ column, columnIndex, columns, readonly }) => [ - { id: "add-card", icon: "wxi-plus", text: "Add new card" }, - { id: "set-edit", icon: "wxi-edit", text: "Rename" }, - { - id: "move-column:left", - icon: "wxi-arrow-left", - text: "Move left", - disabled: columnIndex <= 0 - }, - { - id: "move-column:right", - icon: "wxi-arrow-right", - text: "Move right", - disabled: columnIndex >= columns.length - 1 - }, - { id: "delete-column", icon: "wxi-delete", text: "Delete" } -]; -const columnShape = { - menu: { - show: true, - items: getDefaultColumnMenuItems - }, - fixedHeaders: true, - confirmDeletion: true -}; -~~~ - -### Example - -~~~jsx {1-58,64} -const columnShape = { - menu: { - show: true, - items: [ - { - id: "color", - text: "Color", - data: [ - { - id:"yellow", - text: "Yellow", - onClick: ({ column }) => changeColumnColor(column, "yellow") - }, - { - id:"red", - text: "Red", - onClick: ({ column }) => changeColumnColor(column, "red") - }, - { - id:"green", - text: "Green", - onClick: ({ column }) => changeColumnColor(column, "green") - } - ] - } - ] - }, - fixedHeaders: false, - css: (column, cards) => column.id == "inprogress" && cards.length < 5 ? "green" : "red", - headerTemplate: template(column => { - return `
- -
- ${ - !column.column.collapsed - ? `
- ${escapeHTML(column.column.label)} - (${column.columnState.cardsCount}) -
` - : "" - } - ${ - !column.column.collapsed - ? `
- -
` - : "" - }`; - }), - collapsedTemplate: template(column => { - return `
-
${escapeHTML(column.column.label)} (${ - column.columnState?.cardsCount - })
-
`; - }), - confirmDeletion: true -}; - -new kanban.Kanban("#root", { - cards, - columns, - rows, - columnShape, - // other parameters -}); -~~~ - -**Change log:** -- The ***css*** parameter was introduced in v1.4 -- The ***menu.items[0].label*** parameter was replaced by ***menu.items[0].text*** in v1.4 -- The ***menu.items[0].items*** parameter was replaced by ***menu.items[0].data*** in v1.4 -- The ***fixedHeaders*** parameter was added in v1.5 -- The ***headerTemplate*** and ***collapsedTemplate*** parameters were added in v1.6 -- The ***menu.items[0].label*** and ***menu.items[0].items*** parameters were removed in v1.7 -- The ***menu.items*** function was updated, replacing the **store** parameter with **readonly** in v1.7 - -**Related articles:** [Configuration](guides/configuration.md) - -**Related samples:** -- [Kanban. Changing color of column via custom menu](https://snippet.dhtmlx.com/fnlvd2g5?tag=kanban) -- [Kanban. Fixed headers, lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban) -- [Kanban. Template for column headers](https://snippet.dhtmlx.com/gq2saz9c?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_currentuser_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_currentuser_config.md deleted file mode 100644 index 2bec79e7..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_currentuser_config.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -sidebar_label: currentUser -title: currentUser Config -description: Explore the currentUser configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try live demos and code samples, and download a free 30-day trial of DHTMLX Kanban. ---- - -# currentUser - -### Description - -@short: Optional. Specifies the ID of the current user. - -:::note -The current user ID should match one of the IDs listed in the [`cardShape.users`](api/config/js_kanban_cardshape_config.md) property. If this ID is not set, comments will be available in read-only mode. -::: - -### Usage - -~~~jsx {} -currentUser?: string | number; -~~~ - -### Example - -~~~jsx {4} -new kanban.Kanban("#root", { - cards, - columns, - currentUser: 1, - // other parameters -}); -~~~ - -**Change log:** This property was introduced in v1.4 - -**Related sample:** [Kanban. Swimlanes, comments, votes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editor_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editor_config.md deleted file mode 100644 index fd762065..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editor_config.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -sidebar_label: editor -title: editor Config -description: You can find details about the editor config in the DHTMLX JavaScript Kanban library documentation. Explore developer guides and API reference, check out code examples and live demos, and download a free 30-day trial version of DHTMLX Kanban. ---- - -# editor - -### Description - -@short: Optional. Contains settings to customize the Kanban editor - -### Usage - -~~~jsx {} -editor?: { - show?: boolean, - autoSave?: boolean, - debounce?: number, - placement?: "sidebar" | "modal" -}; -~~~ - -### Parameters - -- `show` - (optional) - turns the editor on or off -- `autoSave` - (optional) toggles the autosave feature of the editor -- `debounce` - (optional) sets the delay time for autosaving data (only applies when ***autoSave: true***) -- `placement` - (optional) defines where the editor appears. Possible values: - - `"sidebar"` - shows the editor as a sidebar - - `"modal"` - shows the editor in a modal window - -### Default config - -~~~jsx {} -editor: { - show: true, - debounce: 100, - autoSave: true, - placement: "sidebar" -} -~~~ - -### Example - -~~~jsx {4-8} -new kanban.Kanban("#root", { - columns, - cards, - editor: { - show: true - autoSave: true, - debounce: 2000, - placement: "modal" - } - // other parameters -}); -~~~ - -**Change log:** The `placement` option was introduced in version 1.6 - -**Related samples:** [Kanban. Opening the editor in a modal window](https://snippet.dhtmlx.com/vt6pe7qz?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editorautosave_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editorautosave_config.md deleted file mode 100644 index 3f76a60c..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editorautosave_config.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -sidebar_label: editorAutoSave -title: editorAutoSave Config -description: You can learn about the editorAutoSave config in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# - -

editorAutoSave

- -:::danger -Starting with version 1.3, the `editorAutoSave` property is **deprecated**. To control the "autosave" mode, please use the [`editor`](api/config/js_kanban_editor_config.md) property instead. -::: - -### Description - -@short: Optional. Turns autosave mode on or off - -:::info -This setting lets you switch the Kanban autosave feature on or off. When **editorAutoSave** is set to **false**, the editor will show a "Save" button for manually saving changes. -::: - -### Usage - -~~~jsx {} -editorAutoSave?: boolean; // (true by default) -~~~ - -### Default config - -~~~jsx {} -editorAutoSave: true -~~~ - -### Example - -~~~jsx {4} -new kanban.Kanban("#root", { - columns, - cards, - editorAutoSave: false, // disable autosave - // other parameters -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editorshape_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editorshape_config.md deleted file mode 100644 index 07556113..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_editorshape_config.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -sidebar_label: editorShape -title: editorShape Config -description: Find out how to configure editorShape in the DHTMLX JavaScript Kanban library. Explore developer guides, API references, try code samples and live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# editorShape - -### Description - -@short: Optional. This is an array of objects that lets you control how the Kanban editor looks and works. - -### Usage - -~~~jsx {3,8,28,42,52,73,88,97,108,117,125} -editorShape?: [ - { - // common parameters for all types - type: string, - key: string, - label?: string, - - // for the "dateRange" type only - key: { - start: string, - end: string - }, - config?: { - align?: "start" | "center" | "end", - editable?: boolean | function, - buttons?: boolean, - css?: string, - disabled?: boolean, - done?: boolean, - error?: boolean, - format?: string, - months?: number, - placeholder?: string, - title?: string, - width?: string - }, - - // for the "date" type only - config?: { - align?: "start" | "center" | "end", - editable?: boolean | function, - buttons?: boolean, - css?: string, - disabled?: boolean, - error?: boolean, - format?: string, - placeholder?: string, - title?: string, - width?: string - }, - - // for the "color" type only - values?: array, - config?: { - clear?: boolean, - disabled?: boolean, - error?: boolean, - placeholder?: string, - title?: string - }, - - // for "combo", "select", and "multiselect" types only - values?: [ - { - id: string | number, - label: string, - avatar?: string // for a "multiselect" type only - }, - {...} // other options - ], - config?: { - clear?: boolean, // for "combo" and "color" types - label?: string, // for a "select" type only - checkboxes?: boolean, // for a "multiselect" type only - // common parameters - disabled?: boolean, - error?: boolean, - placeholder?: string, - textField?: string, - title?: string - }, - - // for a "text" type only - config?: { - css?: string, - disabled?: boolean, - error?: boolean, - focus?: boolean, - icon?: string, - inputStyle?: string, - placeholder?: string, - readonly?: boolean, - select?: boolean, - title?: string, - type?: string - }, - - // for a "textarea" type only - config? { - disabled?: boolean, - error?: boolean, - placeholder?: string, - title?: string, - readonly?: boolean - }, - - // for a "progress" type only - config?: { - disabled?: boolean, - label?: string, - max?: number, - min?: number, - step?: number, - title?: string, - width?: number - }, - - // for a "files" type only - uploadURL?: string | function, - config?: { - accept?: string, - disabled?: boolean, - multiple?: boolean, - folder?: boolean, - }, - - // for a "comments" type only - config?: { - format?: string, - placement?: "page" | "editor", - html?: boolean, - confirmDeletion?: boolean - }, - - // for a "links" type only - config?: { - confirmDeletion?: boolean - }, - }, { /* other control settings */ } -]; -~~~ - -### Parameters - -These are the parameters you can use to set up the editor's look and behavior: - -#### - Common parameters for all types - -- `type` - (required) specifies the editor field type. - -:::important -The editor supports these field types: **dateRange**, **date**, **combo**, **select**, **multiselect**, **color**, **text**, **textarea**, **progress**, **files**, **comments**, and **links**. -::: - -- `key` - (required) the editor field key. This should match the value used in the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. Here's an example: - -~~~js {8,17} - // card appearance settings - const cardShape = { - ...kanban.defaultCardShape, - headerFields: [ - { // custom field - label: "Custom field", - css: "custom_style", - key: "custom_key" - } - ] - }; - // editor appearance settings - const editorShape = [ - { - label: "Custom field", - type: "text", - key: "custom_key" - } - ]; -~~~ - -- `label` - (optional) the label for the editor field. - -#### - Parameters for a "dateRange" type - -- `key` - (required) an object defining keys for the editor field: - - `start` - (required) the key for the start date - - `end` - (required) the key for the end date - -:::important -These keys should match those used in the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. -::: - -- `config` - (optional) configuration options for the **"dateRange"** field: - - `align` - (optional) controls how the calendar popup aligns relative to the Date Range control - - `editable` - (optional) controls if the date picker can be edited and optionally sets a custom date format - - `buttons` - (optional) toggles visibility of Today and Clear buttons in the calendar popup - - `css` - (optional) adjusts the icon position in the Date Range control - - `disabled` - (optional) disables the Date Range control when true - - `done` - (optional) shows or hides the Done button - - `error` - (optional) applies error styling if true - - `format` - (optional) sets the date format; see [here](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/) for available formats - - `months` - (optional) sets how many calendars appear in the Date Range control - - `placeholder` - (optional) placeholder text for the control - - `title` - (optional) a title with extra info for the control - - `width` - (optional) width of the calendar popup - -#### - Parameters for a "date" type - -- `config` - (optional) configuration options for the **"date"** field: - - `align` - (optional) controls popup alignment relative to the Date control - - `editable` - (optional) controls editability and custom date format - - `buttons` - (optional) toggles Today and Clear buttons in the popup - - `css` - (optional) changes icon position - - `disabled` - (optional) disables the control - - `error` - (optional) applies error styling - - `format` - (optional) sets date format, with options listed [here](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/) - - `placeholder` - (optional) placeholder text - - `title` - (optional) additional info title - - `width` - (optional) popup width - -#### - Parameters for a "color" type - -- `values` - (optional) an array of valid HEX color codes -- `config` - (optional) configuration options for the **"color"** field: - - `placeholder` - (optional) placeholder text - - `clear` - (optional) shows or hides a clear icon - - `disabled` - (optional) disables the control - - `error` - (optional) applies error styling - - `title` - (optional) extra info title - -#### - Parameters for "combo", "select" and "multiselect" types {#parameters-for-combo-select-and-multiselect-types} - -- `values` - (optional) an array of option objects, each with: - - `id` - (required) option ID - - `label` - (required) option label - - `avatar` - (optional) path to an image (only for **"multiselect"**) - -:::important -To assign a single user, use ***"select"*** or ***"combo"*** types. To assign multiple users, use ***"multiselect"***. -::: - -- `config` - (optional) configuration options for these types: - - `clear` - (optional) adds a Clear button (**only for "combo" and "color"**) - - `label` - (optional) binds options to the input field by this key (**only for "select"**) - - `checkboxes` - (optional) shows checkboxes next to options (**only for "multiselect"**) - - `textField` - (optional) binds combo options to input by this key (**for "combo" and "multiselect"**) - - `disabled` - (optional) disables the control - - `error` - (optional) applies error styling - - `placeholder` - (optional) placeholder text - - `title` - (optional) extra info title - -#### - Parameters for a "text" type - -- `config` - (optional) configuration options for the **"text"** field: - - `css` - (optional) icon position in the control - - `disabled` - (optional) disables the control - - `error` - (optional) applies error styling - - `focus` - (optional) sets focus on the control - - `icon` - (optional) adds an icon inside the control - - `inputStyle` - (optional) custom style for the control - - `placeholder` - (optional) placeholder text - - `readonly` - (optional) makes the control read-only - - `select` - (optional) selects the control's content - - `title` - (optional) extra info title - - `type` - (optional) sets the input type - -#### - Parameters for a "textarea" type - -- `config` - (optional) configuration options for the **"textarea"** field: - - `disabled` - (optional) disables the control - - `error` - (optional) applies error styling - - `placeholder` - (optional) placeholder text - - `title` - (optional) extra info title - - `readonly` - (optional) makes the control read-only - -#### - Parameters for a "progress" type - -- `config` - (optional) configuration options for the **"progress"** field: - - `disabled` - (optional) disables the control - - `label` - (optional) label displayed above the control - - `max` - (optional) maximum value - - `min` - (optional) minimum value - - `step` - (optional) value increments - - `title` - (optional) extra info title - - `width` - (optional) control width - -#### - Parameters for a "files" type - -- `uploadURL` - (optional) URL or function for file uploading; details below - -
- -The `uploadURL` can be a **string** or a **function**. Here's an example using a function: - -~~~jsx {} -uploadURL: rec => { - const formData = new FormData(); - formData.append("upload", rec.file); - - const config = { - method: "POST", - body: formData, - headers: { - 'Authorization': 'Bearer ' + token // include token or other headers here - } - }; - - return fetch(url + "/uploads", config) // specify URL here - .then(res => res.json()) - .then( - data => { - return { id: rec.id, ...data }; - }, - () => ({ id: rec.id, status: "error" }) - ) - .catch(); -} -~~~ - -The `rec` parameter is an extended `PointerEvent` object with these extra properties: - -~~~jsx {} -interface UploadEvent extends PointerEvent { - id: number; - status: "client" | "server" | "error"; // indicates upload status: "not sent yet", "sent successfully", or "error" - name: string; // file name - file: string | Blob; // the file itself -} -~~~ - -
- -- `config` - (optional) configuration options for the **"files"** field: - - `accept` - (optional) file types allowed (e.g., ***"image/\*", "video/\*", "audio/\*"*** and others) - - `disabled` - (optional) disables uploading - - `multiple` - (optional) enables uploading multiple files at once - - `folder` - (optional) enables uploading folders - -#### - Parameters for a "comments" type - -- `config` - (optional) configuration options for the **"comments"** field: - - `format` - (optional) date format for comments; see available options [here](https://docs.dhtmlx.com/suite/calendar/api/calendar_dateformat_config/) - - `placement` - (optional) where comments appear: - - `"editor"` - inside the editor - - `"page"` - in a separate panel - - `html` - (optional) allows HTML markup in comments - - `confirmDeletion` - (optional) shows a confirmation dialog before deleting comments - -#### - Parameters for a "links" type - -- `config` - (optional) configuration options for the **"links"** field: - - `confirmDeletion` - (optional) shows a confirmation dialog before deleting links - -:::info -If you don't set editor options via the `editorShape` property, the widget will use the **defaultEditorShape** settings. -::: - -### Default config - -~~~jsx {} -const defaultPriorities = [ - { id: 1, color: "#FE6158", label: "High" }, - { id: 2, color: "#F1B941", label: "Medium" }, - { id: 3, color: "#77D257", label: "Low" } -]; - -const defaultColors = ["#33B0B4", "#0096FA", "#F1B941"]; - -const defaultEditorShape = [ - { - key: "label", - type: "text", - label: "Label" - }, - { - key: "description", - type: "textarea", - label: "Description" - }, - { - type: "combo", - label: "Priority", - key: "priority", - config: { - clear: true - } - }, - { - type: "color", - label: "Color", - key: "color" - }, - { - type: "progress", - key: "progress", - label: "Progress" - }, - { - type: "date", - key: "start_date", - label: "Start date" - }, - { - type: "date", - key: "end_date", - label: "End date" - }, - { - type: "multiselect", - key: "users", - label: "Users" - } -]; -~~~ - -### Example - -~~~jsx {6-33,38} -const users = [ // user data - { id: 1, label: "John Smith", avatar: "../assets/user.jpg" }, - { id: 2, label: "Aaron Short" } -]; - -const editorShape = [ // editor settings - ...kanban.defaultEditorShape, // include the default settings - { // add custom fields - type: "multiselect", - key: "users", - label: "Users", - values: users - }, - { - type: "comments", - key: "comments", - label: "Comments", - config: { - format: "%M %d", - placement: "page", - html: true, - confirmDeletion: true - } - }, - { - type: "links", - key:"links", - label: "Links", - config: { - confirmDeletion: true - } - } -]; - -new kanban.Kanban("#root", { - cards, - columns, - editorShape, - // other parameters -}); -~~~ - -**Change log:** - -- The ***dateRange*** type was introduced in v1.3 -- The ***comments*** and ***links*** editor types, along with the ***format*** parameter, were added in v1.4 -- The ***clearButton*** parameter was renamed to ***clear*** - -**Related articles:** [Configuration](guides/configuration.md/#editor) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_history_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_history_config.md deleted file mode 100644 index 95105bf3..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_history_config.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -sidebar_label: history -title: history Config -description: Check out the history config in the DHTMLX JavaScript Kanban library docs. Explore developer guides, API references, try code samples and live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# history - -### Description - -@short: Optional. Turns history tracking on or off - -:::info -The `history` property lets you enable or disable the Kanban history feature. Setting it to **false** means you won't be able to use the API or Toolbar controls to manage history. -::: - -:::tip -You can also exclude certain actions from the Kanban history by using the [`$meta`](api/common/js_kanban_meta_parameter.md) parameter with methods and events! -::: - -### Usage - -~~~jsx {} -history?: boolean; -~~~ - -### Default config - -~~~jsx {} -history: true -~~~ - -### Example - -~~~jsx {4} -new kanban.Kanban("#root", { - columns, - cards, - history: false, // turn off history management - // other parameters -}); -~~~ - -**Change log:** This property was introduced in v1.3 - -**Related articles:** [`undo()`](api/methods/js_kanban_undo_method.md) and [`redo()`](api/methods/js_kanban_redo_method.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_links_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_links_config.md deleted file mode 100644 index 838f94d0..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_links_config.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -sidebar_label: links -title: links Config -description: Explore the links configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# links - -### Description - -@short: Optional. This is an array of objects that holds the links data. - -### Usage - -~~~jsx {} -links?: [ - { - id: string | number, - source: string | number, - target: string | number, - relation: "relatesTo" | "requiredFor" | "duplicate" | "parent" - }, {...} // other links data -]; -~~~ - -### Parameters - -Each link can include the following details: - -- `id` - (required) the unique identifier of the link -- `source` - (required) the card ID where the link starts (for example, "Task A is required for Task B") -- `target` - (required) the card ID where the link ends (for example, "Task B depends on Task A") -- `relation` - (required) the type of link. You can choose from these types: - - ***"relatesTo"*** - indicates a dependency where the current task is connected to another - - ***"requiredFor"*** - shows that one task must be completed before the other - - ***"duplicate"*** - marks tasks that are duplicates of each other - - ***"parent"*** - indicates a parent (master) and child (slave) task relationship - -:::info -To update links data dynamically, you can use the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method! -::: - -### Example - -~~~jsx {1-8,13} -const links = [ - { - id: 1, - source: 2, - target: 5, - relation: "relatesTo", - }, {...} // other link data -]; - -new kanban.Kanban("#root", { - columns, - cards, - links - // other parameters -}); -~~~ - -**Change log:** This property was updated in v1.7: - - The **masterId** parameter was replaced by **source** - - The **slaveId** parameter was replaced by **target** - -**Related articles:** [Working with data](guides/working_with_data.md) - -**Related sample:** [Kanban. Links between tasks](https://snippet.dhtmlx.com/81qu7qh0?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_locale_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_locale_config.md deleted file mode 100644 index 1499bb62..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_locale_config.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: locale -title: locale Config -description: Explore the locale configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# locale - -### Description - -@short: Optional. An object defining a custom locale for Kanban - -:::info -The **locale** object should contain all Kanban and Toolbar labels along with their translations. -::: - -### Usage - -~~~jsx {} -locale?: object; -~~~ - -### Default config - -Kanban uses the [**English**](guides/localization.md#default-locale) locale by default. You can also specify a custom locale if needed. - -:::tip -To switch the locale on the fly, use the [**setLocale()**](api/methods/js_kanban_setlocale_method.md) method provided by Kanban. -::: - -### Example - -~~~jsx {5} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - locale: kanban.locales["cn"] // sets the initial locale to "cn" - // other parameters -}); -~~~ - -**Related articles:** [Localization](guides/localization.md) - -**Related sample:** [Kanban. Localization](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_readonly_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_readonly_config.md deleted file mode 100644 index a068cfc6..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_readonly_config.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -sidebar_label: readonly -title: readonly Config -description: Explore the readonly config in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# readonly - -### Description - -@short: Optional. Controls whether editing, adding, selecting, and dragging cards are enabled or disabled. - -### Usage - -~~~js {} -readonly?: boolean; -//or -readonly?: { - edit?: boolean, - add?: boolean, - select?: boolean, - dnd?: boolean -}; -~~~ - -### Parameters - -There are two ways to set up the **readonly mode**: using a **short** or an **extended** configuration. - -The **short** option: -- `readonly` - (optional) toggles the **readonly mode** for Kanban on or off. - -The **extended** option: -- `readonly` - (optional) an object with detailed settings, where you can specify: - - `edit` - (optional) enables or disables **editing** of cards - - `add` - (optional) enables or disables **adding** new cards - - `select` - (optional) enables or disables **selecting** cards - - `dnd` - (optional) enables or disables **dragging** cards - -### Default config - -~~~jsx {} -readonly: false // readonly mode is off by default -//or -readonly: { - edit: true, // editing is allowed - add: true, // adding is allowed - select: true, // selecting is allowed - dnd: true // dragging is allowed -} -~~~ - -### Example - -~~~jsx {4-9} -new kanban.Kanban("#root", { - cards, - columns, - readonly: { - edit: false, // editing is turned off - add: true, // adding is turned on - select: false, // selecting is turned off - dnd: true // dragging is turned on - }, - // other parameters -}); -~~~ - -**Related sample:** [Readonly mode](https://snippet.dhtmlx.com/b8x84yln?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rendertype_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rendertype_config.md deleted file mode 100644 index 83afbc58..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rendertype_config.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -sidebar_label: renderType -title: renderType Config -description: You can learn about the renderType config in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# renderType - -### Description - -@short: Optional. Specifies the way cards are rendered. - -:::info -This setting is useful when dealing with a large number of cards. When set to *"lazy"*, the widget renders only the cards visible on the board, which can greatly improve performance. -::: - -### Usage - -~~~jsx {} -renderType?: "default" | "lazy"; -~~~ - -:::important -When using `renderType: "lazy"` together with [`scrollType: "default"`](api/config/js_kanban_scrolltype_config.md), make sure to set a fixed height for cards using the [`cardHeight`](api/config/js_kanban_cardheight_config.md) option. Without this, cards may not display properly. -When you use `renderType: "lazy"` with [`scrollType: "column"`](api/config/js_kanban_scrolltype_config.md), you should also fix the height of cards using the [`cardHeight`](api/config/js_kanban_cardheight_config.md) property. Although a variable height of cards is supported for this type of layout, it may not work in a stable manner with custom card content. -::: - -### Default config - -~~~jsx {} -renderType: "default" -~~~ - -### Example - -~~~jsx {5} -new kanban.Kanban("#root", { - columns, - cards, - rows, - renderType: "lazy", - // other parameters -}); -~~~ - -**Change log:** This property was introduced in v1.2 - -**Related articles:** [Configuration](guides/configuration.md#cards) - -**Related sample:** [Kanban. Fixed headers, lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rowkey_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rowkey_config.md deleted file mode 100644 index 0a5d0423..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rowkey_config.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -sidebar_label: rowKey -title: rowKey Config -description: You can learn about the rowKey config in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# rowKey - -### Description - -@short: Optional. Specifies which row a card belongs to. - -:::info -To organize cards into rows (swimlanes), you need to define a **custom key** in the card data object that matches the **ID** of the target row. Then, set the **rowKey** property in the widget configuration to this *custom key*. -::: - -### Usage - -~~~jsx {} -rowKey?: string; -~~~ - -### Example - -~~~jsx {4,8,16} -const cards = [ - { - label: "Backlog task", - row_custom_key: "feature" - }, - { - label: "In progress task", - row_custom_key: "done" - } -]; - -new kanban.Kanban("#root", { - columns, - cards, - rows, - rowKey: "row_custom_key", - // other parameters -}); -~~~ - -**Related sample:** [Kanban. Swimlanes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rows_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rows_config.md deleted file mode 100644 index b89034e5..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rows_config.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -sidebar_label: rows -title: rows Config -description: Explore the rows configuration in the DHTMLX JavaScript Kanban library documentation. Find developer guides, API references, code samples, live demos, and a free 30-day trial of DHTMLX Kanban. ---- - -# rows - -### Description - -@short: Optional. An array of objects representing the rows (swimlanes) data. - -### Usage - -~~~jsx {} -rows?: [ - { - id: string, - label?: string, - collapsed?: boolean, - css?: string, - }, {...} // other row data -]; -~~~ - -:::info -To set up Swimlanes, provide the relevant data in the **rows** array. Swimlanes can be collapsed/expanded, renamed, deleted, or moved either through the UI or by using the [related API](howtos.md#how-to-work-with-rows-swimlanes). -::: - -### Parameters - -Each row (swimlane) can include the following properties: - -- `id` - (required) the unique ID of the row (swimlane), used for managing it through the available methods. -- `label` - (optional) the label shown in the row section. -- `collapsed` - (optional) indicates whether the row (swimlane) starts collapsed. If ***true***, it will be collapsed initially. The default is ***false*** (expanded). -- `css` - (optional) applies custom CSS styles to the individual row. - -:::info -To update rows (swimlanes) data dynamically, the [**setConfig()**](api/methods/js_kanban_setconfig_method.md) or [**parse()**](api/methods/js_kanban_parse_method.md) method can be used. -::: - -### Example - -~~~jsx {1-4,9} -const rows = [ - { label: "Feature", id: "feature", collapsed: false, css: "red" }, - { label: "Task", id: "task", collapsed: true } -]; - -new kanban.Kanban("#root", { - columns, - cards, - rows, // swimlanes data - // other parameters -}); -~~~ - -**Change log:** The ***css*** parameter was introduced in v1.4 - -**Related articles:** -- [Working with data](guides/working_with_data.md) -- [updateRow()](api/methods/js_kanban_updaterow_method.md) - -**Related sample:** [Kanban. Swimlanes](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rowshape_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rowshape_config.md deleted file mode 100644 index 258adf5a..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_rowshape_config.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -sidebar_label: rowShape -title: rowShape Config -description: Explore the rowShape config in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try live demos and code examples, and download a free 30-day trial of DHTMLX Kanban. ---- - -# rowShape - -### Description - -@short: Optional. An object to customize how rows look and behave. - -### Usage - -~~~jsx {} -rowShape?: { - menu?: { - show?: boolean, - items?: [ - { - id?: string, - icon?: string, - text?: string, - disabled? boolean, - onClick?: ({ id, item, row }) => void, - data?: array // an array of menu subitems - }, {...} // other item data - ] | ({ row, rowIndex, rows, readonly }) => array | null - }, - css?: (row, cards) => string, - confirmDeletion?: boolean -}; -~~~ - -### Parameters - -The **rowShape** object lets you tweak how rows appear and behave by specifying these options: - -- `menu` - (optional) settings for the rows' context menu. This includes: - - `show` - (optional) turns the row context menu on or off - - `items` - (optional) an array defining the menu items for rows. Each item can include: - - `id` - (optional) menu item ID. Use these IDs for built-in actions: - - ***"set-edit"*** - edits the row name - - ***"move-row:up"*** - moves the row up - - ***"move-row:down"*** - moves the row down - - ***"delete-row"*** - deletes the row - - - `icon` - (optional) icon class name for the menu item, compatible with icon fonts (like *mdi-delete*) - - `text` - (optional) label for the menu item - - `disabled` - (optional) whether the menu item is active or disabled based on a boolean - - `onClick` - (optional) custom callback function with these arguments: - - ***id*** - the menu item's ID - - ***item*** - the menu item's data object - - ***row*** - the target row's data object - - - `data` - (optional) array of subitems for nested menus - - :::info - The `menu.items` option can also be a custom function receiving: - - ***row*** - the current row's data object - - ***rowIndex*** - the current row's index - - ***rows*** - array of all rows data - - ***readonly*** - an object with readonly [state properties](api/internal/js_kanban_getstate_method.md) - - This function lets you customize the menu per row or hide it for specific rows by returning *null* or *false*: - - ~~~jsx {} - items: ({ rowIndex }) => { - if(rowIndex == 0){ - return null; - } else { - return [ - { id: "set-edit", icon: "wxi-edit", text: "Rename" }, - { - id: "custom-delete-row", - icon: "wxi-delete", - text: "Remove row" - }, - { - id: "custom-move-row:up", - icon: "wxi-arrow-up", - text: "Move up" - } - ]; - } - } - ~~~ - ::: - -- `css` - a function that returns a CSS class name to apply conditionally to rows -- `confirmDeletion` - (optional) enables or disables a confirmation dialog when deleting a row - -### Default config - -~~~jsx {} -const getDefaultRowMenuItems = ({ row, rowIndex, rows, readonly }) => [ - { id: "set-edit", icon: "wxi-edit", text: "Rename" }, - { - id: "move-row:up", - icon: "wxi-arrow-up", - text: "Move up", - disabled: rowIndex <= 0 - }, - { - id: "move-row:down", - icon: "wxi-arrow-down", - text: "Move down", - disabled: rowIndex >= rows.length - 1 - }, - { id: "delete-row", icon: "wxi-delete", text: "Delete" } -]; -const rowShape = { - menu: { - show: true, - items: getDefaultRowMenuItems - }, - confirmDeletion: true -}; -~~~ - -### Example - -~~~jsx {10-43,48} -const changeRowColor = (row, cssClass) => board.updateRow({ - id: row.id, - row: { - css: cssClass, - collapsed: false - }, - replace: false -}); - -const rowShape = { - menu: { - show: true, - items: ({ row, rowIndex, rows, readonly }) => { - if (rowIndex == 0){ - return false; - } else { - return [ - { - id: "color", - text: "Color", - data: [ - { - id:"gray", - text: "Gray", - onClick: ({ id, item, row }) => changeRowColor(row, "gray") - }, - { - id:"yellow", - text: "Yellow", - onClick: ({ id, item, row }) => changeRowColor(row, "yellow") - }, - { - id:"red", - text: "Red", - onClick: ({ id, item, row }) => changeRowColor(row, "red") - } - ] - } - ]; - } - } - }, - css: (row, cards) => row.id == "task" && cards.length < 3 ? "green" : "red", - confirmDeletion: false -}; - -new kanban.Kanban("#root", { - cards, - rows, - rows, - rowShape, - // other parameters -}); -~~~ - -**Change log:** -- The ***css*** option was introduced in v1.4 -- The ***menu.items[0].label*** option was replaced by ***menu.items[0].text*** in v1.4 -- The ***menu.items[0].items*** option was replaced by ***menu.items[0].data*** in v1.4 -- The ***menu.items[0].label*** and ***menu.items[0].items*** options were removed in v1.7 -- The ***menu.items*** function was updated: the **store** parameter was replaced by **readonly** in v1.7 - -**Related articles:** [Configuration](guides/configuration.md) - -**Related sample:** [Kanban. Changing color of rows via custom menu](https://snippet.dhtmlx.com/tev4ej9c?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_scrolltype_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_scrolltype_config.md deleted file mode 100644 index fa26b969..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/js_kanban_scrolltype_config.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -sidebar_label: scrollType -title: scrollType Config -description: You can learn about the scrollType config in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# scrollType - -### Description - -@short: Optional. Specifies the scrolling behavior type - -### Usage - -~~~jsx {} -scrollType?: "default" | "column"; -~~~ - -:::note -Using `scrollType: "column"` allows each column to be scrolled independently. -::: - -### Default config - -~~~jsx {} -scrollType: "default" -~~~ - -:::important -When combining [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) with `scrollType: "default"`, make sure to set a fixed height for cards using the [`cardHeight`](api/config/js_kanban_cardheight_config.md) property. Without this, cards won't appear properly. -When you use [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) with `scrollType: "column"`, you should also fix the height of cards using the [`cardHeight`](api/config/js_kanban_cardheight_config.md) property. Although a variable height of cards is supported for this type of layout, it may not work in a stable manner with custom card content. -::: - -### Example - -~~~jsx {5} -new kanban.Kanban("#root", { - columns, - cards, - rows, - scrollType: "column", - // other parameters -}); -~~~ - -**Change log:** This property was introduced in v1.2 - -**Related articles:** [Configuration](guides/configuration.md#cards) - -**Related sample:** [Kanban. Fixed headers, lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_api_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_api_config.md deleted file mode 100644 index 24c17187..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_api_config.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -sidebar_label: api -title: api Config -description: Explore the (Toolbar) api config in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# api - -### Description - -@short: Required. An object representing the internal API of Kanban. - -:::info -Here, the **internal API of Kanban** refers to the **controls** that are part of the Toolbar. -::: - -### Usage - -~~~jsx {} -api: object; -~~~ - -### Example - -~~~jsx {7} -const board = new kanban.Kanban("#root", { - columns, - cards -}); - -new kanban.Toolbar("#toolbar", { - api: board.api -}); -~~~ - -**Related articles:** [Configuration](guides/configuration.md#toolbar) - -**Related sample:** [Kanban. Custom toolbar](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_items_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_items_config.md deleted file mode 100644 index 1863d888..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_items_config.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -sidebar_label: items -title: items Config -description: Explore the (Toolbar) items configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# items - -### Description - -@short: Optional. An array containing controls arranged on the Kanban Toolbar - -### Usage - -~~~jsx {} -items?: [ - "search" | { - // search parameters - type: "search", - options?: [ - { - id: string, - label: string, - searchRule?: (card, value, by) => { - return boolean - } - }, {...} - ], - resultTemplate?: template(searchResult => { - return "The HTML template of the search result"; - }) - }, - "sort" | { - // sort parameters - type: "sort", - options?: [ - { - text: string, - by?: string, // by?: ((card: object) => any), - dir?: "asc" | "desc" - }, {...} - ] - }, - "spacer", - "undo", - "redo", - "addColumn", - "addRow", - custom_control // string or function -]; -~~~ - -### Parameters - -The **items** array accepts the following options: - -:::info -#### To use a *default search bar*, simply specify the `"search"` string. -#### To use a *custom search bar*, provide an object with these properties: - -- `type` - (required) control type (*"search"*) -- `options` - (optional) an array defining search parameters. Each object (*search option*) can include: - - `id` - (required) key of the card field to search by - - `label` - (required) name shown in the search bar selector dropdown - - `searchRule` (optional) - a custom function to define search logic. It receives: - - ***card*** - the card data object - - ***value*** - the search input value - - ***by*** - the card field key being searched -- `searchResult` - (optional) a template for customizing search result display - -~~~jsx -items: [ - "search", // default search bar - // other controls -] - -// or - -items: [ - { // custom search bar - type: "search", - options: [ - { - id: "label", - label: "By label" - }, - { - id: "start_date", - label: "By date", - searchRule: (card, value, by) => { - const date = card[by]; - return date?.toString().includes(value); - } - } - ], - resultTemplate: kanban.template(searchResult => { - return `
-
${searchResult.result.label}
- ${searchResult.result.description ? `
${searchResult.result.description}
` : ""} -
` - }) - }, - // other controls -] -~~~ -::: - -:::info -#### To use a *default sort control*, just specify the `"sort"` string. -#### To use a *custom sort control*, provide an object with these options: - -- `type` - (required) control type (*"sort"*) -- `options` - (optional) an array defining sort parameters. Each object (*sort option*) can include: - - `text` - (required) name shown in the sort selector dropdown - - `by` - (optional) card field key to sort by, either a *string* or *function* returning the field - - `dir` - (optional) sort direction, either *"asc"* or *"desc"* - -~~~jsx -items: [ - "sort", // default sort control - // other controls -] -// or -items: [ - { // custom sort control - type: "sort", - options: [ - { - text: "Sort by label", - by: "label", - dir: "asc" - }, - { - text: "Sort by description", - by: "description", - dir: "desc" - } - ] - }, {...} // other controls -] -~~~ -::: - -- `"spacer"` - adds empty space between controls -- `"undo"` - control for undoing the last action (one click steps back) -- `"redo"` - control for redoing the last undone action (one click steps forward) -- `"addColumn"` - control for adding new columns -- `"addRow"` - control for adding new rows -- `custom_control` - (optional) custom control(s) can be added as a **string** or **function**. See the [Customization](guides/customization.md#custom-toolbar) section for details. - -### Example - -~~~jsx {8-24} -const board = new kanban.Kanban("#root", { - columns, - cards -}); - -new kanban.Toolbar("#toolbar", { - api: board.api, - items: [ - { - type: "search", - resultTemplate: kanban.template(searchResult => { - return `
-
${searchResult.result.label}
- ${searchResult.result.description ? `
${searchResult.result.description}
` : ""} -
` - }) - }, - "spacer", - "sort", - "undo", - "redo", - "addColumn", - "addRow" - ] -}); -~~~ - -**Change log:** - -- The *"Undo"* and *"Redo"* controls were introduced in v1.3 -- The ***items.options[0].label*** parameter for the **sort** control was renamed to ***items.options[0].text*** in v1.4 -- The ***items.searchResult*** parameter for the **"search"** control was added in v1.6 - -**Related articles:** [Configuration](guides/configuration.md#toolbar) and [Customization](guides/customization.md#custom-toolbar) - -**Related samples:** -- [Kanban. Custom toolbar](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban) -- [Kanban. Customization of suggestions in search results](https://snippet.dhtmlx.com/2uo2f5mf?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_locale_config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_locale_config.md deleted file mode 100644 index 19cb1487..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar_locale_config.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -sidebar_label: locale -title: locale Config -description: Explore the (Toolbar) locale configuration in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# locale - -### Description - -@short: Optional. An object defining a custom locale for the Toolbar - -:::info -The **locale** object should contain all the Kanban and Toolbar labels along with their translations. -::: - -### Usage - -~~~jsx {} -locale?: object; -~~~ - -### Default config - -By default, the Toolbar uses the [**English**](guides/localization.md#default-locale) locale. You can also configure it to use a custom locale. - -:::tip -To switch the locale on the fly, use the [**setLocale()**](api/methods/toolbar_setlocale_method.md) method of the Toolbar. -::: - -### Example - -~~~jsx {8} -// create Kanban -const board = new kanban.Kanban("#root", { - locale: cn -}); -// create Toolbar -new kanban.Toolbar("#toolbar", { - api: board.api, - locale: cn // apply the "cn" locale to Toolbar -}); -~~~ - -**Related articles:** [Localization](guides/localization.md) - -**Related sample:** [Kanban. Localization](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcard_event.md deleted file mode 100644 index 9cf1115c..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcard_event.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: add-card -title: add-card Event -description: You can learn about the add-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# add-card - -### Description - -@short: Triggered when a new card is added - -### Usage - -~~~jsx {} -"add-card": ({ - columnId: string | number, - id?: string | number, - rowId?: string | number, - before?: string | number, - select?: boolean, - card?: object, - skipProvider?: boolean, -}) => void; -~~~ - -### Parameters - -The callback for the **add-card** event receives an object with these properties: - -- `columnId` - (required) the ID of the column where the card will be added -- `id` - (optional) the ID assigned to the new card -- `rowId` - (optional) the ID of the row where the card will be placed -- `before` - (optional) the ID of the card before which the new card should be inserted -- `select` - (optional) controls whether the newly added card is selected -- `card` - (optional) the data object representing the new card. You can find the full list of card parameters [here](api/config/js_kanban_cards_config.md) -- `skipProvider` - (optional) controls whether the request to the server is skipped - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "add-card" event -board.api.on("add-card", (obj) => { - console.log(obj.columnId); -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcolumn_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcolumn_event.md deleted file mode 100644 index e5a57193..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcolumn_event.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -sidebar_label: add-column -title: add-column Event -description: Explore the add-column event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# add-column - -### Description - -@short: Triggered when a new column is added - -### Usage - -~~~jsx {} -"add-column": ({ - id?: string | number, - column?: object, - before?: string | number, - skipProvider?: boolean, -}) => void; -~~~ - -### Parameters - -The callback for the **add-column** event receives an object with these optional properties: - -- `id` - the ID of the new column, if specified -- `column` - the data object for the new column. You can find the complete list of **column** parameters [**here**](api/config/js_kanban_columns_config.md) -- `before` - the ID of the column before which the new column will be inserted -- `skipProvider` - controls whether the request to the server is prevented or allowed - -:::info -To manage internal events, you can refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "add-column" event -board.api.on("add-column", (obj) => { - console.log(obj.label); -}); -~~~ - -**Change log**: Starting from v1.1, the **id**, **before**, and **column** parameters were introduced \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcomment_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcomment_event.md deleted file mode 100644 index 6ad32197..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addcomment_event.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -sidebar_label: add-comment -title: add-comment Event -description: You can learn about the add-comment event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# add-comment - -### Description - -@short: Triggered when a new comment is added - -### Usage - -~~~jsx {} -"add-comment": ({ - id?: string | number, - cardId: string | number, - comment: { - text?: string, - date?: Date, - html?: string - }, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **add-comment** event receives an object with these properties: - -- `id` - (optional) the ID assigned to the new comment -- `cardId` - (required) the ID of the card where the comment is being added -- `comment` - (required) an object describing the new comment. It can include: - - `text` - (optional) the comment's text content - - `date` - (optional) the date associated with the comment - - `html` - (optional) the HTML markup for the comment. To show HTML instead of plain text, enable the `html` option in the [`editorShape`](/api/config/js_kanban_editorshape_config/#-parameters-for-a-comments-type) configuration -- `skipProvider` - (optional) controls whether the request to the server is skipped or not - -:::info -To work with internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "add-comment" event -board.api.on("add-comment", (obj) => { - console.log(obj.comment); -}); -~~~ - -**Change log:** This event was introduced in version 1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addlink_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addlink_event.md deleted file mode 100644 index 001ba953..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addlink_event.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -sidebar_label: add-link -title: add-link Event -description: Explore the add-link event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# add-link - -### Description - -@short: Triggered when a new link is added - -### Usage - -~~~jsx {} -"add-link": ({ - id?: string | number, - link: object, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **add-link** event receives an object with the following properties: - -- `id` - (optional) the ID assigned to the new link -- `link` - (required) the data object representing the new link. You can find the full list of link parameters [here](api/config/js_kanban_links_config.md) -- `skipProvider` - (optional) controls whether the request to the server is suppressed or not - -:::info -To manage internal events, you can make use of the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {8-10} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - links -}); -// listen for the "add-link" event -board.api.on("add-link", (obj) => { - console.log(obj.link.masterId); -}); -~~~ - -**Change log:** This event was introduced in v1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addrow_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addrow_event.md deleted file mode 100644 index 5709ab2d..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addrow_event.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -sidebar_label: add-row -title: add-row Event -description: Explore the add-row event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API reference, try sample code and live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# add-row - -### Description - -@short: Triggered when a new row is added - -### Usage - -~~~jsx {} -"add-row": ({ - id?: string | number, - row?: object, - before?: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **add-row** event accepts an object with these options: - -- `id` - (optional) the identifier for the new row -- `row` - (optional) the data object representing the new row. You can find the full list of **row** parameters [**here**](api/config/js_kanban_rows_config.md) -- `before` - (optional) the ID of the existing row that the new row will be inserted before -- `skipProvider` - (optional) controls whether the request to the server is prevented or allowed - -:::info -To work with internal events, you can refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe to the "add-row" event -board.api.on("add-row", (obj) => { - console.log(obj.id); -}); -~~~ - -**Change log**: The **id**, **before**, and **row** parameters were introduced in v1.1 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addvote_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addvote_event.md deleted file mode 100644 index 41793821..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_addvote_event.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -sidebar_label: add-vote -title: add-vote Event -description: You can learn about the add-vote event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# add-vote - -### Description - -@short: Triggered when a user casts a new vote - -### Usage - -~~~jsx {} -"add-vote": ({ - cardId: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **add-vote** event receives an object with these properties: - -- `cardId` - (required) the ID of the card where the vote is being added -- `skipProvider` - (optional) controls whether the request to the server should be skipped - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe on the "add-vote" event -board.api.on("add-vote", (obj) => { - console.log(obj.cardId); -}); -~~~ - -**Change log:** The event was added in v1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecard_event.md deleted file mode 100644 index e8bb6524..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecard_event.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: delete-card -title: delete-card Event -description: You can learn about the delete-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# delete-card - -### Description - -@short: This event triggers when a card is removed. - -### Usage - -~~~jsx {} -"delete-card": ({ - id: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **delete-card** event receives an object containing the following properties: - -- `id` - (required) the identifier of the card being deleted -- `skipProvider` - (optional) controls whether the request to the server should be skipped - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe on the "delete-card" event -board.api.on("delete-card", (obj) => { - console.log(obj.id); -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecolumn_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecolumn_event.md deleted file mode 100644 index d0ff2482..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecolumn_event.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: delete-column -title: delete-column Event -description: Explore the delete-column event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, code examples, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# delete-column - -### Description - -@short: Triggered when a column is removed - -### Usage - -~~~jsx {} -"delete-column": ({ - id: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **delete-column** event receives an object with these properties: - -- `id` - (required) the identifier of the column being deleted -- `skipProvider` - (optional) controls whether the request is sent to the server or not - -:::info -To manage internal events, refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "delete-column" event -board.api.on("delete-column", (obj) => { - console.log(obj.id); -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecomment_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecomment_event.md deleted file mode 100644 index 577a2690..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletecomment_event.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: delete-comment -title: delete-comment Event -description: Explore the delete-comment event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# delete-comment - -### Description - -@short: Triggered when a card comment is deleted - -### Usage - -~~~jsx {} -"delete-comment": ({ - id?: string | number, - cardId: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **delete-comment** event receives an object containing these parameters: - -- `id` - (optional) the ID of the comment being deleted -- `cardId` - (required) the ID of the card from which the comment is deleted -- `skipProvider` - (optional) controls whether the request to the server is sent or not - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen to the "delete-comment" event -board.api.on("delete-comment", (obj) => { - console.log(obj.id); -}); -~~~ - -**Change log:** This event was introduced in v1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletelink_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletelink_event.md deleted file mode 100644 index e9f0c324..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletelink_event.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -sidebar_label: delete-link -title: delete-link Event -description: Explore the delete-link event in the DHTMLX JavaScript Kanban library documentation. Access developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# delete-link - -### Description - -@short: Triggered when a link is removed - -### Usage - -~~~jsx {} -"delete-link": ({ - id: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **delete-link** event receives an object with these properties: - -- `id` - (required) the ID of the link being deleted -- `skipProvider` - (optional) controls whether the request to the server is prevented - -:::info -To manage internal events, refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {8-10} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - links -}); -// listen for the "delete-link" event -board.api.on("delete-link", (obj) => { - console.log(obj.id); -}); -~~~ - -**Change log:** This event was introduced in v1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deleterow_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deleterow_event.md deleted file mode 100644 index 3bd33198..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deleterow_event.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: delete-row -title: delete-row Event -description: You can learn about the delete-row event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# delete-row - -### Description - -@short: Triggers when a row is being removed - -### Usage - -~~~jsx {} -"delete-row": ({ - id: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **delete-row** event receives an object with the following properties: - -- `id` - (required) specifies the ID of the row that will be deleted -- `skipProvider` - (optional) controls whether the request to the server should be skipped - -:::info -To work with internal events, you can refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "delete-row" event -board.api.on("delete-row", (obj) => { - console.log(obj.id); -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletevote_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletevote_event.md deleted file mode 100644 index 641a865c..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_deletevote_event.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -sidebar_label: delete-vote -title: delete-vote Event -description: You can learn about the delete-vote event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# delete-vote - -### Description - -@short: Triggered when a user removes a vote from a card - -### Usage - -~~~jsx {} -"delete-vote": ({ - cardId: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **delete-vote** event receives an object with these properties: - -- `cardId` - (required) the ID of the card from which the vote will be removed -- `skipProvider` - (optional) controls whether the request to the server should be skipped - -:::info -To work with internal events, you can refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe on the "delete-vote" event -board.api.on("delete-vote", (obj) => { - console.log(obj.cardId); -}); -~~~ - -**Change log:** The event was introduced in v1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_dragcard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_dragcard_event.md deleted file mode 100644 index 77341e90..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_dragcard_event.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: drag-card -title: drag-card Event -description: You can learn about the drag-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# drag-card - -### Description - -@short: Triggered when a card is moved using drag and drop - -### Usage - -~~~jsx {} -"drag-card": ({ - id: string | number, - columnId: string | number, - rowId?: string | number, - before?: string | number, - source: array -}) => void; -~~~ - -### Parameters - -The callback for the **drag-card** event receives an object with the following properties: - -- `id` - (required) the ID of the card being dragged -- `columnId` - (required) the ID of the column where the card is currently located -- `rowId` - (optional) the ID of the row where the card is currently located -- `before` - (optional) the ID of the card that follows the dragged card in the column -- `source` - (optional) an array containing the IDs of the moved cards - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe on the "drag-card" event -board.api.on("drag-card", (obj) => { - console.log(obj.columnId); -}); -~~~ - -**Change log:** The event was introduced in v1.4 - -**Related sample:** [Kanban. Disabling drag and drop to specific columns](https://snippet.dhtmlx.com/nfv59yif?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_duplicatecard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_duplicatecard_event.md deleted file mode 100644 index f0595fb6..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_duplicatecard_event.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: duplicate-card -title: duplicate-card Event -description: Explore the duplicate-card event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# duplicate-card - -### Description - -@short: Triggered when a card is duplicated - -### Usage - -~~~jsx {} -"duplicate-card": ({ - id: string | number, - card?: object, - select?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **duplicate-card** event receives an object with these properties: - -- `id` - (required) the ID of the card being duplicated -- `card` - (optional) the data object for the new card. You can find the full list of card parameters [here](api/config/js_kanban_cards_config.md) -- `select` - (optional) controls whether the newly added card is selected - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "duplicate-card" event -board.api.on("duplicate-card", (obj) => { - console.log(obj); -}); -~~~ - -**Change log:** The `select` parameter was introduced in v1.5.10 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_enddragcard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_enddragcard_event.md deleted file mode 100644 index 73d393ad..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_enddragcard_event.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: end-drag-card -title: end-drag-card Event -description: You can learn about the end-drag-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# end-drag-card - -### Description - -@short: Triggered when a card stops being dragged - -### Usage - -~~~jsx {} -"end-drag-card": ({ - id: string | number, - columnId: string | number, - rowId?: string | number, - before?: string | number, - source?: array -}) => void; -~~~ - -### Parameters - -The callback for the **end-drag-card** event receives an object containing the following properties: - -- `id` - (required) the ID of the card that was dragged -- `columnId` - (required) the ID of the column where the card is now located -- `rowId` - (optional) the ID of the row where the card is currently placed -- `before` - (optional) the ID of the card that comes immediately after the dragged card in the column -- `source` - (optional) an array of IDs representing the moved cards - -:::info -To manage internal events, the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) can be used -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "end-drag-card" event -board.api.on("end-drag-card", (obj) => { - console.log(obj.columnId); -}); -~~~ - -**Change log:** This event was introduced in v1.4 - -**Related sample:** [Kanban. Disabling drag and drop to specific columns](https://snippet.dhtmlx.com/nfv59yif?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_movecard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_movecard_event.md deleted file mode 100644 index 4bca7440..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_movecard_event.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: move-card -title: move-card Event -description: You can learn about the move-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# move-card - -### Description - -@short: Triggered when a card is moved - -### Usage - -~~~jsx {} -"move-card": ({ - id: string | number, - columnId: string | number, - rowId?: string | number, - before?: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **move-card** event receives an object with the following properties: - -- `id` - (required) the ID of the card being moved -- `columnId` - (required) the ID of the column where the card will be placed -- `rowId` - (optional) the ID of the row where the card will be placed -- `before` - (optional) the ID of the card that the moved card will be placed before -- `skipProvider` - (optional) controls whether the request to the server should be skipped or not - -:::info -To work with internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "move-card" event -board.api.on("move-card", (obj) => { - console.log(obj.columnId); -}); -~~~ - -**Related sample:** [Kanban. Disabling drag and drop to specific columns](https://snippet.dhtmlx.com/nfv59yif?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_movecolumn_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_movecolumn_event.md deleted file mode 100644 index 5541a24e..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_movecolumn_event.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: move-column -title: move-column Event -description: Learn about the move-column event in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try out examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# move-column - -### Description - -@short: Triggered when a column is moved - -### Usage - -~~~jsx {} -"move-column": ({ - id: string | number, - before?: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **move-column** event receives an object with these properties: - -- `id` - (required) the ID of the column being moved -- `before` - (optional) the ID of the column before which the moved column will be inserted. If this isn't specified, the column will be placed at the end of the board -- `skipProvider` - (optional) controls whether the request to the server is suppressed - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe on the "move-column" event -board.api.on("move-column", (obj) => { - console.log(obj); -}); -~~~ - -**Change log:** This event was introduced in v1.1 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_moverow_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_moverow_event.md deleted file mode 100644 index b79afbc0..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_moverow_event.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -sidebar_label: move-row -title: move-row Event -description: Explore the move-row event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# move-row - -### Description - -@short: Triggered when a row is moved - -### Usage - -~~~jsx {} -"move-row": ({ - id: string | number, - before?: string | number, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **move-row** event receives an object with these properties: - -- `id` - (required) the ID of the row being moved -- `before` - (optional) the ID of the row before which the moved row will be inserted. If omitted, the row will be added at the end of the board -- `skipProvider` - (optional) controls whether the request to the server is prevented or allowed - -:::info -To manage internal events, you can refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {8-10} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - rows -}); -// listen for the "move-row" event -board.api.on("move-row", (obj) => { - console.log(obj); -}); -~~~ - -**Change log:** This event was introduced in v1.1 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_redo_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_redo_event.md deleted file mode 100644 index ecb71450..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_redo_event.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_label: redo -title: redo Event -description: Explore the redo event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, code samples, live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# redo - -### Description - -@short: Triggered when an action that was undone gets repeated - -### Usage - -~~~jsx {} -"redo": () => void; -~~~ - -:::info -To work with internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "redo" event -board.api.on("redo", () => { - console.log("redo operation"); -}); -~~~ - -**Change log**: This event was introduced in v1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_scroll_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_scroll_event.md deleted file mode 100644 index c7d86c3e..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_scroll_event.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: scroll -title: scroll Event -description: Explore the scroll event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# scroll - -### Description - -@short: Triggered when scrolling to specific elements - -### Usage - -~~~jsx {} -"scroll": ({ - id: string | number, - to: "column" | "row" | "card", - options?: object -}) => void; -~~~ - -### Parameters - -The callback for the **scroll** event receives an object with these parameters: - -- `id` - (required) the ID of the element to scroll to -- `to` - (required) the type of element to scroll to. Possible values: *"column"*, *"row"*, or *"card"* -- `options` - (optional) an object with scrolling options. You can find the full list of parameters [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters) - -:::info -To work with inner events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "scroll" event -board.api.on("scroll", (obj) => { - console.log(obj); -}); -~~~ - -**Change log:** This event was introduced in v1.2 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_selectcard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_selectcard_event.md deleted file mode 100644 index b3fb50ee..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_selectcard_event.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: select-card -title: select-card Event -description: Discover the select-card event in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try out code samples and live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# select-card - -### Description - -@short: Triggered when a card is selected - -### Usage - -~~~jsx {} -"select-card": ({ - id: string | number, - groupMode?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **select-card** event receives an object with the following properties: - -- `id` - (required) the selected card's ID -- `groupMode` - (optional) indicates multiselect mode (defaults to false) - -:::info -To manage internal events, you can refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "select-card" event -board.api.on("select-card", (obj) => { - console.log(obj.id); -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setedit_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setedit_event.md deleted file mode 100644 index 9000b58a..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setedit_event.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -sidebar_label: set-edit -title: set-edit Event -description: Explore the set-edit event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# set-edit - -### Description - -@short: Triggered when the editor is toggled - -### Usage - -~~~jsx {} -"set-edit": ({ cardId: string | number, eventSource?: "select-card" } | null) => void; -~~~ - -### Parameters - -The callback for the **set-edit** event can either be *null* or an object containing: - -- `cardId` - (required) the ID of the card being edited -- `eventSource` - (optional) the ***"select-card"*** action that triggers the ***set-edit*** event - -:::note -The ***null*** value indicates that the editor is being closed -::: - -:::info -To manage internal events, you can utilize the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// block editing when a card is clicked once -board.api.intercept("set-edit", (ev) => { - return ev?.eventSource != "select-card"; -}); -~~~ - -**Change log:** - - The event was introduced in v1.2 - - The ***eventSource*** parameter was added in v1.6 - -**Related samples:** [Kanban. Open the editor by double-clicking on the task](https://snippet.dhtmlx.com/zh4d9pdb?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setsearch_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setsearch_event.md deleted file mode 100644 index 8057ed46..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setsearch_event.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: set-search -title: set-search Event -description: Find out about the set-search event in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# set-search - -### Description - -@short: Triggered when a search is performed on cards - -### Usage - -~~~jsx {} -"set-search": ({ - value: string, - by?: string -}) => void; -~~~ - -### Parameters - -The callback for the **set-search** event receives an object containing these parameters: - -- `value` - (required) the search term -- `by` - (optional) the card field to search within - -:::info -To work with internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen to the "set-search" event -board.api.on("set-search", (obj) => { - console.log(obj.value); -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setsort_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setsort_event.md deleted file mode 100644 index 8e6424aa..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_setsort_event.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: set-sort -title: set-sort Event -description: You can learn about the set-sort event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# set-sort - -### Description - -@short: Triggered when cards are sorted - -### Usage - -~~~jsx {} -"set-sort": ( - { - by?: string | ((card: object) => any), - dir?: "asc" | "desc", - columnId?: string | number, - preserve?: boolean - } | null -) => void; -~~~ - -### Parameters - -The callback for the **set-sort** event accepts either *null* or an object containing the following options: - -- `by` - (optional) specifies the card field used for sorting (*string* or *function*) -- `dir` - (optional) defines the sorting direction, either *"asc"* or *"desc"* -- `preserve` - (optional) controls whether the sorting state is kept -- `columnId` - (optional) identifies the column to be sorted by its ID - -:::info -To work with internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe on the "set-sort" event -board.api.on("set-sort", (obj) => { - console.log(obj); -}); -~~~ - -**Change log:** This event was introduced in v1.2 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_startdragcard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_startdragcard_event.md deleted file mode 100644 index 6c8533b7..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_startdragcard_event.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: start-drag-card -title: start-drag-card Event -description: You can learn about the start-drag-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# start-drag-card - -### Description - -@short: Triggered when a card drag operation begins - -### Usage - -~~~jsx {} -"start-drag-card": ({ - id: string | number, - columnId: string | number, - rowId?: string | number, - before?: string | number, - source?: array -}) => void; -~~~ - -### Parameters - -The callback for the **start-drag-card** event receives an object containing these properties: - -- `id` - (required) the ID of the card being dragged -- `columnId` - (required) the ID of the column where the card is currently located -- `rowId` - (optional) the ID of the row where the card is currently located -- `before` - (optional) the ID of the card that comes immediately after the dragged card in the column -- `source` - (optional) an array of IDs representing the cards being moved - -:::info -To work with internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// subscribe on the "start-drag-card" event -board.api.on("start-drag-card", (obj) => { - console.log(obj.columnId); -}); -~~~ - -**Change log:** The event was introduced in v1.4 - -**Related sample:** [Kanban. Disabling drag and drop to specific columns](https://snippet.dhtmlx.com/nfv59yif?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_undo_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_undo_event.md deleted file mode 100644 index fddb0324..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_undo_event.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_label: undo -title: undo Event -description: Discover the undo event in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try code samples and live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# undo - -### Description - -@short: Triggered when the last action in Kanban is undone - -### Usage - -~~~jsx {} -"undo": () => void; -~~~ - -:::info -To manage internal events, you can utilize the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "undo" event -board.api.on("undo", () => { - console.log("Undo operation"); -}); -~~~ - -**Change log**: This event was introduced in v1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_unselectcard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_unselectcard_event.md deleted file mode 100644 index 99ed5db0..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_unselectcard_event.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -sidebar_label: unselect-card -title: unselect-card Event -description: You can learn about the unselect-card event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# unselect-card - -### Description - -@short: Triggered when a card is unselected - -### Usage - -~~~jsx {} -"unselect-card": ({ id: string | number }) => void; -~~~ - -### Parameters - -The callback for the **unselect-card** event receives an object with the following property: - -- `id` - (required) the ID of the card that was unselected - -:::info -To manage internal events, you can refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "unselect-card" event -board.api.on("unselect-card", (obj) => { - console.log(obj.id); -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecard_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecard_event.md deleted file mode 100644 index 9175a332..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecard_event.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -sidebar_label: update-card -title: update-card Event -description: Discover the update-card event in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# update-card - -### Description - -@short: Triggered when card data is updated - -### Usage - -~~~jsx {} -"update-card": ({ - id: string | number, - card?: object, - replace?: boolean, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **update-card** event accepts an object with these properties: - -- `id` - (required) the ID of the card that will be updated -- `card` - (optional) the new card data object. You can find the complete list of **card** parameters [**here**](api/config/js_kanban_cards_config.md) -- `replace` - (optional) controls whether the data is fully replaced or partially updated - - :::note - When `replace` is set to *true*, the existing data is completely replaced by the new data. If not, only the provided values will be updated. - ::: - -- `skipProvider` - (optional) controls whether the update request is sent to the server or not - -:::info -To manage internal events, refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "update-card" event -board.api.on("update-card", (obj) => { - console.log(obj); -}); -~~~ - -**Change log**: -- The **id** and **card** parameters were introduced in v1.1 -- The **replace** parameter was introduced in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecolumn_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecolumn_event.md deleted file mode 100644 index 83a54912..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecolumn_event.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -sidebar_label: update-column -title: update-column Event -description: You can learn about the update-column event in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# update-column - -### Description - -@short: Triggered when a column's data is updated - -### Usage - -~~~jsx {} -"update-column": ({ - id: string | number, - column?: object, - replace?: boolean, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **update-column** event receives an object with the following properties: - -- `id` - (required) the identifier of the column to update -- `column` - (optional) an object containing the new data for the column. You can find the full list of **column** properties [**here**](api/config/js_kanban_columns_config.md) -- `replace` - (optional) controls whether the data should be completely replaced or partially updated - - :::note - Setting `replace` to *true* will overwrite the old data entirely. If omitted or set to false, only the provided values will be updated. - ::: - -- `skipProvider` - (optional) controls whether the update request should be sent to the server or not - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "update-column" event -board.api.on("update-column", (obj) => { - console.log(obj); -}); -~~~ - -**Change log**: -- The **id** and **column** parameters were introduced in v1.1 -- The **replace** parameter was added in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecomment_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecomment_event.md deleted file mode 100644 index 6e4c9693..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updatecomment_event.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -sidebar_label: update-comment -title: update-comment Event -description: Find out about the update-comment event in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try code samples and live demos, and get a free 30-day trial of DHTMLX Kanban. ---- - -# update-comment - -### Description - -@short: Triggered when a comment is updated - -### Usage - -~~~jsx {} -"update-comment": ({ - id?: string | number, - cardId: string | number, - comment: { - id?: string | number, - cardId?: string | number, - text?: string, - date?: Date, - html?: string - }, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **update-comment** event receives an object with these properties: - -- `id` - (optional) the ID of the comment being updated -- `cardId` - (required) the ID of the card where the comment is located -- `comment` - (required) an object describing the updated comment, which may include: - - `id` - (optional) the ID of the comment after update - - `cardId` - (optional) the ID of the card the updated comment belongs to - - `text` - (optional) the updated comment text - - `date` - (optional) the updated comment date - - `html` - (optional) the updated comment's HTML markup. To display HTML instead of text, enable the `html` option in the [`editorShape`](/api/config/js_kanban_editorshape_config/#-parameters-for-a-comments-type) config -- `skipProvider` - (optional) controls whether the request to the server is skipped or not - -:::info -To manage internal events, you can use the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen for the "update-comment" event -board.api.on("update-comment", (obj) => { - console.log(obj.comment); -}); -~~~ - -**Change log:** This event was introduced in v1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updaterow_event.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updaterow_event.md deleted file mode 100644 index 98ace736..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/events/js_kanban_updaterow_event.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -sidebar_label: update-row -title: update-row Event -description: Explore the update-row event in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# update-row - -### Description - -@short: Triggered when a row's data is updated - -### Usage - -~~~jsx {} -"update-row": ({ - id: string | number, - row?: object, - replace?: boolean, - skipProvider?: boolean -}) => void; -~~~ - -### Parameters - -The callback for the **update-row** event accepts an object with these properties: - -- `id` - (required) identifies the row to update -- `row` - (optional) contains the new data for the row. You can find all available **row** parameters [**here**](api/config/js_kanban_rows_config.md) -- `replace` - (optional) controls whether the existing data is completely replaced - - :::note - Setting `replace` to *true* will overwrite all old data with the new data. If not set, only the specified values will be updated. - ::: - -- `skipProvider` - (optional) controls whether to skip sending the update request to the server - -:::info -To work with internal events, refer to the [**Event Bus methods**](api/overview/main_overview.md/#event-bus-methods) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// listen to the "update-row" event -board.api.on("update-row", (obj) => { - console.log(obj); -}); -~~~ - -**Change log**: -- Added **id** and **row** parameters in v1.1 -- Added **replace** parameter in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_detach_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_detach_method.md deleted file mode 100644 index 4bafac0a..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_detach_method.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -sidebar_label: api.detach() -title: detach Method -description: You can learn about the detach method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.detach() - -## Description - -@short: This method lets you remove or detach an event listener. - -## Usage - -~~~jsx -api.detach(tag: number | string | symbol ): void; -~~~ - -## Parameters - -- `tag` - the identifier used to reference an event handler when it was created - -### Example - -~~~jsx {11} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); - -board.api.on("move-card", ({ id, columnId }) => { - console.log("Move the card"); -}, { tag: "move" }); - -board.api.detach("move"); -~~~ - -**Change log**: The internal method was added in v1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_exec_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_exec_method.md deleted file mode 100644 index 7db45181..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_exec_method.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -sidebar_label: api.exec() -title: exec Method -description: You can learn about the exec method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.exec() - -### Description - -@short: This method lets you trigger internal events within the Kanban board. - -### Usage - -~~~jsx {} -api.exec( - event: string, - config: object -): void; -~~~ - -### Parameters - -- `event` - (required) the name of the event to trigger -- `config` - (required) an object containing parameters related to the event being triggered - -### Events - -:::info -You can find the complete list of Kanban internal events [**here**](api/overview/main_overview.md/#kanban-events) -::: - -### Example - -~~~jsx {7,9-12} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// select the card with the 1 ID -board.api.exec("select-card", { id: 1 }); -// add new card without sending changes to the server -board.api.exec("add-card", { - columnId: "backlog", - skipProvider: true, -}); -~~~ - -**Related sample:** [Kanban. Preserve sorting](https://snippet.dhtmlx.com/74nyuv14?tag=kanban) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getreactivestate_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getreactivestate_method.md deleted file mode 100644 index 2584d7c6..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getreactivestate_method.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -sidebar_label: api.getReactiveState() -title: getReactiveState Method -description: You can learn about the getReactiveState method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.getReactiveState() - -### Description - -@short: Retrieves an object containing the reactive properties of the Kanban board. - -### Usage - -~~~jsx {} -api.getReactiveState(): object; -~~~ - -### Returns - -This method returns an object with the following properties: - -~~~jsx {} -{ - cardHeight: {...}, - cardShape: {...}, - cards: {...}, - columnKey: {...}, - columnShape: {...}, - columns: {...}, - currentUser: {...}, - history: {...}, - links: {...}, - readonly: {...}, - rowKey: {...}, - rowShape: {...}, - editorShape: {...}, - rows: {...}, - search: {...}, - selected: {...}, - sort: {...}, - - // removed parameters - /* - fromAreaMeta: {...}, - dropAreaItemsCoords: {...}, - dropAreasCoords: {...}, - overAreaMeta: {...}, - before: {...}, - dragItemId: {...}, - dragItemsCoords: {...}, - overAreaId: {...}, - /* - - // private parameters - /* - edit -> _edit: {...}, - layout -> layout: {...}, - cardsMap -> _cardsMap: {...}, - cardsMeta -> _cardsMeta: {...}, - areasMeta -> _areasMeta: {...}, - scroll -> _scroll: {...}, - */ -} -~~~ - -:::warning -These state properties are read-only. Modifying them may lead to unexpected behavior! -::: - -### Example - -~~~jsx {7-37} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - rows -}); -// retrieve the reactive state of the Kanban board -const state = board.api.getReactiveState(); - -// listen for changes in columns and log the updated array -state.columns.subscribe((data) => { - console.log(data); -}); - -// listen for changes in cards and log the updated array -state.cards.subscribe((data) => { - console.log(data); -}); - -// listen for changes in rows and log the updated array -state.rows.subscribe((data) => { - console.log(data); -}); - -// listen for changes in card selection and log the IDs of selected cards -state.selected.subscribe((data) => { - console.log(data); -}); -~~~ - -**Change log:** This method was updated in v1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getstate_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getstate_method.md deleted file mode 100644 index aabf2c5e..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getstate_method.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -sidebar_label: api.getState() -title: getState Method -description: You can learn about the getState method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.getState() - -### Description - -@short: Retrieves an object containing the StateStore properties of the Kanban board. - -### Usage - -~~~jsx {} -api.getState(): object; -~~~ - -### Returns - -This method returns an object with the following properties: - -~~~jsx {} -{ - cardHeight: number | null, - cards: array, - cardShape: object, - columnKey: string, - columns: array, - columnShape: object, - currentUser: number | string | null, - links: array, - readonly: object, - rowKey: string, - rows: array, - rowShape: object, - editorShape: array, - history: object, - search: object, - selected: array, - sort: object, - - // removed parameters - /* - fromAreaMeta: object, - dropAreaItemsCoords: array, - dropAreasCoords: array, - overAreaMeta: object, - before: string | number, - dragItemId: string | number, - dragItemsCoords: array, - overAreaId: string | number, - /* - - // private parameters - /* - edit -> _edit: object, - layout -> layout: string, - cardsMap -> _cardsMap: object, - cardsMeta -> _cardsMeta: object, - areasMeta -> _areasMeta: object, - scroll -> _scroll: object, - */ -} -~~~ - -:::warning -These state properties are read-only. Modifying them may cause unexpected issues! -::: - -### Example - -~~~jsx {7-12} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - rows -}); -// retrieve the current State of the Kanban board -const state = board.api.getState(); -console.log(state.cards); // display the cards data -console.log(state.columns); // display the columns data -console.log(state.rows); // display the rows data -console.log(state.cardShape); // display the card configuration -//... -~~~ - -**Change log:** The method was updated in v1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getstores_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getstores_method.md deleted file mode 100644 index b0fc79e8..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_getstores_method.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: api.getStores() -title: getStores Method -description: You can learn about the getStores method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.getStores() - -### Description - -@short: Retrieves an object containing the DataStore properties of the Kanban. - -### Usage - -~~~jsx {} -api.getStores(): object; -~~~ - -### Returns - -This method returns an object that includes the **DataStore** parameters: - -~~~jsx {} -{ - data: DataStore // ( object of parameters ) -} -~~~ - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// get the DataStore object of Kanban -const store = board.api.getStores(); -console.log(store); -~~~ - -**Change log:** The method was updated in v1.2 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_intercept_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_intercept_method.md deleted file mode 100644 index e5243b91..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_intercept_method.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: api.intercept() -title: intercept Method -description: You can learn about the intercept method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.intercept() - -### Description - -@short: Provides a way to capture and block internal events before they proceed. - -### Usage - -~~~jsx {} -api.intercept( - event: string, - callback: function, - config?: { intercept?: boolean, tag?: number | string | symbol } -): void; -~~~ - -### Parameters - -- `event` - (required) the event to listen for -- `callback` - (required) the function to execute when the event occurs (arguments depend on the specific event) -- `config` - (optional) an object that can include: - - `intercept` - (optional) when set to `true`, this listener runs before others - - `tag` - (optional) a label for the action, useful for removing the handler later with the [`detach`](api/internal/js_kanban_detach_method.md) method - -### Events - -:::info -You can find the complete list of internal Kanban events [**here**](api/overview/main_overview.md/#kanban-events) -::: - -### Example - -~~~jsx {7-11} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// allow moving cards only into the column with the "done" ID -board.api.intercept("move-card", ({ id, columnId }) => { - if(columnId !== "done" ){ - return false; - } -}, {tag: "move"}); -~~~ - -**Change log**: The **config.tag** and **config.intercept** options were introduced in version 1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_json_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_json_method.md deleted file mode 100644 index 8407eadb..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_json_method.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: export.json() -title: json Method -description: You can learn about the json method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# export.json() - -### Description - -@short: Outputs Kanban data as a JSON file - -### Usage - -~~~jsx {} -export.json(): void; -~~~ - -:::info -This method saves the Kanban data into a JSON file formatted like this: -~~~jsx {} -{ - "cards": [], - "columns": [], - "rows": [] -} -~~~ -::: - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// export the Kanban data to JSON () -board.export.json(); // => { "cards": [...], "columns": [...], "rows": [] } -~~~ - -**Change log:** The method was added in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_on_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_on_method.md deleted file mode 100644 index e9f0bc3c..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_on_method.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -sidebar_label: api.on() -title: on Method -description: You can learn about the on method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.on() - -### Description - -@short: Provides a way to attach handlers to internal events. - -### Usage - -~~~jsx {} -api.on( - event: string, - handler: function - config?: { intercept?: boolean, tag?: number | string | symbol } -): void; -~~~ - -### Parameters - -- `event` - (required) the event that will trigger the handler -- `handler` - (required) the function to execute when the event occurs (its arguments depend on the specific event) -- `config` - (optional) an object that can include: - - `intercept` - (optional) setting `intercept: true` makes this listener run before others - - `tag` - (optional) a label for the handler, which can be used to remove it later via the [`detach`](api/internal/js_kanban_detach_method.md) method - -### Events - -:::info -You can find the complete list of Kanban internal events [**here**](api/overview/main_overview.md/#kanban-events) -::: - -### Example - -~~~jsx {7-9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// log card data to the console when a card is moved -board.api.on("move-card", ({ id, columnId }) => { - console.log({ id, columnId }); -}, {tag: "move"}); -~~~ - -**Change log**: The **config.tag** and **config.intercept** options were introduced in v1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_setnext_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_setnext_method.md deleted file mode 100644 index 55de94e4..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/js_kanban_setnext_method.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -sidebar_label: api.setNext() -title: setNext Method -description: You can learn about the setNext method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# api.setNext() - -### Description - -@short: Enables adding an action into the Event Bus sequence - -### Usage - -~~~jsx {} -api.setNext(next: any): void; -~~~ - -### Parameters - -- `next` - (required) the action to be added into the **Event Bus** sequence - -### Example - -~~~jsx {15} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getCards(), - restProvider.getColumns(), - restProvider.getRows() -]).then(([cards, columns, rows]) => { - const board = new kanban.Kanban("#root", { - cards, - columns, - rows, - rowKey: "row" - }); - board.api.setNext(restProvider); -}); -~~~ - -:::info -Including **RestDataProvider** in the **Event Bus** sequence is necessary to handle data operations like **adding** and **deleting**, and to send the related requests to the server. -::: \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcard_method.md deleted file mode 100644 index ebbf4104..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcard_method.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -sidebar_label: addCard() -title: addCard Method -description: You can learn about the addCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# addCard() - -### Description - -@short: Inserts a new card into the Kanban board - -### Usage - -~~~jsx {} -addCard({ - columnId: string | number, - id?: string | number, - rowId?: string | number, - before?: string | number, - select?: boolean, - card?: object -}): void; -~~~ - -### Parameters - -- `columnId` - (required) the ID of the column where the card will be added -- `id` - (optional) the ID to assign to the new card -- `rowId` - (optional) the ID of the row where the card should be placed -- `before` - (optional) the ID of an existing card that the new card will be inserted before -- `select` - (optional) whether the newly added card should be selected -- `card` - (optional) the data object defining the new card - -:::info -You can find the complete list of **card** parameters [**here**](api/config/js_kanban_cards_config.md) -::: - -### Example - -~~~jsx {7-12} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// add new card into the "backlog" column -board.addCard({ - id: 1, - columnId: "backlog", - card: { label: "New card" } -}); -~~~ - -:::tip -The ID of the new card can also be specified inside the **card** object -::: \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcolumn_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcolumn_method.md deleted file mode 100644 index d8b73e63..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcolumn_method.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -sidebar_label: addColumn() -title: addColumn Method -description: You can learn about the addColumn method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# addColumn() - -### Description - -@short: Inserts a new column into the Kanban board - -### Usage - -~~~jsx {} -addColumn({ - id?: string | number, - column?: object, - before?: string | number -}): void; -~~~ - -### Parameters - -- `id` - (optional) specifies the ID for the new column -- `column` - (optional) provides the data object defining the new column -- `before` - (optional) indicates the ID of the column before which the new column will be inserted - -:::info -You can find the complete list of **column** parameters [**here**](api/config/js_kanban_columns_config.md) -::: - -### Example - -~~~jsx {7-16} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// add new column -board.addColumn({ - id: "extra_column", - column: { - label: "Extra column", - limit: 2, - strictLimit: 2, - collapsed: true - }, - before: "column_2" -}); -~~~ - -**Change log**: The **id**, **column**, and **before** parameters were introduced in v1.1 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcomment_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcomment_method.md deleted file mode 100644 index bddd8e74..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addcomment_method.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -sidebar_label: addComment() -title: addComment Method -description: You can learn about the addComment method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# addComment() - -### Description - -@short: Inserts a new comment into the specified card using its ID - -### Usage - -~~~jsx {} -addComment({ - id?: string | number, - cardId: string | number, - comment: { - text?: string, - date?: Date, - html?: string - } -}): void; -~~~ - -### Parameters - -- `id` - (optional) identifier for the new comment -- `cardId` - (required) identifier of the card where the comment will be added -- `comment` - (required) object defining the new comment's details. It can include: - - `text` - (optional) the comment's text content - - `date` - (optional) the date associated with the comment - - `html` - (optional) HTML content for the comment. To display HTML instead of plain text, enable the `html` property in the [`editorShape`](/api/config/js_kanban_editorshape_config/#-parameters-for-a-comments-type) configuration - -### Example - -~~~jsx {7-15} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// add new comment -board.addComment({ - id: 1, - cardId: 1, - comment: { - text: "", - date: new Date("01/07/2021"), - html: "Important comment" - } -}); -~~~ - -**Change log:** This method was introduced in version 1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addlink_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addlink_method.md deleted file mode 100644 index e982514b..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addlink_method.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -sidebar_label: addLink() -title: addLink Method -description: You can learn about the addLink method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# addLink() - -### Description - -@short: Inserts a new link into the Kanban board - -### Usage - -~~~jsx {} -addLink({ - id?: string | number, - link: object -}): void; -~~~ - -### Parameters - -- `id` - (optional) the identifier for the new link -- `link` - (required) the data object representing the new link. You can find the complete list of link parameters [here](api/config/js_kanban_links_config.md) - -### Example - -~~~jsx {7-14} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// add new link -board.addLink({ - id: 3, - link: { - source: 4, - target: 6, - relation: "relatesTo", - } -}); -~~~ - -**Change log:** This method was introduced in version 1.5 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addrow_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addrow_method.md deleted file mode 100644 index 95cf08a9..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_addrow_method.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: addRow() -title: addRow Method -description: You can learn about the addRow method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# addRow() - -### Description - -@short: Inserts a new row into the Kanban board - -### Usage - -~~~jsx {} -addRow({ - id?: string | number, - row?: object, - before?: string | number -}): void; -~~~ - -### Parameters - -- `id` - (optional) specifies the ID for the new row -- `row` - (optional) provides the data object representing the new row -- `before` - (optional) indicates the ID of the row before which the new row will be inserted - -:::info -You can find the complete list of **row** parameters [**here**](api/config/js_kanban_rows_config.md) -::: - -### Example - -~~~jsx {8-15} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - rows -}); -// add new row -board.addRow({ - id: "extra_row", - row: { - label: "Extra row", - collapsed: false - }, - before: "row_2" -}); -~~~ - -**Change log**: The **id**, **row**, and **before** parameters were introduced in v1.1 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecard_method.md deleted file mode 100644 index 9188fcd8..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecard_method.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: deleteCard() -title: deleteCard Method -description: You can learn about the deleteCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# deleteCard() - -### Description - -@short: Deletes the specified card from the Kanban datastore. - -### Usage - -~~~jsx {} -deleteCard({ id: string | number }): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the card to remove - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// delete a card using its id -board.deleteCard({ id: 1 }); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecolumn_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecolumn_method.md deleted file mode 100644 index 9ef91523..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecolumn_method.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: deleteColumn() -title: deleteColumn Method -description: You can learn about the deleteColumn method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# deleteColumn() - -### Description - -@short: Deletes a specific column from the Kanban datastore - -### Usage - -~~~jsx {} -deleteColumn({ id: string | number }): void; -~~~ - -### Parameters - -- `id` - (required) the identifier of the column that needs to be removed - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// remove column by its id -board.deleteColumn({ id: "backlog" }); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecomment_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecomment_method.md deleted file mode 100644 index 9451ea89..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletecomment_method.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: deleteComment() -title: deleteComment Method -description: You can learn about the deleteComment method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# deleteComment() - -### Description - -@short: Removes a comment from a card by specifying its ID - -### Usage - -~~~jsx {} -deleteComment({ - id: string | number, - cardId: string | number -}): void; -~~~ - -### Parameters - -- `id` - (required) the identifier of the comment that should be removed -- `cardId` - (required) the identifier of the card containing the comment - -### Example - -~~~jsx {7-10} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// delete comment -board.deleteComment({ - id: 1, - cardId: 1, -}); -~~~ - -**Change log:** The method was added in v1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletelink_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletelink_method.md deleted file mode 100644 index adfb86b4..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deletelink_method.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -sidebar_label: deleteLink() -title: deleteLink Method -description: You can learn about the deleteLink method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# deleteLink() - -### Description - -@short: Deletes a specific link from the Kanban datastore. - -### Usage - -~~~jsx {} -deleteLink({ id: string | number }): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the link that needs to be removed - -### Example - -~~~jsx {8} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - links, -}); -// remove link by its id -board.deleteLink({ id: 5 }); -~~~ - -**Change log:** This method was introduced in version 1.5 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deleterow_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deleterow_method.md deleted file mode 100644 index 7ba2db15..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_deleterow_method.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: deleteRow() -title: deleteRow Method -description: You can learn about the deleteRow method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# deleteRow() - -### Description - -@short: Deletes the specified row from the Kanban datastore. - -### Usage - -~~~jsx {} -deleteRow({ id: string | number }): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the row you want to delete - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// remove row by its id -board.deleteRow({ id: "feature" }); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_destructor_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_destructor_method.md deleted file mode 100644 index 5c107989..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_destructor_method.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -sidebar_label: destructor() -title: destructor Method -description: You can learn about the destructor method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# destructor() - -### Description - -@short: Clears all HTML elements of the Kanban and removes all associated event handlers. - -### Usage - -~~~jsx {} -destructor(): void; -~~~ - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// remove Kanban -board.destructor(); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_duplicatecard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_duplicatecard_method.md deleted file mode 100644 index 4d7a7621..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_duplicatecard_method.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: duplicateCard() -title: duplicateCard Method -description: You can learn about the duplicateCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# duplicateCard() - -### Description - -@short: Creates a copy of a card using its specified ID. - -### Usage - -~~~jsx {} -duplicateCard({ - id: string | number, - card?: object, - select?: boolean -}): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the card to be duplicated -- `card` - (optional) the data object for the new card. You can find the full list of card parameters [**here**](api/config/js_kanban_cards_config.md) -- `select` - (optional) determines whether the newly added card should be selected - -### Example - -~~~jsx {7-10} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// duplicate a card with the 1 ID -board.duplicateCard({ - id: 1, - card: { label: "Duplicated card" }, - select: true -}); -~~~ - -**Change log:** The `select` parameter was introduced in v1.5.10 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getareacards_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getareacards_method.md deleted file mode 100644 index b531c098..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getareacards_method.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -sidebar_label: getAreaCards() -title: getAreaCards Method -description: Explore the getAreaCards method in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# getAreaCards() - -### Description - -@short: Retrieves an array containing data objects for all cards within the specified column (and row, if provided). - -### Usage - -~~~jsx {} -getAreaCards( - columnId: string | number, - rowId?: string | number -): array; -~~~ - -### Parameters - -- `columnId` - (required) the ID of the column to target -- `rowId` - (optional) the ID of the row to target - -### Returns - -This method returns an array of data objects representing the cards. - -:::info -When the Kanban board has only **columns** and no **rows**, provide just the ***columnId***. The method will return all card data objects within that column. - -If the Kanban board includes both **columns** and **rows**, you can specify both ***columnId*** and ***rowId***. This will return all card data objects located in the specified column and row. -::: - -### Example - -~~~jsx {8} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - rows -}); -// retrieve an array of card data objects for the given column and row -board.getAreaCards("column_id", "row_id"); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getcard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getcard_method.md deleted file mode 100644 index 106ff37a..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getcard_method.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -sidebar_label: getCard() -title: getCard Method -description: You can learn about the getCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getCard() - -### Description - -@short: Retrieves the data object of a card using its specified ID - -### Usage - -~~~jsx {} -getCard(id: string | number): object; -~~~ - -### Parameters - -- `id` - (required) the ID of the card to retrieve - -### Returns - -This method returns the data object associated with the card that matches the given ID - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// retrieve the data object of the card with ID 1 -const card_data = board.getCard(1); -console.log(card_data); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getcolumncards_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getcolumncards_method.md deleted file mode 100644 index 71abf6eb..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getcolumncards_method.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -sidebar_label: getColumnCards() -title: getColumnCards Method -description: You can learn about the getColumnCards method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getColumnCards() - -### Description - -@short: Retrieves an array containing data objects for all cards within a specified column - -### Usage - -~~~jsx {} -getColumnCards(id: string | number): array; -~~~ - -### Parameters - -- `id` - (required) the ID of the column you want to access - -### Returns - -This method returns an array filled with data objects representing all the cards in the specified column - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// retrieve data objects for all cards in the column with ID 1 -const cards_data = board.getColumnCards(1); -console.log(cards_data); -~~~ - -**Change log**: The method was added in v1.7 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getselection_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getselection_method.md deleted file mode 100644 index eac17e52..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_getselection_method.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: getSelection() -title: getSelection Method -description: You can learn about the getSelection method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getSelection() - -### Description - -@short: Retrieves an array containing the ID(s) of the currently selected card(s). - -### Usage - -~~~jsx {} -getSelection(): array; -~~~ - -### Returns - -This method returns an array with the ID(s) of the selected card(s). - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// retrieves an array of IDs for the selected cards -board.getSelection(); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_movecard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_movecard_method.md deleted file mode 100644 index a95e7f71..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_movecard_method.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -sidebar_label: moveCard() -title: moveCard Method -description: You can learn about the moveCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# moveCard() - -### Description - -@short: Moves a card to a specified column (and row) - -### Usage - -~~~jsx {} -moveCard({ - id: string | number, - columnId: string | number, - rowId?: string | number, - before?: string | number -}): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the card to be moved -- `columnId` - (required) the ID of the column where the card will be placed -- `rowId` - (optional) the ID of the row where the card will be positioned -- `before` - (optional) the ID of the card before which the moved card will be inserted - -:::info -If the **rowKey** property is set in the widget configuration, the **rowId** parameter in the **moveCard()** method must be provided. -::: - -### Example - -~~~jsx {9-14} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// move the card with ID 1 -// it will be placed into the "inprogress" column and the "feature" row, -// before the card with ID 8 -board.moveCard({ - id: 1, - columnId: "inprogress", - rowId: "feature", - before: 8 -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_movecolumn_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_movecolumn_method.md deleted file mode 100644 index c777ab88..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_movecolumn_method.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: moveColumn() -title: moveColumn Method -description: You can learn about the moveColumn method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# moveColumn() - -### Description - -@short: Shifts a column to a new spot on the board. - -### Usage - -~~~jsx {} -moveColumn({ - id: string | number, - before?: string | number -}): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the column that needs to be moved -- `before` - (optional) the ID of the column that the moved column should be placed ahead of. If this parameter is left out, the column will be moved to the end of the board. - -### Example - -~~~jsx {7-10} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// move the "backlog" column and place it before the "done" one -board.moveColumn({ - id: "backlog", - before: "done" -}); -~~~ - -**Change log:** The method was added in v1.1 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_moverow_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_moverow_method.md deleted file mode 100644 index 45afe5cc..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_moverow_method.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_label: moveRow() -title: moveRow Method -description: You can learn about the moveRow method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# moveRow() - -### Description - -@short: Shifts a row to a new position - -### Usage - -~~~jsx {} -moveRow({ - id: string | number, - before?: string | number -}): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the row that needs to be moved -- `before` - (optional) the ID of the row that the moved row will be placed in front of. If this parameter is omitted, the row will be moved to the end of the board - -### Example - -~~~jsx {8-11} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - row -}); -// move the "task" swimlane and place it before (above) the "feature" one -board.moveRow({ - id: "task", - before: "feature" -}); -~~~ - -**Change log:** The method was added in v1.1 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_parse_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_parse_method.md deleted file mode 100644 index 426462bc..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_parse_method.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: parse() -title: parse Method -description: You can learn about the parse method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# parse() - -### Description - -@short: Loads data into the Kanban board - -This method performs the same operation as [`setConfig`](/api/methods/js_kanban_setconfig_method) when used with data-related Kanban settings. It is therefore recommended to use `setConfig` for consistency with other configuration options, although `parse` remains supported as an alias for data parsing. - -### Usage - -~~~jsx {} -parse({ - columns?: array, - rows?: array, - cards?: array, - links?: array -}): void; -~~~ - -### Parameters - -- [`columns`](api/config/js_kanban_columns_config.md) - (optional) an array containing column data objects -- [`rows`](api/config/js_kanban_rows_config.md) - (optional) an array containing row data objects -- [`cards`](api/config/js_kanban_cards_config.md) - (optional) an array containing card data objects -- [`links`](api/config/js_kanban_links_config.md) - (optional) an array containing link data objects - -### Example - -~~~jsx {4-9} -// create Kanban -const board = new kanban.Kanban("#root", {}); -// load data into Kanban -board.parse({ - columns, - cards, - rows, - links -}); -~~~ - -**Change log:** Since version 1.1, it's no longer necessary to reset the initial data in the constructor before loading new data - -**Related articles:** [Working with Data](guides/working_with_data.md#loading-data-from-local-source) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_redo_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_redo_method.md deleted file mode 100644 index 221990b7..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_redo_method.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: redo() -title: redo Method -description: You can learn about the redo method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# redo() - -### Description - -@short: Reapplies the action that was undone by the undo command - -:::info -The `redo()` method only works when the [`history: true`](api/config/js_kanban_history_config.md) configuration is enabled! -::: - -### Usage - -~~~jsx {} -redo(): void; -~~~ - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// redoes the last undone action in Kanban's history -board.redo(); -~~~ - -**Change log:** The method was introduced in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_scroll_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_scroll_method.md deleted file mode 100644 index 9a8823db..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_scroll_method.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: scroll() -title: scroll Method -description: You can learn about the scroll method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# scroll() - -### Description - -@short: Moves the Kanban view to bring the specified element into focus. - -### Usage - -~~~jsx {} -scroll({ - id: string | number, - to: "column" | "row" | "card", - options?: object -}): void; -~~~ - -### Parameters - -- `id` - (required) the identifier of the element to scroll to -- `to` - (required) specifies the type of element to scroll to. Options include "column", "row", or "card" -- `options` - (optional) an object with scrolling settings. You can find the full list of parameters for scrolling [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters) - -### Example - -~~~jsx {7-15} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// scroll Kanban to the card with the 246 ID -board.scroll({ - id: 246, - to: "card", - options: { - behavior: "smooth", - block: "end", - inline: "nearest" - } -}); -~~~ - -**Change log:** The method was introduced in v1.2 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_selectcard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_selectcard_method.md deleted file mode 100644 index 4d70b7aa..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_selectcard_method.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -sidebar_label: selectCard() -title: selectCard Method -description: You can learn about the selectCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# selectCard() - -### Description - -@short: Highlights a card using the given ID. - -### Usage - -~~~jsx {} -selectCard({ - id: string | number, - groupMode?: boolean -}): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the card to be selected -- `groupMode` - (optional) turns on or off the ability to select multiple cards at once (**false** by default) - -:::info -When **groupMode** is set to **true**, calling **selectCard()** won't clear the selection of other cards -::: - -### Example - -~~~jsx {7-10} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// select the card with the 1 ID -board.selectCard({ - id: 1, - groupMode: true -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_serialize_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_serialize_method.md deleted file mode 100644 index 394d87ff..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_serialize_method.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: serialize() -title: serialize Method -description: You can learn about the serialize method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# serialize() - -### Description - -@short: Converts the Kanban data into a JSON format - -### Usage - -~~~jsx {} -serialize(): object; -~~~ - -### Returns - -This method returns an object containing the Kanban data - -~~~jsx {} -{ - cards: [{...}, {...}, ...], - rows: [{...}, {...}, ...], - columns: [{...}, {...}, ...], - links: [{...}, {...}, ...] -} -~~~ - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// retrieve the Kanban data as an object -board.serialize(); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setconfig_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setconfig_method.md deleted file mode 100644 index 3c92f621..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setconfig_method.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: setConfig() -title: setConfig Method -description: You can learn about the setConfig method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# setConfig() - -### Description - -@short: Updates the Kanban with new configuration settings - -### Usage - -~~~jsx {} -setConfig(config: object): void; -~~~ - -### Parameters - -- `config` - (required) an object containing the Kanban configuration options. Check out the full list of properties [here](api/overview/main_overview.md#kanban-properties) - -:::tip -This method allows you to adjust the Kanban widget's settings and load data into it. Keep in mind that it does not affect the history (changing history is not supported). -::: - -### Example - -~~~jsx {10-20,22-23} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); - -// create Toolbar -const toolbar = new kanban.Toolbar("#toolbar", { api: board.api }); - -// update Kanban configuration -board.setConfig({ - columnKey: "stage", - rowKey: "type", - cardShape, - editorShape, - editor: { - autoSave: false - }, - /* other parameters */ -}); - -// update Toolbar configuration -toolbar.setConfig({ items: ["search", "spacer", "sort"] }); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setedit_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setedit_method.md deleted file mode 100644 index 6b3a792f..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setedit_method.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -sidebar_label: setEdit() -title: setEdit Method -description: You can learn about the setEdit method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# setEdit() - -### Description - -@short: Enables or disables the Kanban card editor - -### Usage - -~~~jsx {} -setEdit({ cardId: string | number } | null): void; -~~~ - -### Parameters - -This method accepts either *null* or an object containing the following property: - -- `cardId` - (required) the identifier of the card to be edited - -:::note -To close the editor, simply call **setEdit()** with ***null*** -::: - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// open the editor for a specific card by its ID -board.setEdit({ cardId: 1 }); -~~~ - -**Change log:** The method was introduced in v1.2 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setlocale_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setlocale_method.md deleted file mode 100644 index ef53028e..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setlocale_method.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -sidebar_label: setLocale() -title: setLocale Method -description: You can learn about the setLocale method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# setLocale() - -### Description - -@short: Changes the locale settings for Kanban - -### Usage - -~~~jsx {} -setLocale(null | locale?: object): void; -~~~ - -### Parameters - -- `null` - (optional) resets Kanban to the default locale (*English*) -- `locale` - (optional) an object containing the new locale data to be applied - -:::info -The `setLocale()` method is used to update the locale for Kanban only. To revert Kanban back to the default locale, call `setLocale()` without any arguments or pass *null*. For changing the locale of the Toolbar, use the [`toolbar.setLocale()`](api/methods/toolbar_setlocale_method.md) method instead. -::: - -### Example - -~~~jsx {7,9} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, -}); -// set Kanban locale to "de" -board.setLocale(kanban.locales["de"]); -// reset Kanban locale to default -board.setLocale(); // or board.setLocale(null); -~~~ - -**Change log:** The method was updated in v1.2 - -**Related articles:** [Localization](guides/localization.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setsearch_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setsearch_method.md deleted file mode 100644 index 526c154a..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setsearch_method.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -sidebar_label: setSearch() -title: setSearch Method -description: You can learn about the setSearch method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# setSearch() - -### Description - -@short: Finds cards based on the specified criteria - -### Usage - -~~~jsx {} -setSearch({ - value: string, - by?: string -}): void; -~~~ - -:::info -This method allows searching for cards using the given parameters. If you call **setSearch()** without any arguments, it will clear the search input and remove any card highlighting. -::: - -### Parameters - -- `value` - (required) the text to search for -- `by` - (optional) the card field to perform the search on - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// highlight the cards that match the parameters -board.setSearch({ value: "Integration", by: "label" }); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setsort_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setsort_method.md deleted file mode 100644 index 0bdf9ee5..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_setsort_method.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -sidebar_label: setSort() -title: setSort Method -description: You can learn about the setSort method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# setSort() - -### Description - -@short: Organizes cards based on the given sorting criteria - -### Usage - -~~~jsx {} -setSort( - { - by?: string | function, // by?: ((card: object) => any), - dir?: "asc" | "desc", - columnId?: string | number, - preserve?: boolean - } | null -): void; -~~~ - -### Parameters - -This method accepts either an object with sorting options or *null*. Within the object, you can define the following: - -- `by` - (optional) specifies the card property to sort by. It can be a *string* or a *function* that returns the value to sort on -- `dir` - (optional) sets the sorting direction, either *"asc"* or *"desc"* -- `columnId` - (optional) identifies the column whose cards should be sorted -- `preserve` - (optional) controls whether the sorting order is maintained (*false* by default) - -:::info -When **preserve** is set to *false*, sorting applies only once. This means that if cards are added or moved afterward, the sorting won't be kept and the order may change. If set to *true*, the sorting will stay consistent even after cards are added or moved. To turn off preserving, call **setSort()** with *null*. -::: - -### Example - -~~~jsx {7-12} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// sort the cards in ascending order by the "label" parameter -board.setSort({ - by: (obj) => obj.label, // or by: "label" - dir: "asc", - columnId: "backlog", - preserve: false -}); -~~~ - -**Change log:** The method was added in v1.2 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_undo_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_undo_method.md deleted file mode 100644 index 29d0b4c2..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_undo_method.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: undo() -title: undo Method -description: You can learn about the undo method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# undo() - -### Description - -@short: Reverts the last operation in Kanban - -:::info -The `undo()` method works only when the [`history: true`](api/config/js_kanban_history_config.md) configuration is enabled! -::: - -### Usage - -~~~jsx {} -undo(): void; -~~~ - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// steps back one action in the Kanban's history -board.undo(); -~~~ - -**Change log:** The method was introduced in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_unselectcard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_unselectcard_method.md deleted file mode 100644 index 923491ed..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_unselectcard_method.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -sidebar_label: unselectCard() -title: unselectCard Method -description: You can learn about the unselectCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# unselectCard() - -### Description - -@short: Deselects card(s) based on their ID - -### Usage - -~~~jsx {} -unselectCard({ id: string | number }): void; -~~~ - -:::info -Calling the **unselectCard()** method without any parameters will clear the selection of all cards -::: - -### Parameters - -- `id` - (required) the ID of the card to be deselected - -### Example - -~~~jsx {7} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// deselect the card with ID 1 -board.unselectCard({ id: 1 }); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecard_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecard_method.md deleted file mode 100644 index ed50b2d1..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecard_method.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -sidebar_label: updateCard() -title: updateCard Method -description: You can learn about the updateCard method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# updateCard() - -### Description - -@short: Modifies the card data using its ID - -### Usage - -~~~jsx {} -updateCard({ - id: string | number, - card?: object, - replace?: boolean -}): void; -~~~ - -### Parameters - -- `id` - (required) the ID of the card to update -- `card` - (optional) the new data object for the card. You can find the complete list of card parameters [**here**](api/config/js_kanban_cards_config.md) -- `replace` - (optional) controls whether to completely replace the existing data - - :::note - Setting the `replace` parameter to *true* will overwrite the old data entirely with the new one. If not set or false, only the provided fields will be updated. - ::: - -### Example - -~~~jsx {7-16} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// update card data with the 1 ID -board.updateCard({ - id: 1, - card: { - label: "New Label", - row: "feature", - column: "inprogress", - /*other parameters*/ - }, - replace: true -}); -~~~ - -**Change log**: -- The **id** and **card** parameters were added in v1.1 -- The **replace** parameter was added in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecolumn_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecolumn_method.md deleted file mode 100644 index a62444df..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecolumn_method.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -sidebar_label: updateColumn() -title: updateColumn Method -description: You can learn about the updateColumn method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# updateColumn() - -### Description - -@short: Modifies the data of a column using its ID - -### Usage - -~~~jsx {} -updateColumn({ - id: string | number, - column?: object, - replace?: boolean -}): void; -~~~ - -### Parameters - -- `id` - (required) the unique identifier of the column to update -- `column` - (optional) an object containing the new data for the column. You can find the complete list of **column** parameters [**here**](api/config/js_kanban_columns_config.md) -- `replace` - (optional) determines whether to completely replace the existing data - - :::note - Setting `replace` to *true* will overwrite the old data entirely with the new data. If omitted or set to false, only the specified values will be updated. - ::: - -### Example - -~~~jsx {7-16} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// update column data with the "backlog" ID -board.updateColumn({ - id: "backlog", - column: { - label: "Updated column", - limit: 3, - strictLimit: 3, - collapsed: true - }, - replace: true -}); -~~~ - -**Change log**: -- The **id** and **column** parameters were introduced in v1.1 -- The **replace** parameter was introduced in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecomment_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecomment_method.md deleted file mode 100644 index 9ce67b2f..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updatecomment_method.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -sidebar_label: updateComment() -title: updateComment Method -description: You can learn about the updateComment method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# updateComment() - -### Description - -@short: Modify a card comment by its ID - -### Usage - -~~~jsx {} -updateComment({ - id?: string | number, - cardId: string | number, - comment: { - id?: string | number, - cardId?: string | number, - text?: string, - date?: Date, - html?: string - } -}): void; -~~~ - -### Parameters - -- `id` - (optional) the ID of the comment that needs to be updated -- `cardId` - (required) the ID of the card containing the comment to update -- `comment` - (required) an object defining the updated comment details. This can include: - - `id` - (optional) the ID of the comment being updated - - `cardId` - (optional) the ID of the card where the updated comment will be placed - - `text` - (optional) the new text content of the comment - - `date` - (optional) the date associated with the updated comment - - `html` - (optional) the HTML content for the updated comment. To show HTML instead of plain text, make sure the `html` property is enabled in the [`editorShape`](/api/config/js_kanban_editorshape_config/#-parameters-for-a-comments-type) configuration - -### Example - -~~~jsx {7-17} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards -}); -// update comment -board.updateComment({ - id: 1, - cardId: 1, - comment: { - id: 2, - cardId: 4, - text: "", - date: new Date("01/08/2021"), - html: "Updated comment" - } -}); -~~~ - -**Change log:** This method was introduced in version 1.4 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updaterow_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updaterow_method.md deleted file mode 100644 index bb43aef9..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/js_kanban_updaterow_method.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: updateRow() -title: updateRow Method -description: You can learn about the updateRow method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# updateRow() - -### Description - -@short: Modifies the data of a row by its ID - -### Usage - -~~~jsx {} -updateRow({ - id: string | number, - row?: object, - replace?: boolean -}): void; -~~~ - -### Parameters - -- `id` - (required) the identifier of the row you want to update -- `row` - (optional) an object containing the new data for the row. You can find the complete list of **row** parameters [**here**](api/config/js_kanban_rows_config.md) -- `replace` - (optional) controls whether the existing data is fully replaced or partially updated - - :::note - Setting the `replace` parameter to *true* will completely overwrite the old data with the new one. If it's false or omitted, only the specified values will be updated. - ::: - -### Example - -~~~jsx {8-15} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - rows -}); -// update row data with the "feature" ID -board.updateRow({ - id: "feature", - row: { - label: "Updated row", - collapsed: true - }, - replace: true -}); -~~~ - -**Change log**: -- The **id** and **row** parameters were added in v1.1 -- The **replace** parameter was added in v1.3 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_destructor_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_destructor_method.md deleted file mode 100644 index 004e6cf7..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_destructor_method.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -sidebar_label: destructor() -title: destructor Method -description: You can learn about the destructor method of Toolbar in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# destructor() - -### Description - -@short: Clears all HTML elements of the Toolbar and detaches any associated events. - -### Usage - -~~~jsx {} -destructor(): void; -~~~ - -### Example - -~~~jsx {6} -// create Kanban -const board = new kanban.Kanban("#root", {}); -// create Toolbar -const toolbar = new kanban.Toolbar("#toolbar", { api: board.api }); -// remove Toolbar -toolbar.destructor(); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_setconfig_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_setconfig_method.md deleted file mode 100644 index 86a0aa40..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_setconfig_method.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -sidebar_label: setConfig() -title: setConfig Method -description: You can learn about the setConfig method of Toolbar in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# setConfig() - -### Description - -@short: Updates the Toolbar with new configuration settings. - -### Usage - -~~~jsx {} -setConfig(config: object): void; -~~~ - -### Parameters - -- `config` - (required) an object containing the Toolbar configuration. Check out the full list of properties [here](api/overview/main_overview.md#toolbar-properties) - -:::note -Only the parameters you provide will be updated. -::: - -### Example - -~~~jsx {6-8} -// create Kanban -const board = new kanban.Kanban("#root", {}); -// create Toolbar -const toolbar = new kanban.Toolbar("#toolbar", { api: board.api }); -// update Toolbar configuration -toolbar.setConfig({ - items: ["search", "spacer", "sort"] -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_setlocale_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_setlocale_method.md deleted file mode 100644 index dea560ed..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/toolbar_setlocale_method.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_label: setLocale() -title: setLocale Method -description: You can learn about the setLocale method of Toolbar in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# setLocale() - -### Description - -@short: Updates the Toolbar of Kanban with a new locale - -### Usage - -~~~jsx {} -setLocale(null | locale?: object): void; -~~~ - -### Parameters - -- `null` - (optional) resets the Toolbar back to the default locale (*English*) -- `locale` - (optional) an object containing the new locale data to apply to the Toolbar - -:::info -The **Toolbar** in Kanban is a standalone component. To change the locale for the Toolbar only, use the `toolbar.setLocale()` method. Calling `toolbar.setLocale()` without any arguments (or with *null*) will reset the Toolbar to its default locale. For changing the locale of the Kanban board itself, use the [`kanban.setLocale()`](api/methods/js_kanban_setlocale_method.md) method. -::: - -### Example - -~~~jsx {8} -// create Kanban -const board = new kanban.Kanban("#root", {}); -// create Toolbar -const toolbar = new kanban.Toolbar("#toolbar", { api: board.api }); -// apply the "de" locale to Kanban -board.setLocale(de); -// apply the "de" locale to the Toolbar -toolbar.setLocale(de); -~~~ - -**Change log:** The **api** parameter was deprecated in v1.6 - -**Related articles:** [Localization](guides/localization.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/common_settings_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/common_settings_overview.md deleted file mode 100644 index 190dfbdd..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/common_settings_overview.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -sidebar_label: Common settings -title: Common settings -description: Here's an overview of the common settings for JavaScript Kanban in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, check out the API reference, try sample code and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# Common settings - -| Name | Description | -| --------------------------------------------- | -------------------------------------------------- | -| [](api/common/js_kanban_meta_parameter.md) | @getshort(api/common/js_kanban_meta_parameter.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/events_overview.md deleted file mode 100644 index 0a6238b2..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/events_overview.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -sidebar_label: Events overview -title: Events Overview -description: Explore the Events overview for JavaScript Kanban in the DHTMLX JavaScript Kanban library documentation. Check out developer guides and API references, experiment with code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# Events overview - -| Name | Description | -| --------------------------------------------------------- | ------------------------------------------------------- | -| [](api/events/js_kanban_addcard_event.md) | @getshort(api/events/js_kanban_addcard_event.md) | -| [](api/events/js_kanban_addcolumn_event.md) | @getshort(api/events/js_kanban_addcolumn_event.md) | -| [](api/events/js_kanban_addcomment_event.md) | @getshort(api/events/js_kanban_addcomment_event.md) | -| [](api/events/js_kanban_addrow_event.md) | @getshort(api/events/js_kanban_addrow_event.md) | -| [](api/events/js_kanban_addvote_event.md) | @getshort(api/events/js_kanban_addvote_event.md) | -| [](api/events/js_kanban_deletecard_event.md) | @getshort(api/events/js_kanban_deletecard_event.md) | -| [](api/events/js_kanban_deletecolumn_event.md) | @getshort(api/events/js_kanban_deletecolumn_event.md) | -| [](api/events/js_kanban_deletecomment_event.md) | @getshort(api/events/js_kanban_deletecomment_event.md) | -| [](api/events/js_kanban_deleterow_event.md) | @getshort(api/events/js_kanban_deleterow_event.md) | -| [](api/events/js_kanban_deletevote_event.md) | @getshort(api/events/js_kanban_deletevote_event.md) | -| [](api/events/js_kanban_dragcard_event.md) | @getshort(api/events/js_kanban_dragcard_event.md) | -| [](api/events/js_kanban_duplicatecard_event.md) | @getshort(api/events/js_kanban_duplicatecard_event.md) | -| [](api/events/js_kanban_enddragcard_event.md) | @getshort(api/events/js_kanban_enddragcard_event.md) | -| [](api/events/js_kanban_movecard_event.md) | @getshort(api/events/js_kanban_movecard_event.md) | -| [](api/events/js_kanban_movecolumn_event.md) | @getshort(api/events/js_kanban_movecolumn_event.md) | -| [](api/events/js_kanban_moverow_event.md) | @getshort(api/events/js_kanban_moverow_event.md) | -| [](api/events/js_kanban_redo_event.md) | @getshort(api/events/js_kanban_redo_event.md) | -| [](api/events/js_kanban_scroll_event.md) | @getshort(api/events/js_kanban_scroll_event.md) | -| [](api/events/js_kanban_selectcard_event.md) | @getshort(api/events/js_kanban_selectcard_event.md) | -| [](api/events/js_kanban_setedit_event.md) | @getshort(api/events/js_kanban_setedit_event.md) | -| [](api/events/js_kanban_setsearch_event.md) | @getshort(api/events/js_kanban_setsearch_event.md) | -| [](api/events/js_kanban_setsort_event.md) | @getshort(api/events/js_kanban_setsort_event.md) | -| [](api/events/js_kanban_startdragcard_event.md) | @getshort(api/events/js_kanban_startdragcard_event.md) | -| [](api/events/js_kanban_undo_event.md) | @getshort(api/events/js_kanban_undo_event.md) | -| [](api/events/js_kanban_unselectcard_event.md) | @getshort(api/events/js_kanban_unselectcard_event.md) | -| [](api/events/js_kanban_updatecard_event.md) | @getshort(api/events/js_kanban_updatecard_event.md) | -| [](api/events/js_kanban_updatecolumn_event.md) | @getshort(api/events/js_kanban_updatecolumn_event.md) | -| [](api/events/js_kanban_updatecomment_event.md) | @getshort(api/events/js_kanban_updatecomment_event.md) | -| [](api/events/js_kanban_updaterow_event.md) | @getshort(api/events/js_kanban_updaterow_event.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_eventbus_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_eventbus_overview.md deleted file mode 100644 index 279df6d2..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_eventbus_overview.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -sidebar_label: Event Bus methods -title: Event Bus Methods -description: Here's an overview of the Internal Event Bus methods for JavaScript Kanban, found in the DHTMLX JavaScript Kanban library documentation. You'll find developer guides, API references, code samples, live demos, and a free 30-day trial version of DHTMLX Kanban. ---- - -# Event Bus methods - -| Name | Description | -| -------------------------------------------------------- | ----------------------------------------------------------- | -| [](api/internal/js_kanban_detach_method.md) | @getshort(api/internal/js_kanban_detach_method.md) | -| [](api/internal/js_kanban_exec_method.md) | @getshort(api/internal/js_kanban_exec_method.md) | -| [](api/internal/js_kanban_intercept_method.md) | @getshort(api/internal/js_kanban_intercept_method.md) | -| [](api/internal/js_kanban_on_method.md) | @getshort(api/internal/js_kanban_on_method.md) | -| [](api/internal/js_kanban_setnext_method.md) | @getshort(api/internal/js_kanban_setnext_method.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_export_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_export_overview.md deleted file mode 100644 index 5640f1a7..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_export_overview.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -sidebar_label: Export methods -title: Export methods -description: The documentation for the DHTMLX JavaScript Kanban library includes an overview of Internal Export methods. It offers developer guides, API references, code samples, live demos, and a free 30-day trial of DHTMLX Kanban. ---- - -# Export methods - -| Name | Description | -| -------------------------------------------- | -------------------------------------------------- | -| [](api/internal/js_kanban_json_method.md) | @getshort(api/internal/js_kanban_json_method.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_rest_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_rest_overview.md deleted file mode 100644 index 85c3f431..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_rest_overview.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -sidebar_label: RestDataProvider methods -title: RestDataProvider methods -description: You can have an Internal RestDataProvider methods overview of JavaScript Kanban in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# RestDataProvider methods - -| Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------------ | -| [](api/provider/rest_methods/js_kanban_getcards_method.md) | @getshort(api/provider/rest_methods/js_kanban_getcards_method.md) | -| [](api/provider/rest_methods/js_kanban_getcolumns_method.md) | @getshort(api/provider/rest_methods/js_kanban_getcolumns_method.md) | -| [](api/provider/rest_methods/js_kanban_getlinks_method.md) | @getshort(api/provider/rest_methods/js_kanban_getlinks_method.md) | -| [](api/provider/rest_methods/js_kanban_getrows_method.md) | @getshort(api/provider/rest_methods/js_kanban_getrows_method.md) | -| [](api/provider/rest_methods/js_kanban_getusers_method.md) | @getshort(api/provider/rest_methods/js_kanban_getusers_method.md) | -| [](api/provider/rest_methods/js_kanban_send_method.md) | @getshort(api/provider/rest_methods/js_kanban_send_method.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_state_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_state_overview.md deleted file mode 100644 index 1024d697..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/internal_state_overview.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -sidebar_label: State methods -title: State methods -description: Here's a quick overview of Internal State methods in the JavaScript Kanban documentation for the DHTMLX JavaScript Kanban library. Check out developer guides, API references, try sample code and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# State methods - -| Name | Description | -| -------------------------------------------------------- | ------------------------------------------------------------ | -| [](api/internal/js_kanban_getreactivestate_method.md) | @getshort(api/internal/js_kanban_getreactivestate_method.md) | -| [](api/internal/js_kanban_getstate_method.md) | @getshort(api/internal/js_kanban_getstate_method.md) | -| [](api/internal/js_kanban_getstores_method.md) | @getshort(api/internal/js_kanban_getstores_method.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/main_overview.md deleted file mode 100644 index 751ed083..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/main_overview.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -sidebar_label: API overview -title: API Overview -description: Here is an overview of the JavaScript Kanban API found in the DHTMLX JavaScript Kanban library documentation. Explore developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# API overview - -## Kanban constructor - -~~~js -new kanban.Kanban("#root", { - // configuration parameters -}); -~~~ - -**Parameters**: - -- the HTML container (specified by the container's ID) -- an object containing configuration options ([see details](#kanban-properties)) - -## Toolbar constructor - -~~~js -new kanban.Toolbar("#toolbar", { - // configuration parameters -}); -~~~ - -**Parameters**: - -- the HTML container (specified by the container's ID) -- an object containing configuration options ([see details](#toolbar-properties)) - -## Kanban methods - -| Name | Description | -| -------------------------------------------------------- | ------------------------------------------------------- | -| [](api/methods/js_kanban_addcard_method.md) | @getshort(api/methods/js_kanban_addcard_method.md) | -| [](api/methods/js_kanban_addcolumn_method.md) | @getshort(api/methods/js_kanban_addcolumn_method.md) | -| [](api/methods/js_kanban_addcomment_method.md) | @getshort(api/methods/js_kanban_addcomment_method.md) | -| [](api/methods/js_kanban_addlink_method.md) | @getshort(api/methods/js_kanban_addlink_method.md) | -| [](api/methods/js_kanban_addrow_method.md) | @getshort(api/methods/js_kanban_addrow_method.md) | -| [](api/methods/js_kanban_deletecard_method.md) | @getshort(api/methods/js_kanban_deletecard_method.md) | -| [](api/methods/js_kanban_deletecolumn_method.md) | @getshort(api/methods/js_kanban_deletecolumn_method.md) | -| [](api/methods/js_kanban_deletecomment_method.md) | @getshort(api/methods/js_kanban_deletecomment_method.md) | -| [](api/methods/js_kanban_deletelink_method.md) | @getshort(api/methods/js_kanban_deletelink_method.md) | -| [](api/methods/js_kanban_deleterow_method.md) | @getshort(api/methods/js_kanban_deleterow_method.md) | -| [](api/methods/js_kanban_destructor_method.md) | @getshort(api/methods/js_kanban_destructor_method.md) | -| [](api/methods/js_kanban_duplicatecard_method.md) | @getshort(api/methods/js_kanban_duplicatecard_method.md) | -| [](api/methods/js_kanban_getareacards_method.md) | @getshort(api/methods/js_kanban_getareacards_method.md) | -| [](api/methods/js_kanban_getcard_method.md) | @getshort(api/methods/js_kanban_getcard_method.md) | -| [](api/methods/js_kanban_getcolumncards_method.md) | @getshort(api/methods/js_kanban_getcolumncards_method.md)| -| [](api/methods/js_kanban_getselection_method.md) | @getshort(api/methods/js_kanban_getselection_method.md) | -| [](api/methods/js_kanban_movecard_method.md) | @getshort(api/methods/js_kanban_movecard_method.md) | -| [](api/methods/js_kanban_movecolumn_method.md) | @getshort(api/methods/js_kanban_movecolumn_method.md) | -| [](api/methods/js_kanban_moverow_method.md) | @getshort(api/methods/js_kanban_moverow_method.md) | -| [](api/methods/js_kanban_parse_method.md) | @getshort(api/methods/js_kanban_parse_method.md) | -| [](api/methods/js_kanban_redo_method.md) | @getshort(api/methods/js_kanban_redo_method.md) | -| [](api/methods/js_kanban_scroll_method.md) | @getshort(api/methods/js_kanban_scroll_method.md) | -| [](api/methods/js_kanban_selectcard_method.md) | @getshort(api/methods/js_kanban_selectcard_method.md) | -| [](api/methods/js_kanban_serialize_method.md) | @getshort(api/methods/js_kanban_serialize_method.md) | -| [](api/methods/js_kanban_setconfig_method.md) | @getshort(api/methods/js_kanban_setconfig_method.md) | -| [](api/methods/js_kanban_setedit_method.md) | @getshort(api/methods/js_kanban_setedit_method.md) | -| [](api/methods/js_kanban_setlocale_method.md) | @getshort(api/methods/js_kanban_setlocale_method.md) | -| [](api/methods/js_kanban_setsearch_method.md) | @getshort(api/methods/js_kanban_setsearch_method.md) | -| [](api/methods/js_kanban_setsort_method.md) | @getshort(api/methods/js_kanban_setsort_method.md) | -| [](api/methods/js_kanban_undo_method.md) | @getshort(api/methods/js_kanban_undo_method.md) | -| [](api/methods/js_kanban_unselectcard_method.md) | @getshort(api/methods/js_kanban_unselectcard_method.md) | -| [](api/methods/js_kanban_updatecard_method.md) | @getshort(api/methods/js_kanban_updatecard_method.md) | -| [](api/methods/js_kanban_updatecolumn_method.md) | @getshort(api/methods/js_kanban_updatecolumn_method.md) | -| [](api/methods/js_kanban_updatecomment_method.md) | @getshort(api/methods/js_kanban_updatecomment_method.md) | -| [](api/methods/js_kanban_updaterow_method.md) | @getshort(api/methods/js_kanban_updaterow_method.md) | - -## Kanban internal API - -### Event Bus methods - -| Name | Description | -| --------------------------------------------------------- | ----------------------------------------------------------- | -| [](api/internal/js_kanban_detach_method.md) | @getshort(api/internal/js_kanban_detach_method.md) | -| [](api/internal/js_kanban_exec_method.md) | @getshort(api/internal/js_kanban_exec_method.md) | -| [](api/internal/js_kanban_intercept_method.md) | @getshort(api/internal/js_kanban_intercept_method.md) | -| [](api/internal/js_kanban_on_method.md) | @getshort(api/internal/js_kanban_on_method.md) | -| [](api/internal/js_kanban_setnext_method.md) | @getshort(api/internal/js_kanban_setnext_method.md) | - -### Export methods - -| Name | Description | -| -------------------------------------------- | -------------------------------------------------- | -| [](api/internal/js_kanban_json_method.md) | @getshort(api/internal/js_kanban_json_method.md) | - -### State methods - -| Name | Description | -| --------------------------------------------------------- | ------------------------------------------------------------ | -| [](api/internal/js_kanban_getreactivestate_method.md) | @getshort(api/internal/js_kanban_getreactivestate_method.md) | -| [](api/internal/js_kanban_getstate_method.md) | @getshort(api/internal/js_kanban_getstate_method.md) | -| [](api/internal/js_kanban_getstores_method.md) | @getshort(api/internal/js_kanban_getstores_method.md) | - -## Kanban events - -| Name | Description | -| :-------------------------------------------------------- | :------------------------------------------------------ | -| [](api/events/js_kanban_addcard_event.md) | @getshort(api/events/js_kanban_addcard_event.md) | -| [](api/events/js_kanban_addcolumn_event.md) | @getshort(api/events/js_kanban_addcolumn_event.md) | -| [](api/events/js_kanban_addcomment_event.md) | @getshort(api/events/js_kanban_addcomment_event.md) | -| [](api/events/js_kanban_addlink_event.md) | @getshort(api/events/js_kanban_addlink_event.md) | -| [](api/events/js_kanban_addrow_event.md) | @getshort(api/events/js_kanban_addrow_event.md) | -| [](api/events/js_kanban_addvote_event.md) | @getshort(api/events/js_kanban_addvote_event.md) | -| [](api/events/js_kanban_deletecard_event.md) | @getshort(api/events/js_kanban_deletecard_event.md) | -| [](api/events/js_kanban_deletecolumn_event.md) | @getshort(api/events/js_kanban_deletecolumn_event.md) | -| [](api/events/js_kanban_deletecomment_event.md) | @getshort(api/events/js_kanban_deletecomment_event.md) | -| [](api/events/js_kanban_deletelink_event.md) | @getshort(api/events/js_kanban_deletelink_event.md) | -| [](api/events/js_kanban_deleterow_event.md) | @getshort(api/events/js_kanban_deleterow_event.md) | -| [](api/events/js_kanban_deletevote_event.md) | @getshort(api/events/js_kanban_deletevote_event.md) | -| [](api/events/js_kanban_dragcard_event.md) | @getshort(api/events/js_kanban_dragcard_event.md) | -| [](api/events/js_kanban_duplicatecard_event.md) | @getshort(api/events/js_kanban_duplicatecard_event.md) | -| [](api/events/js_kanban_enddragcard_event.md) | @getshort(api/events/js_kanban_enddragcard_event.md) | -| [](api/events/js_kanban_movecard_event.md) | @getshort(api/events/js_kanban_movecard_event.md) | -| [](api/events/js_kanban_movecolumn_event.md) | @getshort(api/events/js_kanban_movecolumn_event.md) | -| [](api/events/js_kanban_moverow_event.md) | @getshort(api/events/js_kanban_moverow_event.md) | -| [](api/events/js_kanban_redo_event.md) | @getshort(api/events/js_kanban_redo_event.md) | -| [](api/events/js_kanban_scroll_event.md) | @getshort(api/events/js_kanban_scroll_event.md) | -| [](api/events/js_kanban_selectcard_event.md) | @getshort(api/events/js_kanban_selectcard_event.md) | -| [](api/events/js_kanban_setedit_event.md) | @getshort(api/events/js_kanban_setedit_event.md) | -| [](api/events/js_kanban_setsearch_event.md) | @getshort(api/events/js_kanban_setsearch_event.md) | -| [](api/events/js_kanban_setsort_event.md) | @getshort(api/events/js_kanban_setsort_event.md) | -| [](api/events/js_kanban_startdragcard_event.md) | @getshort(api/events/js_kanban_startdragcard_event.md) | -| [](api/events/js_kanban_undo_event.md) | @getshort(api/events/js_kanban_undo_event.md) | -| [](api/events/js_kanban_unselectcard_event.md) | @getshort(api/events/js_kanban_unselectcard_event.md) | -| [](api/events/js_kanban_updatecard_event.md) | @getshort(api/events/js_kanban_updatecard_event.md) | -| [](api/events/js_kanban_updatecolumn_event.md) | @getshort(api/events/js_kanban_updatecolumn_event.md) | -| [](api/events/js_kanban_updatecomment_event.md) | @getshort(api/events/js_kanban_updatecomment_event.md) | -| [](api/events/js_kanban_updaterow_event.md) | @getshort(api/events/js_kanban_updaterow_event.md) | - -## Kanban properties - -| Name | Description | -| :-------------------------------------------------------- | :------------------------------------------------------ | -| [](api/config/js_kanban_cardheight_config.md) | @getshort(api/config/js_kanban_cardheight_config.md) | -| [](api/config/js_kanban_cards_config.md) | @getshort(api/config/js_kanban_cards_config.md) | -| [](api/config/js_kanban_cardshape_config.md) | @getshort(api/config/js_kanban_cardshape_config.md) | -| [](api/config/js_kanban_cardtemplate_config.md) | @getshort(api/config/js_kanban_cardtemplate_config.md) | -| [](api/config/js_kanban_columnkey_config.md) | @getshort(api/config/js_kanban_columnkey_config.md) | -| [](api/config/js_kanban_columns_config.md) | @getshort(api/config/js_kanban_columns_config.md) | -| [](api/config/js_kanban_columnshape_config.md) | @getshort(api/config/js_kanban_columnshape_config.md) | -| [](api/config/js_kanban_currentuser_config.md) | @getshort(api/config/js_kanban_currentuser_config.md) | -| [](api/config/js_kanban_editor_config.md) | @getshort(api/config/js_kanban_editor_config.md) | -| [](api/config/js_kanban_editorshape_config.md) | @getshort(api/config/js_kanban_editorshape_config.md) | -| [](api/config/js_kanban_history_config.md) | @getshort(api/config/js_kanban_history_config.md) | -| [](api/config/js_kanban_links_config.md) | @getshort(api/config/js_kanban_links_config.md) | -| [](api/config/js_kanban_locale_config.md) | @getshort(api/config/js_kanban_locale_config.md) | -| [](api/config/js_kanban_readonly_config.md) | @getshort(api/config/js_kanban_readonly_config.md) | -| [](api/config/js_kanban_rendertype_config.md) | @getshort(api/config/js_kanban_rendertype_config.md) | -| [](api/config/js_kanban_rowkey_config.md) | @getshort(api/config/js_kanban_rowkey_config.md) | -| [](api/config/js_kanban_rows_config.md) | @getshort(api/config/js_kanban_rows_config.md) | -| [](api/config/js_kanban_rowshape_config.md) | @getshort(api/config/js_kanban_rowshape_config.md) | -| [](api/config/js_kanban_scrolltype_config.md) | @getshort(api/config/js_kanban_scrolltype_config.md) | - -## Toolbar methods - -| Name | Description | -| :-------------------------------------------------------- | :------------------------------------------------------ | -| [](api/methods/toolbar_destructor_method.md) | @getshort(api/methods/toolbar_destructor_method.md) | -| [](api/methods/toolbar_setconfig_method.md) | @getshort(api/methods/toolbar_setconfig_method.md) | -| [](api/methods/toolbar_setlocale_method.md) | @getshort(api/methods/toolbar_setlocale_method.md) | - -## Toolbar properties - -| Name | Description | -| :-------------------------------------------------------- | :------------------------------------------------------ | -| [](api/config/toolbar_api_config.md) | @getshort(api/config/toolbar_api_config.md) | -| [](api/config/toolbar_items_config.md) | @getshort(api/config/toolbar_items_config.md) | -| [](api/config/toolbar_locale_config.md) | @getshort(api/config/toolbar_locale_config.md) | - -## Common settings - -| Name | Description | -| :------------------------------------------ | :------------------------------------------------ | -| [](api/common/js_kanban_meta_parameter.md) | @getshort(api/common/js_kanban_meta_parameter.md) | - -## RestDataProvider API - -### RestDataProvider methods - -| Name | Description | -| ------------------------------------------------------------- | ------------------------------------------------------------------ | -| [](api/provider/rest_methods/js_kanban_getcards_method.md) | @getshort(api/provider/rest_methods/js_kanban_getcards_method.md) | -| [](api/provider/rest_methods/js_kanban_getcolumns_method.md) | @getshort(api/provider/rest_methods/js_kanban_getcolumns_method.md) | -| [](api/provider/rest_methods/js_kanban_getlinks_method.md) | @getshort(api/provider/rest_methods/js_kanban_getlinks_method.md) | -| [](api/provider/rest_methods/js_kanban_getrows_method.md) | @getshort(api/provider/rest_methods/js_kanban_getrows_method.md) | -| [](api/provider/rest_methods/js_kanban_getusers_method.md) | @getshort(api/provider/rest_methods/js_kanban_getusers_method.md) | -| [](api/provider/rest_methods/js_kanban_send_method.md) | @getshort(api/provider/rest_methods/js_kanban_send_method.md) | - -### RestDataProvider routes - -| Name | Description | -| ----------------------------------------------------------- | ------------------------------------------------------ | -| [GET `/cards`](api/provider/rest_routes/get_routes/js_kanban_get_cards_route.md) | @getshort(api/provider/rest_routes/get_routes/js_kanban_get_cards_route.md) | -| [GET `/columns`](api/provider/rest_routes/get_routes/js_kanban_get_columns_route.md)| @getshort(api/provider/rest_routes/get_routes/js_kanban_get_columns_route.md) | -| [GET `/links`](api/provider/rest_routes/get_routes/js_kanban_get_links_route.md)| @getshort(api/provider/rest_routes/get_routes/js_kanban_get_links_route.md) | -| [GET `/rows`](api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md)| @getshort(api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md) | -| [GET `/users`](api/provider/rest_routes/get_routes/js_kanban_get_users_route.md)| @getshort(api/provider/rest_routes/get_routes/js_kanban_get_users_route.md) | -| [GET `/uploads`](api/provider/rest_routes/get_routes/js_kanban_get_uploads_route.md)| @getshort(api/provider/rest_routes/get_routes/js_kanban_get_uploads_route.md) | -| [POST `/cards`](api/provider/rest_routes/post_routes/js_kanban_post_cards_route.md)| @getshort(api/provider/rest_routes/post_routes/js_kanban_post_cards_route.md) | -| [POST `/cards/{cardId}/comments`](api/provider/rest_routes/post_routes/js_kanban_post_cards_comments_route.md)| @getshort(api/provider/rest_routes/post_routes/js_kanban_post_cards_comments_route.md) | -| [POST `/cards/{cardId}/vote`](api/provider/rest_routes/post_routes/js_kanban_post_cards_votes_route.md)| @getshort(api/provider/rest_routes/post_routes/js_kanban_post_cards_votes_route.md) | -| [POST `/columns`](api/provider/rest_routes/post_routes/js_kanban_post_columns_route.md)| @getshort(api/provider/rest_routes/post_routes/js_kanban_post_columns_route.md) | -| [POST `/links`](api/provider/rest_routes/post_routes/js_kanban_post_links_route.md)| @getshort(api/provider/rest_routes/post_routes/js_kanban_post_links_route.md) | -| [POST `/rows`](api/provider/rest_routes/post_routes/js_kanban_post_rows_route.md)| @getshort(api/provider/rest_routes/post_routes/js_kanban_post_rows_route.md) | -| [POST `/uploads`](api/provider/rest_routes/post_routes/js_kanban_post_uploads_route.md)| @getshort(api/provider/rest_routes/post_routes/js_kanban_post_uploads_route.md) | -| [PUT `/cards`](api/provider/rest_routes/put_routes/js_kanban_put_cards_route.md)| @getshort(api/provider/rest_routes/put_routes/js_kanban_put_cards_route.md) | -| [PUT `/cards/{id}/move`](api/provider/rest_routes/put_routes/js_kanban_put_cards_move_route.md)| @getshort(api/provider/rest_routes/put_routes/js_kanban_put_cards_move_route.md) | -| [PUT `/cards/{cardId}/comments/{cardId}`](api/provider/rest_routes/put_routes/js_kanban_put_cards_comments_route.md)| @getshort(api/provider/rest_routes/put_routes/js_kanban_put_cards_comments_route.md) | -| [PUT `/columns`](api/provider/rest_routes/put_routes/js_kanban_put_columns_route.md)| @getshort(api/provider/rest_routes/put_routes/js_kanban_put_columns_route.md) | -| [PUT `/columns/{id}/move`](api/provider/rest_routes/put_routes/js_kanban_put_columns_move_route.md)| @getshort(api/provider/rest_routes/put_routes/js_kanban_put_columns_move_route.md) | -| [PUT `/rows`](api/provider/rest_routes/put_routes/js_kanban_put_rows_route.md)| @getshort(api/provider/rest_routes/put_routes/js_kanban_put_rows_route.md) | -| [PUT `/rows/{id}/move`](api/provider/rest_routes/put_routes/js_kanban_put_rows_move_route.md)| @getshort(api/provider/rest_routes/put_routes/js_kanban_put_rows_move_route.md) | -| [DELETE `/cards`](api/provider/rest_routes/delete_routes/js_kanban_delete_cards_route.md)| @getshort(api/provider/rest_routes/delete_routes/js_kanban_delete_cards_route.md) | -| [DELETE `/cards/{cardId}/comments/{cardId}`](api/provider/rest_routes/delete_routes/js_kanban_delete_cards_comments_route.md)| @getshort(api/provider/rest_routes/delete_routes/js_kanban_delete_cards_comments_route.md) | -| [DELETE `/cards/{cardId}/vote`](api/provider/rest_routes/delete_routes/js_kanban_delete_cards_votes_route.md)| @getshort(api/provider/rest_routes/delete_routes/js_kanban_delete_cards_votes_route.md) | -| [DELETE `/columns`](api/provider/rest_routes/delete_routes/js_kanban_delete_columns_route.md)| @getshort(api/provider/rest_routes/delete_routes/js_kanban_delete_columns_route.md) | -| [DELETE `/links`](api/provider/rest_routes/delete_routes/js_kanban_delete_links_route.md)| @getshort(api/provider/rest_routes/delete_routes/js_kanban_delete_links_route.md) | -| [DELETE `/rows`](api/provider/rest_routes/delete_routes/js_kanban_delete_rows_route.md)| @getshort(api/provider/rest_routes/delete_routes/js_kanban_delete_rows_route.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md deleted file mode 100644 index 633921ae..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: Methods overview -title: Methods Overview -description: Here's a Methods overview for JavaScript Kanban in the DHTMLX JavaScript Kanban library documentation. Check out developer guides and API references, explore code examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# Methods overview - -| Name | Description | -| -------------------------------------------------------- | ------------------------------------------------------- | -| [](api/methods/js_kanban_addcard_method.md) | @getshort(api/methods/js_kanban_addcard_method.md) | -| [](api/methods/js_kanban_addcolumn_method.md) | @getshort(api/methods/js_kanban_addcolumn_method.md) | -| [](api/methods/js_kanban_addcomment_method.md) | @getshort(api/methods/js_kanban_addcomment_method.md) | -| [](api/methods/js_kanban_addlink_method.md) | @getshort(api/methods/js_kanban_addlink_method.md) | -| [](api/methods/js_kanban_addrow_method.md) | @getshort(api/methods/js_kanban_addrow_method.md) | -| [](api/methods/js_kanban_deletecard_method.md) | @getshort(api/methods/js_kanban_deletecard_method.md) | -| [](api/methods/js_kanban_deletecolumn_method.md) | @getshort(api/methods/js_kanban_deletecolumn_method.md) | -| [](api/methods/js_kanban_deletecomment_method.md) | @getshort(api/methods/js_kanban_deletecomment_method.md) | -| [](api/methods/js_kanban_deletelink_method.md) | @getshort(api/methods/js_kanban_deletelink_method.md) | -| [](api/methods/js_kanban_deleterow_method.md) | @getshort(api/methods/js_kanban_deleterow_method.md) | -| [](api/methods/js_kanban_destructor_method.md) | @getshort(api/methods/js_kanban_destructor_method.md) | -| [](api/methods/js_kanban_duplicatecard_method.md) | @getshort(api/methods/js_kanban_duplicatecard_method.md) | -| [](api/methods/js_kanban_getareacards_method.md) | @getshort(api/methods/js_kanban_getareacards_method.md) | -| [](api/methods/js_kanban_getcard_method.md) | @getshort(api/methods/js_kanban_getcard_method.md) | -| [](api/methods/js_kanban_getcolumncards_method.md) | @getshort(api/methods/js_kanban_getcolumncards_method.md)| -| [](api/methods/js_kanban_getselection_method.md) | @getshort(api/methods/js_kanban_getselection_method.md) | -| [](api/methods/js_kanban_movecard_method.md) | @getshort(api/methods/js_kanban_movecard_method.md) | -| [](api/methods/js_kanban_movecolumn_method.md) | @getshort(api/methods/js_kanban_movecolumn_method.md) | -| [](api/methods/js_kanban_moverow_method.md) | @getshort(api/methods/js_kanban_moverow_method.md) | -| [](api/methods/js_kanban_parse_method.md) | @getshort(api/methods/js_kanban_parse_method.md) | -| [](api/methods/js_kanban_redo_method.md) | @getshort(api/methods/js_kanban_redo_method.md) | -| [](api/methods/js_kanban_scroll_method.md) | @getshort(api/methods/js_kanban_scroll_method.md) | -| [](api/methods/js_kanban_selectcard_method.md) | @getshort(api/methods/js_kanban_selectcard_method.md) | -| [](api/methods/js_kanban_serialize_method.md) | @getshort(api/methods/js_kanban_serialize_method.md) | -| [](api/methods/js_kanban_setconfig_method.md) | @getshort(api/methods/js_kanban_setconfig_method.md) | -| [](api/methods/js_kanban_setedit_method.md) | @getshort(api/methods/js_kanban_setedit_method.md) | -| [](api/methods/js_kanban_setlocale_method.md) | @getshort(api/methods/js_kanban_setlocale_method.md) | -| [](api/methods/js_kanban_setsearch_method.md) | @getshort(api/methods/js_kanban_setsearch_method.md) | -| [](api/methods/js_kanban_setsort_method.md) | @getshort(api/methods/js_kanban_setsort_method.md) | -| [](api/methods/js_kanban_undo_method.md) | @getshort(api/methods/js_kanban_undo_method.md) | -| [](api/methods/js_kanban_unselectcard_method.md) | @getshort(api/methods/js_kanban_unselectcard_method.md) | -| [](api/methods/js_kanban_updatecard_method.md) | @getshort(api/methods/js_kanban_updatecard_method.md) | -| [](api/methods/js_kanban_updatecolumn_method.md) | @getshort(api/methods/js_kanban_updatecolumn_method.md) | -| [](api/methods/js_kanban_updatecomment_method.md) | @getshort(api/methods/js_kanban_updatecomment_method.md) | -| [](api/methods/js_kanban_updaterow_method.md) | @getshort(api/methods/js_kanban_updaterow_method.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md deleted file mode 100644 index c99ab89d..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_label: Properties overview -title: Properties Overview -description: Explore the Properties overview of JavaScript Kanban in the DHTMLX JavaScript Kanban library documentation. Check out developer guides and API references, experiment with code samples and live demos, and download a free 30-day trial version of DHTMLX Kanban. ---- - -# Kanban properties overview - -For setting up the **Kanban**, see the [Configuration](guides/configuration.md) section. - -| Name | Description | -| --------------------------------------------------------- | ------------------------------------------------------- | -| [](api/config/js_kanban_cardheight_config.md) | @getshort(api/config/js_kanban_cardheight_config.md) | -| [](api/config/js_kanban_cards_config.md) | @getshort(api/config/js_kanban_cards_config.md) | -| [](api/config/js_kanban_cardshape_config.md) | @getshort(api/config/js_kanban_cardshape_config.md) | -| [](api/config/js_kanban_cardtemplate_config.md) | @getshort(api/config/js_kanban_cardtemplate_config.md) | -| [](api/config/js_kanban_columnkey_config.md) | @getshort(api/config/js_kanban_columnkey_config.md) | -| [](api/config/js_kanban_columns_config.md) | @getshort(api/config/js_kanban_columns_config.md) | -| [](api/config/js_kanban_columnshape_config.md) | @getshort(api/config/js_kanban_columnshape_config.md) | -| [](api/config/js_kanban_currentuser_config.md) | @getshort(api/config/js_kanban_currentuser_config.md) | -| [](api/config/js_kanban_editor_config.md) | @getshort(api/config/js_kanban_editor_config.md) | -| [](api/config/js_kanban_editorshape_config.md) | @getshort(api/config/js_kanban_editorshape_config.md) | -| [](api/config/js_kanban_history_config.md) | @getshort(api/config/js_kanban_history_config.md) | -| [](api/config/js_kanban_links_config.md) | @getshort(api/config/js_kanban_links_config.md) | -| [](api/config/js_kanban_locale_config.md) | @getshort(api/config/js_kanban_locale_config.md) | -| [](api/config/js_kanban_readonly_config.md) | @getshort(api/config/js_kanban_readonly_config.md) | -| [](api/config/js_kanban_rendertype_config.md) | @getshort(api/config/js_kanban_rendertype_config.md) | -| [](api/config/js_kanban_rowkey_config.md) | @getshort(api/config/js_kanban_rowkey_config.md) | -| [](api/config/js_kanban_rows_config.md) | @getshort(api/config/js_kanban_rows_config.md) | -| [](api/config/js_kanban_rowshape_config.md) | @getshort(api/config/js_kanban_rowshape_config.md) | -| [](api/config/js_kanban_scrolltype_config.md) | @getshort(api/config/js_kanban_scrolltype_config.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/rest_routes_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/rest_routes_overview.md deleted file mode 100644 index 58002ce5..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/rest_routes_overview.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -sidebar_label: REST routes overview -title: REST routes overview -description: You can find an overview of Internal RestDataProvider routes for JavaScript Kanban in the DHTMLX JavaScript Kanban library documentation. Explore developer guides and API references, experiment with code samples and live demos, and download a free 30-day trial version of DHTMLX Kanban. ---- - -# REST routes overview - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -This page lists all REST routes along with brief descriptions and links to detailed pages.
It's a good idea to check out [Working with Server](guides/working_with_server.md) before exploring the individual routes. - ---- - -For easy navigation, you can use either the tabs below or the side menu: -- The side menu organizes routes by HTTP methods -- The tabs below help you quickly identify which routes correspond to different operations - -
- - -

These routes handle operations related to cards:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HTTP methodRouteDescription
`GET`[/cards](api/provider/rest_routes/get_routes/js_kanban_get_cards_route.md)Retrieves all cards and returns a JSON object containing an array of card objects
`POST`[/cards](api/provider/rest_routes/post_routes/js_kanban_post_cards_route.md)Adds a new card and returns a JSON object with the new card's ID
`PUT`[/cards](api/provider/rest_routes/put_routes/js_kanban_put_cards_route.md)Updates a specific card's data and returns an empty JSON object
`PUT`[/cards/id/move](api/provider/rest_routes/put_routes/js_kanban_put_cards_move_route.md)Moves cards to a designated position
`DELETE`[/cards](api/provider/rest_routes/delete_routes/js_kanban_delete_cards_route.md)Removes a card's data
-
- - -

These routes cover operations on rows (swimlanes):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HTTP methodRouteDescription
`GET`[/rows](api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md)Retrieves all rows and returns a JSON object with an array of swimlane data objects
`POST`[/rows](api/provider/rest_routes/post_routes/js_kanban_post_rows_route.md)Adds a new row and returns a JSON object containing the row ID
`PUT`[/rows](api/provider/rest_routes/put_routes/js_kanban_put_rows_route.md)Updates a specific row's data and returns an empty JSON object
`PUT`[/rows/id/move](api/provider/rest_routes/put_routes/js_kanban_put_rows_move_route.md)Moves a row to a specified position
`DELETE`[/rows](api/provider/rest_routes/delete_routes/js_kanban_delete_rows_route.md)Deletes data for a row
-
- - -

These routes handle operations on columns:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HTTP methodRouteDescription
`GET`[/columns](api/provider/rest_routes/get_routes/js_kanban_get_columns_route.md)Retrieves all columns and returns a JSON object with an array of column data objects
`POST`[/columns](api/provider/rest_routes/post_routes/js_kanban_post_columns_route.md)Adds a new column and returns a JSON object with the column ID
`PUT`[/columns](api/provider/rest_routes/put_routes/js_kanban_put_columns_route.md)Updates data for a specific column and returns an empty JSON object
`PUT`[/columns/id/move](api/provider/rest_routes/put_routes/js_kanban_put_columns_move_route.md)Moves a column to a chosen position
`DELETE`[/columns](api/provider/rest_routes/delete_routes/js_kanban_delete_columns_route.md)Deletes a column's data
-
- - -

These routes are for managing links:

- - - - - - - - - - - - - - - - - - - - - - - - - -
HTTP methodRouteDescription
`GET`[/links](api/provider/rest_routes/get_routes/js_kanban_get_links_route.md)Retrieves all links and returns a JSON object with an array of link objects
`POST`[/links](api/provider/rest_routes/post_routes/js_kanban_post_links_route.md)Creates a new link and returns a JSON object with the new link ID
`DELETE`[/links](api/provider/rest_routes/delete_routes/js_kanban_delete_links_route.md)Deletes a link's data
-
- - -

These routes manage uploads (files sent to the server):

- - - - - - - - - - - - - - - - - - - - -
HTTP methodRouteDescription
`GET`[/uploads](api/provider/rest_routes/get_routes/js_kanban_get_uploads_route.md)Fetches a requested binary file from the server
`POST`[/uploads](api/provider/rest_routes/post_routes/js_kanban_post_uploads_route.md)Uploads a binary file to the server and returns a JSON object with its ID, name, and URL
-
- -
-
\ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/toolbar_methods_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/toolbar_methods_overview.md deleted file mode 100644 index 889dbb2f..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/toolbar_methods_overview.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -sidebar_label: Toolbar methods overview -title: Toolbar Methods Overview -description: This section provides an overview of Toolbar methods available in the DHTMLX JavaScript Kanban library. Explore developer guides, API references, try out examples and live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# Toolbar methods overview - -| Name | Description | -| -------------------------------------------------------- | ------------------------------------------------------- | -| [](api/methods/toolbar_destructor_method.md) | @getshort(api/methods/toolbar_destructor_method.md) | -| [](api/methods/toolbar_setconfig_method.md) | @getshort(api/methods/toolbar_setconfig_method.md) | -| [](api/methods/toolbar_setlocale_method.md) | @getshort(api/methods/toolbar_setlocale_method.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/toolbar_properties_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/toolbar_properties_overview.md deleted file mode 100644 index 5005cd0b..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/toolbar_properties_overview.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -sidebar_label: Toolbar properties overview -title: Toolbar Properties Overview -description: You can have a Toolbar Properties overview of JavaScript Kanban in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Toolbar properties overview - -For setting up the **Toolbar**, take a look at the [Configuration](guides/configuration.md#toolbar) section. - -| Name | Description | -| --------------------------------------------------------- | ------------------------------------------------------- | -| [](api/config/toolbar_api_config.md) | @getshort(api/config/toolbar_api_config.md) | -| [](api/config/toolbar_items_config.md) | @getshort(api/config/toolbar_items_config.md) | -| [](api/config/toolbar_locale_config.md) | @getshort(api/config/toolbar_locale_config.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getcards_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getcards_method.md deleted file mode 100644 index 8d509b28..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getcards_method.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: getCards() -title: getCards REST Method -description: You can learn about the getCards REST method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getCards() - -### Description - -@short: Retrieves a promise containing the cards data - -:::info -The **getCards()** method is part of the **RestDataProvider** service designed for server interactions -::: - -### Usage - -~~~jsx {} -getCards(): promise; -~~~ - -### Returns - -The **getCards()** method initiates a **GET** request to the server and returns a **promise** that resolves with the cards data - -### Example - -~~~jsx {2,5} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getCards(), - restProvider.getColumns() -]).then(([cards, columns]) => { - const board = new kanban.Kanban("#root", { - cards, - columns - }); - board.api.setNext(restProvider); -}); -~~~ - -**Related articles:** [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getcolumns_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getcolumns_method.md deleted file mode 100644 index 24f9cb35..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getcolumns_method.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: getColumns() -title: getColumns REST Method -description: You can learn about the getColumns REST method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getColumns() - -### Description - -@short: Retrieves a promise containing the columns data - -:::info -The **getColumns()** method belongs to the **RestDataProvider** service, which is designed to handle server interactions. -::: - -### Usage - -~~~jsx {} -getColumns(): promise; -~~~ - -### Returns - -The **getColumns()** method makes a **GET** request to the server and returns a **promise** that resolves with the columns data. - -### Example - -~~~jsx {2,6} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getCards(), - restProvider.getColumns() -]).then(([cards, columns]) => { - const board = new kanban.Kanban("#root", { - cards, - columns - }); - board.api.setNext(restProvider); -}); -~~~ - -**Related articles:** [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getlinks_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getlinks_method.md deleted file mode 100644 index 895b7816..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getlinks_method.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: getLinks() -title: getLinks REST Method -description: You can learn about the getLinks REST method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getLinks() - -### Description - -@short: Retrieves a promise containing the links data - -:::info -The **getLinks()** method is included in the **RestDataProvider** service, which is designed for server interactions -::: - -### Usage - -~~~jsx {} -getLinks(): promise; -~~~ - -### Returns - -The **getLinks()** method performs a **GET** request to the server and returns a **promise** that resolves with the links data. - -### Example - -~~~jsx {2,7} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getCards(), - restProvider.getColumns(), - restProvider.getLinks(), -]).then(([cards, columns, links]) => { - const board = new kanban.Kanban("#root", { - cards, - columns, - links - }); - board.api.setNext(restProvider); -}); -~~~ - -**Change log:** This method was introduced in version 1.5 - -**Related articles:** [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getrows_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getrows_method.md deleted file mode 100644 index fa52eaba..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getrows_method.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -sidebar_label: getRows() -title: getRows REST Method -description: You can learn about the getRows REST method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getRows() - -### Description - -@short: Retrieves a promise containing the rows data - -:::info -The **getRows()** method is part of the **RestDataProvider** service designed for server interactions -::: - -### Usage - -~~~jsx {} -getRows(): promise; -~~~ - -### Returns - -The **getRows()** method makes a **GET** request to the server and returns a **promise** that resolves with the rows data - -### Example - -~~~jsx {2,7} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getCards(), - restProvider.getColumns(), - restProvider.getRows() -]).then(([cards, columns, rows]) => { - const board = new kanban.Kanban("#root", { - cards, - columns, - rows, - rowKey: "type" - }); - board.api.setNext(restProvider); -}); -~~~ - -**Related articles:** [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getusers_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getusers_method.md deleted file mode 100644 index 258b87b2..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_getusers_method.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -sidebar_label: getUsers() -title: getUsers REST Method -description: You can learn about the getUsers REST method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# getUsers() - -### Description - -@short: Retrieves a promise containing the users data - -:::info -The **getUsers()** method belongs to the **RestDataProvider** service designed for server communication -::: - -### Usage - -~~~jsx {} -getUsers(): promise; -~~~ - -### Returns - -The **getUsers()** method makes a **GET** request to the server and returns a **promise** that resolves with the users data - -### Example - -~~~jsx {2,8,21} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getCards(), - restProvider.getColumns(), - restProvider.getRows(), - restProvider.getUsers(), -]).then(([cards, columns, rows, users]) => { - const board = new kanban.Kanban("#root", { - cards, - columns, - rows, - rowKey: "type", - editorShape: [ - ...kanban.defaultEditorShape, - { - type: "multiselect", - key: "users", - label: "Users", - values: users - } - ] - }); - board.api.setNext(restProvider); -}); -~~~ - -**Change log:** The method was introduced in v1.3 - -**Related articles:** [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_send_method.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_send_method.md deleted file mode 100644 index 36e2c7a2..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_methods/js_kanban_send_method.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -sidebar_label: send() -title: send() Method -description: You can learn about the send() method in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# send() - -### Description - -@short: Sends an HTTP request to the server and returns a promise, which may include data depending on the request. - -All communication with the server happens through the **send()** method, which is part of the [**RestDataProvider**](guides/working_with_server.md/#restdataprovider) service. - -### Usage - -~~~js -send( - url: string, - method: "GET" | "POST" | "PUT" | "DELETE" | string, - data?: object, - headers?: object, -): promise; -~~~ - -### Parameters - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `url` | string | *Required*. The server endpoint where the request is sent. | -| `method` | string | *Required*. The HTTP method to use (GET, POST, PUT, DELETE). | -| `data` | object | *Optional*. Parameters to send along with the request. By default, parameters from the triggered event are sent, but you can add extra ones with a custom object. See the [Example](#examples) below. | -| `headers` | object | *Optional*. The default header is **Content-Type** set to *application/json*. Additional headers can be included via the **customHeaders** parameter. See the [Example](#examples) below. | - -### Response - -This method returns a promise that may include data depending on the request type. - -The promise resolves on a successful request. If the request fails, an error is thrown. - -You can customize the response handling. To manage errors, use the **catch** method on the returned promise. - -~~~jsx -restDataProvider.send(url, method, data) -.then(data => { - ... // success: handle the data -}) -.catch(err => { - ... // error handling -}); -~~~ - -### Examples - -This example shows how to send a request with extra parameters beyond the defaults: - -~~~jsx {14-20} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getCards(), - restProvider.getColumns() -]).then(([cards, columns]) => { - const board = new kanban.Kanban("#root", { - cards, - columns, - //configuration parameters - }); - - board.api.on("add-card", obj => { - obj.custom = "custom prop"; - restProvider.send(`cards`, "POST", obj).then(data => { - board.api.parse({ cards: data }); - return Promise.resolve(); - }); - }); - - board.api.setNext(restProvider); -}); -~~~ - -Here's how you can add extra headers when using the **send()** method: - -~~~js -const customHeaders = { - "Authorization": "Bearer", - "Custom header": "some value", -}; - -board.api.on("add-cards", obj => { - restDataProvider.send("cards", "POST", obj, customHeaders); -}); -~~~ - -Alternatively, you can override RestDataProvider to add headers, giving you more control over the data sent to the server: - -~~~jsx {3-8} -const url = "https://some_backend_url"; - -class MyDataProvider extends RestDataProvider { - send(url, method, data, headers) { - headers = { ...headers, "SomeToken": "abc" }; - return super.send(url, method, data, headers); - } -} - -board.api.setNext(new MyDataProvider(url)); -~~~ - ---- - -**Related articles:** [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_comments_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_comments_route.md deleted file mode 100644 index 48ce8d8e..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_comments_route.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -sidebar_label: DELETE /cards/{id}/comments/{id} -title: DELETE /cards/{cardId}/comments/{commentId} -description: You can learn about the DELETE /cards/{cardId}/comments/{commentId} REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# DELETE `/cards/{cardId}/comments/{commentId}` - -### Description - -@short: Deletes a comment from a card - -This route processes an **HTTP DELETE** request sent to the `cards/{cardId}/comments/{commentId}` endpoint. - -### Path parameters - -The following parameters are included in the request URL: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `cardId` | number | *Required*. The ID of the card from which the comment will be deleted. | -| `commentId` | number | *Required*. The ID of the comment that needs to be removed. | - -### Payload - -No payload is needed for this request. - -### Response - -The server responds with a JSON object containing the user ID of the person who deleted the comment. - -Example: - -~~~json -{ - "id": 4 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or if it failed (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_route.md deleted file mode 100644 index c895bd94..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_route.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: DELETE /cards -title: DELETE /cards -description: You can learn about the DELETE /cards REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# DELETE `/cards` - -### Description - -@short: Removes data from a card - -This route processes an **HTTP DELETE** request sent to the `/cards/{id}` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The ID of the card to be removed.| - -### Payload - -No payload needs to be sent. - -### Response - -No content is returned. The HTTP status code indicates the outcome: success if the status is 200, or failure if it's 500. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_votes_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_votes_route.md deleted file mode 100644 index 22ab515f..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_cards_votes_route.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_label: DELETE /cards/{id}/vote -title: DELETE /cards/{cardId}/vote -description: You can learn about the DELETE /cards/{cardId}/vote REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# DELETE `/cards/{cardId}/vote` - -### Description - -@short: This endpoint removes a vote from a specified card and responds with a JSON object containing the user ID who removed the vote. - -This route processes an **HTTP DELETE** request sent to the `/cards/{cardId}/vote` URL. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `cardId` | number | *Required*. The ID of the card from which the vote will be removed.| - -### Payload - -No payload is necessary for this request. - -### Response - -The response returns a JSON object with the user ID that removed the vote. - -Example: - -~~~json -{ - "id": 1 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_columns_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_columns_route.md deleted file mode 100644 index ce8df1d6..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_columns_route.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: DELETE /columns -title: DELETE /columns -description: You can learn about the DELETE /columns REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# DELETE `/columns` - -### Description - -@short: Removes a column's data - -This route processes the **HTTP DELETE** request sent to the `/columns/{id}` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The ID of the column to be removed.| - -### Payload - -No payload is necessary. - -### Response - -No content is returned. The HTTP status code indicates the outcome: success with status 200 or failure with status 500. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_links_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_links_route.md deleted file mode 100644 index cc6c2fcb..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_links_route.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -sidebar_label: DELETE /links -title: DELETE /links -description: You can learn about the DELETE /links REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# DELETE `/links` - -### Description - -@short: Removes a link's data - -This route processes an **HTTP DELETE** request sent to the `/links/{id}` endpoint. - -### Path parameters - -The following parameter should be included in the request URL: - -| Name | Type | Description | -| ---- | ------- | ----------- | -| `id` | number | *Required*. The identifier of the link to be removed. | - -### Payload - -No payload is necessary. - -### Response - -No content is returned. The HTTP status code indicates whether the operation was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: -- [Working with server](guides/working_with_server.md) -- [getLinks()](api/provider/rest_methods/js_kanban_getlinks_method.md) -- [links](api/config/js_kanban_links_config.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_rows_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_rows_route.md deleted file mode 100644 index 5242b69b..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/delete_routes/js_kanban_delete_rows_route.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: DELETE /rows -title: DELETE /rows -description: You can learn about the DELETE /rows REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# DELETE `/rows` - -### Description - -@short: Removes data from a row (swimlane) - -This route processes the **HTTP DELETE** request sent to the `/rows/{id}` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The ID of the row to delete.| - -### Payload - -No payload needs to be sent. - -### Response - -No content is returned. The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_cards_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_cards_route.md deleted file mode 100644 index cffe3cba..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_cards_route.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -sidebar_label: GET /cards -title: GET /cards -description: Explore the GET /cards REST route in the DHTMLX JavaScript Kanban library documentation. Check out developer guides, API references, sample code, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# GET `/cards` - -### Description - -@short: Retrieves data for all cards and returns a JSON object containing an array of card objects. - -This route processes an **HTTP GET** request sent to the `/cards` endpoint. - -### Payload - -No payload is needed. - -### Response - -The route responds with a JSON object that includes an array of all card objects. - -Example: - -~~~json -[ - { - "id": 4, - "label": "Set the tasks priorities", - "description": "", - "column": 2, - "row": 1, - "start_date": "2018-01-01T00:00:00Z", - "end_date": null, - "progress": 75, - "attached": [], - "color": "#FFC975", - "users": [] - }, - { - "id": 5, - "label": "Custom icons", - "description": "", - "column": 2, - "row": 2, - "start_date": "2019-01-01T00:00:00Z", - "end_date": null, - "progress": 0, - "attached": [], - "color": "#65D3B3", - "users": [] - }, - { - "id": 6, - "label": "Integration with Gantt", - "description": "", - "column": 2, - "row": 2, - "start_date": "2020-01-01T00:00:00Z", - "end_date": null, - "progress": 75, - "attached": [], - "color": "#FFC975", - "users": [] - }, -] -~~~ - -:::note -The start and end dates for events must follow the ISO format **yyyy-MM-dd'T'HH:mm:ss.SSSXXX** -::: - -For a different example of the returned object, see [**cards**](api/config/js_kanban_cards_config.md). - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: -- [Working with server](guides/working_with_server.md) -- [getCards()](api/provider/rest_methods/js_kanban_getcards_method.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_columns_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_columns_route.md deleted file mode 100644 index a504c059..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_columns_route.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -sidebar_label: GET /columns -title: GET /columns -description: This section covers the GET /columns REST route in the DHTMLX JavaScript Kanban library documentation. It includes developer guides, API reference, code examples, live demos, and a free 30-day trial download of DHTMLX Kanban. ---- - -# GET `/columns` - -### Description - -@short: Retrieves data for all columns and returns a JSON object containing an array of column data objects. - -This route responds to an **HTTP GET** request sent to the `/columns` endpoint. - -### Payload - -No payload needs to be sent. - -### Response - -The response is a JSON object that includes an array of column data objects. - -Example: - -~~~json -[ - { - "id": 1, - "label": "Backlog", - "collapsed": false - }, - { - "id": 2, - "label": "In Progress", - "collapsed": false - }, - { - "id": 3, - "label": "Testing", - "collapsed": false - }, - { - "id": 4, - "label": "Done", - "collapsed": false - } -] -~~~ - -For another example of the returned object, check out [**columns**](api/config/js_kanban_columns_config.md). - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: -- [Working with server](guides/working_with_server.md) -- [getColumns()](api/provider/rest_methods/js_kanban_getcolumns_method.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_links_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_links_route.md deleted file mode 100644 index 790e016e..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_links_route.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -sidebar_label: GET /links -title: GET /links -description: Explore the GET /links REST route in the DHTMLX JavaScript Kanban library documentation. Find developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# GET `/links` - -### Description - -@short: Retrieves data for all links and returns a JSON object containing an array of link objects. - -This route processes **HTTP GET** requests sent to the `/links` endpoint. - -### Payload - -No payload is needed. - -### Response - -The response includes a JSON object with an array of all link objects. - -Example: - -~~~json -[ - { - "id": 1, - "source": 2, - "target": 5, - "relation": "relatesTo", - }, - { - "id": 2, - "source": 4, - "target": 9, - "relation": "relatesTo", - }, -] -~~~ - -For another example of the returned object, see [**links**](api/config/js_kanban_links_config.md). - -The HTTP status code indicates success (response.status == 200) or failure (response.status == 500). - ---- - -**Related articles**: -- [Working with server](guides/working_with_server.md) -- [getLinks()](api/provider/rest_methods/js_kanban_getlinks_method.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md deleted file mode 100644 index 7344aea2..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -sidebar_label: GET /rows -title: GET /rows -description: Explore the GET /rows REST route in the DHTMLX JavaScript Kanban library documentation. Find developer guides, API references, sample code, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# GET `/rows` - -### Description - -@short: Retrieves data for all rows and returns a JSON object containing an array of row (swimlane) data objects. - -This route processes **HTTP GET** requests sent to the `/rows` endpoint. - -### Payload - -No payload is needed. - -### Response - -The response includes a JSON object with an array of row data objects. - -Example: - -~~~json -[ - { - "id": 1, - "label": "Feature", - "collapsed": false - }, - { - "id": 2, - "label": "Task", - "collapsed": false - } -] -~~~ - -For a different example of the returned object, see [**rows**](api/config/js_kanban_rows_config.md). - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: -- [Working with server](guides/working_with_server.md) -- [getRows()](api/provider/rest_methods/js_kanban_getrows_method.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_uploads_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_uploads_route.md deleted file mode 100644 index 04dade15..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_uploads_route.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -sidebar_label: GET /uploads -title: GET /uploads -description: Explore the GET /uploads REST endpoint in the DHTMLX JavaScript Kanban library documentation. Find developer guides, API references, sample code, live demos, and download a free 30-day trial of DHTMLX Kanban. ---- - -# GET `/uploads` - -### Description - -@short: Retrieves the specified binary file from the server - -This route processes an **HTTP GET** request directed to the `/uploads/{id}/{name}` URL. - -### Path parameters - -The request URL includes the following parameters: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The unique identifier of the file to retrieve.| -| `name` | string | *Required*. The filename of the file being requested.| - -### Payload - -No payload is needed for this request. - -### Response - -The server responds with the requested binary file. - -The HTTP status code indicates the outcome: 200 means success, while 500 indicates an error. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_users_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_users_route.md deleted file mode 100644 index ea393e5f..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/get_routes/js_kanban_get_users_route.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: GET /users -title: GET /users -description: You can learn about the GET /users REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# GET `/users` - -### Description - -@short: Retrieves data for all users and returns a JSON object containing an array of user objects. - -This route processes an **HTTP GET** request sent to the `/users` endpoint. - -### Payload - -No payload is necessary. - -### Response - -The response includes a JSON object with an array of user data objects. - -Example: - -~~~json -[ - { - "id": 1, - "label": "Jhon", - "avatar": "https://serv.com/images/jhon.png" - }, - { - "id": 2, - "label": "Ben", - "avatar": "https://serv.com/images/ben.png" - }, - { - "id": 3, - "label": "Alex", - "avatar": "https://serv.com/images/alex.png" - } -] -~~~ - -For another example of the returned object, see [**cardShape**](api/config/js_kanban_cardshape_config.md). - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: -- [Working with server](guides/working_with_server.md) -- [getUsers()](api/provider/rest_methods/js_kanban_getusers_method.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_comments_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_comments_route.md deleted file mode 100644 index effdeaf7..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_comments_route.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: POST /cards/{id}/comments -title: POST /cards/{cardId}/comments -description: You can learn about the POST /cards/{cardId}/comments REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# POST `/cards/{cardId}/comments` - -### Description - -@short: Adds one or more new comments to a card and returns a JSON object containing the ID of the newly added comment. - -This route processes **HTTP POST** requests sent to the `/cards/{cardId}/comments` endpoint. - -### Payload - -The server expects a JSON object with the following properties: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `text` | string | *Required*. The content of the comment. | -| `date` | object | *Required*. The date when the comment was made. | - -Example: - -~~~json -{ - "text": "The comment content", - "date": "2023-05-18T09:13:56.656Z", -} -~~~ - -### Response - -The response includes a JSON object with the ID of the newly added comment. - -Example: - -~~~json -{ - "id": 1 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_route.md deleted file mode 100644 index d3c2b82f..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_route.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -sidebar_label: POST /cards -title: POST /cards -description: You can learn about the POST /cards REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# POST `/cards` - -### Description - -@short: Adds a new card and responds with a json object containing the new card ID - -This route processes an **HTTP POST** request sent to the `/cards` endpoint. - -### Payload - -The server expects a json object with the following properties: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `label` | string | *Required*. The title for the new card. | -| `column` | number | *Required*. The ID of the column where the card will be placed. | -| `row` | number | *Required*. The ID of the row where the card will be positioned. | - -Example: - -~~~json -{ - "label": "New card", - "column": 2, - "row": 1, -} -~~~ - -### Response - -The response returns a json object containing the newly created card ID. - -Example: - -~~~json -{ - "id": 1 -} -~~~ - -The HTTP status code indicates if the request was successful (response.status == 200) or if it failed (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_votes_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_votes_route.md deleted file mode 100644 index fd0fc9f4..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_cards_votes_route.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: POST /cards/{id}/vote -title: POST /cards/{cardId}/vote -description: You can learn about the POST /cards/{cardId}/vote REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# POST `/cards/{cardId}/vote` - -### Description - -@short: Adds a vote to the specified card and returns a JSON object containing the ID of the user who voted. - -This route processes an **HTTP POST** request sent to the `/cards/{cardId}/vote` endpoint. - -### Payload - -No payload needs to be sent with the request. - -### Response - -The response includes a JSON object with the ID of the user who cast the vote. - -Example: - -~~~json -{ - "id": 1 -} -~~~ - -The HTTP status code indicates the result of the request: 200 means success, while 500 indicates a failure. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_columns_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_columns_route.md deleted file mode 100644 index 8691ba77..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_columns_route.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -sidebar_label: POST /columns -title: POST /columns -description: You can learn about the POST /columns REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# POST `/columns` - -### Description - -@short: Creates a new column and returns a JSON object containing the column id. - -This route processes an **HTTP POST** request sent to the `/columns` endpoint. - -### Payload - -The server expects a JSON object with the following property: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `label` | string | *Required*. The name for the new column to be created.| - -Example: - -~~~json -{ - "label": "New column", -} -~~~ - -### Response - -The response returns a JSON object with the id of the newly created column. - -Example: - -~~~json -{ - "id": 4 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_links_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_links_route.md deleted file mode 100644 index 4f108574..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_links_route.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -sidebar_label: POST /links -title: POST /links -description: You can learn about the POST /links REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# POST `/links` - -### Description - -@short: Adds a new link and returns a JSON object containing the newly created link ID. - -This route processes **HTTP POST** requests sent to the `/links` endpoint. - -### Payload - -The server expects a JSON object with the following properties: - -| Name | Type | Description | -| ----------- | ---------------------- | ----------- | -| `source` | *number* or *string* | *Required*. The ID of the starting point of the link. | -| `target` | *number* or *string* | *Required*. The ID of the ending point of the link. | -| `relation` | *string* | *Required*. Specifies the type of relationship the link represents. | - -Example: - -~~~json -{ - "source": 1, - "target": 2, - "relation": "relatesTo" -} -~~~ - -### Response - -The response returns a JSON object with the ID of the newly created link. - -Example: - -~~~json -{ - "id": 1 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: -- [Working with server](guides/working_with_server.md) -- [getLinks()](api/provider/rest_methods/js_kanban_getlinks_method.md) -- [links](api/config/js_kanban_links_config.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_rows_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_rows_route.md deleted file mode 100644 index bd8bf922..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_rows_route.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: POST /rows -title: POST /rows -description: You can learn about the POST /rows REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# POST /rows - -### Description - -@short: Adds a new row and returns a JSON object containing the row ID. - -This route processes an **HTTP POST** request sent to the **'/rows'** endpoint. - -### Payload - -The server expects a JSON object with the following properties: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `label` | string | *Required*. The name for the new row to be created.| -| `collapsed` | boolean | *Optional*. Indicates the initial state of the row (swimlane). By default, the row is expanded (value is **false**). If set to **true**, the row is initially collapsed.| - -Example: - -~~~json -{ - "label": "New row", - "collapsed": "true", -} -~~~ - -### Response - -The response includes a JSON object with the newly created row's ID. - -Example: - -~~~json -{ - "id": 2 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_uploads_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_uploads_route.md deleted file mode 100644 index 74284b78..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/post_routes/js_kanban_post_uploads_route.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -sidebar_label: POST /uploads -title: POST /uploads -description: You can learn about the POST /uploads REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# POST `/uploads` - -### Description - -@short: Uploads a binary file to the server and returns a json object with the file id, name, and url - -This route processes an **HTTP POST** multipart request sent to the `/uploads` endpoint. - -### Payload - -The server expects to receive a binary file through a **multipart/form-data** request. As with all multipart MIME types, the request body should include: - -- the **Content-Disposition** header set to **form-data** - - the **name** attribute set to **upload** - - **filename** - the original name of the uploaded file -- the **Content-Type** header specifying the file data type - -Only one file is allowed per request. - -Example: - -~~~ - -------WebKitFormBoundarySlwgXDBw7kcKSI4p -Content-Disposition: form-data; name="upload"; filename="myImage.png" -Content-Type: image/png - -------WebKitFormBoundarySlwgXDBw7kcKSI4p-- - -~~~ - -### Response - -The route responds with a JSON object containing the file id, name, and url. - -The **isCover** property indicates if the image is a cover image (true) or not (false). - -Example: - -~~~ json -{ - "id":4, - "name":"myImage.png", - "url":"http://localhost:3000/uploads/4/myImage.png", - "isCover":false -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_comments_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_comments_route.md deleted file mode 100644 index d22f760a..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_comments_route.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -sidebar_label: PUT /cards/{id}/comments/{id} -title: PUT /cards/{cardId}/comments/{commentId} -description: You can learn about the PUT /cards/{cardId}/comments/{cardId} REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# PUT `/cards/{cardId}/comments/{commentId}` - -### Description - -@short: Updates a comment within a card and returns a JSON object containing the ID of the updated comment. - -This route processes an **HTTP PUT** request sent to the `cards/{cardId}/comments/{commentId}` endpoint. - -### Path parameters - -The following parameters are included in the request URL: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `cardId` | number | *Required*. The ID of the card containing the comment to update. | -| `commentId` | number | *Required*. The ID of the comment that needs to be updated. | - -### Payload - -The request body should contain a JSON object with the following property: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `text` | string | *Required*. The updated text of the comment.| - -Example: - -~~~json -{ - "text": "The comment's content" -} -~~~ - -### Response - -The server responds with a JSON object containing the ID of the updated comment. - -Example: - -~~~json -{ - "id": 4 -} -~~~ - -The HTTP status code indicates the outcome of the request: a status of 200 means success, while 500 indicates a failure. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_move_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_move_route.md deleted file mode 100644 index e4d79af8..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_move_route.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -sidebar_label: PUT /cards/{id}/move -title: PUT /cards/{id}/move -description: You can learn about the PUT /cards/{id}/move REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# PUT `/cards/{id}/move` - -### Description - -@short: Moves cards to a specified position - -This route processes an **HTTP PUT** request sent to the `cards/{id}/move` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The ID of the card to move. If moving multiple cards, set the id to 0.| - -:::info -When moving multiple cards, ensure the `id` is set to 0. If it's set to any other value, only the card with that specific id will be moved. -::: - -### Payload - -The server expects a JSON object with these properties: - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `id` | number |*Required*. The ID of the card being moved. | -| `columnId` | number | *Required*. The ID of the column where the card will be placed.| -| `rowId` | number | *Required*. The ID of the row where the card will be placed.| -| `before` | number | *Optional*. The ID of the card before which the moved card should be inserted.| -| `batch` | object | *Required for multiselect*. An array of card objects being moved.| - -Example: - -~~~json -{ - "id": 4, - "columnId": 2, - "rowId": 1, - "before": "7" -} -~~~ - -When moving multiple cards, the `batch` property should include an array of all the card objects being moved: - -~~~json -{ - "batch": [ - { - "id": 2, - "columnId": 1, - "rowId": 1, - "before": "1" - }, - { - "id": 7, - "columnId": 1, - "rowId": 1, - "before": "1" - } - ] -} -~~~ - -### Response - -The server responds with a JSON object containing the card ID if a single card was moved, or with an ID of 0 if multiple cards were moved. - -Example: - -~~~json title="Response to the request for the single card operation" -{ - "id": 4 -} -~~~ - -~~~json title="Response to the request for the multiple cards operation" -{ - "id": 0 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_route.md deleted file mode 100644 index e9a89c6c..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_cards_route.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -sidebar_label: PUT /cards -title: PUT /cards -description: You can learn about the PUT /cards REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# PUT `/cards` - -### Description - -@short: Updates the details of a specific card and returns an empty JSON object. - -This route processes an **HTTP PUT** request sent to the `/cards/{id}` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The unique identifier of the card to update.| - -### Payload - -The server expects a JSON object containing the card details, including both existing and updated properties. - -| Name | Type | Description | -| ------------- | ----------- | ----------- | -| `label` | string | *Required*. The title of the card being updated.| -| `description` | string | *Required*. A description of the card.| -| `column` | number | *Required*. The ID of the column where the card is located.| -| `row` | number | *Required*. The ID of the row where the card is placed.| -| `start_date` | string | *Required*. The start date in ISO format yyyy-MM-dd'T'HH:mm:ss.SSSXXX | -| `end_date` | string | *Required*. The end date in ISO format yyyy-MM-dd'T'HH:mm:ss.SSSXXX | -| `progress` | number | *Required*. The progress percentage, ranging from 0 to 100.| -| `attached` | object | *Required*. An array containing information about attached files. Refer to the example in [**cards**](api/config/js_kanban_cards_config.md)| -| `color` | string | *Required*. The HEX color code for the card's top border.| -| `priority` | number | *Required*. The ID representing the card's priority. | -| `users` | object | *Required*. An array with IDs of users assigned to the card. See example in [**cardShape**](api/config/js_kanban_cardshape_config.md)| - -Example: - -~~~json -{ - "card": { - "label": "Drag and drop", - "description": "", - "column": 3, - "row": 1, - "start_date": null, - "end_date": "2018-01-01T00:00:00Z", - "progress": 100, - "attached": [], - "color": "#58C3FE", - "priority": 2, - "users": [] - }, -} -~~~ - -Additional examples of the card object can be found in the [**cards**](api/config/js_kanban_cards_config.md) section. - -### Response - -On success, the server responds with an empty JSON object. - -The HTTP status code indicates the result of the request: 200 for success, or 500 if an error occurs. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_columns_move_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_columns_move_route.md deleted file mode 100644 index e18ef3fb..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_columns_move_route.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: PUT /columns/{id}/move -title: PUT /columns/{id}/move -description: You can learn about the PUT /columns/{id}/move REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# PUT `/columns/{id}/move` - -### Description - -@short: Moves a column to a specified position - -This route handles an **HTTP PUT** request sent to the `columns/{id}/move` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The ID of the column that needs to be moved.| - -### Payload - -The server expects a JSON object containing the following property: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `before` | number | *Optional*. The ID of the column before which the moved column should be inserted.| - -Example: - -~~~json -{ - "before": 3 -} -~~~ - -### Response - -The server responds with a JSON object containing the ID of the column that was moved. - -Example: - -~~~json -{ - "id": 4 -} -~~~ - -The HTTP status code indicates whether the request was successful (response.status == 200) or if it encountered an error (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_columns_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_columns_route.md deleted file mode 100644 index 5bb7d7f9..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_columns_route.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: PUT /columns -title: PUT /columns -description: You can learn about the PUT /columns REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# PUT `/columns` - -### Description - -@short: Updates the details of a specified column and returns an empty JSON object. - -This route processes **HTTP PUT** requests sent to the `/columns/{id}` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The ID of the column to update.| - -### Payload - -The server expects a JSON object containing all the properties of the column, including both unchanged and updated values. - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `label` | string | *Required*. The new name for the column.| -| `collapsed`| boolean | *Optional*. Indicates the column's initial state: **true** if collapsed, **false** if expanded (default).| - -Example: - -~~~json -{ - "column": { - "label": "Column 1", - "collapsed": false, - } -} -~~~ - -You can find another example of the column object in the [**columns**](api/config/js_kanban_columns_config.md) section. - -### Response - -On success, the server returns an empty JSON object. - -The HTTP status code indicates the result: a status of 200 means the request was successful, while 500 indicates a failure. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_rows_move_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_rows_move_route.md deleted file mode 100644 index d16a49e5..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_rows_move_route.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_label: PUT /rows/{id}/move -title: PUT /rows/{id}/move -description: You can learn about the PUT /rows/{id}/move REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# PUT `/rows/{id}/move` - -### Description - -@short: Moves a row to a new position - -This route processes an **HTTP PUT** request sent to the `rows/{id}/move` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The identifier of the row to be moved.| - -### Payload - -The server expects a JSON object containing the following property: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `before` | number | *Optional*. The ID of the row that the moved row should be positioned before.| - -Example: - -~~~json -{ - "before": 3 -} -~~~ - -### Response - -The server responds with a JSON object indicating the ID of the row that was moved. - -Example: - -~~~json -{ - "id": 4 -} -~~~ - -The HTTP status code indicates if the request was successful (response.status == 200) or if it failed (response.status == 500). - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_rows_route.md b/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_rows_route.md deleted file mode 100644 index f529a805..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/api/provider/rest_routes/put_routes/js_kanban_put_rows_route.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -sidebar_label: PUT /rows -title: PUT /rows -description: You can learn about the PUT /rows REST route in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# PUT `/rows` - -### Description - -@short: Updates the data for a specific row (swimlane) and returns an empty JSON object. - -This route processes an **HTTP PUT** request sent to the `/rows/{id}` endpoint. - -### Path parameters - -The following parameter is included in the request URL: - -| Name | Type | Description | -| ---------- | ----------- | ----------- | -| `id` | number | *Required*. The ID of the row (swimlane) that needs to be updated.| - -### Payload - -The server expects a JSON object containing all properties of the row, including both unchanged and updated values. - -| Name | Type | Description | -| ----------- | ----------- | ----------- | -| `label` | string | *Required*. The name of the row to update.| -| `collapsed` | boolean | *Optional*. Indicates the row's state: **true** if the row is initially collapsed, or **false** if expanded (default).| - -Example: - -~~~json -{ - "row": { - "label": "Row 1", - "collapsed": false, - } -} -~~~ - -For another example of the row object, see the [**rows**](api/config/js_kanban_rows_config.md) section. - -### Response - -If the update is successful, the server returns an empty JSON object. - -The HTTP status code indicates the result of the request: 200 for success and 500 for failure. - ---- - -**Related articles**: [Working with server](guides/working_with_server.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/configuration.md deleted file mode 100644 index a330b048..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/configuration.md +++ /dev/null @@ -1,576 +0,0 @@ ---- -sidebar_label: Configuration -title: Configuration -description: You can learn about the configuration in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Configuration - -The *Kanban* board can be customized in both looks and features using its API. There are plenty of parameters to help set things up the way you want: - -- Change how cards look using the [`cardShape`](api/config/js_kanban_cardshape_config.md) property -- Set up which fields appear in the editor with the [`editorShape`](api/config/js_kanban_editorshape_config.md) property -- Adjust how the editor works using the [`editor`](api/config/js_kanban_editor_config.md) property -- Choose how Kanban renders and scrolls with [`renderType`](api/config/js_kanban_rendertype_config.md) and [`scrollType`](api/config/js_kanban_scrolltype_config.md) -- Manage Kanban's history through the [`history`](api/config/js_kanban_history_config.md) property -- Personalize card templates using [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) - - *For more details, check out the [**Customization**](guides/customization.md) section* -- Set the language with the [`locale`](api/config/js_kanban_locale_config.md) property - - *For more about this, see the [**Localization**](guides/localization.md) section* -- Load cards, columns, rows, and links by passing data to the [`cards`](api/config/js_kanban_cards_config.md), [`columns`](api/config/js_kanban_columns_config.md), [`rows`](api/config/js_kanban_rows_config.md), and [`links`](api/config/js_kanban_links_config.md) properties - - *More info can be found in the [**Working with data**](guides/working_with_data.md) section* - -## Cards - -On a Kanban board, *cards* are organized into *columns* and *rows*. The [`cardShape`](api/config/js_kanban_cardshape_config.md) property lets you decide what fields appear on each card. Some common fields you can toggle on or off include: - -- Card label, using `label: boolean` -- Card description, using `description: boolean` - - :::tip - The **label** and **description** fields can be edited right in the Kanban editor. If you turn these on, matching inputs will show up in the editor automatically. To fine-tune these inputs, you can use the [**text** and **textarea**](#text-and-textarea-types) field types. - ::: - -- Card progress, with `progress: boolean` - - :::tip - The **progress** field is controlled through the Kanban editor as well. If enabled, a matching control shows up in the editor. To customize it, use the [**progress**](#progress-type) type. - ::: - -- Start date, using `start_date: boolean` -- End date, using `end_date: boolean` - - :::tip - Both **start date** and **end date** fields are managed through the editor. If you enable them, controls appear automatically. To configure them, use the [**date**](#date-and-daterange-types) type. - ::: - -- Card context menu, with `menu: boolean` -- Card attachment, using `attached: boolean` - - :::tip - You can attach files to a card using the editor's field. To set this up, use the [**files**](#files-type) type. - ::: - -- Card color, with `color: boolean` - - :::tip - The color line at the top of a card can be set in the editor. If **color** is enabled, a color picker appears in the editor. To adjust this, use the [**color**](#color-type) type. - ::: - -- Card cover image, with `cover: boolean` -- Card comments, using `comments: boolean` -- Confirmation dialog for card deletion, with `confirmDeletion: boolean` -- Card voting, using `votes: boolean | { show: boolean, clicable: true }` -- Card assignment (users), with `users: boolean | { show: boolean, values: object, maxCount: number | false }` - - :::tip - Assigning users to a card is done through the editor. To assign one user, use the [**combo** or **select**](#combo-select-and-multiselect-types) types. For multiple users, go with [**multiselect**](#combo-select-and-multiselect-types). - ::: - -- Card priority, with `priority: boolean | { show: boolean, values: object }` - - :::tip - Priorities can be managed through the editor too. With **priority** enabled, a control appears in the editor. Only [**combo** or **select**](#combo-select-and-multiselect-types) types work for this. - ::: - -- *Custom fields*, using `headerFields: [ { key: string, label: string, css: string } ]` - -~~~jsx {12-35,42} -const users = [ // users data - { id: 1, label: "John Smith", avatar: "../assets/user.jpg" }, - { id: 2, label: "Aaron Short" } -]; - -const cardPriority = [ // card priority data - { id: 1, color: "#FF5252", label: "high" }, - { id: 2, color: "#FFC975", label: "medium" }, - { id: 3, color: "#0AB169", label: "low" } -]; - -const cardShape = { // cards settings - label: true, - description: true, - progress: true, - start_date: true, - end_date: true, - menu: true, - attached: true, - priority: { - show: true, - values: cardPriority - }, - users: { - show: true, - values: users - }, - headerFields: [ - { - key: "sprint", - label: "Custom field", - css: "custom_css_class" - } - ] -}; - -new kanban.Kanban("#root", { - // cards data - columns, - cards, - // cards settings - cardShape -}); -~~~ - -:::note -If you don't set up card fields using [`cardShape`](api/config/js_kanban_cardshape_config.md), Kanban will use its [**defaultCardShape**](api/config/js_kanban_cardshape_config.md#default-config) settings! -::: - -## Editor - -:::info -The Editor can show up as a **sidebar** or a **modal window**. Use the [`editor.placement`](api/config/js_kanban_editor_config.md) property to pick which one! -::: - -The Kanban *Editor* is where card details are managed. To set up which fields show up in the editor, use the [`editorShape`](api/config/js_kanban_editorshape_config.md) property. Here are the editor field types you can use: - -- [**combo**, **select**, and **multiselect**](#combo-select-and-multiselect-types) -- [**color**](#color-type) -- [**text** and **textarea**](#text-and-textarea-types) -- [**progress**](#progress-type) -- [**files**](#files-type) -- [**date** and **dataRange**](#date-and-daterange-types) -- [**comments**](#comments-type) -- [**links**](#links-type) - -### Combo, Select and Multiselect types - -Editor fields for **combo**, **select**, and **multiselect** are set up like this: - -~~~jsx {3-12} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "combo", // or "select" and "multiselect" - key: "priority", // the "priority" key is used when configuring the "cardShape" property - label: "Priority", - values: [ - { id: 1, label: "high" }, - { id: 2, label: "medium" }, - { id: 3, label: "low" } - ] - }, - // settings of other fields - ] -}); -~~~ - -:::info -For **"multiselect"** and **"combo"** fields, you can also add a preview image using the **avatar** property: - -~~~jsx {3,9,13} -editorShape: [ - { - type: "multiselect", // or "combo" - key: "users", // the "users" key is used when configuring the "cardShape" property - label: "Users", - values: [ - { - id: 1, label: "Alan", - avatar: "preview_image_path_1.png" - }, - { - id: 2, label: "John", - avatar: "preview_image_path_2.png" - } - ] - }, - // settings of other fields -] -~~~ - -[**Kanban. Limiting assignments to one user only**](https://snippet.dhtmlx.com/2rlg4qvk?tag=kanban) -::: - -### Color type - -To add a **color** picker field in the editor, set it up like this: - -~~~jsx {3-12} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "color", - key: "color", // the "color" key is used when configuring the "cardShape" property - label: "Card color", - values: ["#65D3B3", "#FFC975", "#58C3FE"], - config: { - clear: true, - placeholder: "Select color" - } - }, - // settings of other fields - ] -}); -~~~ - -### Text and Textarea types - -To add **text** or **textarea** fields to the editor, use this setup: - -~~~jsx {3-14} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "text", // or "textarea" - key: "label", - label: "Label", - config: { - placeholder: "Type your tips here", - readonly: false, - focus: true, - disabled: false, - inputStyle: "height: 50px;" - } - }, - // settings of other fields - ] -}); -~~~ - -### Progress type - -A **progress** field in the editor can be configured like this: - -~~~jsx {3-12} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "progress", - key: "progress", // the "progress" key is used when configuring the "cardShape" property - label: "Progress", - config: { - min: 10, - max: 90, - step: 5 - } - }, - // settings of other fields - ] -}); -~~~ - -### Files type - -To let users attach files, set up a **files** field in one of two ways: - -#### Configuring Upload Url as String - -~~~jsx {4-15} -const url = "https://docs.dhtmlx.com/kanban-backend"; -new kanban.Kanban("#root", { - editorShape: [ - { - type: "files", - key: "attached", // the "attached" key is used when configuring the "cardShape" property - label: "Attachment", - uploadURL: url + "/uploads", // specify url as string - config: { - accept: "image/*", // "video/*", "audio/*" - disabled: false, - multiple: true, - folder: false - } - }, - // settings of other fields - ] -}); -~~~ - -#### Configuring Upload Url as Function - -~~~jsx {9-31} -const url = "https://docs.dhtmlx.com/kanban-backend"; -new kanban.Kanban("#root", { - editorShape: [ - ...defaultEditorShape, - { - key: "attached", - type: "files", - label: "Files", - uploadURL: rec => { - const formData = new FormData(); - formData.append("upload", rec.file); - - const config = { - method: "POST", - body: formData, - headers: { - 'Authorization': 'Bearer ' + token // token or other headers here - } - }; - - return fetch(url + "/uploads", config) // URL here - .then(res => res.json()) - .then( - data => { - return { id: rec.id, ...data }; - }, - () => ({ id: rec.id, status: "error" }) - ) - .catch(); - } - } - ] -}); -~~~ - -### Date and DateRange types - -To add a **date** field to the editor: - -~~~jsx {3-8} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "date", - key: "start_date", - label: "Start date", - format: "%d/%m/%y" - }, - // settings of other fields - ] -}); -~~~ - -For a **dateRange** field, use: - -~~~jsx {3-11} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "dateRange", - key: { - start: "start_date", - end: "end_date" - }, - label: "Date Range", - format: "%d/%m/%y" - }, - // settings of other fields - ] -}); -~~~ - -### Comments type - -To enable **comments** in the editor: - -~~~jsx {3-13} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "comments", - key: "comments", - label: "Comments", - config: { - dateFormat: "%M %d", - placement: "page", // or "editor" - html: true, - confirmDeletion: true - } - }, - // settings of other fields - ] -}); -~~~ - -### Links type - -To let users add **links** in the editor: - -~~~jsx {3-10} -new kanban.Kanban("#root", { - editorShape: [ - { - type: "links", - key: "links", - label: "Links", - config: { - confirmDeletion: true - } - }, - // settings of other fields - ] -}); -~~~ - -### Binding editor fields to card fields - -:::info -To connect an editor field to a card field, set the **key** in the [`editorShape`](api/config/js_kanban_editorshape_config.md) property (like `key: "editor_field_key"`). For built-in fields, that key should be set to *true* in [`cardShape`](api/config/js_kanban_cardshape_config.md). For custom fields, add it to the **headerFields** array. You can also use this key to set initial data for a field. - -~~~jsx {5,13,22,25,33-34,38-39,45-47} -// editor settings -const editorShape = [ - { - type: "text", - key: "label", - label: "Label", - config: { - placeholder: "Enter new label here" - } - }, - { - type: "textarea", - key: "note", - label: "Note", - config: { - placeholder: "Enter usefull note here" - } - } -]; -// cards settings -const cardShape = { - label: true, // a key of built-in field - headerFields: [ - { - key: "note", // a key of custom field - label: "Note" - } - ] -}; -// cards data -const cards = [ - { - label: "Volvo", - note: "It is the swedish car", - column: "backlog" - }, - { - label: "Audi", - note: "It is the german car", - column: "backlog" - } -]; -// create Kanban -new kanban.Kanban("#root", { - editorShape, - cardShape, - cards, - columns - // other configuration parameters -}); -~~~ -::: - -:::note -If you don't set up editor fields with [`editorShape`](api/config/js_kanban_editorshape_config.md), Kanban uses its [**defaultEditorShape**](api/config/js_kanban_editorshape_config.md#default-config) settings. In this case, default controls and inputs only show up in the editor after you enable the matching card fields using [`cardShape`](api/config/js_kanban_cardshape_config.md). -::: - -### Configuring the editor - -The [`editor`](api/config/js_kanban_editor_config.md) property can be used to tweak how the editor works: - -- Turn on/off autosave with *`editor.autoSave`* -- Set a delay for autosaving via *`editor.debounce`* (only works if ***autoSave: true*** is set) - -~~~jsx {6-9} -// create Kanban -new kanban.Kanban("#root", { - columns, - cards, - editorShape, - editor: { - autoSave: true, - debounce: 2000 - } - // other parameters -}); -~~~ - -## Toolbar - -The Kanban **Toolbar** includes a search bar for finding cards, as well as controls for sorting cards and adding new columns or rows. To show the Toolbar, initialize it in a separate container using **kanban.Toolbar()**. - -~~~jsx {13} -// create Kanban -const board = new kanban.Kanban("#root", { - // data - columns, - cards, - rows, - // card settings - cardShape, - // editor settings - editorShape -}); - -new kanban.Toolbar("#toolbar", { api: board.api }); -~~~ - -Toolbar controls (showing, hiding, or customizing them) are managed through the **items** property: - -~~~jsx {6-51} -// create Kanban -const board = new kanban.Kanban("#root", {...}); - -new kanban.Toolbar("#toolbar", { - api: board.api, - items: [ - { // custom search bar - type: "search", - options: [ - { - id: "label", - label: "By label" - }, - { - id: "start_date", - label: "By date", - searchRule: (card, value, by) => { - const date = card[by]; - return date?.toString().includes(value); - } - } - ], - resultTemplate: kanban.template(searchResult => { - return `
-
${searchResult.result.label}
- ${searchResult.result.description ? `
${searchResult.result.description}
` : ""} -
` - }) - }, - "spacer", // empty space - "undo", // control to undo the card operations in the history - "redo", // control to redo the card operations in the history - { // custom sort control - type: "sort", - options: [ - { - text: "Sort by label", - by: "label", - dir: "asc" - }, - { - text: "Sort by description", - by: "description", - dir: "desc" - } - ] - }, - "addColumn", // control for adding new columns - "addRow", // control for adding new rows - // custom elements - ] -}); -~~~ - -:::tip -To hide Toolbar controls, just remove their strings from the **items** array. -::: - -## Example - -Here's a snippet that shows how to set up **Cards**, the **Editor**, and the **Toolbar** in Kanban: - - \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/customization.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/customization.md deleted file mode 100644 index 9a07ee24..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/customization.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: Customization -title: Customization -description: You can learn about the customization in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Customization - -Along with configuring Kanban, there are plenty of ways to tweak how it looks and works. You can set up a custom card template, adjust the context menu for cards, columns, and rows, change up the Toolbar's layout and actions, and use your own CSS styles to give Kanban a personal touch. - -## Custom cards - -If you want your cards to look a certain way, the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property comes in handy. This callback function lets you define your own styles and logic for displaying cards in Kanban. Here's a quick example: - - - -## Custom context menu - -For those times when you want to change up the context menu for cards, columns, or rows, you'll want to use the [`cardShape`](api/config/js_kanban_cardshape_config.md), [`columnShape`](api/config/js_kanban_columnshape_config.md), and [`rowShape`](api/config/js_kanban_rowshape_config.md) properties. Here's how you can do it: - - - -## Custom toolbar - -To switch up the Toolbar's layout and what it can do, the [`items`](api/config/toolbar_items_config.md) property is the one to use. You can list out the controls you want in the array, put them in any order, and change how each one works. - -Check out the snippet below to see how to: - -- rearrange the controls -- set up the searchbar and adjust how it works -- tweak the sort control and its behavior -- add a custom control and set up what it does - - - -## Custom styles - -If you'd like to change how Kanban looks, you can do that by updating the relevant *CSS variables*. For more details, take a look at the [**Stylization**](guides/stylization.md) section. - -Here's a snippet showing how to apply your own styles to Kanban: - - \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/initialization.md deleted file mode 100644 index d794102d..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/initialization.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -sidebar_label: Initialization -title: Initialization -description: You can learn about the initialization in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Initialization - -This guide walks through the process of adding a Kanban board to a web page, so you can easily bring Kanban functionality into your app. Here's how to get everything set up and ready to use: - -1. [Include the Kanban source files on a page](#including-source-files). -2. [Create a container for Kanban](#creating-container). -3. [Initialize Kanban with a constructor](#initializing-kanban). - -## Including source files - -First, [download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unzip it somewhere in your project folder. - -To get Kanban working, just include these two files in your HTML: - -- *kanban.js* -- *kanban.css* - -Be sure the paths to the files are correct for your project: - -~~~html title="index.html" - - -~~~ - -## Creating container - -Set up a container for Kanban in your HTML and give it an ID, like *"root"*: - -~~~jsx title="index.html" -
-~~~ - -If you want to add a *Toolbar* along with the Kanban board, set up a separate container for it as well: - -~~~jsx {1} title="index.html" -
// container for Toolbar -
// container for Kanban -~~~ - -## Initializing Kanban - -To get Kanban up and running, use the **kanban.Kanban** constructor. It needs two things: - -- the HTML container (just pass the container's ID) -- an object with configuration options. [Check out the full list here](#configuration-properties) - -~~~jsx title="index.html" -// create Kanban -new kanban.Kanban("#root", { - // configuration properties -}); -~~~ - -If you're adding a *Toolbar* too, it gets initialized separately with the **kanban.Toolbar** constructor. The setup is similar: - -- the HTML container (the ID) -- an object with configuration options - -~~~jsx {6-8} title="index.html" -// create Kanban -const board = new kanban.Kanban("#root", { - // configuration properties -}); - -new kanban.Toolbar("#toolbar", { - // configuration properties -}); -~~~ - -:::info -For more details on setting up the Kanban Toolbar, check out the [**Configuration**](guides/configuration.md/#toolbar) section. -::: - -### Configuration properties - -:::note -A complete list of configuration options for **Kanban** is available [**here**](api/overview/properties_overview.md).
-You'll find all the Toolbar configuration options [**here**](api/overview/toolbar_properties_overview.md). -::: - -## Example - -Here's a quick example showing how to set up **Kanban** with some starter data: - - \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration.md deleted file mode 100644 index 28718075..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -sidebar_label: Integration with DHTML widgets -title: Integration with DHTML widgets -description: You can learn about the integration in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Integration with DHTML widgets - -DHTMLX Kanban works smoothly with other DHTMLX widgets, like [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), and [To Do List](https://docs.dhtmlx.com/todolist/). Some example setups are shown below. - -## Integration with DHTMLX Gantt and Scheduler - - - -## Integration with DHTMLX To Do List - - \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md deleted file mode 100644 index 21cef318..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -sidebar_label: Integration with Angular -title: Integration with Angular -description: You can learn about the integration with Angular in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Integration with Angular - -:::tip -It's helpful to have a basic understanding of **Angular** before jumping in here. If you need a quick refresher, check out the [**Angular documentation**](https://v17.angular.io/docs). -::: - -DHTMLX Kanban works well with **Angular**. There are code samples available that show how to use DHTMLX Kanban in Angular projects. For more details, take a look at the [**Example on GitHub**](https://github.com/DHTMLX/angular-kanban-demo). - -## Creating a project - -:::info -Make sure you have [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/) installed before getting started. -::: - -To set up a new **my-angular-kanban-app** project, just use Angular CLI with this command: - -~~~json -ng new my-angular-kanban-app -~~~ - -:::note -If you want to follow along with this guide, remember to turn off Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when setting up your Angular app! -::: - -This command will set up everything you need, so there's no need to run any extra commands afterwards. - -### Installation of dependencies - -Head into your new app's directory: - -~~~json -cd my-angular-kanban-app -~~~ - -Next, install the dependencies and start up the dev server. The [**yarn**](https://yarnpkg.com/) package manager works well for this: - -~~~json -yarn -yarn start -~~~ - -Your app should now be running locally (for example, at `http://localhost:3000`). - -## Creating Kanban - -To get started with DHTMLX Kanban, you'll need the source code. First, stop your app and install the Kanban package. - -### Step 1. Package installation - -Download the [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow the instructions in the README file. Just a heads up: the trial version works for 30 days. - -### Step 2. Component creation - -Next, set up an Angular component to include Kanban with a Toolbar in your app. Create a **kanban** folder inside **src/app/**, then add a new file called **kanban.component.ts**. - -#### Import source files - -Open up **kanban.component.ts** and import the Kanban source files. Here's what to keep in mind: - -- If you're using the PRO version and installed Kanban from a local folder, your import will look like this: - -~~~jsx -import { Kanban, Toolbar } from 'dhx-kanban-package'; -~~~ - -- If you're using the trial version, the import should be: - -~~~jsx -import { Kanban, Toolbar } from '@dhx/trial-kanban'; -~~~ - -This guide shows how to work with the **trial** version. - -#### Set containers and initialize the Kanban with Toolbar - -To get Kanban and the Toolbar on your page, set up containers and initialize these components using their constructors: - -~~~jsx {1,8-11,15-18,24-31} title="kanban.component.ts" -import { Kanban, Toolbar } from '@dhx/trial-kanban'; -import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; - -@Component({ - encapsulation: ViewEncapsulation.None, - selector: "kanban", // a template name used in the "app.component.ts" file as - styleUrls: ["./kanban.component.css"], // include the css file - template: `
-
-
-
` -}) - -export class KanbanComponent implements OnInit, OnDestroy { - // initialize container for Toolbar - @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef; - // initialize container for Kanban - @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef; - - private _kanban!: Kanban; - private _toolbar!: Toolbar; - - ngOnInit() { - // initialize the Kanban component - this._kanban = new Kanban(this.kanban_container.nativeElement, {}); - - // initialize the Toolbar component - this._toolbar = new Toolbar(this.toolbar_container.nativeElement, { - api: this._kanban.api, - // other configuration properties - }); - } - - ngOnDestroy(): void { - this._kanban.destructor(); // destruct Kanban - this._toolbar.destructor(); // destruct Toolbar - } -} -~~~ - -#### Adding styles - -To make sure Kanban displays properly, add the right styles. You can create a **kanban.component.css** file in **src/app/kanban/** and include these styles for Kanban and its container: - -~~~css title="kanban.component.css" -/* import Kanban styles */ -@import "@dhx/trial-kanban/dist/kanban.css"; - -/* specify styles for initial page */ -html, -body{ - height: 100%; - padding: 0; - margin: 0; -} - -/* specify styles for Kanban and Toolbar container*/ -.component_container { - height: 100%; - margin: 0 auto; -} - -/* specify styles for Kanban container */ -.widget { - height: calc(100% - 56px); -} -~~~ - -#### Loading data - -To fill Kanban with data, you'll need a data set. Create a **data.ts** file in **src/app/kanban/** and add some sample data like this: - -~~~jsx {2,14,37,48} title="data.ts" -export function getData() { - const columns = [ - { - label: "Backlog", - id: "backlog" - }, - { - label: "In progress", - id: "inprogress" - }, - // ... - ]; - - const cards = [ - { - id: 1, - label: "Integration with Angular/React", - priority: 1, - color: "#65D3B3", - start_date: new Date("01/07/2021"), - users: [3, 2], - column: "backlog", - type: "feature", - }, - { - label: "Archive the cards/boards ", - priority: 3, - color: "#58C3FE", - users: [4], - progress: 1, - column: "backlog", - type: "feature", - }, - // ... - ]; - - const rows = [ - { - label: "Feature", - id: "feature", - }, - { - label: "Task", - id: "task", - } - ]; - - return { columns, cards, rows }; -} -~~~ - -Now, open ***kanban.component.ts***. Import your data file and add the data properties to the Kanban configuration object inside `ngOnInit()` like this: - -~~~jsx {2,23,25-27} title="kanban.component.ts" -import { Kanban, Toolbar } from '@dhx/trial-kanban'; -import { getData } from "./data"; // import data -import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; - -@Component({ - encapsulation: ViewEncapsulation.None, - selector: "kanban", - styleUrls: ["./kanban.component.css"], - template: `
-
-
-
` -}) - -export class KanbanComponent implements OnInit, OnDestroy { - @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef; - @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef; - - private _kanban!: Kanban; - private _toolbar!: Toolbar; - - ngOnInit() { - const { cards, columns, rows } = getData(); // initialize data properties - this._kanban = new Kanban(this.kanban_container.nativeElement, { - columns, // apply column data - cards, // apply card data - rows, // apply row data - rowKey: "type", - // other configuration properties - }); - - this._toolbar = new Toolbar(this.toolbar_container.nativeElement, { - api: this._kanban.api, - // other configuration properties - }); - } - - ngOnDestroy(): void { - this._kanban.destructor(); - this._toolbar.destructor(); - } -} -~~~ - -You can also load data into Kanban using the [`setConfig()`](/api/methods/js_kanban_setconfig_method) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside the `ngOnInit()` method. - -~~~jsx {2,23,37-42} title="kanban.component.ts" -import { Kanban, Toolbar } from '@dhx/trial-kanban'; -import { getData } from "./data"; // import data -import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; - -@Component({ - encapsulation: ViewEncapsulation.None, - selector: "kanban", - styleUrls: ["./kanban.component.css"], - template: `
-
-
-
` -}) - -export class KanbanComponent implements OnInit, OnDestroy { - @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef; - @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef; - - private _kanban!: Kanban; - private _toolbar!: Toolbar; - - ngOnInit() { - const { cards, columns, rows } = getData(); // initialize data properties - this._kanban = new Kanban(this.kanban_container.nativeElement, { - columns: [], - cards: [], - rows: [], - rowKey: "type", - // other configuration properties - }); - - this._toolbar = new Toolbar(this.toolbar_container.nativeElement, { - api: this._kanban.api, - // other configuration properties - }); - - // apply the data via the parse() method - this._kanban.setConfig({ - columns, - cards, - rows - }); - } - - ngOnDestroy(): void { - this._kanban.destructor(); - this._toolbar.destructor(); - } -} -~~~ - -The `setConfig` or `parse()` method lets you reload data whenever you need to update it. - -At this point, the Kanban component is good to go. When you add the element to a page, Kanban will initialize with your data. You can also tweak the configuration as needed. For all available options, check out the [Kanban API docs](/api/overview/properties_overview/). - -#### Handling events - -Whenever someone interacts with Kanban, events get fired. You can use these events to react and run your own code. The [full list of events](/api/overview/events_overview/) is available in the docs. - -To handle events, open **kanban.component.ts** and add the following to `ngOnInit()`: - -~~~jsx {5-7} title="kanban.component.ts" -// ... -ngOnInit() { - this._kanban = new Kanban(this.kanban_container.nativeElement, {}); - - this._kanban.api.on("add-card", (obj) => { - console.log(obj.columnId); - }); -} - -ngOnDestroy(): void { - this._kanban.destructor(); -} -~~~ - -### Step 3. Adding Kanban into the app - -To use the ***KanbanComponent*** in your app, open ***src/app/app.component.ts*** and replace the default code with this: - -~~~jsx {5} title="app.component.ts" -import { Component } from "@angular/core"; - -@Component({ - selector: "app-root", - template: `` -}) -export class AppComponent { - name = ""; -} -~~~ - -Next, create ***app.module.ts*** in ***src/app/*** and add *KanbanComponent* as shown here: - -~~~jsx {4-5,8} title="app.module.ts" -import { NgModule } from "@angular/core"; -import { BrowserModule } from "@angular/platform-browser"; - -import { AppComponent } from "./app.component"; -import { KanbanComponent } from "./kanban/kanban.component"; - -@NgModule({ - declarations: [AppComponent, KanbanComponent], - imports: [BrowserModule], - bootstrap: [AppComponent] -}) -export class AppModule {} -~~~ - -Finally, open ***src/main.ts*** and update it like this: - -~~~jsx title="main.ts" -import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; -import { AppModule } from "./app/app.module"; -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); -~~~ - -Now you can start the app and see Kanban loaded with your data. - -import trial from '@site/static/img/trial_kanban.png'; - -Kanban with Angular - -That's it for integrating DHTMLX Kanban with Angular. Feel free to adjust the code to fit your project's needs. There's a more advanced example available on [**GitHub**](https://github.com/DHTMLX/angular-kanban-demo). \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_react.md deleted file mode 100644 index 89ceff73..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_react.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -sidebar_label: Integration with React -title: Integration with React -description: You can learn about the integration with React in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Integration with React - -:::tip -It's helpful to know the basics of [**React**](https://react.dev) before jumping into this guide. If a refresher is needed, the [**React documentation**](https://react.dev/learn) covers all the essentials. -::: - -DHTMLX Kanban works well with **React**. There are some ready-to-use code examples showing how to set up DHTMLX Kanban in a **React** environment. For more details, check out this [**Example on GitHub**](https://github.com/DHTMLX/react-kanban-demo). - -## Creating a project - -:::info -It's a good idea to have [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/) installed before starting a new project. -::: - -A basic **React** project can be created, or you can use **React with Vite**. The example project here is called **my-react-kanban-app**: - -~~~json -npx create-react-app my-react-kanban-app -~~~ - -### Installation of dependencies - -Move into the new app folder: - -~~~json -cd my-react-kanban-app -~~~ - -Next, install the dependencies and start the development server. Just pick your package manager: - -- For [**yarn**](https://yarnpkg.com/): - -~~~json -yarn -yarn start -~~~ - -- For [**npm**](https://www.npmjs.com/): - -~~~json -npm install -npm run dev -~~~ - -The app will start on localhost, usually at something like `http://localhost:3000`. - -## Creating Kanban - -To get started with DHTMLX Kanban, grab the source code. It's best to stop the app first, then install the Kanban package. - -### Step 1. Package installation - -Download the [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow the README instructions. The trial version is available for 30 days. - -### Step 2. Component creation - -A React component is needed to add Kanban to the app. Create a new file named ***Kanban.jsx*** in the ***src/*** directory. - -#### Importing source files - -Open ***Kanban.jsx*** and import the Kanban files. There are a couple of options depending on the version: - -- For the PRO version installed from a local folder, the imports look like this: - -~~~jsx title="Kanban.jsx" -import { Kanban, Toolbar } from 'dhx-kanban-package'; -import 'dhx-kanban-package/dist/kanban.css'; -~~~ - -Depending on the package, you might need to import ***kanban.min.css*** if the files are minified. - -- For the trial version, use these paths: - -~~~jsx title="Kanban.jsx" -import { Kanban, Toolbar } from '@dhx/trial-kanban'; -import "@dhx/trial-kanban/dist/kanban.css"; -~~~ - -This guide shows how to set up the **trial** version. - -#### Setting containers and adding Kanban with Toolbar - -To show Kanban with a Toolbar, create containers for both and initialize them using their constructors: - -~~~jsx {2,6-7,10-11,13-17} title="Kanban.jsx" -import { useEffect, useRef } from "react"; -import { Kanban, Toolbar } from '@dhx/trial-kanban'; -import '@dhx/trial-kanban/dist/kanban.css'; // include Kanban styles - -export default function KanbanComponent(props) { - let toolbar_container = useRef(); // initialize container for Toolbar - let kanban_container = useRef(); // initialize container for Kanban - - useEffect(() => { - // initialize the Kanban component - const kanban = new Kanban(kanban_container.current, {}); - - // initialize the Toolbar component - const toolbar = new Toolbar(toolbar_container.current, { - api: kanban.api, // provide Kanban inner API - // other configuration properties - }); - - return () => { - kanban.destructor(); // destruct Kanban - toolbar.destructor(); // destruct Toolbar - }; - }, []); - - return
-
-
-
-} -~~~ - -#### Adding styles - -To make sure Kanban displays correctly, add some necessary styles for Kanban and its container in the main CSS file: - -~~~css title="index.css" -/* specify styles for initial page */ -html, -body, -#root { - height: 100%; - padding: 0; - margin: 0; -} - -/* specify styles for Kanban and Toolbar container */ -.component_container { - height: 100%; - margin: 0 auto; -} - -/* specify styles for Kanban container */ -.widget { - height: calc(100% - 56px); -} -~~~ - -#### Loading data - -Kanban needs some data to work with. Make a ***data.js*** file in the ***src/*** directory and add some sample data: - -~~~jsx {2,14,37,48} title="data.js" -export function getData() { - const columns = [ - { - label: "Backlog", - id: "backlog" - }, - { - label: "In progress", - id: "inprogress" - }, - // ... - ]; - - const cards = [ - { - id: 1, - label: "Integration with Angular/React", - priority: 1, - color: "#65D3B3", - start_date: new Date("01/07/2021"), - users: [3, 2], - column: "backlog", - type: "feature", - }, - { - label: "Archive the cards/boards ", - priority: 3, - color: "#58C3FE", - users: [4], - progress: 1, - column: "backlog", - type: "feature", - }, - // ... - ]; - - const rows = [ - { - label: "Feature", - id: "feature", - }, - { - label: "Task", - id: "task", - } - ]; - - return { columns, cards, rows }; -} -~~~ - -Next, open ***App.js*** and import the data. Then, pass the data into the `` component as **props**: - -~~~jsx {2,5-6} title="App.js" -import Kanban from "./Kanban"; -import { getData } from "./data"; - -function App() { - const { columns, cards, rows } = getData(); - return ; -} - -export default App; -~~~ - -Head over to ***Kanban.jsx*** and use the passed **props** in the Kanban configuration: - -~~~jsx {5,11-13} title="Kanban.jsx" -import { useEffect, useRef } from "react"; -import { Kanban, Toolbar } from "@dhx/trial-kanban"; -import "@dhx/trial-kanban/dist/kanban.css"; - -export default function KanbanComponent(props) { - let kanban_container = useRef(); - let toolbar_container = useRef(); - - useEffect(() => { - const kanban = new Kanban(kanban_container.current, { - columns: props.columns, // apply column data - cards: props.cards, // apply card data - rows: props.rows, // apply row data - rowKey: "type", - // other configuration properties - }); - - const toolbar = new Toolbar(toolbar_container.current, { - api: kanban.api, - // other configuration properties - }); - - return () => { - kanban.destructor(); - toolbar.destructor(); - }; - }, []); - - return
-
-
-
-} -~~~ - -Another way to load data is by using the [`setConfig()`](/api/methods/js_kanban_setconfig_method) or [`parse()`](/api/methods/js_kanban_parse_method/) method inside React's `useEffect()`: - -~~~jsx {9-11,27} title="Kanban.jsx" -import { useEffect, useRef } from "react"; -import { Kanban, Toolbar } from "@dhx/trial-kanban"; -import "@dhx/trial-kanban/dist/kanban.css"; - -export default function KanbanComponent(props) { - let kanban_container = useRef(); - let toolbar_container = useRef(); - - let columns = props.columns; // data for columns - let cards = props.cards; // data for cards - let rows = props.rows; // data for rows - - useEffect(() => { - const kanban = new Kanban(kanban_container.current, { - columns: [], - cards: [], - rows: [], - rowKey: "type", - // other configuration properties - }); - - const toolbar = new Toolbar(toolbar_container.current, { - api: kanban.api, - // other configuration properties - }); - - kanban.setConfig({ columns, cards, rows }); - - return () => { - kanban.destructor(); - toolbar.destructor(); - }; - }, []); - - return
-
-
-
-} -~~~ - -The `setConfig()` or `parse()` method can be handy for reloading data when changes are made. - -At this point, the Kanban component is set up. When the component is added to the page, it initializes Kanban with the provided data. You can also adjust the configuration as needed. The [Kanban API docs](/api/overview/properties_overview/) have the full list of available options. - -#### Handling events - -Kanban fires events whenever something happens-like a card is added or moved. These events can be used to trigger custom code. The [complete list of events](/api/overview/events_overview/) is available for reference. - -To handle an event, update ***Kanban.jsx*** and add the following to the `useEffect()`: - -~~~jsx {5-7} title="Kanban.jsx" -// ... -useEffect(() => { - const kanban = new Kanban(kanban_container.current, {}); - - kanban.api.on("add-card", (obj) => { - console.log(obj.columnId); - }); - - return () => { - kanban.destructor(); - }; -}, []); -// ... -~~~ - -Now, the app can be started, and Kanban will show up on the page with data loaded. - -import trial from '@site/static/img/trial_kanban.png'; - -Kanban with React - -This is how DHTMLX Kanban can be integrated with React. The code can be tweaked as needed. For a more advanced example, take a look at the [**GitHub**](https://github.com/DHTMLX/react-kanban-demo) repository. \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md deleted file mode 100644 index 446a3753..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -sidebar\_label: Integration with Salesforce -title: Integration with Salesforce -description: Learn how to integrate DHTMLX Kanban into Salesforce. This guide explains the required HTML setup and environment configuration for smooth operation inside Salesforce Lightning components. ---- - -# Integration with Salesforce - -:::tip -It helps to know the basics of [**Salesforce**](https://www.salesforce.com/) before checking out this guide. If you want to brush up, take a look at the [**Salesforce documentation**](https://developer.salesforce.com/docs). -::: - -DHTMLX Kanban works well with the [Salesforce](https://www.salesforce.com/) platform. There are some code examples below that show how to bring DHTMLX Kanban into a Salesforce environment. If you want to see more, check out the [Example on GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). - -:::note -The JavaScript Kanban widget can tell when it's running inside [**Salesforce**](https://www.salesforce.com/) and sets up the integration on its own. Usually, there's no need to use any [**Salesforce-specific methods**](#salesforce-specific-methods) by hand. -::: - -## Preparing environment - -To add Kanban to a Salesforce project, just add the *root* container with the `data-wx-root="true"` HTML attribute. This helps the library find the main spot for mounting the **Kanban** and **Toolbar** widgets. - -```html title="kanban.html" - -``` - -Any child elements with the `data-wx-portal-root="1"` attribute are used as containers for DHTMLX components like **Toolbar** and **Kanban**. - -## Salesforce environment API - -DHTMLX Kanban comes with a `salesForceEnv` helper class with methods for managing the Salesforce environment manually. To use it, import the `salesForceEnv` helper like this: - -```jsx {4} -import { - Kanban, - Toolbar, - salesForceEnv -} from "@dhx/trial-kanban"; -``` - -:::note -Normally, you won't need these Salesforce-specific methods, but they're there if the automatic detection doesn't work out. -::: - -### Salesforce-specific methods - -Here are the methods you get with the `salesForceEnv` helper class: - -| Method | Description | -| :--------------------------------------------------------------- | :----------------------------------------------------------------------------- | -| `salesForceEnv.detect()` | Checks if Kanban is running inside Salesforce | -| `salesForceEnv.addGlobalEvent(eventName, handler, htmlElement)` | Adds a global event to the first available HTML element | -| `salesForceEnv.getTopNode()` | Gets the first available HTML element inside the Salesforce DOM hierarchy | - -```jsx {4,7} -import { - Kanban, - Toolbar, - salesForceEnv -} from "@dhx/trial-kanban"; - -salesForceEnv.detect(); -``` - -### Additional exported function - -| Function | Description | -| :------------------- | :-------------------------------------------------------------------------------- | -| `enableSalesForce()` | Lets you manually set the Salesforce environment if automatic detection doesn't work | - -```jsx {5,8} -import { - Kanban, - Toolbar, - salesForceEnv, - enableSalesForce -} from "@dhx/trial-kanban"; - -enableSalesForce(); -``` - -## Workflow steps - -1. Add the `data-wx-root="true"` attribute to your LWC container -2. Import and set up DHTMLX Kanban and Toolbar (this part's optional) -3. The JavaScript Kanban widget will spot the Salesforce context and configure itself -4. There's no need to use `enableSalesForce()` or the `salesForceEnv` methods unless you're dealing with a special embedding situation - -### Example - -```jsx title="kanban.js" -import { Kanban, Toolbar } from "@dhx/trial-kanban"; -import "@dhx/trial-kanban/dist/kanban.css"; - -export default class KanbanLWC { - connectedCallback() { - const kanban_container = this.template.querySelector(".sf_kanban"); - const toolbar_container = this.template.querySelector(".sf_toolbar"); - const kanban = new Kanban(kanban_container, { /* configuration properties */ }); - const toolbar = new Toolbar(toolbar_container, { api: kanban.api }); - } -} -``` - -With this setup, DHTMLX Kanban is fully integrated into your **Salesforce Lightning** environment. The widget takes care of DOM hierarchy and event binding inside LWC for you. You can keep customizing Kanban through its regular API and tweak its look and logic to fit your project. If you want to see a finished example, head over to [**GitHub**](https://github.com/DHTMLX/salesforce-lwc-demo). \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md deleted file mode 100644 index 2ab5da58..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -sidebar_label: Integration with Svelte -title: Integration with Svelte -description: You can learn about the integration with Svelte in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Integration with Svelte - -:::tip -It's helpful to know the basics of **Svelte** before jumping in here. If you want to brush up, check out the [**Svelte documentation**](https://svelte.dev/docs/svelte/overview). -::: - -DHTMLX Kanban works well with **Svelte**. There are some code samples showing how to use DHTMLX Kanban in a Svelte project. For more details, check out the [**Example on GitHub**](https://github.com/DHTMLX/svelte-kanban-demo). - -## Creating a project - -:::info -Before starting a new project, make sure you have [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/) installed. -::: - -There are a couple of ways to set up a **Svelte** project: - -- You can use [**SvelteKit**](https://kit.svelte.dev/) - -or - -- You can use **Svelte with Vite** (without SvelteKit): - -~~~json -npm create vite@latest -~~~ - -You can find more info in the [related article](https://svelte.dev/docs/svelte/overview). - -### Installation of dependencies - -Let's call the project **my-svelte-kanban-app** and move into the app directory: - -~~~json -cd my-svelte-kanban-app -~~~ - -Install the dependencies and start the development server. You can use your preferred package manager: - -- For [**yarn**](https://yarnpkg.com/), use these commands: - -~~~json -yarn -yarn start -~~~ - -- For [**npm**](https://www.npmjs.com/), use these commands: - -~~~json -npm install -npm run dev -~~~ - -The app should now be running locally (for example at `http://localhost:3000`). - -## Creating Kanban - -Next, you'll need to get the DHTMLX Kanban source code. Stop the app for a moment and install the Kanban package. - -### Step 1. Package installation - -Download the [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow the README instructions. Just a heads up, the trial Kanban works for 30 days. - -### Step 2. Component creation - -Now it's time to make a Svelte component to add Kanban with a Toolbar to the app. Create a new file in the ***src/*** directory and call it ***Kanban.svelte***. - -#### Importing source files - -Open up ***Kanban.svelte*** and import the Kanban source files. Here are a couple of things to keep in mind: - -- If you're using the PRO version and installed Kanban from a local folder, your import paths would look like this: - -~~~html title="Kanban.svelte" - -~~~ - -Depending on the package, the CSS might be minified, so you might need to import **kanban.min.css** instead. - -- If you're using the trial version, use these paths: - -~~~html title="Kanban.svelte" - - -
-
-
-
-~~~ - -#### Loading data - -To get data into Kanban, you'll need to provide a data set. You can create a ***data.js*** file in the ***src/*** directory and add some sample data: - -~~~jsx {2,14,37,48} title="data.js" -export function getData() { - const columns = [ - { - label: "Backlog", - id: "backlog" - }, - { - label: "In progress", - id: "inprogress" - }, - // ... - ]; - - const cards = [ - { - id: 1, - label: "Integration with Angular/React", - priority: 1, - color: "#65D3B3", - start_date: new Date("01/07/2021"), - users: [3, 2], - column: "backlog", - type: "feature", - }, - { - label: "Archive the cards/kanbans ", - priority: 3, - color: "#58C3FE", - users: [4], - progress: 1, - column: "backlog", - type: "feature", - }, - // ... - ]; - - const rows = [ - { - label: "Feature", - id: "feature", - }, - { - label: "Task", - id: "task", - } - ]; - - return { columns, cards, rows }; -} -~~~ - -Then, in ***App.svelte***, import the data and pass it as **props** to your `` component: - -~~~html {3,5,8} title="App.svelte" - - - -~~~ - -Now, open ***Kanban.svelte*** and use the passed **props** in the Kanban configuration: - -~~~html {6-8,15-17} title="Kanban.svelte" - - -
-
-
-
-~~~ - -If you want, you can also use the [`setConfig()`](/api/methods/js_kanban_setconfig_method) or [`parse()`](/api/methods/js_kanban_parse_method/) method in Svelte's `onMount()` to load data into Kanban: - -~~~html {6-8,27} title="Kanban.svelte" - - -
-
-
-
-~~~ - -Both `setConfig()` and `parse(data)` methods are handy for reloading data whenever something changes. - -At this point, the Kanban component is good to go. Once it's on the page, it will initialize with your data. You can tweak the configuration as needed. To see all the available settings, check out the [Kanban API docs](/api/overview/properties_overview/). - -#### Handling events - -Whenever something happens in Kanban (like a user action), an event is triggered. You can use these events to run your own code. The [full list of events](/api/overview/events_overview/) is available. - -In ***Kanban.svelte***, update the `onMount()` method like this: - -~~~html {8-10} title="Kanban.svelte" - - -// ... -~~~ - -### Step 3. Adding Kanban into the app - -To bring the component into your app, open **App.svelte** and swap out the default code for this: - -~~~html title="App.svelte" - - - -~~~ - -Now you can start the app and see Kanban loaded with your data. - -import trial from '@site/static/img/trial_kanban.png'; - -Kanban with Svelte - -This is the basic setup for integrating DHTMLX Kanban with Svelte. Feel free to customize things to fit your needs. For a more advanced example, check out the [**GitHub**](https://github.com/DHTMLX/svelte-kanban-demo) repo. \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md deleted file mode 100644 index 272f6003..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md +++ /dev/null @@ -1,366 +0,0 @@ ---- -sidebar_label: Integration with Vue -title: Integration with Vue -description: You can learn about the integration with Vue in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Integration with Vue - -:::tip -It's helpful to know the basics of [**Vue**](https://vuejs.org/) before diving into this guide. If you need a refresher, check out the [**Vue 3 documentation**](https://vuejs.org/guide/introduction.html#getting-started). -::: - -DHTMLX Kanban works smoothly with **Vue**. There are sample code snippets demonstrating how to use DHTMLX Kanban with **Vue 3**. For more details, see the [**Example on GitHub**](https://github.com/DHTMLX/vue-kanban-demo). - -## Creating a project - -:::info -Make sure [**Node.js**](https://nodejs.org/en/) is installed before starting a new project. -::: - -To spin up a **Vue** project, just use: - -~~~json -npm create vue@latest -~~~ - -This command sets up and runs `create-vue`, which is the official **Vue** project starter. For more info, take a look at the [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). - -In this example, the project is named **my-vue-kanban-app**. - -### Installation of dependencies - -Move into your app's folder: - -~~~json -cd my-vue-kanban-app -~~~ - -Install the dependencies and start up the development server. Depending on your package manager, use one of these: - -- For [**yarn**](https://yarnpkg.com/): - -~~~jsx -yarn -yarn start // or yarn dev -~~~ - -- For [**npm**](https://www.npmjs.com/): - -~~~json -npm install -npm run dev -~~~ - -The app should now be running locally (for example, at `http://localhost:3000`). - -## Creating Kanban - -Next, grab the DHTMLX Kanban source code. Stop the app for now, and install the Kanban package. - -### Step 1. Package installation - -Download the [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) and follow the steps in the README. The trial version is available for 30 days. - -### Step 2. Component creation - -Create a new Vue component to add Kanban with a Toolbar to your app. In the ***src/components/*** directory, make a new file called ***Kanban.vue***. - -#### Import source files - -Open ***Kanban.vue*** and import the Kanban source files. Keep in mind: - -- If you're using the PRO version and installed the Kanban package from a local folder, your imports will look like this: - -~~~html title="Kanban.vue" - -~~~ - -Depending on your package, the source files might be minified. In that case, make sure to import **kanban.min.css** instead. - -- If you're using the trial version, use these paths: - -~~~html title="Kanban.vue" - -~~~ - -This guide shows how to set up the **trial** version of Kanban. - -#### Setting containers and adding Kanban with Toolbar - -To show Kanban with a Toolbar, set up containers for both and initialize them with their constructors: - -~~~html {2,7-8,10-14} title="Kanban.vue" - - - -~~~ - -#### Adding styles - -To make Kanban display properly, add these styles to your main CSS file: - -~~~css title="main.css" -/* specify styles for initial page */ -html, -body, -#app { /* make sure that you use the #app root container */ - height: 100%; - padding: 0; - margin: 0; -} - -/* specify styles for Kanban and Toolbar container */ -.component_container { - height: 100%; - margin: 0 auto; -} - -/* specify styles for Kanban container */ -.widget { - height: calc(100% - 56px); -} -~~~ - -#### Loading data - -To provide data for Kanban, create a ***data.js*** file in the ***src/*** directory and add your data like this: - -~~~jsx {2,14,37,48} title="data.js" -export function getData() { - const columns = [ - { - label: "Backlog", - id: "backlog" - }, - { - label: "In progress", - id: "inprogress" - }, - // ... - ]; - - const cards = [ - { - id: 1, - label: "Integration with Angular/React", - priority: 1, - color: "#65D3B3", - start_date: new Date("01/07/2021"), - users: [3, 2], - column: "backlog", - type: "feature", - }, - { - label: "Archive the cards/kanbans ", - priority: 3, - color: "#58C3FE", - users: [4], - progress: 1, - column: "backlog", - type: "feature", - }, - // ... - ]; - - const rows = [ - { - label: "Feature", - id: "feature", - }, - { - label: "Task", - id: "task", - } - ]; - - return { columns, cards, rows }; -} -~~~ - -Now, open ***App.vue***, import the data, and set it up using the `data()` method. Then pass it to the `` component as **props**: - -~~~html {3,8,10-12,19} title="App.vue" - - - -~~~ - -Then, in ***Kanban.vue***, use these **props** in the Kanban configuration object: - -~~~html {6,10-12} title="Kanban.vue" - - - -~~~ - -Alternatively, you can use the [`setConfig()`](/api/methods/js_kanban_setconfig_method) or [`parse()`](/api/methods/js_kanban_parse_method/) method in the `mounted()` hook to load data into Kanban: - -~~~html {6,22-26} title="Kanban.vue" - - - -~~~ - -The `setConfig` or `parse()` method lets you reload data whenever changes are made. - -At this point, the Kanban component is set up and ready. Once you add it to the page, it initializes with your data. You can also pass in any extra configuration you need. To see all available properties, visit the [Kanban API docs](/api/overview/properties_overview/). - -#### Handling events - -When actions happen in Kanban, events are triggered. You can listen for these events and run your own code in response. Check out the [full list of events](/api/overview/events_overview/). - -In ***Kanban.vue***, update the `mounted()` method like this: - -~~~html {8-10} title="Kanban.vue" - - -// ... -~~~ - -Now, go ahead and run the app to see the Kanban board loaded with your data. - -import trial from '@site/static/img/trial_kanban.png'; - -Kanban with Vue - -This is the basic setup for integrating DHTMLX Kanban with Vue. The code can be tweaked as needed. For a more advanced example, check out the project on [**GitHub**](https://github.com/DHTMLX/vue-kanban-demo). \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/localization.md deleted file mode 100644 index ba262c96..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/localization.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -sidebar_label: Localization -title: Localization -description: You can learn about the localization in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Localization - -All the labels in the JavaScript Kanban interface can be customized for different languages. To do this, it's possible to either create a new locale or tweak an existing one, then set it up for both Kanban and Toolbar (these need to be done separately). - -## Default locale - -By default, Kanban uses the **English** locale: - -~~~jsx -const en = { - kanban: { - Save: "Save", - Close: "Close", - Delete: "Delete", - Name: "Name", - Description: "Description", - Type: "Type", - "Start date": "Start date", - "End date": "End date", - Files: "Files", - B: "B", - KB: "KB", - MB: "MB", - GB: "GB", - TB: "TB", - PB: "PB", - EB: "EB", - "Make cover": "Make cover", - "Remove cover": "Remove cover", - Comments: "Comments", - Links: "Links", - Result: "Result", - "No results": "No results", - Search: "Search", - "Search in": "Search in", - "Add new row": "Add new row", - "Add new column": "Add new column", - "Add new card...": "Add new card...", - "Add new card": "Add new card", - "Edit card": "Edit card", - Edit: "Edit", - - Everywhere: "Everywhere", - Label: "Label", - Status: "Status", - Color: "Color", - Date: "Date", - Priority: "Priority", - Progress: "Progress", - Users: "Users", - - Untitled: "Untitled", - Rename: "Rename", - "Move up": "Move up", - "Move down": "Move down", - "Move left": "Move left", - "Move right": "Move right", - Sort: "Sort", - "Label (a-z)": "Label (a-z)", - "Label (z-a)": "Label (z-a)", - "Description (a-z)": "Description (a-z)", - "Description (z-a)": "Description (z-a)", - - "Add link": "Add link", - Duplicate: "Duplicate", - "Duplicate of": "Duplicate of", - "Relates to": "Relates to", - "Depends on": "Depends on", - "Is required for": "Is required for", - Duplicates: "Duplicates", - "Is duplicated by": "Is duplicated by", - "Is parent for": "Is parent for", - "Is subtask of": "Is subtask of", - - Cancel: "Cancel", - "Link task": "Link task", - "Select a relation": "Select a relation", - "Select a task": "Select a task", - - Send: "Send", - "Would you like to delete this comment?": - "Would you like to delete this comment?", - "No comments yet": "No comments yet", - "Would you like to delete this card?": - "Would you like to delete this card?", - }, - calendar: { // translations and settings of the calendar - monthFull: [ - "January", "February", "March", "April", - "May", "June", "July", "August", - "September", "October", "November", "December" - ], - monthShort: [ - "Jan", "Feb", "Mar", "Apr", - "May", "Jun", "Jul", "Aug", - "Sep", "Oct", "Nov", "Dec" - ], - dayFull: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday" - ], - dayShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], - hours: "Hours", - minutes: "Minutes", - done: "Done", - clear: "Clear", - today: "Today", - am: ["am", "AM"], - pm: ["pm", "PM"], - weekStart: 7, - timeFormat: 24 - }, - core: { // translations of the core elements - ok: "OK", - cancel: "Cancel" - } -}; -~~~ - -## Built-in locales - -Kanban comes with several ready-to-use locales: - -**"en"** - English -**"de"** - German -**"cn"** - Chinese -**"es"** - Spanish -**"fr"** - French -**"it"** - Italian -**"jp"** - Japanese -**"pt"** - Portuguese -**"ru"** - Russian - -A built-in locale can be imported and set up like this: - -```jsx {5} -// create Kanban -const board = new kanban.Kanban("#root", { - columns, - cards, - locale: kanban.locales["cn"] // the built-it "cn" locale will be set initially - // other parameters -}); - -// apply the built-in "de" locale to Kanban -board.setLocale(kanban.locales["de"]); -``` - -## Custom locale - -For a custom locale, a few steps are needed: - -- Make a new locale (or change the default one) and translate all text labels as needed - -- Set the new locale for **Kanban** using its [`locale`](api/config/js_kanban_locale_config.md) property or the [`setLocale()`](api/methods/js_kanban_setlocale_method.md) method -- Set the new locale for **Toolbar** using its [`locale`](api/config/toolbar_locale_config.md) property or the [`setLocale()`](api/methods/toolbar_setlocale_method.md) method - -## Example - -Here's a snippet that shows how to switch between different locales: - - \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/stylization.md deleted file mode 100644 index 6b81d505..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/stylization.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -sidebar_label: Stylization -title: Stylization -description: You can learn about the stylization in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Stylization - -With Kanban, it's easy to tweak the look of **columns**, **rows**, and **cards** by using the [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md), and [`cardShape.css`](api/config/js_kanban_cardshape_config.md) properties. These options let you style columns, rows, and cards based on certain conditions. - -If you want to add a custom CSS class to a specific **column**, **row**, or **card**, you can do that with the [`columns.css`](api/config/js_kanban_columns_config.md), [`rows.css`](api/config/js_kanban_rows_config.md), and [`cards.css`](api/config/js_kanban_cards_config.md) properties. - -It's also possible to add your own styles to any part of the Kanban interface to better fit your project's needs. The library comes with lots of CSS variables for easy customization. There are two main sets of variables: -- CSS variables for the **Kanban** style -- CSS variables for the **WX** library style (like controls, calendars, etc.) - -:::info -The **WX** library is used under the hood for some internal features. It covers smaller elements in Kanban, such as controls and calendars. -::: - -## Default style - -~~~css -.wx-material-theme { - /* WX library css variables */ - --wx-field-width: 100%; - --wx-theme-name: material; - /* end of WX library css variables */ - - /* Kanban css variables*/ - --wx-kanban-background: #f1f1f1; - - /* column styles */ - --wx-kanban-column-width: 300px; - --wx-kanban-column-height: 300px; - - /* toolbar styles */ - --wx-kanban-toolbar-height: 56px; - --wx-kanban-toolbar-align: center; - --wx-kanban-toolbar-justify: flex-start; - --wx-kanban-toolbar-control-hover: rgba(0, 0, 0, 0.07); - --wx-kanban-toolbar-control-active: rgba(0, 0, 0, 0.15); - --wx-kanban-toolbar-border: var(--wx-border); - - /* card styles */ - --wx-kanban-card-field-padding: 12px; - --wx-kanban-content-background: var(--wx-background); - --wx-kanban-card-border: var(--wx-border); - --wx-kanban-card-border-radius: 6px; - --wx-kanban-header-border-radius: var(--wx-kanban-card-border-radius); - - /* row styles */ - --wx-kanban-row-line: var(--wx-border); - - /* user icon styles */ - --wx-kanban-user-icon-size: 36px; - - /* editor styles */ - --wx-kanban-header-height: 64px; - --wx-kanban-editor-width: 569px; - --wx-kanban-editor-height: auto; - --wx-kanban-editor-x-padding: 20px; - --wx-kanban-editor-background: var(--wx-kanban-content-background); - --wx-kanban-editor-top-border: none; - - /* column styles */ - --wx-kanban-over-limit-color: var(--wx-color-danger); - --wx-kanban-collapsed-column-width: 44px; - --wx-kanban-z-index: 1; - - /* progress control styles*/ - --wx-progress-height: 4px; - --wx-kanban-progress-inactive-color: #dbdbdb; - - /* menu styles */ - --wx-kanban-menu-min-width: 100px; - - /* box and shadow styles*/ - --wx-kanban-shadow: none; - --wx-kanban-box-border: var(--wx-border); - - /* collapsed column styles */ - --wx-kanban-collapsed-padding: var(--wx-padding); - --wx-kanban-collapsed-margin: 0px; - --wx-kanban-collapsed-background: transparent; - --wx-kanban-collapsed-background-hover: #dfdfdf; - -/* End of Kanban CSS variables*/ -} -~~~ - -:::tip Note -Future Kanban releases might update some variables or their names. It's a good idea to double-check the variable names after upgrading to a new version and update your code if needed to make sure everything displays correctly. -::: - -## Scroll style - -The scroll bar in Kanban can be styled too. Just use the `.wx-styled-scroll` CSS class. Before adding it, it's worth checking if it works with the browsers you're targeting - you can do that [here](https://caniuse.com/css-scrollbar). - -~~~html {4} title="index.html" - -
// - -
-~~~ - -## Custom style - -Here's a snippet that shows how to set up a custom style for Kanban. - - - -## Adaptivity - -This snippet demonstrates how to make Kanban adapt to different screen sizes using custom CSS. - - - -**Related articles:** [Customization](guides/customization.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/typescript_support.md deleted file mode 100644 index 32bad9e2..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/typescript_support.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -sidebar_label: TypeScript support -title: TypeScript support -description: You can learn about using typescript with the DHTMLX JavaScript Kanban library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# TypeScript support - -From version 1.1, DHTMLX Kanban comes with TypeScript definitions included. TypeScript works right out of the box with the library. - -:::note -The Snippet Tool is a great place to check out how everything works. -::: - -## Advantages of using TypeScript - -So, what's good about using DHTMLX Kanban with TypeScript? - -TypeScript helps make development smoother and more efficient. With type checking and autocomplete, catching mistakes early becomes much easier. Plus, TypeScript gives clear hints about what kind of data to use with the DHTMLX Kanban API, which helps keep things on track while building apps. \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/working_with_data.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/working_with_data.md deleted file mode 100644 index 051dea09..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/working_with_data.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -sidebar_label: Working with data -title: Working with Data -description: You can explore how to work with Data in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Working with data - -## Initial data loading - -When setting up Kanban, it's possible to pass in the initial data for [**columns**](api/config/js_kanban_columns_config.md), [**cards**](api/config/js_kanban_cards_config.md), [**rows**](api/config/js_kanban_rows_config.md), and [**links**](api/config/js_kanban_links_config.md). - -~~~jsx {1,17,81,94,106-109} -const columns = [ // data for columns - { - label: "Backlog", - id: "backlog" - }, - { - label: "In progress", - id: "inprogress" - }, - { - label: "Testing", - id: "testing" - }, - {...} -]; - -const cards = [ // data for cards - { - id: 1, - label: "Integration with React", - priority: 1, - color: "#65D3B3", - description: "Some description...", - - start_date: new Date("01/05/2021"), - end_date: new Date("01/15/2021"), - - progress: 25, - users: [1,2,3,4], - sprint: "1.0", - column: "backlog", - type: "feature", - css: "red", - votes: [4,6,9], - comments: [ - { - id: 1, - userId: 9, - cardId: 6, - text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays.", - date: new Date(), - },{...} - ] - }, - { - id: 2, - label: "Archive the cards/boards ", - priority: 2, - color: "#FFC975", - - start_date: new Date("01/05/2021"), - end_date: new Date("01/15/2021"), - - sprint: "1.0", - column: "backlog", - type: "feature" - }, - { - label: "Searching and filtering", - priority: 1, - color: "#65D3B3", - - start_date: new Date("01/05/2021"), - - sprint: "1.2", - column: "backlog", - type: "task" - }, - { - label: "Set the tasks priorities", - priority: 2, - color: "#58C3FE", - - sprint: "1.2", - column: "inprogress", - type: "feature" - }, - {...} -]; - -const rows = [ // data for rows - { - label: "Feature", - id: "feature" - }, - { - label: "Task", - id: "task", - collapsed: true - }, - {...} -]; - -const links = [ - { - id: "link_1", - source: 1, - target: 2, - relation: "relatesTo", - }, - {...} -]; - -// initializing Kanban with the initial data for columns, cards and rows -new kanban.Kanban("#root", { - columns, - cards, - rows, - links -}); -~~~ - -## Loading data from local source - -To bring in data for ***columns***, ***rows***, ***cards***, and ***links*** from a local source, use the [`setConfig()`](api/methods/js_kanban_setconfig_method.md) or [`parse()`](api/methods/js_kanban_parse_method.md) method. Just pass an object with the data you want to load. - -~~~js {4} -const board = new kanban.Kanban("#root", {}); - -// loading data into Kanban -board.setConfig({ columns, cards, rows }); -// or board.parse({ columns, cards, rows }); -~~~ - -## Syncing Kanban data with Gantt and Scheduler - -Here's a quick look at how Kanban data can sync up with other DHTMLX widgets like [**Gantt**](https://dhtmlx.com/docs/products/dhtmlxGantt/) and [**Scheduler**](https://dhtmlx.com/docs/products/dhtmlxScheduler/): - - - -## Getting Kanban data - -There are a few methods available for grabbing Kanban data: - -- [`getAreaCards()`](api/methods/js_kanban_getareacards_method.md) - returns an array of card data objects for a specific column (and row) -- [`getCard()`](api/methods/js_kanban_getcard_method.md) - returns the data object for a card by its ID -- [`serialize()`](api/methods/js_kanban_serialize_method.md) - serializes all Kanban data to JSON - -## Getting Kanban state - -To check the state of Kanban, these methods come in handy: - -- [`api.getReactiveState()`](api/internal/js_kanban_getreactivestate_method.md) - gets an object with the reactive properties from *StateStore* -- [`api.getState()`](api/internal/js_kanban_getstate_method.md) - gets an object with the current properties from *StateStore* -- [`api.getStores()`](api/internal/js_kanban_getstores_method.md) - gets an object with both *StateStore* and *DataStore* - -## Exporting Kanban data - -When exporting Kanban data, this method is available: - -- [`export.json()`](api/internal/js_kanban_json_method.md) - exports Kanban data into a JSON file - -## Adding new items - -To add new *cards*, *columns*, or *rows*, these methods are useful: - -- [`addCard()`](api/methods/js_kanban_addcard_method.md) - creates a new card in Kanban -- [`addColumn()`](api/methods/js_kanban_addcolumn_method.md) - creates a new column in Kanban -- [`addRow()`](api/methods/js_kanban_addrow_method.md) - creates a new row in Kanban - -## Updating items - -To make changes to *cards*, *columns*, or *rows*, try these methods: - -- [`updateCard()`](api/methods/js_kanban_updatecard_method.md) - updates card data by its ID -- [`updateColumn()`](api/methods/js_kanban_updatecolumn_method.md) - updates column data by its ID -- [`updateRow()`](api/methods/js_kanban_updaterow_method.md) - updates row data by its ID - -## Deleting items - -To remove *cards*, *columns*, or *rows*, the following methods are available: - -- [`deleteCard()`](api/methods/js_kanban_deletecard_method.md) - deletes a card from Kanban by its ID -- [`deleteColumn()`](api/methods/js_kanban_deletecolumn_method.md) - deletes a column from Kanban by its ID -- [`deleteRow()`](api/methods/js_kanban_deleterow_method.md) - deletes a row from Kanban by its ID - -## Moving items - -To move *cards*, *columns*, or *rows* around, these methods will help: - -- [`moveCard()`](api/methods/js_kanban_movecard_method.md) - moves a card to another column and row -- [`moveColumn()`](api/methods/js_kanban_movecolumn_method.md) - moves a column to a new position -- [`moveRow()`](api/methods/js_kanban_moverow_method.md) - moves a row to a new position - -## Example - -Here's a snippet showing how the Kanban API can be used for working with data: - - \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/working_with_server.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/working_with_server.md deleted file mode 100644 index 1070d8f4..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/guides/working_with_server.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -sidebar_label: Working with server -title: Working with Server -description: You can explore how to work with Server in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Working with server - -JavaScript Kanban makes it easy to work with both client and server data. The widget doesn't have strict backend requirements and can connect to any backend platform that supports the REST API (RESTful API). - -:::info -The widget comes with built-in **Go** and **Node** backends, but you're free to use your own server scripts too. -::: - -## RestDataProvider - -JavaScript Kanban includes the **RestDataProvider** service, which is fully compatible with REST APIs for backend integration. With it, you can interact with your server and perform these data operations: - -- ***"add-card"*** -- ***"add-column"*** -- ***"add-comment"*** -- ***"add-row"*** -- ***"add-link"*** -- ***"delete-card"*** -- ***"delete-column"*** -- ***"delete-comment"*** -- ***"delete-row"*** -- ***"delete-link"*** -- ***"move-card"*** -- ***"move-column"*** -- ***"move-row"*** -- ***"update-card"*** -- ***"update-column"*** -- ***"update-comment"*** -- ***"update-row"*** - -## REST methods - -The **RestDataProvider** service offers special REST methods for loading data dynamically: - -- [`getCards()`](api/provider/rest_methods/js_kanban_getcards_method.md) - returns a promise with ***cards data*** -- [`getColumns()`](api/provider/rest_methods/js_kanban_getcolumns_method.md) - returns a promise with ***columns data*** -- [`getLinks()`](api/provider/rest_methods/js_kanban_getlinks_method.md) - returns a promise with ***links data*** -- [`getRows()`](api/provider/rest_methods/js_kanban_getrows_method.md) - returns a promise with ***rows data*** -- [`getUsers()`](api/provider/rest_methods/js_kanban_getusers_method.md) - returns a promise with ***users data*** - -## Interacting with backend - -To work with the server, just connect **RestDataProvider** to your server scripts. If you're using the built-in backend, you'll find the scripts here: - -- [**Go**](https://github.com/web-widgets/kanban-go) backend -- [**Node**](https://github.com/web-widgets/kanban-node) backend - -Or you can set up your own backend. - -:::tip -If you're using a custom backend, check out the [**REST API routes**](api/overview/rest_routes_overview.md) for more details. -::: - -To hook up **RestDataProvider** to your backend, just call the **kanban.RestDataProvider** constructor and pass in the backend **URL**. - -~~~js {1-2,27} -const url = "https://some_backend_url"; -const restProvider = new kanban.RestDataProvider(url); - -Promise.all([ - restProvider.getUsers(), - restProvider.getCards(), - restProvider.getColumns(), - restProvider.getLinks(), - restProvider.getRows() -]).then(([users, cards, columns, links, rows]) => { - const board = new kanban.Kanban("#root", { - cards, - columns, - links, - rows, - rowKey: "type", - editorShape: [ - ...kanban.defaultEditorShape, - { - type: "multiselect", - key: "users", - label: "Users", - values: users - } - ] - }); - board.api.setNext(restProvider); -}); -~~~ - -:::info -Make sure to include **RestDataProvider** in the **Event Bus** chain with [**api.setNext()**](api/internal/js_kanban_setnext_method.md) so you can add, delete, and update data-and send requests to your server. -::: - -### Example - -Here's a snippet showing how to connect **RestDataProvider** to the **Go** backend and load data from the server: - - - -## Multiuser backend - -Kanban boards are popular for all kinds of teams and companies. To make collaboration smooth for multiple users, there's a feature that lets everyone manage the same cards in real-time-no page reloads needed. This means users can work together and instantly see each other's changes, which helps keep everyone in sync. - -To set up a multiuser backend, you'll need to handle authorization on the server before initializing Kanban. Here's a simple `login(url: string)` function for that: - -~~~js {} -const login = (url) => { - var token = sessionStorage.getItem("login-token"); - if (token) { - return Promise.resolve(token); - } - - return fetch(url + "/login?id=1") - .then(raw => raw.text()) - .then(token => { - sessionStorage.setItem("login-token", token); - return token; - }); -}; -~~~ - -This function just simulates login, and everyone gets authorized with ID 1. After logging in, the server sends back a token. You'll need to include this token in every request. The `RestDataProvider.setHeaders()` function makes this easy by adding custom headers. By default, the token goes into the `"Remote-Token":` header: - -~~~js {} -login(url).then(token => { - // rest provider initialization - const restProvider = new kanban.RestDataProvider(url); - // set token as the custom header - restProvder.setHeaders({ - "Remote-Token": "eyJpZCI6IjEzMzciLCJ1c2VybmFtZSI6ImJpem9uZSIsImlhdC...", - }); - - // widget initialization... -}); -~~~ - -Once you have the token, you can initialize the widget like this: - -~~~js {} -// widget initialization... -Promise.all([ - restProvider.getCards(), - restProvider.getColumns(), - restProvider.getLinks(), - restProvider.getRows(), -]).then(([cards, columns, links, rows]) => { - const board = new Kanban("#root", { - cards, - columns, - links, - rows, - rowKey: "row", - cardShape, - editorShape, - }); - - // save data from client to server - board.api.setNext(restProvider); - - // multiuser initialization... -}); -~~~ - -After setting up the widget, you'll want to add a WebSocket to listen for server events. Here's how to do it: - -~~~js {} -// multiuser initialization... - -// get client handlers for server events -const handlers = kanbanUpdates( - board.api, - restProvider.getIDResolver() -); -// connect to server events -const events = new RemoteEvents(url + "/api/v1", token); -// attach client handlers on server events -events.on(handlers); -~~~ - -- `handlers` - these handle events coming from the server -- `events` - this connects to the server and listens for incoming events -- `RemoteEvents.on(handlers)` - applies your handlers to server events - -With the multiuser backend in place, it's much easier for teams to collaborate and see updates in real-time right in the UI. - -### Example - -Check out this snippet to see how to set up a multiuser backend and track changes from other users in real-time: - - - -## Customization of server events - -You can set up your own logic for handling server events. To do this, just pass a **handlers** object to the `RemoteEvents.on(handlers)` method. The **handlers** object should look like this: - -~~~js {} -{ - "cards": cardsHandler: function(obj: any), - "columns": columnsHandler: function(obj: any), - "links": linksHandler: function(obj: any), - "rows": rowsHandler: function(obj: any), -} -~~~ - -Whenever something changes on the server, it sends back the name of the changed element. These names might vary depending on how your server works. - -Any data updated on the client side will be passed as the **obj** argument to `function(obj: any)`. The `type: string` field tells you what operation happened, and can be one of these: - -- For **cards**: `"add-card"`, `"update-card"`, `"delete-card"`, `"move-card"` -- For **columns**: `"add-column"`, `"update-column"`, `"delete-column"`, `"move-column"` -- For **links**: `"add-link"`, `"delete-link"` -- For **rows**: `"add-row"`, `"update-row"`, `"delete-row"`, `"move-row"` - -Here's an example showing how this works: - -~~~js {} -// initialize kanban -const board = new kanban.Kanban(...); -const restProvider = new kanban.RestDataProvider(url); -const idResolver = restProvider.getIDResolver(); -const TypeCard = 1; -const TypeRow = 2; -const TypeCol = 3; - -const cardsHandler = (obj: any) => { - obj.card.id = idResolver(obj.card.id, TypeCard); - obj.card.row = idResolver(obj.card.row, TypeRow); - obj.card.column = idResolver(obj.card.column, TypeColumn); - switch (obj.type) { - case "add-card": - board.api.exec("add-card", { - card: obj.card, - select: false, - skipProvider: true, // prevent the client from sending request to the server - }) - break; - // other operations - } -} - -// add custom handlers -const handlers = { - cards: cardsHandler, -}; - -const remoteEvents = new kanban.RemoteEvents(remoteEventsURL, token); -remoteEvents.on(handlers); -~~~ - -The `RestDataProvider.getIDResolver()` method gives you a function to keep client and server IDs in sync. When you create a new object (card/column/row/link) on the client, it gets a temporary ID and a server ID in the store. The `idResolver()` function helps match up the client ID with the server ID. Here's how it looks: `idResolver(id: TID, type: number)` - -The `type` argument is the model type: - -- `CardID` - 1, -- `RowID` - 2, -- `ColumnID` - 3 -- `LinkID` - 4 - -To keep the client from sending a duplicate request to the server, use `skipProvider: true` when calling `board.api.exec()`. - -Once you've set up your custom handlers, you can handle server events however you like. - -## Grouping two or more statuses into a single column - -Sometimes you might want to show cards from different columns all together in a single column (like combining *To do* and *Unassigned* statuses into one column). - -To do this, you can add a custom field (for example, **status**) that keeps track of the card's current status. The **column** field will hold the general column status. - -Next, set up rules for grouping cards. For example, you might group cards into columns like this: - -- *todo*, *unassigned* go into the **Open** column -- *dev*, *testing* go into the **Inprogress** column -- *merged*, *released* go into the **Done** column - -There are a couple of ways to group cards by status into a single column: - -- [Server side](#server-side-grouping) -- [Server side + client side](#server-side-client-side-grouping) - -### Server side grouping - -If you want to do the grouping on the server, your backend needs to send data to the client using [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) (see [Multiuser backend](#multiuser-backend)). - -When the server handles an update for a card, check the **status** field. Here's how you might do it in [Go](https://go.dev/), but you can use any backend tech you like. - -~~~go -func Update(id int, c Card) error { - // ... - oldColumn := c.Column - s := data.Status - if s == "todo" || s == "unassigned" { - c.Column = "open" - } else if s == "dev" || s == "testing" { - c.Column = "inprogress" - } else if s == "merged" || s == "released" { - c.Column = "done" - } - - db.Save(&c) - - if oldColumn != c.Column { - // if the column has been updated by the status field, - // the client should be notified to move the card to the corresponding column - - // need to update the index of the card - updateCardIndex(&c) - - // notify client to update the column - ws.Publish("card-update", &c) - } - // ... -} -~~~ - -So when a user changes the status, the server checks it and puts the card in the right column. Then, the server uses WebSocket to let the client know the card needs to move. - -### Server side + client side grouping {#server-side-client-side-grouping} - -For a mixed approach, get the grouping rules from the server. Then, the client can figure out which column a card belongs to based on its status. - -~~~js -const groupingRules = await fetch("http://server.com/rules"); -~~~ - -Here's what the rules might look like: - -~~~json -{ - "open": ["todo", "unassigned"], - "progress": ["dev", "testing"], - "done": ["merged", "released"], -} -~~~ - -Now, set up logic to check for changes and move cards to the right column: - -~~~js -const updateColumn = card => { - for (let col in groupingRules) { - if (groupingRules[col].includes(card.status)) { - card.column = col; - break; - } - } -}; - -kanban.api.intercept("move-card", ev => { - kanban.api.exec("update-card", { - id: ev.id, - card: { status: groupingRules[ev.columnId][0], - }); -}); - -kanban.api.intercept("update-card", ev => { - updateColumn(ev.card); -}); -~~~ - -This way, you can group cards into columns based on other fields. - -### Example - -Here's a snippet showing how to set up the server to group two or more statuses into a single column in real-time: - - \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/en/docusaurus-plugin-content-docs/current/how_to_start.md deleted file mode 100644 index 3f69bde4..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/how_to_start.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -sidebar_label: How to start -title: How to Start -description: You can explore how to start working with DHTMLX Kanban in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# How to start - -Here's a straightforward walkthrough for getting a working Kanban board up and running on your page. - -import editor from '@site/static/img/js_kanban_editor.png'; - -JS Kanban Main - -## Step 1. Including source files - -Start by creating an HTML file named *index.html*. After that, add the Kanban source files into your new file. - -You'll need two files: - -- the Kanban JS file -- the Kanban CSS file - -~~~html {5-6} title="index.html" - - - - How to Start with Kanban - - - - - - - -~~~ - -### Installing Kanban via npm or yarn - -It's easy to add JavaScript Kanban to your project using either `yarn` or `npm`. - -#### Installing trial Kanban via npm or yarn - -:::info -If you're interested in the trial version, just download the [**trial Kanban package**](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and follow the steps in the *README* file. Keep in mind, the trial lasts for 30 days. -::: - -#### Installing PRO Kanban via npm or yarn - -:::info -The DHTMLX private **npm** is available in the [Client's Area](https://dhtmlx.com/clients/), where you can generate your login and password for **npm**. There's also a detailed installation guide there. Remember, access to the private **npm** is only available while your Kanban license is active. -::: - -## Step 2. Creating Kanban - -Now it's time to add Kanban to the page. First, set up the DIV containers for Kanban and its Toolbar. Here's what to do: - -- Add two DIV containers to your *index.html* file -- Initialize Kanban and its Toolbar using the **kanban.Kanban** and **kanban.Toolbar** constructors - -:::info -The Toolbar is optional. If you want Kanban without a Toolbar, just use a single DIV container and initialize the widget with the **kanban.Kanban** constructor. -::: - -The constructors take the IDs of the HTML containers where Kanban and the Toolbar will go, along with their configuration objects. - -~~~html {9-10,13-15,17-19} title="index.html" - - - - How to Start with Kanban - - - - -
-
- - - - -~~~ - -## Step 3. Configuring Kanban - -Now you can set up the configuration properties you want Kanban to use when it starts. - -To get going, you'll need to provide some initial data for **cards** and **columns** (and *rows* if needed). -Besides the initial data, you can also tweak the look and feel of [cards](guides/configuration.md#cards), the [editor](guides/configuration.md#editor), and the [toolbar](guides/configuration.md#toolbar). - -~~~jsx {2-7,11-18} -const board = new kanban.Kanban("#root", { - cards, - columns, - rows, - rowKey: "row", - cardShape, - editorShape -}); - -new kanban.Toolbar("#toolbar", { - api: board.api, - items: [ - "search", - "spacer", - "sort", - "addColumn", - "addRow" - ] -}); -~~~ - -## What's next - -That's it-just three easy steps and the Kanban board is ready for action. You can start managing your tasks or dive deeper into what JavaScript Kanban has to offer. \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/howtos.md b/i18n/en/docusaurus-plugin-content-docs/current/howtos.md deleted file mode 100644 index a62f66a8..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/howtos.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -sidebar_label: How-tos -title: JavaScript Kanban How-Tos -description: You can explore the How-tos page of DHTMLX JavaScript Kanban library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# How-tos - -Here's a handy reference for getting started with JavaScript Kanban, including setup, configuration, customization, and everyday use. - -## Basic principles - -This section covers the essentials for working with Kanban. - -| Topic | Description | -| --------------------------------------------- | ---------------------------------------------------------| -| [Initialization](guides/initialization.md) | How to get Kanban up and running ([Example](https://snippet.dhtmlx.com/gb50vyip?tag=kanban))| -| [Configuration](guides/configuration.md) | How to tweak Kanban settings | -| [Customization](guides/customization.md) | Ways to adjust Kanban to fit your needs | -| [Stylization](guides/stylization.md) | Options for changing Kanban's look and feel | -| [Localization](guides/localization.md) | How to set up Kanban for different languages ([Example](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban))| - -## API reference - -Here you'll find links to all the main Kanban API docs. - -| Topic | Description | -| ----------------------------------------------------- | ---------------------------------------------------------| -| [Kanban events](api/overview/events_overview.md) | Details on handling Kanban events | -| [Kanban methods](api/overview/methods_overview.md) | Overview of available Kanban methods | -| [Kanban properties](api/overview/properties_overview.md)| Info on Kanban properties | -| [Event Bus methods](api/overview/internal_eventbus_overview.md)| Working with Event Bus methods | -| [RestDataProvider methods](api/overview/internal_rest_overview.md)| Using RestDataProvider methods | -| [State methods](api/overview/internal_state_overview.md)| Managing state with State methods | -| [Toolbar methods](api/overview/toolbar_methods_overview.md)| Toolbar method options | -| [Toolbar properties](api/overview/toolbar_properties_overview.md)| Toolbar property details | - -## How to work with cards - -These sections break down how to manage cards, handle card data, and adjust card settings. - -### Performing operations with cards - -| Topic | Description | -| ------------------------------------------------------------ | --------------------------------------------| -| [Adding new cards](api/methods/js_kanban_addcard_method.md) | Steps for adding new cards ([Example](https://snippet.dhtmlx.com/61crsls3?tag=kanban)) | -| [Deleting cards](api/methods/js_kanban_deletecard_method.md) | How to remove cards ([Example](https://snippet.dhtmlx.com/61crsls3?tag=kanban)) | -| [Moving cards](api/methods/js_kanban_movecard_method.md) | How to move cards around ([Example](https://snippet.dhtmlx.com/61crsls3?tag=kanban)) | -| [Scrolling to the desired cards](api/methods/js_kanban_scroll_method.md)| How to scroll to a specific card| -| [Searching for cards](api/methods/js_kanban_setsearch_method.md)| How to find cards quickly | -| [Selecting cards](api/methods/js_kanban_selectcard_method.md)| How to select cards | -| [Sorting cards](api/methods/js_kanban_setsort_method.md) | How to sort cards | -| [Unselecting cards](api/methods/js_kanban_unselectcard_method.md)| How to unselect cards | -| [Adding links between cards](api/config/js_kanban_links_config.md)| How to link cards together ([Example](https://snippet.dhtmlx.com/81qu7qh0?tag=kanban)) | - -### Working with card data - -| Topic | Description | -| ------------------------------------------------------------ | ----------------------------------------------------| -| [Getting card data](api/methods/js_kanban_getcard_method.md) | How to access card data | -| [Getting cards state](api/internal/js_kanban_getstate_method.md) | How to check the current state of cards | -| [Getting cards reactive state](api/internal/js_kanban_getreactivestate_method.md) | How to get the reactive state for cards | -| [Loading card data](api/config/js_kanban_cards_config.md) | How to load initial card info | -| [Parsing card data](api/methods/js_kanban_parse_method.md) | How to parse card data | -| [Serializing card data](api/methods/js_kanban_serialize_method.md)| How to serialize card data ([Example](https://snippet.dhtmlx.com/61crsls3?tag=kanban))| -| [Updating card data](api/methods/js_kanban_updatecard_method.md)| How to update card info | - -### Configuring cards - -| Topic | Description | -| ------------------------------------------------------------ | ----------------------------------------------------| -| [Adding new cards](api/config/js_kanban_readonly_config.md) | Enable or disable adding new cards| -| [Binding cards into columns](api/config/js_kanban_columnkey_config.md) | How to assign cards to columns | -| [Binding cards into rows](api/config/js_kanban_rowkey_config.md) | How to assign cards to rows | -| [Configuring a card appearance](api/config/js_kanban_cardshape_config.md)| Options for card appearance| -| [Configuring a cards menu](api/config/js_kanban_cardshape_config.md)| How to set up a context menu for cards ([Example](https://snippet.dhtmlx.com/8eo65gr5?tag=kanban))| -| [Customizing a card appearance](api/config/js_kanban_cardtemplate_config.md)| How to use templates for card appearance ([Example](https://snippet.dhtmlx.com/8rhdq81d?tag=kanban))| -| [Dragging cards](api/config/js_kanban_readonly_config.md) | Enable or disable drag-and-drop for cards| -| [Editing cards](api/config/js_kanban_readonly_config.md) | Enable or disable editing for cards| -| [Lazy rendering](api/config/js_kanban_rendertype_config.md)| Enable or disable lazy rendering for lots of cards ([Example](https://snippet.dhtmlx.com/xez9ghqq?text=#kanban))| -| [Limiting cards](api/config/js_kanban_columns_config.md) | Set limits for cards in columns or swimlanes (**WIP validation**) ([Example](https://snippet.dhtmlx.com/2blo6hx8?text=kanban))| -| [Selecting cards](api/config/js_kanban_readonly_config.md) | Enable or disable card selection| -| [Setting a fix height of cards](api/config/js_kanban_cardheight_config.md)| How to set a fixed card height | -| [Updating card settings](api/methods/js_kanban_setconfig_method.md)| How to update card settings | - -## How to work with a card editor - -Here's how to use and configure the card editor. - -| Topic | Description | -| ------------------------------------------------------------ | -------------------------------------------------------| -| [Autosaving mode](api/config/js_kanban_editorautosave_config.md)| Enable or disable autosave for the editor | -| [Configuring editor fields](guides/configuration.md#editor)| How to set up editor fields | -| [Configuring the editor](guides/configuration.md#configuring-the-editor)| How to adjust editor settings | -| [Updating editor settings](api/methods/js_kanban_setconfig_method.md)| How to update editor settings | - -## How to work with columns - -These sections explain how to manage columns and deal with their data. - -### Performing operations with columns - -| Topic | Description | -| --------------------------------------------------------------- | ----------------------------------------------------| -| [Adding new columns](api/methods/js_kanban_addcolumn_method.md) | How to add columns ([Example](https://snippet.dhtmlx.com/61crsls3?tag=kanban))| -| [Configuring a columns menu](api/config/js_kanban_columnshape_config.md)| How to set up a context menu for columns ([Example](https://snippet.dhtmlx.com/8eo65gr5?tag=kanban))| -| [Deleting columns](api/methods/js_kanban_deletecolumn_method.md)| How to remove columns | -| [Moving columns](api/methods/js_kanban_movecolumn_method.md) | How to move columns | -| [Scrolling to the desired columns](api/methods/js_kanban_scroll_method.md)| How to scroll to a specific column | -| [Separate scrolling for columns](api/config/js_kanban_scrolltype_config.md)| How to enable separate scrolling for each column ([Example](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban))| - -### Working with column data - -| Topic | Description | -| --------------------------------------------------------------- | ----------------------------------------------------| -| [Getting card data of the column](api/methods/js_kanban_getareacards_method.md)| How to get cards for a specific column | -| [Getting columns state](api/internal/js_kanban_getstate_method.md) | How to check the current state of columns | -| [Getting columns reactive state](api/internal/js_kanban_getreactivestate_method.md) | How to get the reactive state for columns | -| [Loading column data](api/config/js_kanban_columns_config.md) | How to load initial column data | -| [Parsing column data](api/methods/js_kanban_parse_method.md) | How to parse column data | -| [Serializing column data](api/methods/js_kanban_serialize_method.md)| How to serialize column data | -| [Updating column data](api/methods/js_kanban_updatecolumn_method.md)| How to update column info | - -## How to work with rows (swimlanes) - -These sections go over row (swimlane) operations and data management. - -### Performing operations with rows (swimlanes) - -| Topic | Description | -| --------------------------------------------------------------- | ----------------------------------------------------| -| [Adding new rows](api/methods/js_kanban_addrow_method.md) | How to add rows (swimlanes) | -| [Configuring a rows menu](api/config/js_kanban_rowshape_config.md)| How to set up a context menu for rows ([Example](https://snippet.dhtmlx.com/8eo65gr5?tag=kanban))| -| [Deleting rows](api/methods/js_kanban_deleterow_method.md) | How to remove rows (swimlanes) | -| [Moving rows](api/methods/js_kanban_moverow_method.md) | How to move rows (swimlanes) | -| [Scrolling to the desired row](api/methods/js_kanban_scroll_method.md)| How to scroll to a specific row (swimlane)| - -### Working with row (swimlane) data - -| Topic | Description | -| --------------------------------------------------------------- | ----------------------------------------------------| -| [Getting card data of the column and row](api/methods/js_kanban_getareacards_method.md)| How to get cards for a specific column and row | -| [Getting rows state](api/internal/js_kanban_getstate_method.md) | How to check the current state of rows | -| [Getting rows reactive state](api/internal/js_kanban_getreactivestate_method.md) | How to get the reactive state for rows | -| [Loading row data](api/config/js_kanban_rows_config.md) | How to load initial row data | -| [Parsing row data](api/methods/js_kanban_parse_method.md) | How to parse row data | -| [Serializing row data](api/methods/js_kanban_serialize_method.md)| How to serialize row data | -| [Updating row data](api/methods/js_kanban_updaterow_method.md) | How to update row info | - -## How to work with events - -| Topic | Description | -| ----------------------------------------------------------- | ---------------------------------------------------| -| [Executing events](api/internal/js_kanban_exec_method.md) | How to trigger inner events | -| [Intercepting events](api/internal/js_kanban_intercept_method.md)| How to intercept inner events | -| [List of inner events](api/overview/events_overview.md) | List of Kanban's built-in events | -| [Reordering events](api/internal/js_kanban_setnext_method.md)| How to change the order of inner events in the Event Bus | -| [Subscribing on events](api/internal/js_kanban_on_method.md)| How to subscribe to inner events | - -## How to work with Kanban REST API - -| Topic | Description | -| ----------------------------------------------------------- | ---------------------------------------------------| -| [Loading server data for cards](api/provider/rest_methods/js_kanban_getcards_method.md)| How to pull card data from the server | -| [Loading server data for columns](api/provider/rest_methods/js_kanban_getcolumns_method.md)| How to pull column data from the server | -| [Loading server data for rows](api/provider/rest_methods/js_kanban_getrows_method.md)| How to pull row data from the server | -| [Working with server](guides/working_with_server.md) | How to use the REST API with Kanban ([Example](https://snippet.dhtmlx.com/f25y0809?tag=kanban))| - -## How to work with Kanban state - -| Topic | Description | -| ----------------------------------------------------------- | ---------------------------------------------------| -| [Getting StateStore and DataStore](api/internal/js_kanban_getstores_method.md)| How to access StateStore and DataStore objects | -| [Getting StateStore properties](api/internal/js_kanban_getstate_method.md)| How to get StateStore property objects | -| [Getting StateStore reactive properties](api/internal/js_kanban_getreactivestate_method.md)| How to get StateStore's reactive property objects | - -## How to work with Toolbar - -| Topic | Description | -| ----------------------------------------------------------- | ------------------------------------------------------| -| [Configuring a searchbar on Toolbar](api/config/toolbar_items_config.md) | How to add a searchbar to the Toolbar ([Example](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban))| -| [Configuring a sort control on Toolbar](api/config/toolbar_items_config.md) | How to add a sort control to the Toolbar ([Example](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban))| -| [Configuring Toolbar controls](api/config/toolbar_items_config.md)| How to set up, customize, and reorder Toolbar controls ([Example](https://snippet.dhtmlx.com/s5r5h4ju?tag=kanban)) | -| [Including Kanban API in Toolbar](api/config/toolbar_api_config.md) | How to use Kanban API features in the Toolbar | -| [Localizing Toolbar](api/config/toolbar_locale_config.md) | How to localize the Toolbar | - -## How to work with TypeScript - -| Topic | Description | -| ----------------------------------------------------------- | ---------------------------------------------------| -| [Working with TypeScript](guides/typescript_support.md) | How to use Kanban with TypeScript | - -## Any questions left? - - - -:::info -Questions can also be posted in the comments below! -::: \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/index.md b/i18n/en/docusaurus-plugin-content-docs/current/index.md deleted file mode 100644 index 128adc39..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/index.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -sidebar_label: Kanban overview -title: JavaScript Kanban Overview -slug: / -description: You can have an overview of DHTMLX JavaScript Kanban library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# DHTMLX Kanban overview - -JavaScript Kanban is a handy tool for visualizing workflows. It makes it easier to see how business processes are going and gives a clear picture of how much work is on each team member's plate. The widget is flexible-use as many cards, columns, or swimlanes as needed. Since it's built entirely with JavaScript and CSS, it's simple to set up, customize, and plug into any web app or website. - -## Kanban structure­ - -### Toolbar - -The **Toolbar** is a separate part of the Kanban interface. It comes with a search bar for finding cards, a control to sort cards by different parameters, undo/redo buttons for managing history, and options for adding new columns and rows. The searching and sorting logic can be tailored, and the Toolbar layout is easy to update-add your own elements or rearrange the built-in ones. More details are in the [Configuration](guides/configuration.md#toolbar) section. - -import toolbar from '@site/static/img/js_kanban_toolbar.png'; - -Kanban Toolbar - -### Board - -The **Board** is the main area in Kanban. Here, cards are organized into columns and rows (swimlanes). The look of the cards can be changed as needed, and custom templates are supported. More info is available in the [Configuration](guides/configuration.md#cards) section. - -On the **Board** panel, there are several things you can do with ***cards***, ***columns***, and ***rows***: - -- Add cards by hitting the plus icon (as long as column and swimlane limits allow) -- Leave comments and votes on tasks through the editor panel ([Example](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)) -- Create links between tasks using the editor ([Example](https://snippet.dhtmlx.com/81qu7qh0?tag=kanban)) -- Remove cards, columns, or rows from the context menu (three dots icon) -- Duplicate cards using the context menu or with the `Ctrl (Command)`+`D` shortcut (works for multiple cards) -- Export Kanban data to a JSON file -- Use keyboard shortcuts for Kanban history: - - `Ctrl (Command)`+`Z` to undo the last action - - `Ctrl (Command)`+`Y` or `Ctrl (Command)`+`Shift`+`Z` to redo an action -- Move cards around by dragging them to new spots (across rows and columns) -- Move columns and rows using the context menu (three dots icon) -- Rename columns and rows by double-clicking labels or using the context menu -- Open the card editor by clicking any card -- Collapse or expand rows by clicking the arrow next to the row label -- Collapse or expand columns by clicking the arrow next to the column label -- Select multiple cards: - - Hold `Shift` and click to select several cards in the same column - - Hold `Ctrl (Command)` and click to select cards in different columns - -import board from '@site/static/img/js_kanban_board.png'; - -Kanban Board - -### Editor - -The **Editor** is a modal panel with fields and controls for updating a selected card. Just click a card to bring up the editor. The layout and fields of the editor can be changed to fit your needs. More about this is in the [Configuration](guides/configuration.md#editor) section. - -import editor from '@site/static/img/js_kanban_editor.png'; - -Kanban Editor - -## What's next - -To start using Kanban in your project, check out the [How to start](how_to_start.md) tutorial for step-by-step help. \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/en/docusaurus-plugin-content-docs/current/news/migration.md deleted file mode 100644 index ff67321a..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/news/migration.md +++ /dev/null @@ -1,1452 +0,0 @@ ---- -sidebar_label: Migration to newer versions -title: Migration to Newer Versions -description: You can learn about the Migration to Newer Versions in the documentation of the DHTMLX JavaScript Kanban library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# Migration to newer versions - -## 1.6.5 -> 1.7.0 - -### Api - -#### Properties - -- The [`editorShape`](api/config/js_kanban_editorshape_config.md) property got an update. The `clearButton` parameter was swapped out for `clear`: - -~~~jsx {8} title="Before v1.7.0" -new kanban.Kanban("#root", { - editorShape: [ - { - type: "combo", - label: "Priority", - key: "priority", - config: { - clearButton: true // legacy - } - }, { /* ... */ } - ] - // other parameters -}); -~~~ - -~~~jsx {8} title="From v1.7.0" -new kanban.Kanban("#root", { - editorShape: [ - { - type: "combo", - label: "Priority", - key: "priority", - config: { - clear: true // new - } - }, { /* ... */ } - ] - // other parameters -}); -~~~ - -- The [`cardShape.menu.items`](api/config/js_kanban_cardshape_config.md) function changed - the **store** parameter was replaced by **readonly**: - -~~~jsx {3-4} title="Before v1.7.0" -menu: { - show: true, - items: ({ card, store }) => { - const defaultMenuItems = getDefaultCardMenuItems({ card, store }); // the "store" parameter is legacy - ... - } -} -~~~ - -~~~jsx {3-4} title="From v1.7.0" -menu: { - show: true, - items: ({ card, readonly }) => { - const defaultMenuItems = getDefaultCardMenuItems({ card, readonly }); // the "readonly" parameter is new - ... - } -} -~~~ - -- The [`columnShape.menu.items`](api/config/js_kanban_columnshape_config.md) function also had the **store** parameter swapped for **readonly**: - -~~~jsx {3-4} title="Before v1.7.0" -menu: { - show: true, - items: ({ column, columnIndex, columns, store }) => { - const defaultMenuItems = getDefaultColumnMenuItems({ column, columnIndex, columns, store }); // the "store" parameter is legacy - ... - } -} -~~~ - -~~~jsx {3-4} title="From v1.7.0" -menu: { - show: true, - items: ({ column, columnIndex, columns, readonly }) => { - const defaultMenuItems = getDefaultColumnMenuItems({ column, columnIndex, columns, readonly }); // the "readonly" parameter is new - ... - } -} -~~~ - -- The [`rowShape.menu.items`](api/config/js_kanban_rowshape_config.md) function received the same update, so **store** is now **readonly**: - -~~~jsx {3-4} title="Before v1.7.0" -menu: { - show: true, - items: ({ row, rowIndex, rows, store }) => { - const defaultMenuItems = getDefaultRowMenuItems({ row, rowIndex, rows, store }); // the "store" parameter is legacy - ... - } -} -~~~ - -~~~jsx {3-4} title="From v1.7.0" -menu: { - show: true, - items: ({ row, rowIndex, rows, readonly }) => { - const defaultMenuItems = getDefaultRowMenuItems({ row, rowIndex, rows, readonly }); // the "readonly" parameter is new - ... - } -} -~~~ - -- The ***menu.items[0].label*** and ***menu.items[0].items*** parameters are no longer supported for [`cardShape.menu.items`](api/config/js_kanban_cardshape_config.md), [`columnShape.menu.items`](api/config/js_kanban_columnshape_config.md), and [`rowShape.menu.items`](api/config/js_kanban_rowshape_config.md) as of v1.7. - -- The `editorAutoSave` property was removed in v1.7. Now, use [`editor.autoSave`](api/config/js_kanban_editor_config.md) instead: - -~~~jsx {2} title="Before v1.7.0" -new kanban.Kanban("#root", { - editorAutoSave: true, // legacy - // other parameters -}); -~~~ - -~~~jsx {3} title="From v1.7.0" -new kanban.Kanban("#root", { - editor: { - autoSave: true // new - } - // other parameters -}); -~~~ - -- The [`links`](api/config/js_kanban_links_config.md) property changed: - - **masterId** is now **source** - - **slaveId** is now **target** - -~~~jsx {5-6,10} title="Before v1.7.0" -const links = [ - { - id: 1, - // legacy - masterId: 2, - slaveId: 5 - }, {...} // other link data -]; - -new kanban.Kanban("#root", { - links, - // other parameters -}); -~~~ - -~~~jsx {5-6,10} title="From v1.7.0" -const links = [ - { - id: 1, - // new - source: 2, - target: 5 - }, {...} // other link data -]; - -new kanban.Kanban("#root", { - links, - // other parameters -}); -~~~ - -#### Methods - -- The `undo` and `redo` methods are no longer available on store methods: - -~~~jsx {1} title="Before v1.7.0" -kanban.api.getStores().data.undo() // legacy -~~~ - -~~~jsx {5-6,10} title="From v1.7.0" -kanban.undo(); -// or -kanban.api.exec("undo"); -~~~ - -- The [`api.getState()`](api/internal/js_kanban_getstate_method.md) and [`api.getReactiveState()`](api/internal/js_kanban_getreactivestate_method.md) methods had some changes: - - These parameters were removed in v1.7.0: - - ```js - fromAreaMeta, - dropAreaItemsCoords, - dropAreasCoords, - overAreaMeta, - before, - dragItemId, - dragItemsCoords, - overAreaId - ``` - - - These parameters are now private in v1.7.0: - - ```js - edit -> _edit: object, - layout -> _layout: string, - cardsMap -> _cardsMap: object, - cardsMeta -> _cardsMeta: object, - areasMeta -> _areasMeta: object, - scroll -> _scroll: object - ``` - -#### Events - -- The `dragItemsCoords` and `dropAreasCoords` parameters were dropped from the [`start-drag-card`](api/events/js_kanban_startdragcard_event.md) event - -## 1.5.13 -> 1.6.0 - -The CSS classes for the menu were renamed as follows: - -~~~jsx - .menu -> .wx-menu - .item -> .wx-item - .icon -> .wx-icon - .value -> .wx-value -~~~ - -## 1.5.12 -> 1.5.13 - -The editor-related CSS classes were renamed like this: - -~~~jsx - .modal -> .wx-modal - .window -> .wx-window - .modal .window .buttons -> .wx-modal .wx-window .wx-buttons - .combo -> .wx-combo - .combo -> .wx-multicombo - .item -> .wx-item - .color-picker -> .wx-colorselect - .colors -> .wx-colors - .slider -> .wx-slider - .datepicker -> .wx-datepicker - .calendar -> .wx-calendar - .calendar .days .day.out -> .wx-calendar .wx-days .wx-day.wx-out - .combo .tag -> .multicombo .wx-tag - .dropdown -> .wx-dropdown - .dropdown .item -> .wx-dropdown .wx-item - .clear -> .wx-clear -~~~ - -## 1.5.6 -> 1.5.7 - -### Api - -#### Methods - -- The [`setLocale`](api/methods/toolbar_setlocale_method.md) method for the Kanban toolbar was updated: - -~~~jsx {6} title="Before v1.5.7" - // create Kanban - const board = new kanban.Kanban("#root", {...}); - // create Toolbar - const toolbar = new kanban.Toolbar("#toolbar", { api: board.api }); - // apply the "de" locale to Toolbar - toolbar.setLocale(de); // or null to reset the locale to the default one (en) -~~~ - -~~~jsx {6} title="From v1.5.7" - // create Kanban - const board = new kanban.Kanban("#root", {...}); - // create Toolbar - const toolbar = new kanban.Toolbar("#toolbar", { api: board.api }); - // apply the "de" locale to the Toolbar - toolbar.setLocale(de, board.api); -~~~ - -## 1.4 -> 1.5 - -### Api - -#### Properties - -- The [`columnShape`](api/config/js_kanban_columnshape_config.md) property got a tweak: - - ~~~jsx {} title="Before v1.5" - { - menu: { - show: true, - items: [ - { - label: "Update", ... - } - ] - // other parameters - } - } - ~~~ - - ~~~jsx {11} title="From v1.5" - { - menu: { - show: true, - items: [ - { - text: "Update", ... - } - ] - // other parameters - }, - fixedHeaders: true - } - ~~~ - -## 1.3 -> 1.4 - -### Api - -#### Properties - -- The [`editorShape`](api/config/js_kanban_editorshape_config.md) property got some new options: - - ~~~jsx {} title="Before v1.4" - { - type: "date", - key: "start_date", - label: "Start date" - }, - // other parameters - ~~~ - - ~~~jsx {5,7-21} title="From v1.4" - { - type: "date", // or you can also use the "dateRange" type - key: "start_date", - label: "Date Range" - format: "%d/%m/%y" - }, - { - type: "comments", - key: "comments", - label: "Comments", - config: { - format: "%M %d", - placement: "page", // or "editor" - html: true, - }, - }, - { - type: "links", - key: "links", - label: "Links", - }, - // other parameters - ~~~ - -- The [`cardShape`](api/config/js_kanban_cardshape_config.md) property was updated to support more features: - - ~~~jsx {} title="Before v1.4" - { - label: true, - description: true, - menu: { - items: [ - { - label: "Delete", ... - } - ] - } - // other parameters - } - ~~~ - - ~~~jsx {7,11-13} title="From v1.4" - { - label: true, - description: true, - menu: { - items: [ - { - text: "Delete", ... - } - ] - }, - votes: true, - comments: true, - css: (card) => card.type == "feature" ? "green" : "red", - // other parameters - } - ~~~ - -- The [`columnShape`](api/config/js_kanban_columnshape_config.md) property also got some changes: - - ~~~jsx {} title="Before v1.4" - { - menu: { - show: true, - items: [ - { - label: "Delete", ... - } - ] - // other parameters - } - } - ~~~ - - ~~~jsx {6,11} title="From v1.4" - { - menu: { - show: true, - items: [ - { - text: "Delete", ... - } - ] - // other parameters - }, - css: (column, cards) => column.id == "feature" && cards.length < 5 ? "green" : "red" - } - ~~~ - -- The [`rowShape`](api/config/js_kanban_rowshape_config.md) property was updated as well: - - ~~~jsx {} title="Before v1.4" - { - menu: { - show: true, - items: [ - { - label: "Delete", ... - } - ] - // other parameters - } - } - ~~~ - - ~~~jsx {6,11} title="From v1.4" - { - menu: { - show: true, - items: [ - { - text: "Delete", ... - } - ] - // other parameters - }, - css: (row, cards) => row.id == "task" && cards.length < 5 ? "green" : "red", - } - ~~~ - -- The [`cards`](api/config/js_kanban_cards_config.md) property now supports more fields: - - ~~~jsx {} title="Before v1.4" - [ - { - id: 1, - label: "Integration with React", - description: "Some description", - // other parameters - }, ... - ] - ~~~ - - ~~~jsx {6-18} title="From v1.4" - [ - { - id: 1, - label: "Integration with React", - description: "Some description", - css: "red", - votes: [4,6,9], - comments: [ - { - id: 1, - userId: 9, - cardId: 6, - text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays.", - date: new Date(), - },{...} - ] - // other parameters - }, ... - ] - ~~~ - -- The [`columns`](api/config/js_kanban_columns_config.md) property got some new options too: - - ~~~jsx {} title="Before v1.4" - [ - { - id: "inprogress", - label: "In progress", - // other parameters - }, ... - ] - ~~~ - - ~~~jsx {5-11} title="From v1.4" - [ - { - id: "inprogress", - label: "In progress", - css: "red", - overlay: template(` -
- Drop is not allowed - Only testers can move cards to this - column -
`) - // other parameters - }, ... - ] - ~~~ - -- The [`rows`](api/config/js_kanban_rows_config.md) property now includes a css option: - - ~~~jsx {} title="Before v1.4" - [ - { - id: "features", - label: "Features", - // other parameters - }, ... - ] - ~~~ - - ~~~jsx {5} title="From v1.4" - [ - { - id: "features", - label: "Features", - css: "green" - // other parameters - }, ... - ] - ~~~ - -- The [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property was updated to support menu controls: - - ~~~jsx {} title="Before v1.4" - const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => { - if (selected) { - return ` -
-
- Selected:${cardFields.label} -
- `; - } - } - - new kanban.Kanban("#root", { - cards, - columns, - cardTemplate - }); - ~~~ - - ~~~jsx {6-8} title="From v1.4" - const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => { - if (selected) { - return ` -
-
-
- -
- Selected:${cardFields.label} -
- `; - } - } - - new kanban.Kanban("#root", { - cards, - columns, - cardTemplate: kanban.template(card => cardTemplate(card)), - // other parameters - }); - ~~~ - -- The **sort** control in the [`items`](api/config/toolbar_items_config.md) property for Kanban Toolbar was updated: - - ~~~jsx {} title="Before v1.4" - [ - { // custom sort control - type: "sort", - options: [ - { - label: "Sort by label", - by: "label", - dir: "asc" - }, - { - label: "Sort by description", - by: "description", - dir: "desc" - } - ] - }, - ] - ~~~ - - ~~~jsx {6,11} title="From v1.4" - [ - { // custom sort control - type: "sort", - options: [ - { - text: "Sort by label", - by: "label", - dir: "asc" - }, - { - text: "Sort by description", - by: "description", - dir: "desc" - } - ] - }, - ] - ~~~ - -#### Methods - -- The [`api.getState()`](api/internal/js_kanban_getstate_method.md) method changed to drop some parameters: - -~~~jsx {25-27} title="Before v1.4" -api.getState(); -// the method returns an object with the following properties -/*{ - areasMeta: object, - before: string | number, - cardShape: object, - cards: array, - cardsMap: object, - cardsMeta: object, - columnKey: string, - columns: array, - dragItemId: string | number, - dragItemsCoords: array, - edit: object, - editorShape: array, - fromAreaMeta: object, - overAreaId: string | number, - readonly: object, - rowKey: string, - rows: array, - scroll: object, - search: object, - selected: array, - sort: object, - dropAreaItemsCoords: array, - dropAreasCoords: array, - overAreaMeta: object, -}*/ -~~~ - -~~~jsx {} title="From v1.4" -api.getState(); -// the method returns an object with the following properties -/*{ - areasMeta: object, - before: string | number, - cardShape: object, - cards: array, - cardsMap: object, - cardsMeta: object, - columnKey: string, - columns: array, - dragItemId: string | number, - dragItemsCoords: array, - edit: object, - editorShape: array, - fromAreaMeta: object, - overAreaId: string | number, - readonly: object, - rowKey: string, - rows: array, - scroll: object, - search: object, - selected: array, - sort: object, -}*/ -~~~ - -## 1.2 -> 1.3 - -### Api - -#### Properties - -- The [`editorShape`](api/config/js_kanban_editorshape_config.md) property now supports the ***dateRange*** parameter: - - ~~~jsx {} title="Before v1.3" - { - type: "date", - key: "start_date", - label: "Start date" - }, - // other parameters - ~~~ - - ~~~jsx {} title="From v1.3" - { - type: "dateRange", // or you can also use the "date" type - key: { - start: "start_date", - end: "end_date" - }, - label: "Date Range" - }, - // other parameters - ~~~ - -- The [`items`](api/config/toolbar_items_config.md) property of Toolbar got new options: - -~~~jsx {} title="Before v1.3" -items: [ - "search", - "spacer", - "sort", - "addColumn", - "addRow" -] -~~~ - -~~~jsx {4-5} title="From v1.3" -items: [ - "search", - "spacer", - "undo", - "redo", - "sort", - "addColumn", - "addRow" -] -~~~ - -#### Methods - -- The [`updateCard()`](api/methods/js_kanban_updatecard_method.md) method now supports a `replace` option: - -~~~jsx {} title="Before v1.3" -updateCard({ - id: 1, - card: { - label: "New Label", - row: "feature", - column: "inprogress", - /*other parameters*/ - } -}); -~~~ - -~~~jsx {9} title="From v1.3" -updateCard({ - id: 1, - card: { - label: "New Label", - row: "feature", - column: "inprogress", - /*other parameters*/ - }, - replace: true -}); -~~~ - -- The [`updateColumn()`](api/methods/js_kanban_updatecolumn_method.md) method now also supports `replace`: - -~~~jsx {} title="Before v1.3" -updateColumn({ - id: "backlog", - column: { - label: "Updated column", - limit: 3, - strictLimit: 3, - collapsed: true - } -}); -~~~ - -~~~jsx {9} title="From v1.3" -updateColumn({ - id: "backlog", - column: { - label: "Updated column", - limit: 3, - strictLimit: 3, - collapsed: true - }, - replace: true -}); -~~~ - -- The [`updateRow()`](api/methods/js_kanban_updaterow_method.md) method got a similar update: - -~~~jsx {} title="Before v1.3" -updateRow({ - id: "feature", - row: { - label: "Updated row", - collapsed: true - }, -}); -~~~ - -~~~jsx {7} title="From v1.3" -updateColumn({ - id: "feature", - row: { - label: "Updated row", - collapsed: true - }, - replace: true -}); -~~~ - -## 1.1 -> 1.2 - -### Api - -#### Properties - -- The [`cardShape`](api/config/js_kanban_cardshape_config.md) property picked up some changes: - - - The ***menu*** parameter now supports more options - - ~~~jsx {} title="Before v1.2" - menu: true, - //or - menu: { show: true } - // other parameters - ~~~ - - ~~~jsx {5-14} title="From v1.2" - menu: true, - // or - menu: { - show: true, - items: ({ card, store }) => { - if(card.id === 1){ - return false; - } else { - return [ - { id: "set-edit", icon: "wxi-edit", label: "Edit" }, - { id: "delete-card", icon: "wxi-delete", label: "Delete" } - ]; - } - } - }, - // other parameters - ~~~ - - - The ***users*** parameter now uses `avatar` instead of `path`: - - ~~~jsx {7} title="Before v1.2" - users: { - show: true, - values: [ - { - id: 1, - label: "John Smith", - path: "../assets/user.jpg" - }, - ] - }, - // other parameters - ~~~ - - ~~~jsx {7} title="From v1.2" - users: { - show: true, - values: [ - { - id: 1, - label: "John Smith", - avatar: "../assets/user.jpg" - }, - ] - }, - // other parameters - ~~~ - - - The ***start_date*** and ***end_date*** parameters now support formatting: - - ~~~jsx {} title="Before v1.2" - start_date: true, - end_date: true, - // other parameters - ~~~ - - ~~~jsx {3,7} title="From v1.2" - start_date: { - show: true, - format: "%d.%m.%Y" - }, - end_date: { - show: true, - format: "%d.%m.%Y" - }, - // other parameters - ~~~ - -- The [`editorShape`](api/config/js_kanban_editorshape_config.md) property now uses `avatar` instead of `path` for user images: - -~~~jsx {8} title="Before v1.2" -{ - type: "multiselect", - key: "users", - label: "Users", - values: [ - { - id: 1, label: "Alan", - path: "preview_image_path_1.png" - }, - ] -}, -// settings of other fields -~~~ - -~~~jsx {8} title="From v1.2" -{ - type: "multiselect", - key: "users", - label: "Users", - values: [ - { - id: 1, label: "Alan", - avatar: "preview_image_path_1.png" - }, - ] -}, -// settings of other fields -~~~ - -- The [`items`](api/config/toolbar_items_config.md) property of Toolbar got expanded search and sort options: - -~~~jsx {} title="Before v1.2" -items: [ - "search", - "controls" -] -~~~ - -~~~jsx {} title="From v1.2" -items: [ - { // or "search", - type: "search", - options: [ - { - id: "label", - label: "By label" - }, - { - id: "start_date", - label: "By date", - searchRule: (card, value, by) => { - const date = card[by]; - return date?.toString().includes(value); - } - } - ] - }, - "spacer", - { // or "sort", - type: "sort", - options: [ - { - label: "Sort by label", - by: "label", - dir: "asc" - }, - { - label: "Sort by description", - by: "description", - dir: "desc" - } - ] - }, - "addColumn", - "addRow" -] -~~~ - -#### Methods - -- The [`setLocale()`](api/methods/js_kanban_setlocale_method.md) and [`setLocale()`](api/methods/toolbar_setlocale_method.md) methods were updated for resetting the locale: - -~~~jsx {} title="Before v1.2" -setLocale(kanban.en); // reset to default locale -~~~ - -~~~jsx {} title="From v1.2" -setLocale(null); // reset to default locale -~~~ - -- The [`api.getReactiveState()`](api/internal/js_kanban_getreactivestate_method.md) method now returns more properties: - -~~~jsx {} title="Before v1.2" -api.getReactiveState(); -// the method returns an object with the following properties -/*{ - dragItemId: { - subscribe: any, - update: any, - set: any - }, - before: {...}, - overAreaId: {...}, - overAreaMeta: {...}, - dropAreaItemsCoords: {...}, - dropAreasCoords: {...}, - dragItemsCoords: {...}, - selected: {...} -}*/ -~~~ - -~~~jsx {} title="From v1.2" -api.getReactiveState(); -// the method returns an object with the following properties -/*{ - areasMeta: { - subscribe: any, - update: any, - set: any - }, - before: {...}, - cardShape: {...}, - cards: {...}, - cardsMap: {...}, - cardsMeta: {...}, - columnKey: {...}, - columns: {...}, - dragItemId: {...}, - dragItemsCoords: {...}, - dropAreaItemsCoords: {...}, - dropAreasCoords: {...}, - edit: {...}, - editorShape: {...}, - fromAreaMeta: {...}, - overAreaId: {...}, - overAreaMeta: {...}, - readonly: {...}, - rowKey: {...}, - rows: {...}, - scroll: {...}, - search: {...}, - selected: {...}, - sort: {...} -}*/ -~~~ - -- The [`api.getState()`](api/internal/js_kanban_getstate_method.md) method now returns more detailed state: - -~~~jsx {} title="Before v1.2" -api.getState(); -// the method returns an object with the following properties -/*{ - dragItemId: string | number, - before: string | number, - overAreaId: string | number, - overAreaMeta: object, - dropAreaItemsCoords: array, - dropAreasCoords: array, - dragItemsCoords: array, - selected: array -}*/ -~~~ - -~~~jsx {} title="From v1.2" -api.getState(); -// the method returns an object with the following properties -/*{ - areasMeta: object, - before: string | number, - cardShape: object, - cards: array, - cardsMap: object, - cardsMeta: object, - columnKey: string, - columns: array, - dragItemId: string | number, - dragItemsCoords: array, - dropAreaItemsCoords: array, - dropAreasCoords: array, - edit: object, - editorShape: array, - fromAreaMeta: object, - overAreaId: string | number, - overAreaMeta: object, - readonly: object, - rowKey: string, - rows: array, - scroll: object, - search: object, - selected: array, - sort: object -}*/ -~~~ - -- The [`api.getStores()`](api/internal/js_kanban_getstores_method.md) method now just returns the `state` store: - -~~~jsx {} title="Before v1.2" -api.getStores(); -// the method returns an object with the following stores -/*{ - state: StateStore, // ( object ) - data: DataStore // ( object ) -}*/ -~~~ - -~~~jsx {} title="From v1.2" -api.getStores(); -// the method returns an object with the following properties -/*{ - state: StateStore, // ( object ) -}*/ -~~~ - -### Localization - -
-Before v1.2 - -~~~jsx {} -const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; -const months = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December" -]; -const monthsShort = [ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec" -]; -const wx = { - Today: "Today", - Clear: "Clear", - Close: "Close" -}; -const en = { - lang: "en", - __dates: { - months, - monthsShort, - days - }, - wx, - kanban: { - Save: "Save", - Close: "Close", - Delete: "Delete", - Name: "Name", - Description: "Description", - Type: "Type", - "Start date": "Start date", - "End date": "End date", - Result: "Result", - "No results": "No results", - Search: "Search", - "Search in": "Search in", - "Add new row": "Add new row", - "Add new column": "Add new column", - "Add new card": "Add new card", - "Edit card": "Edit card", - Edit: "Edit", - Everywhere: "Everywhere", - Label: "Label", - Status: "Status", - Color: "Color", - Date: "Date", - Untitled: "Untitled", - Rename: "Rename" - } -}; -~~~ -
- -
-From v1.2 - -~~~jsx {} -const en = { - kanban: { // translations of the Kanban labels - "Save": "Save", - "Close": "Close", - "Delete": "Delete", - "Name": "Name", - "Description": "Description", - "Type": "Type", - "Start date": "Start date", - "End date": "End date", - "Result": "Result", - "No results": "No results", - "Search": "Search", - "Search in": "Search in", - "Add new row": "Add new row", - "Add new column": "Add new column", - "Add new card": "Add new card", - "Edit card": "Edit card", - "Edit": "Edit", - "Everywhere": "Everywhere", - "Label": "Label", - "Status": "Status", - "Color": "Color", - "Date": "Date", - "Untitled": "Untitled", - "Rename": "Rename", - "Move up": "Move up", - "Move down": "Move down", - "Move left": "Move left", - "Move right": "Move right", - "Sort": "Sort", - "Label (a-z)": "Label (a-z)", - "Label (z-a)": "Label (z-a)", - "Description (a-z)": "Description (a-z)", - "Description (z-a)": "Description (z-a)" - }, - calendar: { // translations and settings of the calendar - monthFull: [ - "January", "February", "March", "April", - "May", "June", "July", "August", - "September", "October", "November", "December" - ], - monthShort: [ - "Jan", "Feb", "Mar", "Apr", - "May", "Jun", "Jul", "Aug", - "Sep", "Oct", "Nov", "Dec" - ], - dayFull: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday" - ], - dayShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], - hours: "Hours", - minutes: "Minutes", - done: "Done", - clear: "Clear", - today: "Today", - am: ["am", "AM"], - pm: ["pm", "PM"], - weekStart: 7, - timeFormat: 24 - }, - core: { // translations of the core elements - ok: "OK", - cancel: "Cancel" - } -}; -~~~ -
- -## 1.0 -> 1.1 - -### Api - -#### Properties - -- The [`columns`](api/config/js_kanban_columns_config.md) property now includes ***collapsed, limit*** and ***strictLimit*** options starting from v1.1. - -~~~jsx title="Before v1.1" -const columns = [ - { - label: "Backlog", - id: "backlog" - }, ... -]; -~~~ - -~~~jsx {5-7,12} title="From v1.1" -const columns = [ - { - label: "Backlog", - id: "backlog", - collapsed: true, - limit: 3, - strictLimit: true - }, ... -]; - -new kanban.Kanban("#root", { - columns, - // other parameters -}); -~~~ - -- The ***color*** parameter of the [`cardShape`](api/config/js_kanban_cardshape_config.md) property was simplified: - -~~~jsx {4-7} title="Before v1.1" -const cardShape = { - color: { - show: true, - values: [ - { id: 1, color: "#65D3B3", label: "red" }, - { id: 2, color: "#FFC975", label: "green" } - ] - } -}; -~~~ - -~~~jsx {4,9} title="From v1.1" -const cardShape = { - color: { - show: true, - values: ["#65D3B3", "#FFC975", "#58C3FE"] - } -}; - -new kanban.Kanban("#root", { - cardShape - // other parameters -}); -~~~ - -#### Methods - -- The [`addColumn`](api/methods/js_kanban_addcolumn_method.md) method (and [`add-column`](api/events/js_kanban_addcolumn_event.md) event.md) now expects an object with `id` and `column` fields: - -~~~jsx {} title="Before v1.1" -addColumn(column_data_object); -~~~ - -~~~jsx {2-7} title="From v1.1" -addColumn({ - id: "backlog", - column: { - label: "Backlog", - collapsed: false, - ... - } -}); -~~~ - -- The [`addRow`](api/methods/js_kanban_addrow_method.md) method (and [`add-row`](api/events/js_kanban_addrow_event.md) event.md) now expects an object with `id` and `row` fields: - -~~~jsx {} title="Before v1.1" -addRow(row_data_object); -~~~ - -~~~jsx {2-7} title="From v1.1" -addRow({ - id: "feature", - row: { - label: "Feature", - collapsed: false, - ... - } -}); -~~~ - -- The [`updateColumn`](api/methods/js_kanban_updatecolumn_method.md) method (and [`update-column`](api/events/js_kanban_updatecolumn_event.md) event.md) now expects an object with `id` and `column` fields: - -~~~jsx {} title="Before v1.1" -updateColumn(column_data_object); -~~~ - -~~~jsx {2-7} title="From v1.1" -updateColumn({ - id: "backlog", - column: { - label: "Backlog", - collapsed: true, - ... - } -}); -~~~ - -- The [`updateRow`](api/methods/js_kanban_updaterow_method.md) method (and [`update-row`](api/events/js_kanban_updaterow_event.md) event.md) now expects an object with `id` and `row` fields: - -~~~jsx {} title="Before v1.1" -updateRow(row_data_object); -~~~ - -~~~jsx {2-7} title="From v1.1" -updateRow({ - id: "feature", - row: { - label: "Feature", - collapsed: true, - ... - } -}); -~~~ - -- The [`updateCard`](api/methods/js_kanban_updatecard_method.md) method (and [`update-card`](api/events/js_kanban_updatecard_event.md) event.md) now expects an object with `id` and `card` fields: - -~~~jsx {} title="Before v1.1" -updateCard(card_data_object); -~~~ - -~~~jsx {2-7} title="From v1.1" -updateCard({ - id: 1, - card: { - label: "Volvo XC 70", - progress: 26 - ... - } -}); -~~~ - -- The [`parse`](api/methods/js_kanban_parse_method.md) method now takes care of initial data reset, so there's no need to reset initial data before parsing new data: - -~~~jsx {3-5,8-12} title="Before v1.1" -// you need to reset initial data befor parsing new one -const board = new kanban.Kanban("#root", { - columns: [], - cards: [], - rows: [] -}); - -board.parse({ - columns, - cards, - rows -}); -~~~ - -~~~jsx {} title="From v1.1" -// you don't need to reset initial data befor parsing new one -const board = new kanban.Kanban("#root", {}); - -board.parse({ - columns, - cards, - rows -}); -~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/en/docusaurus-plugin-content-docs/current/news/whats_new.md deleted file mode 100644 index b258a30e..00000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/news/whats_new.md +++ /dev/null @@ -1,674 +0,0 @@ ---- -sidebar_label: What's new -title: What's New -description: You can explore what's new in DHTMLX Kanban and its release history in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban. ---- - -# What's new - -If you're moving to a newer version of Kanban, you might want to look at [Migration to newer versions](news/migration.md) for more info. - -## Version 1.7.2 - -Released on March 9, 2026 - -### Fixes - -- Cards disappear during scroll with `renderType:lazy` -- Lazy render and column rendering: incorrect end index when slowly scrolling with the scrollbar -- Lazy render and column scroll DND issues -- Hotkeys for undo/redo: regressions and unexpected behavior -- Strange scroll behavior on iOS touch devices -- Unsaved data is lost when updating comment or vote -- Incorrect menu position for elements close to the right side of the viewport -- DND on touch devices: the drag node is huge -- Toolbar: 2 missing locale labels for tooltips -- Uploader `config` parameters are not applicable - -## Version 1.7.1 - -Released on November 20, 2025 - -### Fixes - -- A script error when using `dateRange` in the editor -- `parse()` does not work after `setConfig()` is called -- A script error in the editor after closing with unsaved link values - -## Version 1.7.0 - -Released October 14, 2025 - -[Review of release on the blog](https://dhtmlx.com/blog/meet-dhtmlx-kanban-1-7/) - -### Salesforce Integration - -From v1.7, JavaScript Kanban can now be used inside Salesforce. Check out this guide for more details: [**Integration with Salesforce**](guides/integration_with_salesforce.md). - -There's also a [**GitHub example**](https://github.com/DHTMLX/salesforce-lwc-demo) and an [**Online demo**](https://dhtmlx-dev-ed.develop.lightning.force.com/) (*Login*: ***user***, *Password*: ***demo***). - -### New API - -- #### Events - - - [`undo`](api/events/js_kanban_undo_event.md) - - [`redo`](api/events/js_kanban_redo_event.md) - -- #### Methods - - - [`getColumnCards()`](api/methods/js_kanban_getcolumncards_method.md) - - [`detach()`](api/internal/js_kanban_detach_method.md) - -### Updates - -- #### Methods - - - The [`on`](api/internal/js_kanban_on_method.md) internal method now supports `config.tag` and `config.intercept` parameters - - The [`intercept`](api/internal/js_kanban_intercept_method.md) internal method now supports `config.tag` and `config.intercept` parameters - -- #### Properties - - - The [`links`](api/config/js_kanban_links_config.md) property has changed: - - `masterId` is now `source` - - `slaveId` is now `target` - - - The [`editorShape`](api/config/js_kanban_editorshape_config.md) property has changed: `clearButton` is now just `clear` - - - The [`cardShape.menu.items`](api/config/js_kanban_cardshape_config.md) function now uses `readonly` instead of `store` - - - The [`cards[i].attached[i]`](api/config/js_kanban_cards_config.md) property now has a `size` parameter - -### Removed API - -- The `editorAutoSave` property is gone. You can use [`editor.autoSave`](api/config/js_kanban_editor_config.md) instead - -- The `dragItemsCoords` and `dropAreasCoords` parameters are no longer in the [`start-drag-card`](api/events/js_kanban_startdragcard_event.md) - -### Fixes - -- If someone uploads a batch of files or several large files, the form might update before everything is fully uploaded, and the card data sent to the server is off -- File size only shows up for newly loaded files -- Year and month fields don't update after clicking **Done** in the editor -- When the comment textarea expands, it pushes the button out of the clickable area -- There's a script error if you open a card that's linked to a deleted card - -## Version 1.6.5 - -Released July 14, 2025 - -### Fixes - -- Setting `disabled: true` on menu items wasn't working -- Adding a row to Kanban with no row structure didn't show row headers - -## Version 1.6.4 - -Released June 12, 2025 - -### Fixes - -- Cards would disappear when added to columns/rows that got removed and then brought back -- Locale labels were missing for uploader list buttons -- Commercial version packages were missing readmes - -## Version 1.6.3 - -Released April 8, 2025 - -### Fixes - -- Limits were applying to the whole column in the wrong way -- Moving a card after closing the modal editor caused an error -- Deletion confirmation popped up under the modal editor -- The toolbar "more" icon would flicker during slow window resizing -- The `delete-card` event always closed the editor -- Couldn't open the editor if the priority was set to an ID not in the options - -## Version 1.6.2 - -Released February 14, 2025 - -### Fixes - -- Trial package had the wrong expiration date -- There was a warning during drag and drop on touch devices -- Setting readonly `add: false` didn't remove the **Add** option from the column menu -- Editor didn't show up for cards with number IDs as strings -- Package had an outdated link to samples -- Column scroll with lazy rendering had drag and drop glitches -- The `setConfig()` method didn't update the fixed state of column headers - -## Version 1.6.1 - -Released November 29, 2024 - -### Fixes - -- Toolbar's "more" icon was misaligned on narrow screens -- `RestDataProvider` ignored headers set via `setHeaders()` -- Calling `RestDataProvider.getIDResolver` gave a "not a function" error - -## Version 1.6 - -Released November 13, 2024 - -[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-kanban-1-6/) - -### New functionality - -- You can now set how many assigned users are shown on a card using [`cardShape.users.maxCount`](api/config/js_kanban_cardshape_config.md) ([**example**](https://snippet.dhtmlx.com/w205dvzg?tag=kanban)) -- Column headers can be customized with [`columnShape`](api/config/js_kanban_columnshape_config.md) ([**example**](https://snippet.dhtmlx.com/gq2saz9c?tag=kanban)) -- Search results view and content can be adjusted using [`items.searchResult`](api/config/toolbar_items_config.md) in the Toolbar's **search** control ([**example**](https://snippet.dhtmlx.com/2uo2f5mf?tag=kanban)) -- Editor can now show up as a modal window via [`editor.placement`](api/config/js_kanban_editor_config.md) ([**example**](https://snippet.dhtmlx.com/vt6pe7qz?tag=kanban)) -- Voting for a card is available through the vote icon, controlled by [`cardShape.votes.clickable`](api/config/js_kanban_cardshape_config.md) ([**example**](https://snippet.dhtmlx.com/en76xvi4?tag=kanban)) - -### Updates - -- #### Properties - - - [`cardShape`](api/config/js_kanban_cardshape_config.md) now has ***users.maxCount*** and ***votes.clickable*** - - [`columnShape`](api/config/js_kanban_columnshape_config.md) now has ***headerTemplate*** and ***collapsedTemplate*** - - [`editor`](api/config/js_kanban_editor_config.md) now has ***placement*** - - [`items`](api/config/toolbar_items_config.md) for Toolbar **search** now has ***searchResult*** - -- #### Events - - - [`set-edit`](api/events/js_kanban_setedit_event.md) now includes ***eventSource*** ([**example**](https://snippet.dhtmlx.com/zh4d9pdb?tag=kanban)) - -- #### Methods - - - The [`setConfig()`](api/methods/js_kanban_setconfig_method.md) method now: - - Doesn't affect history (history can't be changed) - - Doesn't destroy the Kanban datastore, so event listeners and Toolbar stay attached - - - [`setLocale()`](api/methods/js_kanban_setlocale_method.md) also keeps the Kanban datastore intact, so Toolbar and listeners stay as they are - - The `api` parameter for Toolbar's [`setLocale()`](api/methods/toolbar_setlocale_method.md) is now deprecated - -### Fixes - -- If you're editing a comment and remove it, the textarea for new comments disappears -- Missing localization strings are now included -- Drag-and-drop didn't work when using [`scrollType: "column"`](api/config/js_kanban_scrolltype_config.md) with [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) -- Couldn't close the editor with the close icon -- In the Willow skin, the right part of the editor matched the progress bar background color - -## Version 1.5.13 - -Released September 12, 2024 - -### Fixes - -- "Make cover" button didn't show up if the file extension was uppercase -- Clicking a disabled Multiselect control caused an error -- Scrolling after calling [`addCard()`](api/methods/js_kanban_addcard_method.md) would throw an error with [column scroll](api/config/js_kanban_scrolltype_config.md) and [lazy rendering](api/config/js_kanban_rendertype_config.md) -- No comments were saved as "" instead of [] -- Editor styles could be overridden by global styles with a non-unique class selector. [See migration section](news/migration.md/#1512---1513) - -## Version 1.5.12 - -Released May 2, 2024 - -### Fixes - -- Intercept regression: returning `false` didn't stop inner events -- Disabled files could still be uploaded - -## Version 1.5.11 - -Released March 25, 2024 - -### Fixes - -- Kanban CSS variables for the *Dark willow* skin were missing for Toolbar and Portals -- Changes to comments and votes weren't saved to form values when autosave was off -- Custom column submenu got `null` in the **onClick** function argument -- Couldn't set editable mode for Datepickers in Editor -- Console warnings showed up in Kanban examples - -## Version 1.5.10 - -Released February 29, 2024 - -### Fixes - -- npm server had a broken build -- Added the `select` parameter to the [`duplicate-card`](api/events/js_kanban_duplicatecard_event.md) event and [`duplicateCard()`](api/methods/js_kanban_duplicatecard_method.md) method -- Comment field styles in the Kanban editor were off - -## Version 1.5.9 - -Released February 20, 2024 - -### Fixes - -- Kanban was affecting styles of other widgets -- Custom column submenu items with `disabled: true` were still clickable -- Couldn't set a custom upload function for the **Uploader** control - -## Version 1.5.8 - -Released November 28, 2023 - -### Fixes - -- The **currentUser** TS definition was missing in the **IKanbanConfig** type - -## Version 1.5.7 - -Released November 14, 2023 - -### Updates - -- Toolbar's [`setLocale()`](api/methods/toolbar_setlocale_method.md) now has an ***api*** parameter - -### Fixes - -- `disabled: true` didn't work for card menu items -- Console warnings appeared in Kanban examples -- Couldn't reset task priority -- Drop-down controls in the Kanban editor didn't close when clicking outside - -## Version 1.5.6 - -Released September 13, 2023 - -### Updates - -- You can now import the component as an ES module - -### Fixes - -- Regression in npm packages - -## Version 1.5.4 - -Released August 9, 2023 - -### Fixes - -- Files uploaded earlier stuck around in the form after switching to another card -- File upload via drag-and-drop wasn't working -- Cards could be unexpectedly deleted if the Delete key was pressed while the form was open -- The "Search in" dropdown went blank after selecting a card through search -- Added links weren't deleted on the backend when undoing the add-link operation - -## Version 1.5.1 - -### Fixes - -- TypeScript definitions are now generated properly - -## Version 1.5 - -Released June 15, 2023 - -[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-kanban-1-5/) - -### New functionality - -- It's now possible to set and remove links between cards on the fly -- Links between cards can be managed on the server -- Column headers can be fixed ([**example**](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)) - -### New API - -- #### Methods - - - [`addLink()`](api/methods/js_kanban_addlink_method.md) - - [`deleteLink()`](api/methods/js_kanban_deletelink_method.md) - - [`getLinks()`](api/provider/rest_methods/js_kanban_getlinks_method.md) - -- #### Routes - - - [`DELETE /links`](api/provider/rest_routes/delete_routes/js_kanban_delete_links_route.md) - - [`GET /links`](api/provider/rest_routes/get_routes/js_kanban_get_links_route.md) - - [`POST /links`](api/provider/rest_routes/post_routes/js_kanban_post_links_route.md) - -### Updates - -- #### Properties - - - [`columnShape`](api/config/js_kanban_columnshape_config.md) now has ***fixedHeaders*** - -### Fixes - -- Links couldn't be parsed, exported, or serialized at runtime -- Creating the comments section failed if users weren't activated -- Links in store would change the original data and not save right -- Lazy rendering messed up styles for collapsed columns' hover area -- Cards moved to new columns disappeared -- Textarea for a new comment stayed open when editing started - -## Version 1.4.2 - -Released April 13, 2023 - -### Fixes - -- Backend ID wasn't saved to local card/column/row data after adding -- Missing TS definitions are now included -- Dark skin styles were leaking - -## Version 1.4.1 - -Released March 29, 2023 - -### Fixes - -- Sorting wasn't preserved as expected -- Disabling a context menu through **cardShape**, **columnShape**, or **rowShape** didn't work right -- Adding links in the editor without providing links in data caused issues -- The menu on a column could be the same as on a card, or not show up at all -- Dragging two tasks instead of one - -## Version 1.4 - -Released March 21, 2023 - -[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-kanban-1-4/) - -### New functionality - -- Comments can be added ([**example**](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)) -- User limits can be set ([**example**](https://snippet.dhtmlx.com/2rlg4qvk?tag=kanban)) -- Links between cards can be set ([**example**](https://snippet.dhtmlx.com/81qu7qh0?tag=kanban)) -- Cards can be voted on ([**example**](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)) - -### New API - -- #### Events - - - [`add-comment`](api/events/js_kanban_addcomment_event.md) - - [`add-link`](api/events/js_kanban_addlink_event.md) - - [`delete-comment`](api/events/js_kanban_deletecomment_event.md) - - [`delete-link`](api/events/js_kanban_deletelink_event.md) - - [`drag-card`](api/events/js_kanban_dragcard_event.md) - - [`end-drag-card`](api/events/js_kanban_enddragcard_event.md) - - [`start-drag-card`](api/events/js_kanban_startdragcard_event.md) - - [`update-comment`](api/events/js_kanban_updatecomment_event.md) - -- #### Methods - - - [`addComment()`](api/methods/js_kanban_addcomment_method.md) - - [`deleteComment()`](api/methods/js_kanban_deletecomment_method.md) - - [`updateComment()`](api/methods/js_kanban_updatecomment_method.md) - -- #### Properties - - - [`currentUser`](api/config/js_kanban_currentuser_config.md) - - [`links`](api/config/js_kanban_links_config.md) - -### Updates - -- #### Methods - - - [`api.getState()`](api/internal/js_kanban_getstate_method.md) is updated - -- #### Properties - - - [`cards`](api/config/js_kanban_cards_config.md) now has ***css***, ***comments***, and ***votes*** - - [`cardShape`](api/config/js_kanban_cardshape_config.md) now has ***comments***, ***votes*** ([**example**](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)), and ***css*** ([**example**](https://snippet.dhtmlx.com/7fvc3rr1?tag=kanban)) - - [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) can now show a context menu - - [`columns`](api/config/js_kanban_columns_config.md) now has ***css*** ([**example**](https://snippet.dhtmlx.com/fnlvd2g5?tag=kanban)) and ***overlay*** ([**example**](https://snippet.dhtmlx.com/nfv59yif?tag=kanban)) - - [`columnShape`](api/config/js_kanban_columnshape_config.md) now has ***css*** ([**example**](https://snippet.dhtmlx.com/fnlvd2g5?tag=kanban)) - - [`editorShape`](api/config/js_kanban_editorshape_config.md) now supports [***comments***](guides/configuration.md#comments-type), [***links***](guides/configuration.md#links-type), and the ***format*** parameter for *date/dateRange* types - - [`rows`](api/config/js_kanban_rows_config.md) now has ***css*** ([**example**](https://snippet.dhtmlx.com/tev4ej9c?tag=kanban)) - - [`rowShape`](api/config/js_kanban_rowshape_config.md) now has ***css*** ([**example**](https://snippet.dhtmlx.com/tev4ej9c?tag=kanban)) - -### Deprecated API - -- #### Properties - - - The label in menu item objects in `cardShape.menu.items`, `columnShape.menu.items`, and `rowShape.menu.items` is now deprecated - -### Fixes - -- Menu position was off when Kanban was inside a container with margins -- Collapsed columns were in the wrong place if you set a custom column width -- Dropping a card into a collapsed column made it disappear -- Collapsed columns were in the wrong place if you set a custom column width -- In swimlanes, the card context menu was covered by the editing panel, so you couldn't delete the card - -## Version 1.3 - -Released September 29, 2022 - -[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-kanban-1-3/) - -### New functionality - -- Cards can be duplicated using API, a context menu (3 dots icon), or `Ctrl (Command)` + `D` shortcuts (multiple cards can be duplicated at once) -- Kanban data can be exported to a JSON file -- Kanban history can be managed: - - With *Undo* and *Redo* controls on the Toolbar - - With shortcuts: - - `Ctrl (Command)`+`Z` - undo - - `Ctrl (Command)`+`Y` or `Ctrl (Command)`+`Shift`+`Z` - redo - - Using API - -### New API - -- **Events:** - [`duplicate-card`](api/events/js_kanban_duplicatecard_event.md) - -- **Methods:** - [`duplicateCard()`](api/methods/js_kanban_duplicatecard_method.md), - [`export.json()`](api/internal/js_kanban_json_method.md), - [`getUsers()`](api/provider/rest_methods/js_kanban_getusers_method.md), - [`redo()`](api/methods/js_kanban_redo_method.md), and - [`undo()`](api/methods/js_kanban_undo_method.md) - -- **Properties:** - [`editor`](api/config/js_kanban_editor_config.md) and - [`history`](api/config/js_kanban_history_config.md) - -- **Common settings:** - [`$meta`](api/common/js_kanban_meta_parameter.md) - -### Deprecated API - -- **Properties:** - [`editorAutoSave`](api/config/js_kanban_editorautosave_config.md) - -### Updates - -- #### Events - - - [`update-card`](api/events/js_kanban_updatecard_event.md) is updated - - [`update-column`](api/events/js_kanban_updatecolumn_event.md) is updated - - [`update-row`](api/events/js_kanban_updaterow_event.md) is updated - -- #### Methods - - - [`updateCard()`](api/methods/js_kanban_updatecard_method.md) is updated - - [`updateColumn()`](api/methods/js_kanban_updatecolumn_method.md) is updated - - [`updateRow()`](api/methods/js_kanban_updaterow_method.md) is updated - -- #### Properties - - - [`items`](api/config/toolbar_items_config.md) for Toolbar now includes ***"undo"*** and ***"redo"*** controls - - [`editorShape`](api/config/js_kanban_editorshape_config.md) now supports ***dateRange*** type - -## Version 1.2.2 - -Released August 30, 2022 - -### Fixes - -- Some icons were duplicated in menu and toolbar - -## Version 1.2.1 - -Released July 28, 2022 - -### Fixes - -- The `cardHeight` property didn't work with `scrollType:"column"` -- Uploader didn't show uploaded files in the card editor -- Localization didn't work for "combo" and "progress" fields in the card editor - -## Version 1.2 - -Released June 29, 2022 - -[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-kanban-1-2/) - -### New functionality - -- New cards can be added via a column menu ([**example**](https://snippet.dhtmlx.com/8eo65gr5?tag=kanban)) -- Lazy rendering is available ([**example**](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)) -- Columns can be scrolled separately ([**example**](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)) -- Kanban scrolls to newly created cards, columns, and rows (API and UI) ([**example**](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)) -- Cards can be sorted (API and UI) ([**example**](https://snippet.dhtmlx.com/74nyuv14?tag=kanban)) - -### New API - -- **Events:** - [`scroll`](api/events/js_kanban_scroll_event.md), - [`set-edit`](api/events/js_kanban_setedit_event.md), and - [`set-sort`](api/events/js_kanban_setsort_event.md) - -- **Methods:** - [`scroll()`](api/methods/js_kanban_scroll_method.md), - [`setEdit()`](api/methods/js_kanban_setedit_method.md), and - [`setSort()`](api/methods/js_kanban_setsort_method.md) - -- **Properties:** - [`cardHeight`](api/config/js_kanban_cardheight_config.md), - [`columnShape`](api/config/js_kanban_columnshape_config.md), - [`rowShape`](api/config/js_kanban_rowshape_config.md), - [`renderType`](api/config/js_kanban_rendertype_config.md), and - [`scrollType`](api/config/js_kanban_scrolltype_config.md) - -### Updates - -- #### Methods - - - [`api.getReactiveState()`](api/internal/js_kanban_getreactivestate_method.md) is updated - - [`api.getState()`](api/internal/js_kanban_getstate_method.md) is updated - - [`api.getStores()`](api/internal/js_kanban_getstores_method.md) is updated - - [`setLocale()`](api/methods/js_kanban_setlocale_method.md) for Kanban is updated - - [`setLocale()`](api/methods/toolbar_setlocale_method.md) for Toolbar is updated - -- #### Properties - - - [`items`](api/config/toolbar_items_config.md) for Toolbar is updated - - The ***start_date***, ***end_date***, ***menu***, and ***users*** fields of [`cardShape`](api/config/js_kanban_cardshape_config.md) are updated - - The ***multiselect*** type of [`editorShape`](api/config/js_kanban_editorshape_config.md) is updated - -#### Common - -- CSS class prefixes changed (*see the [Stylization](guides/stylization.md) section*) -- Locale structure updated (*see the [Localization](guides/localization.md) section*) - -### Fixes - -- Binding cards to swimlanes using `rowKey` didn't work right -- Clicking the card menu opened the editor -- Dragging several cards didn't work right -- Editing cards with `select: false` (**readonly** config.md) was broken -- Selecting newly added cards with `addCard()` didn't work as expected -- The `label: false` and `menu: false` parameters in `cardShape` didn't behave correctly - -## Version 1.1.1 - -Released February 28, 2022 - -[Review of release on the blog](https://dhtmlx.com/blog/maintenance-release-kanban-1-1-1/) - -### Fixes - -- Custom editor field didn't work unless it was defined in cardShape config -- Selecting the right card from the search bar dropdown menu - -## Version 1.1 - -Released February 15, 2022 - -[Review of release on the blog](https://dhtmlx.com/blog/dhtmlx-kanban-1-1-wip-validation-new-operations-columns-rows-typescript-support/) - -### New functionality - -- Columns can be *collapsed/expanded* using an arrow next to the label -- Columns and swimlanes can have a card *limit* -- Columns can be *moved* via the context menu (3 dots icon) -- Rows can be *moved* via the context menu (3 dots icon) -- Multiple cards in a column can be selected using **Shift** + **click** -- [TypeScript definitions](guides/typescript_support.md) for Kanban are now available - -### New API - -- New **events** for moving columns and rows: - [`move-column`](api/events/js_kanban_movecolumn_event.md) - and - [`move-row`](api/events/js_kanban_moverow_event.md) -- New **methods** for moving columns and rows: - [`moveColumn()`](api/methods/js_kanban_movecolumn_method.md) - and - [`moveRow()`](api/methods/js_kanban_moverow_method.md) - -### Updates - -#### Properties - -- [`cards`](api/config/js_kanban_cards_config.md) is now optional - -- [`columns`](api/config/js_kanban_columns_config.md) is now optional and has: - - ***collapsed*** - - ***limit*** - - ***strictLimit*** - -- The ***color*** parameter in [`cardShape`](api/config/js_kanban_cardshape_config.md) has been updated - -#### Methods - -- [`addColumn`](api/methods/js_kanban_addcolumn_method.md) is updated -- [`addRow`](api/methods/js_kanban_addrow_method.md) is updated -- [`updateCard`](api/methods/js_kanban_updatecard_method.md) is updated -- [`updateColumn`](api/methods/js_kanban_updatecolumn_method.md) is updated -- [`updateRow`](api/methods/js_kanban_updaterow_method.md) is updated -- [`parse`](api/methods/js_kanban_parse_method.md) is updated - -#### Events - -- [`add-column`](api/events/js_kanban_addcolumn_event.md) is updated -- [`add-row`](api/events/js_kanban_addrow_event.md) is updated -- [`update-card`](api/events/js_kanban_updatecard_event.md) is updated -- [`update-column`](api/events/js_kanban_updatecolumn_event.md) is updated -- [`update-row`](api/events/js_kanban_updaterow_event.md) is updated - -## Version 1.0 - -Released November 23, 2021 - -[Review of release on the blog](https://dhtmlx.com/blog/releasing-dhtmlx-kanban-board-v-1-0/) - -### Initial functionality - -- Cards can be managed in these ways: - - add new cards - - select cards (including multiselection) - - delete cards - - search for cards - - reorder cards by dragging to another column or row - - edit card data in the editor: - - label - - description - - progress - - start date - - end date - - color - - priority - - attachments (*files* and *pictures*) - - *custom fields* - -- Columns and rows can be managed like this: - - add new columns and rows - - delete columns and rows - - rename columns and rows - - collapse/expand rows - -- [Localization](guides/localization.md) -- [Integration with backend](guides/working_with_server.md) (Go and Node) -- Works in all major browsers -- Supports touch devices \ No newline at end of file diff --git a/i18n/en/docusaurus-theme-classic/footer.json b/i18n/en/docusaurus-theme-classic/footer.json deleted file mode 100644 index 339b5da2..00000000 --- a/i18n/en/docusaurus-theme-classic/footer.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "link.title.Development center": { - "message": "Development center", - "description": "The title of the footer links column with title=Development center in the footer" - }, - "link.title.Community": { - "message": "Community", - "description": "The title of the footer links column with title=Community in the footer" - }, - "link.title.Company": { - "message": "Company", - "description": "The title of the footer links column with title=Company in the footer" - }, - "link.item.label.Download JS Kanban": { - "message": "Download JS Kanban", - "description": "The label of footer link with label=Download JS Kanban linking to https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml" - }, - "link.item.label.Examples": { - "message": "Examples", - "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/5hcx01h4?tag=kanban" - }, - "link.item.label.Blog": { - "message": "Blog", - "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/kanban/" - }, - "link.item.label.Forum": { - "message": "Forum", - "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/kanban/" - }, - "link.item.label.GitHub": { - "message": "GitHub", - "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" - }, - "link.item.label.Youtube": { - "message": "Youtube", - "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" - }, - "link.item.label.Facebook": { - "message": "Facebook", - "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" - }, - "link.item.label.Twitter": { - "message": "Twitter", - "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" - }, - "link.item.label.Linkedin": { - "message": "Linkedin", - "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" - }, - "link.item.label.About us": { - "message": "About us", - "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" - }, - "link.item.label.Contact us": { - "message": "Contact us", - "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" - }, - "link.item.label.Licensing": { - "message": "Licensing", - "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxKanban/#licensing" - } -} diff --git a/i18n/en/docusaurus-theme-classic/navbar.json b/i18n/en/docusaurus-theme-classic/navbar.json deleted file mode 100644 index 3f15fb6e..00000000 --- a/i18n/en/docusaurus-theme-classic/navbar.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "title": { - "message": "JavaScript Kanban Documentation", - "description": "The title in the navbar" - }, - "logo.alt": { - "message": "DHTMLX JavaScript Kanban Logo", - "description": "The alt text of navbar logo" - }, - "item.label.Examples": { - "message": "Examples", - "description": "Navbar item with label Examples" - }, - "item.label.Forum": { - "message": "Forum", - "description": "Navbar item with label Forum" - }, - "item.label.Support": { - "message": "Support", - "description": "Navbar item with label Support" - }, - "item.label.Download": { - "message": "Download", - "description": "Navbar item with label Download" - } -} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md index 4ae86ed9..3575131c 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md @@ -1,10 +1,10 @@ --- -sidebar_label: DHTML 위젯과의 통합 -title: DHTML 위젯과의 통합 +sidebar_label: DHTMLX 위젯과의 통합 +title: DHTMLX 위젯과의 통합 description: DHTMLX JavaScript Kanban 라이브러리의 문서에서 통합 방법을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Kanban의 30일 무료 평가판을 다운로드해 보세요. --- -# DHTML 위젯과의 통합 +# DHTMLX 위젯과의 통합 DHTMLX Kanban은 다른 DHTMLX 위젯(예: [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/))과 통합하여 사용할 수 있습니다. 아래 예제를 참고하세요. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md index 12075a11..8fa4b825 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md @@ -1,10 +1,10 @@ --- -sidebar_label: Интеграция с DHTML виджетами -title: Интеграция с DHTML виджетами +sidebar_label: Интеграция с DHTMLX виджетами +title: Интеграция с DHTMLX виджетами description: Вы можете узнать об интеграции в документации по JavaScript библиотеке DHTMLX Kanban. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX Kanban. --- -# Интеграция с DHTML виджетами +# Интеграция с DHTMLX виджетами Вы можете интегрировать DHTMLX Kanban с другими виджетами DHTMLX (например, [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/)). Ознакомьтесь с примерами ниже. diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md index 231d7fe1..2352d172 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md @@ -1,10 +1,10 @@ --- -sidebar_label: 与DHTML小部件集成 -title: 与DHTML小部件集成 +sidebar_label: 与DHTMLX小部件集成 +title: 与DHTMLX小部件集成 description: 您可以在DHTMLX JavaScript Kanban库的文档中了解集成方法。浏览开发者指南和API参考,试用代码示例和在线演示,并免费下载DHTMLX Kanban的30天试用版。 --- -# 与DHTML小部件集成 +# 与DHTMLX小部件集成 您可以将DHTMLX Kanban与其他DHTMLX小部件集成使用(例如,[Gantt](https://docs.dhtmlx.com/gantt/)、[Scheduler](https://docs.dhtmlx.com/scheduler/)、[To Do List](https://docs.dhtmlx.com/todolist/))。请参考以下示例。