[supun151515Participant]

Hi Damitar,
Thank you for your great help topic!!!.
I hope you will answer my below question as well.

Thank you,
Best Regards,
Supun

[supun151515Participant]

Hi Damitar,
Thank you, it is working great!!!!!
Moreover I would like to know explanation about source properties.

   id: 'id',
    root: 'data',
    type: 'POST',
    async: false,
    record: "Product"

Also all the properties you have under source.

Hope you understand my question.
Thank you,
Supun

[supun151515Participant]

Hi Nadezhda,
Very big thank for your kind corparation. It is working fine. but when I render it for second time, it gives me an error

TypeError: datarecord is undefined
var table = '<table style="min-width: 150px;" title=' + datarecord.auto_no + '><...

I am calling jqxlistbox with a below function and get values according to given input value;

function Get_Default_Values(data_value){
    
    $("#loading").show();
    $('#default_list').jqxListBox({ disabled: true }); 
                var url = "css/default_values.php?value=" + data_value;
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'auto_no' },
                        { name: 'c_value' },
                        { name: 'c_val' }
                                ],
                    id: 'id',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxListBox
                $("#default_values").jqxListBox({ source: dataAdapter,
                                                  displayMember: "c_value",
                                                  valueMember: "c_val",
                                                  width: 150,
                                                  height: 230,
                                                  renderer: function (index, label, value) {
                    var datarecord = this.source.records[index];                  
                    var table = '<table style="min-width: 150px;" title=' + datarecord.auto_no + '><tr><td>' + datarecord.c_value + ", " + datarecord.c_val + '</td></tr></table>';
                    return table;
                }
                                              });
                

                $("#default_values").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            $("#default_text").val(item.label);
                        }
                    }
                });

$("#default_values").on('bindingComplete', function (event) {
      $('#default_list').jqxListBox({ disabled: false });
      $("#loading").hide();
  });

 
}

Hope you understand my issue.
Thank you,
Supun

[supun151515Participant]

Hi Nadezhda,
Thank you for your answer. Still I am unable to figure it out. Kindly send me a short example followed by my first post.

Best Regards,
Supun

[supun151515Participant]

Hi Nadezhda,
I don’t understand your answer. Here I am not talking about jqxtooltip widget…!!!!!!!!!!!!!!!!
Please try to understand my question…. I want to display tooltip on jqxlistbox each item as I shown on first post.

Thank You,
Supun

[supun151515Participant]

Hi Nadezhda,
Thank you for your reply. I want to display mobile as tooltip when I hover mouse on each item in listbox. I have given you example, it is working and only I need to add hover tooltip for each item.

Regards,
Supun

[supun151515Participant]

Hi Peter,
Thank you for your correct answer, it works perfect.
I am still searching for load state at grid initialize.

Thank You,
Supun Silva

[supun151515Participant]

I have tried with pagerrenderer. it will remove all the existing pager elements.
I am kindly expecting your answer

[supun151515Participant]

Hello Peter,

Sorry to open this topic again.
As per your example, it draws a new statusbar on the grid. But I want to display small refresh icon near GO to pageexactly in pager tab.

Hope you understand my question.

Thank You,
Supun Silva

[supun151515Participant]

Hello Mr.Peter,
I have done it by myself. You can see the code here;

 cellhover: function (element, pageX, pageY, record) {
                 var index = $("#jqxgrid").jqxGrid('hoveredrow');           
                 var data = $('#jqxgrid').jqxGrid('getrowdata', index); 
                 var e_status = data.e_status; // get hover row data
                 if (e_status == 'Vacation' || e_status == 'Suspended'){
                    $("#jqxgrid").jqxTooltip({ content: 'This employee on ' + e_status });
                    $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15);
                 }
                 else
                 {
                   $("#jqxgrid").jqxTooltip('close'); 
                 }
                 
                    },

[supun151515Participant]

I have upgraded to JQXWidgets 3.5.0 and error is ok now.
But still I can’t figure out how to display specific datafield value on row hover.
$("#jqxgrid").jqxTooltip({ content: element.innerHTML });
Is this possible to get with element?

[supun151515Participant]

Hello Peter,
I have tried cellhover method. But it gives me an error uncaught exception: jqxCore: invalid property 'cellhover'
My version data below;

JQWidgets 3.0.3 (jqx-all.js)
jQuery 2.0.3
jQuery UI 1.10.3

