Template for default classic tabular datagrid

[bkim]

I wasn't sure if I should include this in my previous thread or make a new one, but I recalled you mentioning that separate issues should be in separate threads, so hopefully this is separate enough!

Basically what the subject says, is there a template for the default classic tabular datagrid that I can use? I want to just make some basic modifications on it, since most of the application is already using it and changing how one results page looks seems awkward.

 

[bkim]

In addition, do you have any idea why this piece of code doesn't seem to be working as intended in the template:

[pre]
<script type="text/javascript">

var row = document.getElementById('dadabik_field po_num dadabik_field');

var fieldname = "dadabik_field Status dadabik_field";

if (fieldname.localeCompare("Cancelled / Void" ) == 0){
row.style='color:red';
}
</script>

<table><tr id="dadabik_field po_num dadabik_field">
<td>dadabik_field Status dadabik_field</td>
<td>dadabik_field po_num dadabik_field</td>
<td>dadabik_field country_color dadabik_field</td>
</tr></table>
[/pre]

This is the outcome: http://chattypics.com/files/CaptureJPG_5rpt1tgli3.jpg

First issue is that not all of the rows are being colored red, which it should be.
Second issue I have is that once the row color for that specific id has been used, it doesn't seem to color it in anymore.

Here is an example output in the source code of the page: http://chattypics.com/files/CaptureJPG_r6xok2k7pt.jpg
And last but not least, here is the test I've done to make sure it wasn't my code that was wrong: http://jsfiddle.net/j29fp4sh/

You are using DaDaBIK version 7.0 ENTERPRISE, installed on 10-07-2015, the last version of DaDaBIK is 7.0 released on 10-05-2015
You are runnning the last release of DaDaBIK
PHP Version: 5.6.3
mysql version: 5.6.21
Web server: Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3
Client: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0

 

[eugenio]

Hello,
there isn't a template for the default datagrid, but I guess you can easily build one by looking at the HTML generated by DaDaBIK with templates disabled. Another option is to just work on the CSS if you need small modifications.

About your template, it seems a javascript problem, not a DaDaBIK problem, your DaDaBIK template code seems correct. My hint to debug your issue is to look at the whole code generated for the datagrid not just at the code for a single row.

 

[bkim]

Looks like you were right eugenio, I just needed to put the script after the html code. Thanks!

Its a small modification, but I don't think just changing the CSS file will work. I'm still trying to find a workaround for my other thread regarding the custom formatting per row and figured I could achieve it by using a custom template.

 

[eugenio]

Ok, perfect!

 

[bkim]

So I've managed to work out the kinks of the template to look somewhat identical to the default tabular view, but one issue that I'm having is that I'm unable to add is the label row of the table.

If I add the label to the template, the results would basically appear as

Label
result
Label
result

Do you know how I can add the Labels into the template without having it repeat, or am I out of luck?

 

[eugenio]

What do you mean exactly? Can I see a picture?
Most probably it's an HTML problem, by the way.

 

[bkim]

Here is the picture of the template that I have set (I haven't finished setting up the header, but should provide enough information to understand where I'm at): http://chattypics.com/files/CaptureJPG_qzfx9il5p9.jpg

Here is the associated html code pulled from the source of the page (only copy and pasted the first and second result):[pre]
<td class="td_input_form" nowrap>order_year<br/><input type="hidden" name="order_year__select_type" value="is_equal"> <input type="text" name="order_year" size="4" value="" maxlength="4"></td><td>   </td><td class="td_input_form" nowrap>order_month<br/><input type="hidden" name="order_month__select_type" value="is_equal"> <input type="text" name="order_month" size="2" value="7" maxlength="2"></td><td>   </td><td class="td_input_form" nowrap>style_num<br/><input type="hidden" name="style_num__select_type" value="is_equal"> <input type="text" name="style_num" value="" maxlength="100"></td><td>   </td><td class="td_input_form" nowrap>po_num<br/><input type="hidden" name="po_num__select_type" value="contains"> <input type="text" name="po_num" value="" maxlength="100"></td><td>   </td><td valign="bottom"><input class="button_form button_form_quick_search" type="submit" value="Quick search >>"></td></tr></table></form><table class="results" cellpadding="5" cellspacing="0">
<tr class="tr_results_header">
<th class="results"></th>
<th class="results"><a class="order_link">Order Month</a></th>
<th class="results"><a class="order_link">Order Year</a></th>
<th class="results"><a class="order_link">Status</a></th>
<th class="results"><a class="order_link">Client</a></th>
<th class="results"><a class="order_link">Factory</a></th>
<th class="results"><a class="order_link">Department</a></th>
<th class="results"><a class="order_link">Style #</a></th>
</tr>

<tr id="639" class="tr_results_2" onmouseover="if (this.className!='tr_highlighted_onclick'){this.className='tr_highlighted_onmouseover'}" onmouseout="if (this.className!='tr_highlighted_onclick'){this.className='tr_results_2'}" onclick="if (this.className == 'tr_highlighted_onclick'){ this.className='tr_results_2';}else{ this.className='tr_highlighted_onclick';}">
<td class="controls_2"><img border="0" src="images/edit.png" alt="Edit" title="Edit"></td>
<td>2016</td>
<td>7</td>
<td>Current</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>17</td>
<td>3</td>
<td>15196320</td>
<td>00102147</td>
<td>WEB</td>
<td>BLACK</td>
<td> </td>
<td>900</td>
<td>2016-07-06</td>
<td>2016-06-29</td>
<td>jmartinez</td>
<td>2015-11-27</td>
</tr>

<script type="text/javascript">
var row = document.getElementById('639');
var fieldname = "Current";

if (fieldname.localeCompare("Cancelled / Void") == 0){
row.style='color:red;font-weight:bold';
}
</script></table>
[/pre]

And finally, what I've inserted into the template box for results:
[pre]
<table class="results" cellpadding="5" cellspacing="0">
<tr class="tr_results_header">
<th class="results"></th>
<th class="results"><a class="order_link">Order Month</a></th>
<th class="results"><a class="order_link">Order Year</a></th>
<th class="results"><a class="order_link">Status</a></th>
<th class="results"><a class="order_link">Client</a></th>
<th class="results"><a class="order_link">Factory</a></th>
<th class="results"><a class="order_link">Department</a></th>
<th class="results"><a class="order_link">Style #</a></th>
</tr>

<tr id="dadabik_field id dadabik_field" class="tr_results_2" onmouseover="if (this.className!='tr_highlighted_onclick'){this.className='tr_highlighted_onmouseover'}" onmouseout="if (this.className!='tr_highlighted_onclick'){this.className='tr_results_2'}" onclick="if (this.className == 'tr_highlighted_onclick'){ this.className='tr_results_2';}else{ this.className='tr_highlighted_onclick';}">
<td class="controls_2"><img border="0" src="images/edit.png" alt="Edit" title="Edit"></td>
<td>dadabik_field order_year dadabik_field</td>
<td>dadabik_field order_month dadabik_field</td>
<td>dadabik_field Status dadabik_field</td>
<td>dadabik_field client dadabik_field</td>
<td>dadabik_field factory_name dadabik_field</td>
<td>dadabik_field program dadabik_field</td>
<td>dadabik_field style_num dadabik_field</td>
<td>dadabik_field buyer dadabik_field</td>
<td>dadabik_field po_num dadabik_field</td>
<td>dadabik_field item_code dadabik_field</td>
<td>dadabik_field po_destination dadabik_field</td>
<td>dadabik_field country_color dadabik_field</td>
<td>dadabik_field cost dadabik_field</td>
<td>dadabik_field qty dadabik_field</td>
<td>dadabik_field client_IHD dadabik_field</td>
<td>dadabik_field china_IHD dadabik_field</td>
<td>dadabik_field last_modified_by dadabik_field</td>
<td>dadabik_field last_modified dadabik_field</td>
</tr>

<script type="text/javascript">
var row = document.getElementById('dadabik_field id dadabik_field');
var fieldname = "dadabik_field Status dadabik_field";

if (fieldname.localeCompare("Cancelled / Void") == 0){
row.style='color:red;font-weight:bold';
}
</script></table>
[/pre]

Is there a way for me to tell the template to not repeat the tr_results_header class or something?

 

[eugenio]

Ok I see. No there is no way to say "repeat this part of the template just once"; the template is repeated for each results row. What you could do is remove the heading part of the template and add it hard-coded in PHP.

In /include/business_logic.php you should have at some point:

return $template_results_table

You could substitute it with something like:

$template_header = '<table><tr><th>..................'; // your heading part here

$template_footer = '</table>';

return $template_header.$template_results_table.$template_footer;

I haven't tried it but it should work.

 

[bkim]

Awesome! Looks like that did it, thanks!

 

[eugenio]

I am glad it works!

 

[h2fuelcell]

Eugenio,

This is a rather old posting I came across but it explains how to do roughly what I am trying to achieve. I tried to modify the business_logic.php file like the OP did but that file is now in an ioncube encrypted block so that is a dead end. Maybe you could comment on how to achieve what I am trying to do using the latest methods.

I would like to change the classic grid in the following ways:

1) Make each row height narrower (ie. reduce the padding space)

2) Change the alternate shading color or read and save this value in another table so users can pick their own color, intensity, etc.

3) In the header row, add <br> tags to some of the wider column titles so the header text is on multiple lines but the column widths are kept narrower preserving horizontal table space. This is particularly glaring when there is a long column title (multiple words) with a single character like Y|N for the column value so I would like to know a way to achieve this.

4) Shrink the edit, delete, and details icons if the are too large for the narrower rows (I realize this probably just requires altering the variables in the config.php file to point to 3 new image files with reduced resolutions). If there is an easier way let me know.

5) It would be super cool if these style changes could be tied to a new entry in the classic grid/list dropdown and applied on the fly by the user but that may be asking a bit much.

So, I realize these are all grid layout and style requests so I am sure they are probably accomplished without application code changes by employing a grid template, or other such customization, I just need a push in the proper direction. This posting looked like it was on the proper track but as I said it is old and while I can get some of the way there with the template, the header change is still out of reach.

Thanks in advance for your assistance.

Environment::

version of DaDaBIK is 10.1-Manarola released on 03-09-2020
You are runnning the last release of DaDaBIK

System info
PHP Version: 7.2.5

mysql version: 5.5.5-10.2.31-MariaDB

Web server: Apache

Client: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36

 

[eugenio]

Hello,
the code of the function build_results_table is now in /views/results_grid.php and it is responsible for the standard results grid. it's a file you can edit but I suggest not to do it to avoid extra work when you have to upgrade dadabik; you should try to get what you want by editing styles_scree_custom.css or by creating a template (admin -> datagrid template).

Best,