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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127445 Nov 16,2016 04:29 AM Nov 18,2016 07:33 AM JavaScript 3
loading
Tags: ejGrid
Balasubramanian Ramanathan
Asked On November 16, 2016 04:29 AM

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 06:36 AM

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 01:35 PM

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 07:33 AM

  
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.

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.

;