Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-2463

dynamically adding columns to frozen grids raises javascript errors

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Major Major
    • 7.0.4
    • 7.0.3
    • Components
    • Windows 7, JDK 7, Tomcat 7, Firefox 24, Chrome 37

    • None

      In one of our project we use frozen grid and we dynamically add columns to them.
      Below you can find an excerpt of our code.
      With ZK 7.0.0 all the columns were not visible so we postponed the upgrade.
      With ZK 7.0.3 they are visible but a javascript error is thrown. The description of the error depends on the browser.
      I attach screenshots of firefox and chrome errors.

      Row.java
      public class Row {
      	private List<String> values;
      
      	public List<String> getValues() {
      		return values;
      	}
      
      	public void setValues(List<String> values) {
      		this.values = values;
      	}
      }
      
      Column.java
      public class Column {
      	private String title;
      
      	public Column(String title) {
      		this.title = title;
      	}
      
      	public String getTitle() {
      		return title;
      	}
      
      	public void setTitle(String title) {
      		this.title = title;
      	}
      }
      
      Head.java
      public class Head {
      	private String title;
      	private int colspan;
      
      	public Head(String title, int colspan) {
      		this.title = title;
      		this.colspan = colspan;
      	}
      
      	public String getTitle() {
      		return title;
      	}
      
      	public void setTitle(String title) {
      		this.title = title;
      	}
      
      	public int getColspan() {
      		return colspan;
      	}
      
      	public void setColspan(int colspan) {
      		this.colspan = colspan;
      	}
      }
      
      GridViewModel.java
      public class GridViewModel {
      	List<Head> heads;
      	List<Column> columns;
      	List<Row> rows;
      
      	public List<Head> getHeads() {
      		return heads;
      	}
      
      	public void setHeads(List<Head> heads) {
      		this.heads = heads;
      	}
      
      	public List<Column> getColumns() {
      		return columns;
      	}
      
      	public void setColumns(List<Column> columns) {
      		this.columns = columns;
      	}
      
      	public List<Row> getRows() {
      		return rows;
      	}
      
      	public void setRows(List<Row> rows) {
      		this.rows = rows;
      	}
      
      	@Init
      	public void init() {
      		this.heads = new ArrayList<Head>();
      		this.columns = new ArrayList<Column>();
      		this.rows = new ArrayList<Row>();
      		heads.add(new Head("", 1));
      		heads.add(new Head("Gr1", 4));
      		heads.add(new Head("Grp2", 3));
      		for (int i = 0; i < 8; i++) {
      			columns.add(new Column("col " + i));
      		}
      		for (int i = 0; i < 7; i++) {
      			Row row = new Row();
      			List<String> values = new ArrayList<String>();
      			for (int v = 0; v < 8; v++) {
      				values.add("MOCK VAL");
      			}
      			row.setValues(values);
      			rows.add(row);
      		}
      	}
      
      	@Command
      	@NotifyChange({ "heads", "columns", "rows" })
      	public void doAdd() {
      		columns.add(new Column("col " + (columns.size() + 1)));
      		heads.get(heads.size() - 1).setColspan(
      				heads.get(heads.size() - 1).getColspan() + 1);
      		for (Row row : rows)
      			row.getValues().add("MOCK VAL");
      	}
      }
      
       
      <window apply="org.zkoss.bind.BindComposer"
      	title="frozen grid and dynamic columns adding"
      	viewModel="@id('vm') @init('GridViewModel')" width="1024px"
      	height="576px">
      	<vlayout vflex="1">
      		<grid model="@load(vm.rows)" vflex="1">
      			<frozen columns="1" />
      			<auxhead children="@load(vm.heads)">
      				<template name="children" var="h">
      					<auxheader label="${h.title}" colspan="${h.colspan}"
      						align="center" />
      				</template>
      			</auxhead>
      			<columns children="@load(vm.columns)">
      				<template name="children" var="c">
      					<column label="${c.title}" width="192px"
      						align="center" />
      				</template>
      			</columns>
      			<template name="model" var="r">
      				<row children="@load(r.values)">
      					<template name="children" var="v">
      						<label value="${v}" />
      					</template>
      				</row>
      			</template>
      		</grid>
      		<hbox hflex="1">
      			<cell hflex="1" align="right">
      				<button label="add new Col" onClick="@command('doAdd')" />
      			</cell>
      		</hbox>
      	</vlayout>
      </window>
      

            DevChu DevChu
            benedetti benedetti
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: