Tooltip on hover on cell as content from another column / stackedHeaderRows in PHP
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.
SIGN IN To post a reply.
1 Reply
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:-
Refer to the documentation in JS for more information:-
Please get back to us if you need any further assistance on it.
Regards,
Farveen sulthana T
SIGN IN To post a reply.
