We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejgrid column.tooltip does not work when we have template set for the column

Hi,

When i set the column.tooltip for the column that has a template set it does not work.

Is it the expected behaviour or there any other workaround is available?

Thanks

3 Replies

MS Mani Sankar Durai Syncfusion Team November 17, 2016 11:36 AM UTC

Hi Balasubramanian, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are not able to reproduce the reported issue. We have also prepared a sample that can be available from the below link. 

Please refer the code example. 
     <script type="text/template" id="colTip"> 
                    {{:value }} 
      </script> 
      <script type="text/x-jsrender" id="columnTemplate"> 
         <a rel='nofollow' href="//www.syncfusion.com/">{{:FirstName}}</a> 
        </script> 
                <div id="Grid"></div> 
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.employeeView" is referred from jsondata.min.js 
                columns: [ 
                           { field: "FirstName", tooltip: "#colTip", template: "#columnTemplate", headerText: "First Name", width: 90 }, 
                         { field: "LastName", headerText: "Last Name", width: 90 }, 
                          
] 
            }); 
        }); 
    </script> 
</body> 
</html> 
 

From the above code example we have rendered a tooltip for the template column and it works. 

If you still face the issue please get back to us with the following details. 
1.       Share the video or screenshot of the issue. 
2.       Share the template column that you have used. 
3.       Share full Grid code. 
4.       If possible please reproduce the issue in the above JSPlayground sample link. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 



BR Balasubramanian Ramanathan November 17, 2016 06:35 PM UTC

Hi,
Thank you.

But still does not work.

here are the template i am using

<script type="text/x-jsrender" id="lastProfileImageTemplate">
    {{if LastProfileImage}}
    <img style='height15px' src='Images/Quick/{{:LastProfileImage}}' />
    {{/if}}
</script>

<script type="text/template" id="colTip">
     {{:value }}
 </script>
 columns: [ 
                           { field: "Descr"tooltip: "#colTip", template:"#lastProfileImageTemplate", headerText: "Descr", width: 90 },           
] 

in our data model we have a field(LastProfileImage) with image to be displayed. the template is working fine and it is displaying the image. But we want to show the field descr in the tooltip. thats why i specifed descr in the field. When i hover the image col the tooltip is not displayed.

Thank you



MS Mani Sankar Durai Syncfusion Team November 18, 2016 12:33 PM UTC

  
Hi Balasubramanian, 

We have analyzed your query and we suggest you to set the corresponding field name as a template for the tooltip in grid columns instead of setting as value (“{{: value }}”). 
Please refer the below code example. 
<script type="text/x-jsrender" id="columnTemplate"> 
                    <img style="width: 75px; height: 70px" src="14.3.0.52/themes/web/content/images/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 
</script> 
                 
<script type="text/template" id="columnTip"> 
                    {{:FirstName }}   here please use the corresponding field name as {{:Descr }}   
                </script> 
                 
<div id="Grid"></div>           
 
               ... 
 
  $("#Grid").ejGrid({ 
                // the datasource "window.employeeView" is referred from jsondata.min.js 
                dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(8)), 
                allowPaging: true, 
                pageSettings: { pageSize: 4 }, 
                columns: [ 
                               { field: "FirstName", headerText: "First Name", template: "#columnTemplate", tooltip: "#columnTip", isPrimarykey: true, editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 90 }, 
                        , 
                       , 
                           ... 
                ], 
  }); 
        }); 
    </script> 
     
</body> 
</html> 

Please refer the documentation link. 

We have also prepared a sample that can be available from the below link. 
  
In this sample we have used different field in template column and different field in template for column tooltip. 
Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Live Chat Icon For mobile
Up arrow icon