{"id":2460,"date":"2014-09-23T18:56:01","date_gmt":"2014-09-23T14:56:01","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2460"},"modified":"2023-05-05T13:58:35","modified_gmt":"2023-05-05T10:58:35","slug":"different-content-in-the-same-cell","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/different-content-in-the-same-cell\/","title":{"rendered":"DHTMLX Little-Known Features: Different Content in the Same Cell"},"content":{"rendered":"

DHTMLX library has lots of features and provides numerous abilities, but not all of them are discovered at first glance. We want to share some tips that you might have missed but they may appear quite useful.<\/p>\n

We\u2019ll start with such called \u201cviews\u201d<\/strong>, the feature of a cell. <\/p>\n

In the components that have cells (i.e. accordion, layout, tabbar and windows), there is a possibility to show different content in the same cell<\/a>.<\/p>\n

\"content-in-one-cell\"<\/p>\n

How it works?<\/strong><\/p>\n

As an example, let’s take a layout and attach some components to the cell \u201cb\u201d.<\/p>\n

\nEach cell shows the view “def” by default (empty without any content). Then just attach the content you need:\n<\/p>\n

var<\/span> myMenu =<\/span> myLayout.cells<\/span>(<\/span>"b"<\/span>)<\/span>.attachMenu<\/span>(<\/span>)<\/span>;<\/span>
\nvar<\/span> myGrid =<\/span> myLayout.cells<\/span>(<\/span>"b"<\/span>)<\/span>.attachGrid<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"def-view\"<\/p>\n

\nThen you can just switch to another view and attach another content. Name these views as you like and determine which view should be shown. If the view \u201ctree\u201d doesn\u2019t exist, the command showView(“tree”) creates it. <\/p>\n

myLayout.cells<\/span>(<\/span>"b"<\/span>)<\/span>.showView<\/span>(<\/span>"tree"<\/span>)<\/span>;<\/span>
\nmyToolbar =<\/span> myLayout.cells<\/span>(<\/span>"b"<\/span>)<\/span>.attachToolbar<\/span>(<\/span>)<\/span>;<\/span>
\nmyTree =<\/span> myLayout.cells<\/span>(<\/span>"b"<\/span>)<\/span>.attachTree<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

The view \u201cdef\u201d becomes hidden and the view \u201ctree\u201d is active now:<\/p>\n

\"views\"<\/p>\n

If we request to show the view “def”, then it\u2019ll be restored and active again, and the view \u201ctree\u201d will become hidden. There is no limit in number of views in a cell.<\/p>\n

Get more details in documentation<\/a> and check the related demo<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

DHTMLX library has lots of features and provides numerous abilities, but not all of them are discovered at first glance. We want to share some tips that you might …<\/p>\n","protected":false},"author":2,"featured_media":3325,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,43,14],"class_list":["post-2460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2460"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2460\/revisions"}],"predecessor-version":[{"id":11415,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2460\/revisions\/11415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3325"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}