New DHTMLX component! Try it now and influence on future development

| Comments (16)

We are very excited to present a new DHTMLX component that later on will be included in dhtmlxSuite library. This component represents a layout with the possibility to drag-and-drop its cells.

So, meet dhtmlxPortal!

We want you to try the beta-version of this new JavaScript UI component and tell us about your experience. What should you know about it before trying?

dhtmlxPortal provides you the ability to re-order the cells in the layout at any time without the necessity of coding. You just drag the cell and drop it to the needed position.

As well as dhtmlxLayout, dhtmlxPortal provides a set of build-in patterns that are set on the init stage.

Two types of drag and drop

  • Live Drop – in this mode while dragging the item, you see its “preview” at the place of future drop.
  • Markers – in this case possible positions for dropping are highlighted during the dragging.



dhtmlxPortal

Click to open the live demo

Moreover, with dhtmlxPortal you have an ability to add and remove the cells dynamically.

Though the new component is in the beta-version now and it’s not included in the DHTMLX library yet, it can be easily integrated with other DHTMLX components.

The functionality of dhtmlxPortal can be extended with other useful features. We are very grateful to you for your feedbacks, bug reportings and suggestions. That’s why we’d like to introduce this new component to you before the official release and before making it a part of the dhtmlxSuite library.

So, please download dhtmlxPortal Beta version here.

Check the related documentation and a live demo that may help you to start working with the component.

Feel free to leave your feedbacks and suggestions in the comments section below, on the forum or write us at support@dhtmlx.com.

As soon as we collect all the opinions and create a full-featured component, it will be officially included in the new version of dhtmlxSuite.

Comments

  1. mltobing November 18, 2014 at 6:14 pm

    Good news, trying live demo so far so good for beta version

    Suggestion: Can’t resize each cells, please add this feature

    • Ivan (DHTMLX team) November 18, 2014 at 6:28 pm

      Thanks for your feedback! We’re planning to add the possibility to resize cells.

  2. Cemang November 19, 2014 at 4:54 pm

    Great,
    Are There some events like onBeforeDrag or onAfterDrag etc ?

    • Andrei (DHTMLX team) November 19, 2014 at 5:27 pm

      Hi.
      Please try the following. We will update docs.

      myPortal.attachEvent(“onDrop”, function(id, rowIndex, cellIndex){
      // your code here
      });
      myPortal.attachEvent(“onBeforeDrag”, function(id, rowIndex, cellIndex){
      // your code here
      return true; // allow drag, false otherwise
      });
      myPortal.attachEvent(“onDragIn”, function(id, rowIndex, cellIndex){
      // your cdoe here
      return false; // allow drop, false otherwise
      });

      ( Please ask tech questions on forum forum.dhtmlx.com/viewforum.php?f=5 )

      • Cemang November 19, 2014 at 8:01 pm

        Hi, Andrei
        Thank You

  3. Ken WIlson November 19, 2014 at 9:51 pm

    Great Stuff as allways… we were looking for a solution for just this type of scenario you guys ROCK!

  4. Ken WIlson November 19, 2014 at 9:53 pm

    Curious why this functionality was’nt just added to Layout Component. And could it be?

  5. Ken Wilson November 20, 2014 at 3:49 pm

    is it possible to attach to layout cell?

    like such:
    dhxLayout.cells(‘b’).attachPortal({options})

    • Andrei (DHTMLX team) November 20, 2014 at 10:03 pm

      >> is it possible to attach to layout cell?
      exactrly dhxLayout.cells(‘b’).attachPortal({options})

      >> why this functionality was’nt just added to Layout
      different low-level logic, not friendly with dnd. Portaly give you possibility to create any custom pattern easily.

      • Mike November 21, 2014 at 2:06 am

        Will it be easy to replace layout with portal?
        Or does portal miss some of the features/functions that layout provides?

        • Andrei (DHTMLX team) November 26, 2014 at 11:14 am

          Finally it should have the same features as a layout plus some more.

      • Ken Wilson November 21, 2014 at 2:17 pm

        Thanks for the reply Andrei, As long as Layout and Portal can work together seemleassly I’ve got a GREAT IDEA on way to use this component. Keep up the great work.

  6. Alexandre November 23, 2014 at 9:26 pm

    Hi,

    The only key component that were missing in DHTMLX, thanks you for that.

    Now, what miss the most if the portal feeling, i mean we feel a layout management, not a portal one which manage multiple draggable windows => look this demo http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdocking/index.htm?%28ui-le-frog%29#demos/jqxdocking/defaultfunctionality.htm.

    Now seeing the windows content while dragging is better.

    • Andrei (DHTMLX team) November 26, 2014 at 11:19 am

      Hi Alexandre.
      We already have dhtmlxWindows component. You can add several codelines to make them behave like in demo above. Or you can also contact our sales department if you’d like we did such customization for you.

  7. Alexandre December 5, 2014 at 4:20 pm

    Hi Andrei,

    Yes, that would be cool to have the windows component included so that dhtmlx portal would behave like a portal component.

    One suggestion would be to have the flip effect on windows, ie see “Creating a Flippable Cards UI” article here http://developer.telerik.com/featured/creating-flippable-cards-ui/.

    Demo is here http://burkeholland.github.io/kendo-flippable/.

    About the portal ifself, suggestions would be to allow the end user :
    – change the number of colums. In this example, you have 2 columns, the user can’t switch to 3, then back to 2 columns if he wants or switch to only one colunn.
    – the user can’t, in your example, have 2 columns and porlets in each, then having below a portlet having the width of all the 2 columns. To be precise, it’s possible by selecting a pattern but not by just dragging a portlet.

    – the user can’t resize the portlets, ie column width; and can’t resize the portlets height independently

Leave a Reply