Grid cell validation tooltip don't appear

[DundeeParticipant]

Hi,

i have problem with my grid. I need to validate to field in a row..like firstname and lastname to be less than 50 caracters…so i use the example shown in the view source of grid demo part.

Example on jqwidget site
`validation: function (cell, value) {
if (value == “”)
return true;
var year = value.getFullYear();
if (year >= 2015) {
return { result: false, message: “Ship Date should be before 1/1/2015” };
}
return true;
}`

But in my case the tooltips didn’t appear…

Here my grid setup :
——————–

var source =
        {
            datatype: "json",
            datafields: [
                { name: 'firstName', type: 'string' },
                { name: 'lastName', type: 'string' },
                { name: 'jobType', type: 'string' },
                { name: 'office', type: 'string' }
            ],
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#candidatesList").jqxGrid(
        {
            width: "876px",
            autoheight: true,
            editable: true,
            source: dataAdapter,
            columnsresize: false,
            columns: localization.LeanOvationSettings.columnsHeaders,
            localization: localization,
            showstatusbar: true,
            renderstatusbar: function (statusbar) {
                // appends buttons to the status bar.
                var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                var addButton = $("<div style='float: left; margin-left: 5px;'><img src='/Content/images/add.png' /><span style='margin-left: 4px; position: relative; top: -3px;'>" + localization.LeanOvationSettings.addLeanOvationRow + "</span></div>");
                var deleteButton = $("<div style='float: left; margin-left: 5px;'><img src='/Content/images/close.png' /><span style='margin-left: 4px; position: relative; top: -3px;'>" + localization.LeanOvationSettings.removeLeanOvationRow + "</span></div>");
                container.append(addButton);
                container.append(deleteButton);
                addButton.jqxButton({ width: 180, height: 20 });
                deleteButton.jqxButton({ width: 180, height: 20 });
                statusbar.append(container);
                //add new empty row
                addButton.click(function (event) {
                    $("#candidatesList").jqxGrid('addrow', null, {});
                });
                // delete selected row.
                deleteButton.click(function (event) {
                    var selectedrowindex = $("#candidatesList").jqxGrid('getselectedrowindex');
                    var rowscount = $("#candidatesList").jqxGrid('getdatainformation').rowscount;
                    var id = $("#candidatesList").jqxGrid('getrowid', selectedrowindex);
                    $("#candidatesList").jqxGrid('deleterow', id);
                });
            },
            showtoolbar: true,
            rendertoolbar: function (toolbar) {
                var me = this;
                var container = $("<div style='margin: 5px;'></div>");
                var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>" + localization.LeanOvationSettings.gridTitle + " <div class='fileRequired'>*</div></span>");
                toolbar.append(container);
                container.append(span);
            }
        });

——————————————————————
My columns part
——————————————————————

 columnsHeaders: [
                             {
                                 text: 'Firstname', datafield: 'firstName', width: "20%",
                                 validation: function (cell, value) {
                                     if (value.length > 50)
                                         return { result: false, message: "The length of the firstname is up to 50 characters" };
                                     return true;
                                     }
                             },
                             {
                                 text: 'Lastname', datafield: 'lastName', width: "20%",
                                 validation: function (cell, value) {
                                     if (value.length > 50)
                                         return { result: false, message: "The length of the lastname is up to 50 characters" };
                                     return true;
                                 }
                             },
                             {
                                 text: 'Job type', datafield: 'jobType', width: "15%", columntype: 'dropdownlist',
                                 createeditor: function (row, column, editor) {
                                     //get data from the office list and assign a new data source to the dropdownlist.
                                     getJobType(culture, function (list) {
                                         editor.jqxDropDownList({ autoDropDownHeight: true, source: list, placeHolder: 'Choose' });
                                     });
                                 },
                                 // update the editor's value before saving it.
                                 cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                                     // return the old value, if the new value is empty.
                                     if (newvalue == "") return oldvalue;
                                 }
                             },
                             {
                                 text: 'Office', datafield: 'office', width: "45%", columntype: 'dropdownlist',
                                 createeditor: function (row, column, editor) {
                                     //T get data from the office list and assign a new data source to the dropdownlist.
                                     getOfficeList(culture, function (list) {
                                         editor.jqxDropDownList({ autoDropDownHeight: true, source: list, placeHolder: 'Choose' });
                                     });
                                 },
                                 // update the editor's value before saving it.
                                 cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                                     // return the old value, if the new value is empty.
                                     if (newvalue == "") return oldvalue;
                                 }
                             }
                    ],

