DashboardColumn disappears in Dashboard

salman4u · 22 Apr 2010, 17:31

Hello,
The dashboard doesn't work as expected. There is only panel in 3rd column in my dashboard. When i move it to 2nd Column, then the 3rd column disappears. Then, i am not able to move any other panel into 3rd column

Here is my code

Code: Select all

 <p:dashboard model="#{HomeBean.objDashboardModel}">
                                        <p:panel id ="finance" style="width:200px;margin-right: 30px;" >
                                            Backing dashboard model simply defines the number of columns and defines the widgets
                                            to be placed in each column. Additionally dashboardcolumn is used to define a column in
                                            layout. APIs for these classes are;

                                        </p:panel>

                                        <p:panel id ="eco" style="width:200px;margin-right: 30px;" >
                                            Backing dashboard model simply defines the number of columns and defines the widgets
                                            to be placed in each column. Additionally dashboardcolumn is used to define a column in
                                            layout. APIs for these classes are;

                                        </p:panel>

                                        <p:panel id ="oc" style="width:200px;margin-right: 30px;">
                                            Backing dashboard model simply defines the number of columns and defines the widgets
                                            to be placed in each column. Additionally dashboardcolumn is used to define a column in
                                            layout. APIs for these classes are;

                                        </p:panel>

                                        <p:panel id ="accounts" style="width:200px;margin-right: 30px;" >
                                            Backing dashboard model simply defines the number of columns and defines the widgets
                                            to be placed in each column. Additionally dashboardcolumn is used to define a column in
                                            layout. APIs for these classes are;

                                        </p:panel>

                                    </p:dashboard>

Here is my bean :-

Code: Select all

 */
@ManagedBean(name = "HomeBean")
@RequestScoped
public class HomeBean {
    private DashboardModel objDashboardModel;

    public DashboardModel getObjDashboardModel() {
        return objDashboardModel;
    }

    public void setObjDashboardModel(DashboardModel objDashboardModel) {
        this.objDashboardModel = objDashboardModel;
    }
    
    @PostConstruct
    public void init(){
        objDashboardModel = new DefaultDashboardModel();

        DashboardColumn leftGadgetColumn = new DefaultDashboardColumn();
        DashboardColumn middleGadgetColumn = new DefaultDashboardColumn();
        DashboardColumn rightGadgetColumn = new DefaultDashboardColumn();
        leftGadgetColumn.addWidget("finance");
        middleGadgetColumn.addWidget("eco");
        rightGadgetColumn.addWidget("oc");
        middleGadgetColumn.addWidget("accounts");

        objDashboardModel.addColumn(leftGadgetColumn);
        objDashboardModel.addColumn(middleGadgetColumn);
        objDashboardModel.addColumn(rightGadgetColumn);
      

    }

}

Why does it work in primefaces showcase and not work when i try it on my own? I thought it's issue with browser. But i ran the same code in mozilla firefox as well as Chrome. Problems occur in both.

salman4u · 23 Apr 2010, 05:21

Now, i've tried the example of showcase on every browser and still the dashboardcolumn disappears. This is the same example of showcase. Once any column becomes empty, we can never move any widget to that column. The dashboardcolumn gets deleted when there is no more elements in it.

This is my code :-

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
        <p:dashboard model="#{dashboardBean.model}">
            <p:panel id="sports" closable="true" toggleable="true">
                <h:outputText value="Sports Widget"/>
            </p:panel>

            <p:panel id="finance" closable="true" toggleable="true">
                <h:outputText value="Finance Widget"/>
            </p:panel>

            <p:panel id="lifestyle" closable="true" toggleable="true">
                <h:outputText value="Sports Widget"/>
            </p:panel>

            <p:panel id="weather" closable="true" toggleable="true">
                <h:outputText v[code][code]

[/code]alue="Sports Widget"/>
</p:panel>

<p:panel id="politics" closable="true" toggleable="true">
<h:outputText value="Sports Widget"/>
</p:panel>

</p:dashboard>
</h:form>
</h:body>
</html>
[/code]

Tihs is the bean :-

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;

@ManagedBean(name="dashboardBean")
@RequestScoped
public class dashboardBean {

    private DashboardModel model;

    public DashboardModel getModel() {
        return model;
    }

    public void setModel(DashboardModel model) {
        this.model = model;
    }

    public dashboardBean() {
         model = new DefaultDashboardModel();
        DashboardColumn column1 = new DefaultDashboardColumn();
        DashboardColumn column2 = new DefaultDashboardColumn();
        DashboardColumn column3 = new DefaultDashboardColumn();

        column1.addWidget("sports");
        column1.addWidget("finance");

        column2.addWidget("lifestyle");
        column2.addWidget("weather");

        column3.addWidget("politics");

        model.addColumn(column1);
        model.addColumn(column2);
        model.addColumn(column3);
    }

}

salman4u · 23 Apr 2010, 05:34

Hi cagatay,
i would like to add that interestingly, the column count remains the same (3) but i am no more able to move in that column. How did you make it in showcase demo? I've did exactly the same but no luck!

salman4u · 23 Apr 2010, 06:23

Hi Cagatay,
I figured it out on my own. I downloaded the showcase and saw it's dashboard.xhtml and found that all i was missing was this selector :-

Code: Select all

 .pf-dashboard-column {width:200px;}

I wish you could mention this important step in documentation so that my 5-6 hours could have been saved. Anyways, Great work on dashboard!
Also, i would like to mention that there is a mistake in documentation :-

See the dashboard example in documentation. It says

Code: Select all

  DashboardColumn column1 = new DefaultDashboardModel();
	 DashboardColumn column2 = new DefaultDashboardModel();
	 DashboardColumn column3 = new DefaultDashboardModel();

instead of using DefaultDashboardColumn. For beginners, who are new to Primefaces, it may be confusing.

Tuvshin09 · 14 Jun 2010, 22:33

thanks salman,
It is good to know.

Tuvshin

bhakav · 22 Feb 2011, 02:52

saved me time

Thanks

eSapient · 27 Feb 2012, 19:43

Thanks. This thread saved me time too.

However, I did have to struggle for some time due to this problem because the solution is not with ".pf-dashboard-column". With the current showcase version, it is ".ui-dashboard-column". Hope this saves time for some.

kay · 19 Jun 2012, 12:07

Thanks for this. I've been confused about that for a while. It kind of sucks because it means your panels must be a fixed size. And in 3.3.1 the CSS selector seems to be ui-dashboard-column.

llech · 11 Feb 2013, 10:57

Tips
Provide a column width using ui-dashboard-column style class otherwise empty columns might
not receive new widgets.

However, the default style from aristo provides no initial width.

It should be provided min-width, not width, otherwise the content of dashboard will be shrinked.

migano · 14 Feb 2016, 10:07

Thank you man, you saved my day

DashboardColumn disappears in Dashboard

Who is online