jqxPasswordInput in grid column - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column, custom, editor, grid, jqxPasswordInput, password, PasswordInput, type

This topic contains 9 replies, has 5 voices, and was last updated by tobias2034 1 year, 7 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

jqxPasswordInput in grid column Posts

February 26, 2014 at 5:16 am jqxPasswordInput in grid column #50129

Participant

Hi,

I am trying to implement a small userName/Password grid.
I wish for the password column to show the hidden chars feature (****) and when you edit the cell the regular standard
jqxPasswordInput to be the editor.

I get the next JS error – Invalid input type. Please set the type attribute of the input element to password.

Bellow is the grid. What am I missing?

Many thanks.

var usersdata = usersData;
var usersource = {
localdata: usersdata,
datafields:
[
{ name: ‘user_name’, type: ‘string’},
{ name: ‘password’, type: ‘string’}
],
datatype: “array”
};

var usersdataAdapter = new $.jqx.dataAdapter(usersource);

$(“#usersgrid”).jqxGrid(
{
height: 175,
width: ‘99.5%’,
source: usersdataAdapter,
showfilterrow: false,
filterable: false,
theme: theme,
editable: true,
showstatusbar: false,
statusbarheight: 25,
enabletooltips: false,
showaggregates: false,
sortable: false,
columns: [
{ text: ‘User Name’,align:’left’ , columntype: ‘textbox’, cellsalign: ‘left’, datafield: ‘user_name’, width:’40%’},
{ text: ‘Password’,align:’left’ , columntype: ‘password’, cellsalign: ‘left’, datafield: ‘password’, width:’60%’,
createeditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxPasswordInput({ width: ‘300px’, height: ’20px’, showStrength: true, showStrengthPosition: “right” });
},
initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var value = parseInt(cellvalue);
if (isNaN(value)) value = 0;
editor.jqxPasswordInput(‘val’, value);
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
}
]
});

February 26, 2014 at 6:42 am jqxPasswordInput in grid column #50134

Dimitar

Participant

Hello assaf.frank123,

The error indicates that jqxPasswordInput requires a input with its type attribute set to password.

Here is an example, based on the demo Default Functionality, that shows how to correctly initialize password input as an editor:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpasswordinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";

            var productNameUpdate = false;

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url,
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    if (productNameUpdate == true) {
                        commit(true);
                    };
                }
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columntype: 'custom', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250,
                      createeditor: function (row, cellValue, editor, cellText, width, height) {
                          var element = $('<input type="password" style="width: 100%; height: 100%;"/>');
                          editor.append(element);
                          element.jqxPasswordInput();
                      },
                      initeditor: function (row, cellValue, editor, cellText, width, height) {
                          var element = editor.find('input:first');
                          element.jqxPasswordInput('val', cellValue);
                      },
                      geteditorvalue: function (row, cellvalue, editor) {
                          var element = editor.find('input:first');
                          return element.val();
                      }
                  },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });

            $("#jqxgrid").on('cellendedit', function (event) {
                var column = args.datafield;
                if (column == "ProductName") {
                    productNameUpdate = true;
                } else {
                    productNameUpdate = false;
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

February 26, 2014 at 7:49 am jqxPasswordInput in grid column #50144

assaf.frank123

Participant

Thanks , this works.

1 thing –

The column password is visible when the grid is populated.
only once I click the cell and edit the value the password input is populated and chars are hidden.
Is there anyway the cell upon population will display the hidden password (I mean display ***** instead of the chars)?

Thanks.

February 26, 2014 at 8:57 am jqxPasswordInput in grid column #50152

Dimitar

Participant

Hi assaf.frank123,

This can be done in cellsrenderer:

columns: [
    { text: 'Product Name', columntype: 'custom', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250,
        createeditor: function (row, cellValue, editor, cellText, width, height) {
            var element = $('<input type="password" style="width: 100%; height: 100%;"/>');
            editor.append(element);
            element.jqxPasswordInput();
        },
        initeditor: function (row, cellValue, editor, cellText, width, height) {
            var element = editor.find('input:first');
            element.jqxPasswordInput('val', cellValue);
        },
        geteditorvalue: function (row, cellvalue, editor) {
            var element = editor.find('input:first');
            return element.val();
        },
        cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
            var hiddenValue = "";
            for (var i = 0; i < value.length; i++) {
                hiddenValue += "*";
            };
            return hiddenValue;
        }
    },

Best Regards,
Dimitar

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

July 1, 2015 at 9:01 am jqxPasswordInput in grid column #73234

PTBD

Participant

Dimitar,

is your example still functional in the latest jQWidgets Version? I have implemented it the way you have shown in your example but it does not work for me. Placing console logs inside the callbacks createeditor, initeditor and geteditorvalue doesn not print anything in the console. Also I can’t find any mentioning of those 3 callbacks in the jqxGrid documentation page.

July 1, 2015 at 9:17 am jqxPasswordInput in grid column #73235

Dimitar

Participant

Hi PTBD,

Yes, the example still works fine with version 3.8.1. The callbacks are documented in the jqxGrid API Documentation, under columns. If your issue persists, please share if any errors are thrown in your browser’s console.

Best Regards,
Dimitar

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

July 1, 2015 at 9:21 am jqxPasswordInput in grid column #73236

PTBD

Participant

Unfortunatly no errors are shown. So it is hard to tell what is going wrong. But before asking here, I will try my luck a little bit more and search for the issue. Thank you for your fast response!

February 20, 2023 at 10:57 pm jqxPasswordInput in grid column #132620

tobias2034

Participant

Hello,
many years later, I am trying to achieve the same thing: a password column in a jqxGrid.

The last code posted above (from February 26, 2014), does not have the desired effect any more.

I am using JQWidgets version v10.0.2.

What do I have to do?

Thanks.

February 21, 2023 at 5:17 am jqxPasswordInput in grid column #132623

svetoslav_borislavov

Participant

Hi,

The example should be working.
If you face difficulties with the implementation here is one: http://jsfiddle.net/jga0592k/

Also, I suggest you update to our latest version

If you have any additional questions, please, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

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

February 21, 2023 at 1:39 pm jqxPasswordInput in grid column #132628

tobias2034

Participant

Hello,
many thanks, that’s super helpful!

Yes I will update my JQWidgets too.

Cheers,
Tobias

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.