—————————————————————————————
I take a look at the javascript files i included with my grid page…and that seem the same as the grid demo…..I put some alert in the validation part to be sure that code execution reach the validation part..and all work well. also i can’t leave the cell until the content length are under the limit. so that tell me that the validation concept work.

Anybody can help me to find why tooltip doesn’t display ?

[Peter StoevKeymaster]

Hi Dundee,

Unfortunately, don’t know what is columnsHeaders. Our Grid’s property is called “columns”. Please, provide jsfiddle.net demo which demonstrates an issue in the current version and we’ll test it.

Best Regards,
Peter Stoev

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

[DundeeParticipant]

Hi Peter,

the columnHeader is only a variable that i use with localisation, because i need both french and english language…so i built an object depending on the language…and in the second code part..you can see the definition of the columnheader….with the validation part.

So replace the value assign to columns :

columns: localization.LeanOvationSettings.columnsHeaders,

with

columnsHeaders: [
                             {
                                 text: 'Firstname', datafield: 'firstName', width: "20%",
                                 validation: function (cell, value) {
                                     if (value.length > 50)
                                         return { result: false, message: "The length of the firstname is up to 50 characters" };
                                     return true;
                                     }
                             },
                             {
                                 text: 'Lastname', datafield: 'lastName', width: "20%",
                                 validation: function (cell, value) {
                                     if (value.length > 50)
                                         return { result: false, message: "The length of the lastname is up to 50 characters" };
                                     return true;
                                 }
                             },
                             {
                                 text: 'Job type', datafield: 'jobType', width: "15%", columntype: 'dropdownlist',
                                 createeditor: function (row, column, editor) {
                                     //get data from the office list and assign a new data source to the dropdownlist.
                                     getJobType(culture, function (list) {
                                         editor.jqxDropDownList({ autoDropDownHeight: true, source: list, placeHolder: 'Choose' });
                                     });
                                 },
                                 // update the editor's value before saving it.
                                 cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                                     // return the old value, if the new value is empty.
                                     if (newvalue == "") return oldvalue;
                                 }
                             },
                             {
                                 text: 'Office', datafield: 'office', width: "45%", columntype: 'dropdownlist',
                                 createeditor: function (row, column, editor) {
                                     //T get data from the office list and assign a new data source to the dropdownlist.
                                     getOfficeList(culture, function (list) {
                                         editor.jqxDropDownList({ autoDropDownHeight: true, source: list, placeHolder: 'Choose' });
                                     });
                                 },
                                 // update the editor's value before saving it.
                                 cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                                     // return the old value, if the new value is empty.
                                     if (newvalue == "") return oldvalue;
                                 }
                             }
                    ],

i will try to reproduce it in jsfiddle to show us…as soon as possible.

[DundeeParticipant]

Hi Peter,

here is a jsfiddle short example :

http://jsfiddle.net/py4fags9/5/

hope this could help you….it’s probably a stupid thing missing in my code…but cannot found

[DundeeParticipant]

If you have any other question or need other informations…just tell me i will try to give you all require

[Peter StoevKeymaster]

Hi Dundee,

As far as I see the tooltip appears correctly when the Last Name’s value is above 50 characters as defined in your sample. Rememver that it appears when you try to end the edit process.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DundeeParticipant]

Hi Peter,

first thank for your answer…

I know the the tooltips appear when you end edit…but i found that the tooltip doesn’t appear or not visible if i only have only 1 row or on the last row. If i add many row i can see the tooltip under the error cell except for the last row.It’s why i was thinking that validation tooltip doesn’t work.

i also have the autoheight parameter to false, so my grid take only the minimum height.

Is there any possibility for the tooltip to been shown correctly with only one row or on the last row ?

[Peter StoevKeymaster]

Hi Dundee,

With my tests, the tooltip appears even with one row or in the last row in the provided demo. However, with one row, it’s partially displayed because there’s not enough space in the Grid for the tooltip

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RanaParticipant]

http://jsfiddle.net/py4fags9/5/
In this example, first name also have validation.
But tool tip is not displayed for firstname with single row .
Can we have the row/column resized when there is a validation error?
I use 3.4 version

[Author]

Posts