Below is my code;

   $(document).ready(function () {

 var theme = "ui-start";
            // prepare the data
            var data = "css/emp_list.php";
            var source =
            {
                //localdata: data,
                datafields:
                [
                    { name: 'auto_no', type: 'number' },
                    { name: 'reg_date', type: 'date', format: "yyyy-MM-dd" },
                    { name: 'file_no', type: 'string' },
                    { name: 'emp_name', type: 'string' },
                    { name: 'emp_qid', type: 'string' },
                    { name: 'qid_exp', type: 'date' },
                    { name: 'passport_no', type: 'string' },
                    { name: 'passport_exp', type: 'date' },
                    { name: 'nationality', type: 'string' },
                    { name: 'dob', type: 'date' },
                    { name: 'gender', type: 'string' },
                    { name: 'home_contact', type: 'string' },
                    { name: 'mobile', type: 'string' },
                    { name: 'emp_type', type: 'string' },
                    { name: 'emp_status', type: 'string' },
                    { name: 'job_title', type: 'string' },
                    { name: 'basic_salary', type: 'number' },
                    { name: 'acc_allow', type: 'number' },
                    { name: 'trans_allow', type: 'number' },
                    { name: 'food_allow', type: 'number' },
                    { name: 'mobile_allow', type: 'number' },
                    { name: 'picture', type: 'string' },
                    { name: 'comments', type: 'string' },
                    { name: 'user_name', type: 'string' },
                    { name: 'e_nation', type: 'string' },
                    { name: 'e_type', type: 'string' },
                    { name: 'e_batch', type: 'string' },
                    { name: 'e_dep', type: 'string' },
                    { name: 'e_job', type: 'string' },
                    { name: 'e_status', type: 'string' },
                ],
                 datatype: "json",
                 id: 'id',
                 url: data,
                 async: false,
                 updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }

            };
         

       var cellclass = function (row, columnfield, value, record) {
           var status = record.e_status;
           if (status == 'Vacation' || status == 'Suspended'){
                return 'red'; //call color style from custom_boostrap
           }
           else
           {
            return 'normal';
           }

            }
       

           var dataAdapter = new $.jqx.dataAdapter(source);

           // initialize jqxGrid
            $("#jqxdropdownbutton").jqxDropDownButton({ width: 200, height: 25, theme: theme });
            $("#jqxgrid").jqxGrid(
            {
                width: 660,
                source: dataAdapter,
                theme: theme,
                groupable: true,
                showfilterrow: true,
                filterable: true,
                autoheight: true,
                altrows: true, //color every other row
                pageable: true,
                columnsresize: true,
                
                 cellhover: function (element, pageX, pageY) {
                    // update tooltip.
                    if (!element.button) {
                        $("#jqxgrid").jqxTooltip({ content: element.innerHTML });
                    } else {
                        $("#jqxgrid").jqxTooltip({ content: "Button to open pop-up" });
                    };
                    // open tooltip.
                    $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15);
                },

                columns: [
                  { text: 'File No.', columntype: 'textbox', datafield: 'file_no', width: 90, cellclassname: cellclass },
                  { text: 'Employee Name', datafield: 'emp_name', columntype: 'textbox', width: 300, cellclassname: cellclass },
                  { text: 'Employee ID', columntype: 'textbox', datafield: 'emp_qid', width: 100, cellclassname: cellclass },
                  { text: 'Gender', datafield: 'gender', width: 70, cellsalign: 'center', cellclassname: cellclass },
                  { text: 'status', datafield: 'e_status', width: 70, cellsalign: 'center', cellclassname: cellclass },
                  { text: 'Mobile No.', datafield: 'mobile', cellsalign: 'left', width: 100, cellclassname: cellclass }
                ]
            });

            //$("#jqxgrid").jqxGrid('selectrow', 0);
  
        });

Thank You,
Supun Silva

[supun151515Participant]

Hello dippy,

Your question is not clear. try to make a demo in http://jsfiddle.net

Thank you,
Supun Silva

[supun151515Participant]

Hi Mr.Peter,
Very Big thank for you. I have another issue. I will open a new topic for that.

Thank you,
Supun Silva

[supun151515Participant]

Hello friends,
I have found it my self. see the example.

http://jsfiddle.net/G9KY5/108/

[Author]

Posts