Et2: How can you prevent table row from being focused when clicking in textbox

[dawuid]

Hello,
I’m using a et2 grid with nextmatch and textbox inside of each table row.
After clicking in a textbox, the table row gets the focus and you are not able to edit the textbox.
How can I prevent, that the textbox losts the focus? I read a hint in app_base.js, but I failed multiple times to solve my problem! Sorry!
Regards, Axel

[dawuid]

I disclaim nextmatch, becauso I have no idea anymore. Also nextmatch is never been used like mine. But how can I use a template in a row without packing the content of the template into a div-tag?

<grid>
   <row>
      <template id="xyz.row" content="lst[0]"/>
      <template id="xyz.row" content="lst[1]"/>
      <template id="xyz.row" content="lst[2]"/>
   </row>
</grid>

The used template:
<template id="xyz.row">
   <textbox id="item_val1" .../>
   <textbox id="item_val2" .../>
</template>

This doesn’t work, because the result of xyz.row is a single div-tag and not 2 td-tags.
Thanks for your ideas!

Regards, Axel

[JDlugi]

Hi Axel,

first of all one question, what do you want to do?
I assume, you want to edit a value of a record directly within the list view.

As far as I know this is not possible out of the box due to the bo model. It wouldn’t be solved by only making a textbox editable in a list view, you also have to manage in the background to grab the record ID and make a kind of a submit, ajax call to update the specific record.

Maybe one of the developers can help to clarify this issue.

Jürgen

[dawuid]

Hi Jürgen,
your guess is correct!
Each record belongs to a student with his name and grades.
Jürgen 1 2 1
Axel 5 6 6
…
exactly like my sample
There is no technical reason for this, but our teacher are very used to it.
In addition, it is probably still the most suitable representation.
Axel

[JDlugi]

In relation to

As far as I know this is not possible out of the box due to the bo model. It wouldn’t be solved by only making a textbox editable in a list view, you also have to manage in the background to grab the record ID and make a kind of a submit, ajax call to update the specific record.

One further question…
Are you going to write a new app, module to handle this data or do you want to store this data additionally in the address book using custom fields.

In other words, how do you want to store the grades which are in relation to the students and maybe also in relation to a school subject - how does your data model look like?

If all the students are already maintained in the address book and you have a fixed amount of school subjects /grades I would recommend to use the custom fields of the address book (one custom field for each grade), add a new contact type there, design a type specific template for this type with an additionally tab named for example grades to display the data. That would be a solution that doesn’t take much effort. Further you could create a report template to export the whole list in a spreadsheet

Sorry for not giving you a direct answer to your question, but without knowing in which way your data will be available, stored in egw for me it is not possible to give you a hint how to display the data.

PS: Referring to your posted et2 code, do you only use the grid widget because there is no nextmatch widget tag. One hint, have you tried out the hbox vbox widgets?

Have you already took notice of:

http://community.egroupware.org/index.php?page_name=wiki&wikipage=Code+Corner

Nilpferdschaf/Egroupware-Doku

Jürgen

[dawuid]

Yes, it is a new app. There are several tables synced each night to egroupware. The dates are from the official administration program, which is mandatory for each school in bavaria and baden-württemberg. Teacher change their class group at short notice, so the associations do not have to be maintained by hand.
The app only writes to a single table which contains the grades. This table should be synced back automatically or reimported by an existing interface!

One hint, have you tried out the hbox vbox widgets?

Yes I used hbox and vbox, but that is an idea, to use a separate grid/hbox/vbox for each student.
I will give it a try!
I know the wiki and doku, but my problem seems to be more special!
Axel

[JDlugi]

The only special thing about your app is that you would apparently edit a data set directly in a list view, if you want to edit a data set you have to provide an edit.xet with the proper code in the ui and bo level.

Do you want to do a quick hack or do you want to use the features of the egw api, like the nextmatch widget?

Do you want to realize the import, export with the help of the egw implemented functionality?

Working for German schools - do you also speak German?

[JDlugi]

Referring to your xet code and your aim having td instead of div your code should look like this:

index.xet

<overlay>
<template id="grades.index" template="" lang="" group="0" version="0.1">
	<nextmatch id="nm" template="grades.index.rows" />
</template>
</overlay>

index.rows.xet

