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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127445 Nov 16,2016 09:29 AM UTC Nov 18,2016 12:33 PM UTC JavaScript 3
loading
Tags: ejGrid
Balasubramanian Ramanathan
Asked On November 16, 2016 09:29 AM UTC

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

Mani Sankar Durai [Syncfusion]
Replied On 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. 


Balasubramanian Ramanathan
Replied On 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


Mani Sankar Durai [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;