Problem with LinkItem (does not work as expected, no textbox when enabled)

[Blama]

Hi Isomorphic,

please see this modified BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.FormItemValueFormatter;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.LinkItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
	private DynamicForm boundForm;
	private IButton toogleBtn;

	public void onModuleLoad() {
		KeyIdentifier debugKey = new KeyIdentifier();
		debugKey.setCtrlKey(true);
		debugKey.setKeyName("D");

		Page.registerKey(debugKey, new PageKeyHandler() {
			public void execute(String keyName) {
				SC.showConsole();
			}
		});

		VLayout vLayout = new VLayout(10);
		DataSource ds = DataSource.get("animals");
		boundForm = new DynamicForm();
		boundForm.setDataSource(ds);

		TextItem commonName = new TextItem("commonName");
		MyLinkItem lifeSpan = new MyLinkItem("lifeSpan", Type.Telephone);
		MyLinkItem status = new MyLinkItem("status", Type.Mail);

		boundForm.setFields(commonName, lifeSpan, status);
		boundForm.fetchData(new Criteria("scientificName", "Loxodonta africana"));

		toogleBtn = new IButton("Toggle disabled");
		toogleBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				boundForm.setDisabled(!boundForm.getDisabled());
				boundForm.markForRedraw("toggled disabled");
			}
		});

		vLayout.setMembers(boundForm, toogleBtn);
		vLayout.draw();
	}

	public enum Type {
		Mail("mailto:"),
		Telephone("tel:"),
		Skype("callto:");

		private String protocol;

		private Type(String protocol) {
			this.protocol = protocol;
		}

		public String getProtocol() {
			return this.protocol;
		}
	}

	public class MyLinkItem extends LinkItem {

		public MyLinkItem(String name, final Type type) {
			super(name);

			setValueFormatter(new FormItemValueFormatter() {
				@Override
				public String formatValue(Object value, Record record, DynamicForm form, FormItem item) {
					if (value != null && value.toString().length() > 0)
						return isDisabled() ? type.getProtocol() + value.toString() : value.toString();
					return null;
				}
			});
		}
	}
}

Even when enabled, it does not show the TextItem-Box, but the link. This is also true for the showcase sample form_controls_various. This is contrary to what the Javadocs say.
Please also note that in the sample, the text "LinkItem" is not aligned with the text "Click Me" (both in Enterprise and Simplicity skin).

I'd like to achieve the following:

• Link (<a> or javascript, <a> preferred) when disabled
• Input (TextItem) when enabled
• Link on click, but other text displayed (e.g. DB-entry: "name@domain.com", link to "mailto:name@domain.com" displayed text: "name@domain.com")

As enhancement, if possible:

• For design reasons (I have TextItems above and below) I'd like this better when disabled: A disabled TextItem with a clickable link inside, with different styles (enabled: normal text, disabled: underlined text)

I think this could be solved the best with two new APIs (setLinkURLFormatter(LinkURLFormatter), setLinkTitleFormatter(LinkTitleFormatter)), or reusing setValueFormatter(FormItemValueFormatter) for one of those.
I think it does not work with setLinkTitle(String) when using DataBound items.

I'm using v9.1p_2014-07-22 in FF26 Dev Mode and the online client showcase (also v9.1p_2014-07-22).

Best regards,
Blama

[Isomorphic]

Hi Blama
There is actually a difference between explicit "canEdit" and disabled. If you call formItem.setCanEdit(...) on a linkItem you'll see in canEdit:true mode it shows as an editable TextItem and if set to canEdit:false, it shows a link.

The setLinkTitle() method gives you a way to display a title for the Link which differs from the "value" of the item.

You can set target to "javascript" and specify a click handler for custom click handling rather than just opening a link.

Not sure if we fully follow the proposed enhancements but if you just want a Text-box appearance around your clickable link, or you want the text to be underlined in the text box while in edit mode, you could specify custom css styles to achieve this.

Please let us know if this won't give you enough to do what you need

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

thanks for the hint on the difference of setCanEdit(false) / setDisabled(true).

My issue consists of two parts:

Part 1):
Two new APIs (setLinkURLFormatter(LinkURLFormatter), setLinkTitleFormatter(LinkTitleFormatter)), or one new and reusing setValueFormatter(FormItemValueFormatter) for one of the above.
I can't get it to work otherwise with Databound items; my usecase:
"user1@domain.com" in DB, I want to link to "mailto:user1@domain.com" and display "user1@domain.com" as link.
"user2@domain.com" in DB, I want to link to "mailto:user2@domain.com" and display "user2@domain.com" as link.

Can you do that with just the existing setLinkTitle() / setValue()?


Part 2):
As options when in setCanEdit(false) mode:

1. As it currently is
2. Show the <a>-link (underlined by the browsers default css) in a setCanEdit(false)-TextItem

This is to have the FormItem use the same amount of space as before and to fit perfectly to the design of my TextItems above and below.
I'm pretty sure I could fake this with an own setCanEdit(false)-TextItem, FormItem.addClickHandler() and some CSS, but then I don't need LinkItem at all and would be using a javascript-link instead of an <a>-link, that does display its target in the browser's status bar.

Best regards,
Blama

[Isomorphic]

Part 1):
Two new APIs (setLinkURLFormatter(LinkURLFormatter), setLinkTitleFormatter(LinkTitleFormatter)), or one new and reusing setValueFormatter(FormItemValueFormatter) for one of the above.
I can't get it to work otherwise with Databound items; my usecase:
"user1@domain.com" in DB, I want to link to "mailto:user1@domain.com" and display "user1@domain.com" as link.
"user2@domain.com" in DB, I want to link to "mailto:user2@domain.com" and display "user2@domain.com" as link.

Can you do that with just the existing setLinkTitle() / setValue()?

The result standard valueFormatter will be applied to the link target href, so if your item is editing a database record with value "user1@domain.com", you can have a standard valueFormatter to add the "mailto://" to the beginning.
For the link title, we only have setLinkTitle() to set the title to some static string - no dynamic linkTitleFormatter, so you'd have to actually update the link title explicitly to reflect the underlying data value.

Adding a linkTitleFormatter or similar would be something we could add as a feature - probably a Feature Sponsorship. Let us know if you'd like us to look at what's involved to do this (it would likely be a fairly quick feature to add).

On the second issue - this is something you'd achieve by styling. Setting readOnlyTextBoxStyle to the desired style ("textItem", to match a standard TextItem) would be a good starting point.

[Blama]

Hello Isomorphic,

thanks for the explanation. I think I'm fine with calling setLinkTitle() in my DSCallback for now.

Also thanks for the hint on readOnlyTextBoxStyle, which does exactly what I need. While experimenting with it I found these issues with LinkItem.

Please see this testcase based on BuiltInDS:

BuiltInDS.java

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.ReadOnlyDisplayAppearance;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.LinkItem;
import com.smartgwt.client.widgets.form.fields.SpinnerItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
	private DynamicForm boundForm;
	private LinkItem scientificName;
	private LinkItem commonName;
	private LinkItem status;
	private SpinnerItem lifeSpan;
	private IButton toogleBtn;

	public void onModuleLoad() {
		KeyIdentifier debugKey = new KeyIdentifier();
		debugKey.setCtrlKey(true);
		debugKey.setKeyName("D");

		Page.registerKey(debugKey, new PageKeyHandler() {
			public void execute(String keyName) {
				SC.showConsole();
			}
		});

		VLayout vLayout = new VLayout(10);
		DataSource ds = DataSource.get("animals");

		TextItem ti = new TextItem() {
			{
				setWidth("*");
				setHeight(30);
			}
		};
		TextItem.setDefaultProperties(ti);

		LinkItem li = new LinkItem() {
			{
				setWidth("*");
				setHeight(30);
			}
		};
		LinkItem.setDefaultProperties(li);

		SpinnerItem si = new SpinnerItem() {
			{
				setWidth("*");
				setHeight(30);
			}
		};
		SpinnerItem.setDefaultProperties(si);

		boundForm = new DynamicForm();
		boundForm.setCanEdit(true);
		boundForm.setWidth(500);
		boundForm.setTitleWidth(200);
		boundForm.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
		boundForm.setDataSource(ds);

		scientificName = new LinkItem("scientificName");
		scientificName.setReadOnlyTextBoxStyle("textItem");
		scientificName.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);

		commonName = new LinkItem("commonName");
		commonName.setReadOnlyTextBoxStyle("textItem");
		commonName.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);

		lifeSpan = new SpinnerItem("lifeSpan");

		status = new LinkItem("status");

		boundForm.setFields(scientificName, commonName, lifeSpan, status);

		boundForm.fetchData(new Criteria("scientificName", "Loxodonta africana"));

		toogleBtn = new IButton("Toggle canEdit");
		toogleBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				if (boundForm.getCanEdit()) {
					boundForm.setCanEdit(false);

					scientificName.setCanEdit(boundForm.getCanEdit());
					commonName.setCanEdit(boundForm.getCanEdit());
					status.setCanEdit(boundForm.getCanEdit());
				} else {
					boundForm.setCanEdit(true);

					scientificName.setCanEdit(boundForm.getCanEdit());
					commonName.setCanEdit(boundForm.getCanEdit());
					status.setCanEdit(boundForm.getCanEdit());
				}
				boundForm.markForRedraw("Toggled canEdit");
			}
		});

		vLayout.setMembers(boundForm, toogleBtn);
		vLayout.draw();
	}
}

Observations / Bugs:

• commonName and status are not centred when setCanEdit=false (related to this?)
• scientificName changes its (inner) size when setCanEdit=false
• commonName should look like status, as according to the FormItem.setReadOnlyTextBoxStyle-javadocs, this setting applies only to readOnlyDisplay=static-items
• LinkItem.setReadOnlyDisplay()-javadocs state "LinkItems are, by default, canEdit: false", which is an information that should also be present in the general LinkItem-class javadocs, as this affects DynamicForm.setCanEdit(true) in an unexpected way and inherited FormItem.setCanEdit() states a default value of null. Until I found the additional documentation I thought it was a bug.

Best regards,
Blama

[Blama]

Hi Isomorphic,

can you reproduce the errors from the last post and think these are bugs?

Best regards,
Blama

[Isomorphic]

Hi!
The first 2 points here:

• commonName and status are not centred when setCanEdit=false (related to this?)
• scientificName changes its (inner) size when setCanEdit=false

...are closely related. Form items support vertical alignment specifications via the setVAlign() API - however, this governs the alignment of the text box, not the text within the text-box.
When a formItem has a specified height, this can be applied to the text-box or to the cell as a whole (with the text-box being sized to fit the content) - see formItem.shouldApplyHeightToTextBox().

The reason that commonName and status are not centered by in readOnly mode is that the specified height is being applied to the text box - the text box *is* centered within the cell but nothing is forcing the cell itself to be taller.
For StaticTextItems and for items with readOnlyAppearance set to "static", we do not apply the height to the text-box, so for these the text box doesn't take up the complete available space in the cell and instead will itself be vertically centered within the cell. This is also why the scientificName item (which has it's readOnly appearance set to "static") has its text box change height when the canEdit flag is toggled.

We're not quite following the third issue [commonName should look like status...] - can you clarify what you mean?

On the last issue - we'll look at improving the documentation.

Thanks
Isomorphic Software

[Blama]

Hi Isomorphic,

I found this thread again by chance. As this is still an issue in my Application (showing an URL to edit or showing an URL to click depending on the user) I investigated and created a testcase (v11.1p_2018-01-29, Tahoe) with all permutations for LinkItem.
None of those shows the text in canEdit(false)-mode correctly - correctly in my opinion is a 30-high FormItem with "big" textBox (like SpinnerItem and TextItem in the sample) with centered text in both modes (canEdit:true/false).

BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.ReadOnlyDisplayAppearance;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.LinkItem;
import com.smartgwt.client.widgets.form.fields.SpinnerItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("LinkItem content positioning when showing the link" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        VLayout vLayout = new VLayout(10);
        DataSource ds = DataSource.get("animals");

        TextItem ti = new TextItem() {
            {
                setWidth("*");
                setHeight(30);
            }
        };
        TextItem.setDefaultProperties(ti);

        LinkItem li = new LinkItem() {
            {
                setWidth("*");
                setHeight(30);
            }
        };
        LinkItem.setDefaultProperties(li);

        SpinnerItem si = new SpinnerItem() {
            {
                setWidth("*");
                setHeight(30);
            }
        };
        SpinnerItem.setDefaultProperties(si);

        final DynamicForm boundForm = new DynamicForm();
        boundForm.setCanEdit(true);
        boundForm.setWidth(500);
        boundForm.setTitleWidth(200);
        boundForm.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        boundForm.setDataSource(ds);

        final LinkItem scientificName = new LinkItem("scientificName");
        scientificName.setTitle("Static-false-box");
        scientificName.setReadOnlyTextBoxStyle("textItem");
        scientificName.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName.setApplyHeightToTextBox(false);
        scientificName.setCanEdit(true);

        final LinkItem scientificName2 = new LinkItem("scientificName2");
        scientificName2.setTitle("Static-true-box");
        scientificName2.setReadOnlyTextBoxStyle("textItem");
        scientificName2.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName2.setApplyHeightToTextBox(true);
        scientificName2.setCanEdit(true);

        final LinkItem scientificName3 = new LinkItem("scientificName3");
        scientificName3.setTitle("Readonly-false-box");
        scientificName3.setReadOnlyTextBoxStyle("textItem");
        scientificName3.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName3.setApplyHeightToTextBox(false);
        scientificName3.setCanEdit(true);

        final LinkItem scientificName4 = new LinkItem("scientificName4");
        scientificName4.setTitle("Readonly-true-box");
        scientificName4.setReadOnlyTextBoxStyle("textItem");
        scientificName4.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName4.setApplyHeightToTextBox(true);
        scientificName4.setCanEdit(true);

        final LinkItem scientificName5 = new LinkItem("scientificName5");
        scientificName5.setTitle("Static-false-nobox");
        scientificName5.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName5.setApplyHeightToTextBox(false);
        scientificName5.setCanEdit(true);

        final LinkItem scientificName6 = new LinkItem("scientificName6");
        scientificName6.setTitle("Static-true-nobox");
        scientificName6.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName6.setApplyHeightToTextBox(true);
        scientificName6.setCanEdit(true);

        final LinkItem scientificName7 = new LinkItem("scientificName7");
        scientificName7.setTitle("Readonly-false-nobox");
        scientificName7.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName7.setApplyHeightToTextBox(false);
        scientificName7.setCanEdit(true);

        final LinkItem scientificName8 = new LinkItem("scientificName8");
        scientificName8.setTitle("Readonly-true-nobox");
        scientificName8.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName8.setApplyHeightToTextBox(true);
        scientificName8.setCanEdit(true);

        SpinnerItem lifeSpan = new SpinnerItem("lifeSpan");

        final TextItem status = new TextItem("status");

        boundForm.setFields(scientificName, scientificName2, scientificName3, scientificName4, scientificName5, scientificName6,
                scientificName7, scientificName8, lifeSpan, status);

        boundForm.fetchData(new Criteria("scientificName", "Loxodonta africana"));

        IButton toogleBtn = new IButton("Toggle canEdit");
        toogleBtn.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                boundForm.setCanEdit(!boundForm.getCanEdit());
                for (FormItem fi : boundForm.getFields())
                    fi.setCanEdit(boundForm.getCanEdit());
                boundForm.markForRedraw("Toggled canEdit");
            }
        });

        vLayout.setMembers(boundForm, toogleBtn);

        w.addItem(vLayout);
        w.show();
    }
}

animals.ds.xml:

<DataSource
    ID="animals"
    serverType="sql"
    tableName="animals"
    testFileName="animals.data.xml" useAnsiJoins="true" 
>
    <fields>
        <field name="commonName"      title="Animal"             type="text"/>
        <field name="scientificName"  title="Scientific Name"    type="text" primaryKey="true"  required="true" />
        <field name="scientificName2"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName3"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName4"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName5"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName6"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName7"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName8"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="lifeSpan"        title="Life Span"          type="integer"/>
        <field name="status"          title="Endangered Status"  type="text">
            <valueMap>
                <value>Threatened</value>
                <value>Endangered</value>
                <value>Not Endangered</value>
                <value>Not currently listed</value>
                <value>May become threatened</value>
                <value>Protected</value>
            </valueMap>
        </field>
        <field name="diet"            title="Diet"               type="text"/>
        <field name="information"     title="Interesting Facts"  type="text"  length="1000"/>
        <field name="picture"         title="Picture"            type="image" detail="true"
               imageURLPrefix="/isomorphic/system/reference/inlineExamples/tiles/images/"/>
    </fields>
</DataSource>

Best regards
Blama

[Isomorphic]

We're not clear on which ones you think are incorrect and why. Are you reporting a bug with dynamically changing the canEdit values of both a form and formItems simultaneously?

[Blama]

Hi Isomorphic,

sorry for not being clear. My aim is to have a design where:

• The bounding textBox in canEdit:true-mode is as for TextItem or SpinnerItem
• The link text in canEdit:false-mode is centered w.r.t. the FormItem-title
• I don't care so much if the item in canEdit:false-mode has a box or not, but if it has, the box should be as big as it is for TextItem/SpinnerItem.

IMHO the setApplyHeightToTextBox(true) does what I want, but here I have the issue that the link text in canEdit:false-mode is not vertically centered. This is the issue I'm reporting.

The changing of DynamicForm and FormItems at the same time is necessary, as LinkItem is canEdit:false (and not canEdit:null like other FormItems) by default, so that just calling setCanEdit(true) on the DynamicForm does not toogle the LinkItems.

Thank you & Best regards
Blama

[Isomorphic]

We've fixed this for tomorrow's builds - the trick will be to replace your calls to setReadOnlyTextBoxStyle() and setApplyHeightToTextBox(true/false) with a single setApplyHeightToTextBox(null)

[Isomorphic]

Note that, as we said, in today's builds you'll see this issue fixed if you just remove your calls to setReadOnlyTextBoxStyle() and setApplyHeightToTextBox(true/false) and call setApplyHeightToTextBox(null) instead.

That's still true, for today's build, but from tomorrow you won't even need to call setApplyHeightToTextBox(null) because it's now the default for LinkItems - in other words, just this code will do:

final LinkItem scientificName8 = new LinkItem("scientificName8");
scientificName8.setTitle("Readonly-true-nobox");
scientificName8.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
// this line now dictates the value of shouldApplyHeightToTextBox
scientificName8.setCanEdit(true);

[Blama]

Hi Isomorphic,

OK, thank you. I'll give it a try tomorrow and report back.

Best regards
Blama

[Blama]

Hi Isomorphic,

I tried your change from #11 with v11.1p_2018-02-16, but it is not working as expected, yet.
As you can see below, the title is not longer vertically aligned and the FormItemIcon overlaps the text. But I can see that the text itself is now centered vertically.




Best regards
Blama

[Isomorphic]

Can you show the code for that sample? We need to see the title, column and width settings at least?