<overlay>
<template id="grades.index.rows" template="" lang="" group="0" version="0.1">
	<grid>
		<columns>
			<column/>
			<column/>
			<column/>
			<column/>
		</columns>
		<rows>
			<row>
				<nextmatch-sortheader label="ID" id="grades_id"/>
				<nextmatch-sortheader label="Student" id="grades_studentID"/>
				<nextmatch-sortheader label="grade 1" id="grades_grade01"/>
				<nextmatch-sortheader label="grade 2" id="grades_grade02"/>
			</row>
			<row>
				<description id="${row}[grades_id]"/>
				<description id="${row}[grades_studentID]"/>
				<description id="${row}[grades_grade01]"/>
				<description id="${row}[grades_grade02]"/>
			</row>
		</rows>
	</grid>
</template>
</overlay>`

This is the base structure to use the nextmatch widget.`
But this should only show up the rough structure,you have to adapt this to your data structure.

The determining factor for giving you the right help is your data structure in the egw in which the external data should be imported.

[JDlugi]

Two solutions for your problem

If you want to use nextmatch functionality.

<textbox id="${row}[grades_id]" onclick=“javascript:void(0);”  onchange=“app.YOURAPPNAME.YOURSAVEFUNCTION();”/>

if you only want to use a grid - replace

<nextmatch-sortheader label="XYZ" id="ABC"/>

with

<description value="COLUMN TITLE"/>`

and

<description id="${row}[grades_id]"/>

with

<textbox id="${row}[grades_id]"/>

delete your index.rows.xet and delete

<template id="grades.index" template="" lang="" group="0" version="0.1">
<nextmatch id="nm" template="grades.index.rows" />
</template>

write all the grid stuff into the index.xet file

The grid variant also needs some handling to save the modified value called by an onchange event of the text box like in the first solution

Jürgen

[dawuid]

Hello Jürgen,
I’m really very gratefull for your help! You gave me a lot of new ideas!

<textbox id="${row}[grades_id]" onclick=“javascript:void(0);”

Did you tried this in an existing app, for example timesheet? I’m not able to click into the textbox and write into, because the caret doesn’t stay in the textbox. I’m able to write, while left mouse button is pressed or the caret is visible, or after a right mouse click and escape from context menu.
Nextmatch is really very powerfull, but never used to edit multiple records.
Is it possible to create a self-programmed widget, or does it allways requires intervention in the api code of egw?

I tried to stop the event handling with something like event.preventDefault(), but still with not the expected success.

For now I prefer to use a stupid template for editing maximum 35 records.

(And yes, I’m working for german schools and I speak german. And I want to use egw api as most as possible. But I’m still learning about egw api! I use webdav for Import/Export. I programmed a Java-Service, which transfers defined files, if a new version is detected. Actually only one way!)

Regards, Axel

[JDlugi]

Hello Axel,

You’re right it doesn’t work in timesheet, I tested it in infolog… use onclick=“return false;” works always - mh, at least in address book and my own apps too

But as I said, you must add a save routine if value has changed, this will be a lot of work, programming an extra widget also - do you have such a budget/time? Why not providing an editing window for all fields of a record, data set, what ever?

Okay now you have 35 records, this means 35 records with X grades in it, one record is one student?
35 I assume this is a class, what the hell - classes are so big today?

How will you handle the increasing data amount. A small school has maybe 3 classes per class level, 12 or 13 class level … this would be more over 1000 records multiplied with X grades. Not talking about different school subjects changing sometimes per class level.
With nextmatch you will have page pagination, search ability etc.

I’m sure you know what you are doing, but that’s why I asked about your data model and moreover especially the mapping between the two systems.
I mean there are maybe other things to do as programming a new widget, for example is there no need for privacy protection, this means implementing an acl (teachers per class).

Be sure, I don’t want to tread on your toes, but the background of your project sounds interesting for me .

best wishes
Jürgen

[dawuid]

Hello Jürgen,
YOU SAVED MY DAY, WEEK, MONTH AND 2018!

use onclick=“return false;” works always

I tried 1.000 possibilities, but not this, without making an other mistake presumably! Now I can use nextmatch!!!

Regarding your other aspects: the records will be saved in the php action. The user edits in a popup and has to click on SAVE-Button. And I have no budget or time, but I’m going crazy anyway
The acl are from records in the original database.
Thank you very much! Maybe I’ll succeed here and other can use it too.
Best wishes, Axel