Tooltip on hover on cell as content from another column / stackedHeaderRows in PHP

[Andrejs Sapals]

Hello,

I did not find an answer in documentation and did not find simmilar tread on forum. 

First task is:

When hovering the cell of column 1 the tooltip should be shown from column 32 which is hidden:

I found how to show the tooltip given by text in code, but I don't know how to refer to another column.

<?php

$col1 = new EJ\Grid\Column(); $col1->field("id")->headerText("ID")->textAlign("center")->visible(false)->width(20);

$col2 = new EJ\Grid\Column(); $col2->field("dealer")->headerText("Dealer")->textAlign("left")->width(70)->tooltip("Commentary");

$col3 = new EJ\Grid\Column(); $col3->field("shift")->headerText("Shift")->textAlign("center")->width(45);

$col4 = new EJ\Grid\Column();  $col4->field('d1')->headerText('1 <small>Sun</small>')->textAlign('center')->width(30);

$col5 = new EJ\Grid\Column();  $col5->field('d2')->headerText('2 Mon')->textAlign('center')->width(30);

$col6 = new EJ\Grid\Column();  $col6->field('d3')->headerText('3 Tue')->textAlign('center')->width(30);

$col7 = new EJ\Grid\Column();  $col7->field('d4')->headerText('4 Wed')->textAlign('center')->width(30);

$col8 = new EJ\Grid\Column();  $col8->field('d5')->headerText('5 Thu')->textAlign('center')->width(30);

$col9 = new EJ\Grid\Column();  $col9->field('d6')->headerText('6 Fri')->textAlign('center')->width(30);

$col10 = new EJ\Grid\Column();  $col10->field('d7')->headerText('7 Sat')->textAlign('center')->width(30);

$col11 = new EJ\Grid\Column();  $col11->field('d8')->headerText('8 Sun')->textAlign('center')->width(30);

$col12 = new EJ\Grid\Column();  $col12->field('d9')->headerText('9 Mon')->textAlign('center')->width(30);

$col13 = new EJ\Grid\Column();  $col13->field('d10')->headerText('10 Tue')->textAlign('center')->allowResizing(true)->width(30);

$col14 = new EJ\Grid\Column();  $col14->field('d11')->headerText('11 Wed')->textAlign('center')->width(30);

$col15 = new EJ\Grid\Column();  $col15->field('d12')->headerText('12 Thu')->textAlign('center')->width(30);

$col16 = new EJ\Grid\Column();  $col16->field('d13')->headerText('13 Fri')->textAlign('center')->width(30);

$col17 = new EJ\Grid\Column();  $col17->field('d14')->headerText('14 Sat')->textAlign('center')->width(30);

$col18 = new EJ\Grid\Column();  $col18->field('d15')->headerText('15 Sun')->textAlign('center')->width(30);

$col19 = new EJ\Grid\Column();  $col19->field('d16')->headerText('16 Mon')->textAlign('center')->width(30);

$col20 = new EJ\Grid\Column();  $col20->field('d17')->headerText('17 Tue')->textAlign('center')->width(30);

$col21 = new EJ\Grid\Column();  $col21->field('d18')->headerText('18 Wed')->textAlign('center')->width(30);

$col22 = new EJ\Grid\Column();  $col22->field('d19')->headerText('19 Thu')->textAlign('center')->width(30);

$col23 = new EJ\Grid\Column();  $col23->field('d20')->headerText('20 Fri')->textAlign('center')->width(30);

$col24 = new EJ\Grid\Column();  $col24->field('d21')->headerText('21 Sat')->textAlign('center')->width(30);

$col25 = new EJ\Grid\Column();  $col25->field('d22')->headerText('22 Sun')->textAlign('center')->width(30);

$col26 = new EJ\Grid\Column();  $col26->field('d23')->headerText('23 Mon')->textAlign('center')->width(30);

$col27 = new EJ\Grid\Column();  $col27->field('d24')->headerText('24 Tue')->textAlign('center')->width(30);

$col28 = new EJ\Grid\Column();  $col28->field('d25')->headerText('25 Wed')->textAlign('center')->width(30);

$col29 = new EJ\Grid\Column();  $col29->field('d26')->headerText('26 Thu')->textAlign('center')->width(30);

$col30 = new EJ\Grid\Column();  $col30->field('d27')->headerText('27 Fri')->textAlign('center')->width(30);

$col31 = new EJ\Grid\Column();  $col31->field('d28')->headerText('28 Sat')->textAlign('center')->width(30);

$col32 = new EJ\Grid\Column();  $col32->field('d29')->headerText('29 Sun')->textAlign('center')->width(30);

$col33 = new EJ\Grid\Column();  $col33->field('d30')->headerText('30 Mon')->textAlign('center')->width(30);

$col34 = new EJ\Grid\Column();  $col34->field('d31')->headerText('31 Tue')->textAlign('center')->width(30);

$gridColumns = array($col1, $col2, $col3, $col4, $col5, $col6, $col7, $col8, $col9, $col10, $col11, $col12, $col13, $col14, $col15, $col16, $col17, $col18, $col19, $col20, $col21, $col22, 

$col23, $col24, $col25, $col26, $col27, $col28, $col29, $col30, $col31, $col32, $col33, $col34);

$dataManager  = new EJ\DataManager(); 

$dataManager->url(get_theme_file_uri( 'staffgridjson.php' ))->adaptor('UrlAdaptor');

$grid =  new EJ\Grid("Grid");

echo $grid -> dataSource( $dataManager)->columns($gridColumns)->allowPaging(true)->render();

?>

Second task is:

As on screenshot above, I want to show Sun, Tue, etc. below the dates. Unfortunatelly, the heigth of row is not big enough and since I do not see how I can resize it, it can be solved with stackedHeaderRows  which I can find in functions, but can not find any documentation on how to use this fucntion in PHP. In Javascript everything looks clear. Please, see my code above as well. 

[Farveen Sulthana Thameeztheen Basha]

Hi Andrejs, 

Thanks for contacting Syncfusion Support. 

Query#1:- When hovering the cell of column 1 the tooltip should be shown from column 32 which is hidden 

 

We have achieved this requirement using tooltip property of Grid columns. Using tooltip property, we can define another column value using JsRender syntax in the template. 

Refer to the code example:- 

Index.php 

           <? php 

 

            $col1 = new EJ\Grid\Column(); 

            $col1 -> field("help_topic_id") -> headerText("OrderID") -> isPrimaryKey(true) -> textAlign("right") -> width(100); 

            $col2 = new EJ\Grid\Column(); 

            $col2 -> field("name") -> headerText("CustomerID") -> width(70); 

            $col3 = new EJ\Grid\Column(); 

            $col3 -> field("help_category_id") -> headerText("EmployeeID") -> textAlign("right") -> tooltip("#coltip") -> width(70); 

            $gridColumns = array($col1, $col2, $col3); 

            $dataManager = new EJ\DataManager(); 

            $dataManager -> url('http://localhost/grid/data.php') -> updateUrl('http://localhost:8085/grid/update.php') -> insertUrl('http://localhost:8085/grid/insert.php') -> removeUrl('http://localhost:8085/grid/delete.php') -> adaptor('UrlAdaptor'); 

            $grid = new EJ\Grid("Grid"); 

            .   .    .   . 

 

            echo $grid -> dataSource($dataManager) -> columns($gridColumns) -> allowPaging(true) -> allowSorting(true) -> render(); 

            ?> 

     

<script type="text/template" id="coltip"> 

    This is the customized tooltip which shows another column {{:name}}value     //define tooltip value of the name column in help_cateory_id column 

</script> 

 

 

Query#2:-   stackedHeaderRows in PHP 

 

As per your requirement we have provided code example for defining StackedHeaderRows in PHP. It can be shown by setting the showStackedHeader as true and by defining the stackedHeaderRows. To stack the columns in StackedHeader, you need to define column property in StackedHeaderColumns. Refer to the code below:- 

Index.php 

 

   <? php 

 

            $col1 = new EJ\Grid\Column(); 

            $col1 -> field("help_topic_id") -> headerText("OrderID") -> isPrimaryKey(true) -> textAlign("right") -> width(100); 

 

             .   .  .   . 

            $stackedHeaderColumn = new EJ\Grid\StackedHeaderColumn(); 

            $stackedHeaderColumn -> headerText("OrderDetails") -> column(array("help_topic_id", "name")) -> textAlign("center");   //define StackedHeader columns using columns property  

            $stackedHeaderColumns = array($stackedHeaderColumn); 

            $stackedHeaderRow = new EJ\Grid\StackedHeaderRow(); 

            $stackedHeaderRow -> stackedHeaderColumns($stackedHeaderColumns); 

            $stackedHeaderRows = array($stackedHeaderRow); 

 

            echo $grid -> dataSource($dataManager) -> dataBound('someFunction') -> columns($gridColumns) -> allowPaging(true) -> showStackedHeader(true) -> stackedHeaderRows($stackedHeaderRows) -> allowSorting(true) -> render(); 

            ?> 

Screenshot:- 

 

 

Sample Link:-  https://www.syncfusion.com/downloads/support/forum/158190/ze/PHP1169431226.zip 

 

Refer to the documentation in JS for more information:- 

https://help.syncfusion.com/js/grid/cell#tooltip 

https://help.syncfusion.com/js/grid/stackedheader 

 

Please get back to us if you need any further assistance on it. 

 

Regards, 

Farveen sulthana T