:: Forum >>

Complex HTML/Form In A Single Header Cell

Hi,

I have two header rows in an extended grid. The first row is the traditional header with labels for the columns.

For the second row, I'd like to implement what would basically be a small form inside each cell. Generally, it would be a textbox and a button, or a combobox and a button. The current set of templates is not enough. (BTW, why is there no AW.Templates.Button!?!)

The simply-stated goal is to create a place in each column's second header cell that a user can enter/select one or more values that can then be pushed into each data cell below it.

What are my options? My guess is either I shove in a bunch of HTML manually, but I'm not sure how to do that.

Or, I derive my own Template (AW.Template.Form1), but my guess is that is somewhat difficult?

Can anyone suggest either an answer to the two ideas I have, or other avenues to consider?

Thanks.
Paul Tiseo
Thursday, March 23, 2006
Paul
Check this post,
/javascript.forum.8138.6/this-is-old-topic-set.html
Carlos
Thursday, March 23, 2006
When you need to insert complex html into grid cell or header - use AW.Templates.Cell and put the html into cell text or header text property -

var obj = new AW.Grid.Extended;

    obj.setCellText("cell");
    obj.setHeaderText("header");
    obj.setColumnCount(10);
    obj.setRowCount(10);

    var formText = "<input style=\"width:30px\"></input>" +
        "<button>Click</button>";

    obj.setHeaderCount(2);
    obj.setHeaderTemplate(new AW.Templates.Cell, 1, 1);
    obj.setHeaderHeight(30, 1);
    obj.setHeaderText(formText, 1, 1);

    document.write(obj);
Alex (ActiveWidgets)
Monday, March 27, 2006
You can also assemble your special cell/header template using AW objects -

var obj = new AW.Grid.Extended;

    obj.setCellText("cell");
    obj.setHeaderText("header");
    obj.setColumnCount(10);
    obj.setRowCount(10);

    var formTemplate = new AW.System.Template;
    formTemplate.setClass("item", "template");
    formTemplate.setClass("templates", "cell");

    var input = new AW.HTML.INPUT;
    input.setStyle("width", "30px");
    formTemplate.setContent("input", input);

    var button = new AW.HTML.BUTTON;
    button.setContent("html", "Click");
    formTemplate.setContent("button", button);

    obj.setHeaderCount(2);
    obj.setHeaderTemplate(formTemplate, 1, 1);
    obj.setHeaderHeight(30, 1);

    document.write(obj);
Alex (ActiveWidgets)
Monday, March 27, 2006

Alex:

Thanks. The last one looks most OOP-like. Definitely like it.
Paul Tiseo
Monday, March 27, 2006

This topic is archived.


Back to support forum

Forum search