grid cellhover tooltip popup

[mustafaParticipant]

hi,
I’m using cellhover tooltip popup and The data comes from database..
but the data does not appear why?

How can I render the page?
I try
$(‘#PopupName’).text(personData.Crews[0].Name);
or
$(‘#PopupName’).val(personData.Crews[0].Name);

html page

       <div id="CrewGrid">
                        </div>
                        <div id="MainToolbar">
                            <div id="CrewPopup">
                                <div id="CrewImage">
                                </div>
                                <div id="CrewDetailTable">
                                    <table>
                                        <tr>
                                            <td><label class="lbName">Name</label></td>
                                            <td><label id="PopupName"></label></td>
                                           
                                        </tr>
                                       <tr>
                                            <td><label class="lbLastName">Last Name</label></td>
                                            <td><label id="PopupLastName"></label></td>
                                           
                                        </tr>

                                        <tr>
                                             <td><label class="lbPhone">Phone</label></td>
                                               <td><label id="PopupPhone"></label></td>

                                            
                                        </tr>
                                        <tr>
                                             <td><label class="lbBirthDay">Birth Date</label></td>
                                            <td><label id="PopupBirthDate"></label></td>
                                        </tr>
                                       
                                      
                                    </table>
                                </div>
                            </div>

                        </div>

  var popup = $("#MainToolbar").html();
    
    var dataAdapter = new $.jqx.dataAdapter(window.CrewGridSource);
    $("#CrewGrid").jqxTooltip();
  
    $("#CrewGrid").jqxGrid({
        width: '100%',
        height: 650,
        selectedrowindex: 0,
        selectionMode: 'singlecell',
        rowdetails: false,
        source: dataAdapter,
        enabletooltips: true,
        editable: false,
        theme: 'arctic',
        pagesize: 22,
       
        cellhover: function (element, pageX, pageY) {
           
            var index = $("#CrewGrid").jqxGrid('hoveredrow');
           
            var data = $('#CrewGrid').jqxGrid('getrowdata', index); 
            var personData = GetCrewHoverDetail(data.c_ID); // get hover row data
 
            $('#PopupName').text(personData.Crews[0].Name);
            $('#PopupLastName').text(personData.Crews[0].LastName);
            $('#PopupPhone').text(personData.Crews[0].Addresses[0].MobilPhone);
            var birthDate = new Date(parseInt(personData.Crews[0].BirthDate.substr(6))); 
             $('#PopupBirthDate').val(birthDate);
            $("#CrewGrid").jqxTooltip({ content: popup });
            $("#CrewGrid").jqxTooltip('open', pageX + 15, pageY + 15);
        },

        autosavestate: false,
        columnsreorder: true,
        pageable: true,
        showfilterrow: true,
        filterable: true,
        keyboardnavigation: true, 
        theme: 'arctic',
        columns: window.CrewGridSource.columns
    });

[Peter StoevKeymaster]

Hi mustafa,

If the data comes from DB through Ajax call, then make sure to set the async: false member of the Ajax function or adapter’s source object. Otherwise, you will try to fill the tooltip with data which is not yet loaded.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mustafaParticipant]

hi peter,

I’m using already “async:false” for function

 cellhover: function (element, pageX, pageY) {
           
            var index = $("#CrewGrid").jqxGrid('hoveredrow');           
            var data = $('#CrewGrid').jqxGrid('getrowdata', index); 

            var personData = GetCrewHoverDetail(data.c_ID); // get hover row data

            $('#PopupName').val(personData.Crews[0].Name);

}

function GetCrewHoverDetail(crewId)
{
$.ajax({
        url: '/Crew/Crew/GetCrewDetail',
        type: 'POST',
        data: '{"crewId":"' + crewId + '","language":"' + language + '","authId":"' + window.loginId + '","owner":"' + owner + '"}',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        async: false,

and
I’ve tried this. but did not work again

What else could be the problem?

[Peter StoevKeymaster]

Hi mustafa,

As far as I know, to update the Tooltip’s content, you should set its “content” property. However, if that is not the problem, then please prepare and share a http://jsfiddle.net/ example of your scenario so we would be able to test it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts