Table in vertical direction?

[Former Member]

Hi All,

I'd like to know if we can display a table in vertical direction: the table is rotated 90 degree anticlockwise, so the visual effect is the the rows becomes columns? Example:

            Item1     Item2 ... 
Header1       1         -2
Header2      yes        no
Header3      true      false
    .
    . 
    .

Now each new Node element will add a "column" to the table. This is especially useful if the table is used for comparison reason: most of us compare things by putting them from left to right for comparison, not from top to bottom.

Unfortunately I could not find anything about this topic, hope someone can help here. Thanks very much!

Best regards,

Ge

[siarhei_pisarenka3]

Hi Ge Lin

Please, read my blog [Dynamic UI Generation: Table displayed in row wise (horizontally)|http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/16125] [original link is broken] [original link is broken] [original link is broken];. I think it's explained how to implement the table like this.

BR, Siarhei

[Former Member]

Hi Gen,

You can have a table bound to a context node with defined attributes that you would be showing as the row header. Now when you click the button, ADD ENTRY, you can set a boolean context variable say Va_AddColumn as true. In the wdDoModify method of your view, you check this value of boolean context attribute. If it is true, then dynamically add a column to the table and a TableCelleEditor to this column of the table of the type inputfield (which will keep the table as editable rather than read only). Now, add an attribute to the table node dynamically in the wdDoModify() method and add as set all the attribute value for each of the Row header as blank so that the user can edit this values to his own defined ones. Now, do table column binding for the new table node's attribute with the new column created. And, your proble is resolved. Give it a try, or I will send you the code for wdDoModify() if the issue is not resolved.

Regards,

Tushar Sinha

[Former Member]

Hi Tushar,

It will be great if you can elaborate over what you are trying to convey. It seems its a good approach and so would be good if you can let me know your approach in a detail manner. Thanks!!

Regards

DK

[sridhar_k2]

Let me understand the requirement correctly.

Your requirement is similar to this. You can add dates dynamically and name of the dates.

Fri       Sat     Sun     Mon   Tues    Wed     Thr

20        21       22      23        24        25       26

Completed    val1     val2   val3     val4     val5      val6      val7

Pending         val11 val12  va113  val14   val15    val16    val17

Failed            val21 val22  val23  val24   val25    val26    val27

Let me know, if dont understood correctly.

That is two tables. Dates in one Table and Actual contents another table.

Edited by: Sridhar k on Dec 4, 2009 10:59 AM

Edited by: Sridhar k on Dec 4, 2009 11:00 AM

[Former Member]

In a purely read-only scenario, you can achieve this layout by programatically creating the view.

Suppose you have a context structure like this:

Items (node, 0:N)

-- name (string)

-- amount (integer)

Then the following code (note: this is for NW 7.1, for earlier versions, you have to add a cast here and there) creates the wanted layout:

  public static void wdDoModifyView(IPrivateTableRotatedCompView wdThis, IPrivateTableRotatedCompView.IContextNode wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)
  {
    //@@begin wdDoModifyView
    if (firstTime || wdContext.currentContextElement().getItemsChanged())
    {
      IWDTransparentContainer grid = (IWDTransparentContainer) view.getElement("Grid");
      // Headers
      {
        IWDInvisibleElement emptyCell = view.createElement(IWDInvisibleElement.class);
        grid.addChild(emptyCell);
        emptyCell.createLayoutData(IWDMatrixHeadData.class);
        for (int i = 0; i < wdContext.nodeItems().size(); ++i)
        {
          IWDTextView columnHeader = view.createElement(IWDTextView.class);
          columnHeader.setDesign(WDTextViewDesign.EMPHASIZED);
          columnHeader.setText("Item " + i);
          grid.addChild(columnHeader);
        }
      }
      // Row 1: item names
      {
        IWDTextView rowHeader = view.createElement(IWDTextView.class);
        grid.addChild(rowHeader);
        {
          IWDMatrixHeadData layoutData = rowHeader.createLayoutData(IWDMatrixHeadData.class);
        }
        rowHeader.setDesign(WDTextViewDesign.EMPHASIZED);
        rowHeader.setText("Header1");
        for (int i = 0; i < wdContext.nodeItems().size(); ++i)
        {
          IItemsElement item = wdContext.nodeItems().getItemsElementAt(i);
          IWDTextView name = view.createElement(IWDTextView.class);
          grid.addChild(name);
          name.setText(item.getName());
        }
      }
      // Row 2: item amounts
      {
        IWDTextView rowHeader = view.createElement(IWDTextView.class);
        grid.addChild(rowHeader);
        IWDMatrixHeadData layoutData = rowHeader.createLayoutData(IWDMatrixHeadData.class);
        rowHeader.setDesign(WDTextViewDesign.EMPHASIZED);
        rowHeader.setText("Header2");
        for (int i = 0; i < wdContext.nodeItems().size(); ++i)
        {
          IItemsElement item = wdContext.nodeItems().getItemsElementAt(i);
          IWDTextView amount = view.createElement(IWDTextView.class);
          grid.addChild(amount);
          amount.setText(String.valueOf(item.getAmount()));
        }
      }
      wdContext.currentContextElement().setItemsChanged(false);
    }
    //@@end
  }

Armin

[former_member187651]

Hello Reichert,

I am new to Webdynpro. I got the requirement to display my table column vertically instead of horizontal. I am applying your way for the same. But I don't know where to write the code given by you, i.e in supplyfunction method of Item node or in WDINIT method or in WDMODIFY method.

Please let me know.

Thanks.

[Former Member]

Correct me if am wrong.

the webdynpro frame work doesnt suprrot the verticle tables as your looking for.might be going further they come up with this.