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

dynamically adding columns to frozen grids raises javascript errors

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 7.0.3
    • Fix Version/s: 7.0.4
    • Component/s: Components
    • Environment:

      Windows 7, JDK 7, Tomcat 7, Firefox 24, Chrome 37

      Description

      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>
      

        Attachments

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Resolved: