tablePane - OnDrawCell issue

[Roberto]

Hello everybody.

I'm wondering if anybody has a solution for this. This could be a WRC issue.

We created an OnDrawCell for one of our columns in a tablePane.

In the OnDrawCell we displayed an icon, and on the onclick event of the image, we open up a modal that displays a JPG based on the row they selected.

The problem is that if another row is selected (highlighted with the default yellow), and they click an icon in another row, that row that you just clicked on will not get highlighted.

Has anybody run into this problem? And if so, how did you find a solution for this?

I examined the DOM and there really is no ID that I can utilize. I was able to simulate it by creating my own id within that row and using DOM/jQuery, I was able to select the proper row.

But if a user sorts the tablePane by clicking on one of the headers, then this technique does not work.

Thanks for any response.

-Roberto

[Vlado]

Hi Roberto,

It happens because you don't end the modal group.

Here is an example which demonstrates the problem.

If you use the "OK" button in the modal group everything

looks well. So, you have to find a way, somehow to end the

modal group(using timer or something else).

============================================================================ 
Class ZENTest.TableTest6 Extends %ZEN.Component.page
{

/// Application this page belongs to.
Parameter APPLICATION = "ZENTest.TestApplication";

Parameter PAGENAME = "Table Pane Test Page";

/// Domain used for localization.
Parameter DOMAIN = "ZENTEST";

XData Style
{
<style type="text/css">
</style>
}

/// This XML defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" xmlns:demo="http://www.intersystems.com/zendemo" title="tablePane Test Page">
<demo:demoTitle id="title" title="Zen tablePane Test Page" category="Zen Test Suite" />
<locatorBar id="locator">
<locatorLink caption="Home" title="Home page" href="ZENDemo.Home.cls"/>
<locatorLink caption="Test Suite" title="Test Suite" href="ZENTest.HomePage.cls"/>
<locatorLink caption="tablePane" title="tablePane Test Page" />
</locatorBar>

<tableNavigator tablePaneId="table"/>
<tablePane id="table" width="500"
caption="This is a tablePane"
tableName="ZENDemo_Data.Employee"
useSnapshot="true"
showFilters="true"
pageSize="10"
showRowNumbers="true"
valueColumn="ID"
maxRows="1000"
useKeys="true"
onselectrow="zenPage.rowSelected(zenThis);">
<column colName="ID" hidden="true"/>
<column colName="Name" id="nameColumn" width="200" filterType="text" />
<column colName="" header="Link" OnDrawCell="DrawImage" width="10%" />
</tablePane>
<modalGroup id="mgStatic" groupTitle="Popup">
    <image src="images/MacGreenDotB.png" />
    <button id="mgButton" caption="OK" onclick="zenPage.mgBtnClick();"/>
  </modalGroup>
</page>
}

ClientMethod modalGroupStatic() [ Language = javascript ]
{
  var group = this.getComponentById('mgStatic');
  group.show();
}

Method DrawImage(pTable As %ZEN.Component.tablePane, pName As %String, pSeed As %String) As %Status
{
  &html<
<img src="images/MacYellowDotB.png" style="border:none;" onclick="zenPage.modalGroupStatic();"/><a/>> 
Quit $$$OK
}

ClientMethod mgBtnClick() [ Language = javascript ]
{
  // hide the modal group
  zenPage.endModal();
}

/// This callback is called after the server-side page
/// object and all of its children are created.<br>
Method %OnAfterCreatePage() As %Status
{
Set tColumn = %page.%GetComponentById("cityList")
If '$IsObject(tColumn) {
Quit $$$OK
}

Set tCity = ""

#; compute DISTINCT list of city names
&sql(DECLARE sql1 CURSOR FOR
SELECT DISTINCT Home_City INTO :city
FROM ZENDemo_Data.Employee
ORDER BY Home_City
)
&sql(OPEN sql1)
&sql(FETCH sql1)
While (SQLCODE = 0) {
Set tCity = tCity _ $S(tCity="":"",1:",") _ city
&sql(FETCH sql1)
}
&sql(CLOSE sql1)

Set tColumn.filterEnum = tCity

Quit $$$OK
}

/// User selected a new row in the table
ClientMethod rowSelected() [ Language = javascript ]
{
var table = this.getComponentById('table');
}

}
=============================================================================

**Владо

[Roberto]

Hello Vlado,

Thank you for the response.

We are not using a Zen modal group for this part.

We need to display a JPG when a user clicks on a link. We want that JPG to be displayed in a modal, and also we need the user to be able to manipulate the JPG - enlarge, shrink, rotate.

We are using a jQuery plug in for this.

The plug in is working fine. It looks like the plug in is doing a "prevent default" type of action and not sending the appropriate message down the pipe.

It looks like that I can put an onclick event on the icon within the column, but to select a row I need to run the clickHandler() for that component.

The clickHandler() needs the row parameter. I have been looking at the tablePane/simpleTablePane classes and there is no information about the row that I can utilize.

This could be a WRC request.

-Roberto

[Roberto]

Vlado, responding to you gave me an idea to modify the plugin.

I looked for the part where the plugin returns control to Zen and there is a "return false" there.

I changed that to "return true", it now highlights the row, but the plugin no longer work.

I had the idea of putting in a row number manually for each row myself. It works great (runs the plugin and highlights the row), but when a user clicks on the column header to sort, the row numbering changes and this breaks the highlighting. It doesn't highlight the correct row.

-Roberto

[Derek Day]

Why not just use jQuery to render the entire table widget?

Sent from my iPad

--
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/InterSystems-ZEN?hl=en
Zen Community Terms and Conditions: http://groups.google.com/group/InterSystems-ZEN/web/community-terms-and-conditions
---
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to intersystems-z...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Roberto]

I'm not quite sure what you mean by this?

We are using a Zen tablePane. Are you saying to use jQuery to render a Zen tablePane?

-Roberto

To post to this group, send email to InterSy...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-...@googlegroups.com

[Derek Day]

No, I’m suggesting not to use a %ZEN.Component.tablePane. But instead to make a Roberto.Component.panelessTable J If you are already using jQuery and you have to go and manually add a bunch of ids to the table? Why not just render a simple HTML or JSON output from your query (e.g. use the JSONProvider) and let a jQuery widget render this as a table. Doing this will avoid all the concurrency issues possible, and give you a much lighter weight page that is not burdened by being backward compatible with every version of IE 6 and Zen 2007.1 (though the jQuery widget based design might itself work on IE 6 and 2007.1); tablePane has to go to a great deal of effort to remain backward compatible with Non-Standards mode browsers – I don’t see any reason to make it go through all that effort if what you really want is a table widget that is controlled by jQuery.

 

~Derek

To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com

[Roberto]

Ah, I see what you are saying.

Yes that would be one solution, but that would be a project in itself.

Other people have PM'd me and said that to stop the Zen highlighting itself and create my own. Another good idea but still I would need to look into it.

I was looking for a quick fix for this, but it doesn't look like there is any.

-Roberto

[Roberto]

Good news!

I am able to find a solution for this.

I created a hidden div with my own generated ID based on the row value in the column.

When the user clicks on the icon to bring up the image viewer, I deferred for 2 seconds the click event of that hidden div. Zen then takes over and allowed the row selection.

-Roberto

[Derek Day]

Excellent, in that case this may be useful to you... 

The onRowSelect callback also gets a 'which' argument that may help prevent race conditions.  The argument tells your code why the callback was triggered (it happens more often than most people guess).

Sent from my iPhone

To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com

[Roberto]

Ah OK, I looked at the docs and saw that which param.

That could come in handy one of these days.

Thanks Derek!

-Roberto

[Derek Day]

Why not render the whole table with jQuery?

Sent from my iPad

On May 5, 2013, at 11:07 PM, Roberto <rcah...@gmail.com> wrote:

Vlado, responding to you gave me an idea to modify the plugin.

I looked for the part where the plugin returns control to Zen and there is a "return false" there.

I changed that to "return true", it now highlights the row, but the plugin no longer work.

I had the idea of putting in a row number manually for each row myself. It works great (runs the plugin and highlights the row), but when a user clicks on the column header to sort, the row numbering changes and this breaks the highlighting. It doesn't highlight the correct row.

-Roberto

On Sunday, May 5, 2013 10:54:15 PM UTC-4, Roberto wrote:

Hello Vlado,

Thank you for the response.

We are not using a Zen modal group for this part.

T

We need to display a JPG when a user clicks on a link. We want that JPG to be displayed in a modal, and also we need the user to be able to manipulate the JPG - enlarge, shrink, rotate.

We are using a jQuery plug in for this.

The plug in is working fine. It looks like the plug in is doing a "prevent default" type of action and not sending the appropriate message down the pipe.

It looks like that I can put an onclick event on the icon within the column, but to select a row I need to run the clickHandler() for that component.

The clickHandler() needs the row parameter. I have been looking at the tablePane/simpleTablePane classes and there is no information about the row that I can utilize.

This could be a WRC request.

-Roberto

On Friday, May 3, 2013 10:57:04 PM UTC-4, Roberto wrote:

Hello everybody.

I'm wondering if anybody has a solution for this. This could be a WRC issue.

We created an OnDrawCell for one of our columns in a tablePane.

In the OnDrawCell we displayed an icon, and on the onclick event of the image, we open up a modal that displays a JPG based on the row they selected.

The problem is that if another row is selected (highlighted with the default yellow), and they click an icon in another row, that row that you just clicked on will not get highlighted.

Has anybody run into this problem? And if so, how did you find a solution for this?

I examined the DOM and there really is no ID that I can utilize. I was able to simulate it by creating my own id within that row and using DOM/jQuery, I was able to select the proper row.

But if a user sorts the tablePane by clicking on one of the headers, then this technique does not work.

Thanks for any response.

-Roberto

--
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.

To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com

[Roberto]

Hi Derek,

Why not render fully in jQuery?

Well, there's a lot of built in functionality with the tablePane that we are currently using that I wouldn't want to re-create - filters / sorting, etc.

There's plugins that would probably do the same thing, but for now, sticking with the tablePane is the way to go.

-Roberto

To post to this group, send email to InterSy...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-...@googlegroups.com