jQWidgets Forums

Tagged: Binding to Array, dataadapter, editable, grid, jqxgrid

This topic contains 10 replies, has 3 voices, and was last updated by ioana 10 years ago.

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

Author

Grid error on cell validation for one row Grid Posts
May 15, 2015 at 7:50 am Grid error on cell validation for one row Grid #71160

ioana
Participant

Hello jqWidgets Team,

I have a bug to report.

If jqxGrid has only one row and, the size is a fixed one, and a cell has a validation error, a jquery error can be seen in the browser console (Uncaught TypeError: Cannot read property ‘removeClass’ of undefined), and the component functionality is broken.

I am using the latest version.
https://jsfiddle.net/ioana_v/n927sx42/19/

Is there any way I could fix this?

Regards,
Ioana

May 15, 2015 at 9:38 am Grid error on cell validation for one row Grid #71169
Nadezhda
Participant
Hello Ioana,

Here is an example which shows how to create a Grid from Array data. I hope it will be helpful to you.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxgrid.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">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew"
            ];
            var lastNames =
            [
                "Fuller"
            ];
            var productNames =
            [
                "Black Tea"
            ];
            var priceValues =
            [
                "2.25"
            ];
            for (var i = 0; i < 1; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                autoheight: true,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </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,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
May 15, 2015 at 9:59 am Grid error on cell validation for one row Grid #71170

ioana
Participant

Hi Nadezhda,

i don’t see how your example could help me.
I do not need an example on how to create a Grid data from array.
I used an existing one, and my intention was to only generate one row, because in this case I can reproduce the problem.

Please take a look at the fiddle I attached and see what the problem really is.

In my example there is a validation on “First Name” cell (value is required). If you delete the “Nancy” value, then a tooltip indicating the error should be displayed. It is not, instead a javascript error can be seen in the browser console.

Regards,
Ioana

May 15, 2015 at 10:50 am Grid error on cell validation for one row Grid #71172

Dimitar
Participant

Hi Ioana,

Here is the suggested way to achieve this requirement (using the validation callback): https://jsfiddle.net/Dimitar_jQWidgets/tu4g16hr/. You would also have to make sure there is enough space below the cell to show the validation pop-up (that is why I have increased the height to ‘100px’).

Best Regards,
Dimitar

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

May 15, 2015 at 11:10 am Grid error on cell validation for one row Grid #71173

ioana
Participant

Hi Dimitar,

thank you.

The problem with the suggested solution is that the rendered Grid does not look good.
This is a hack to make it work. I have already tried this (as I tried to figure out what the problem might be), and noticed that this will work.
Other then that, we need to use the autoheight:true, in which case we have the same problem.

The fiddle should be as close as possible to the implementation I use, which is why I am using cellvaluechangingmethod. This makes no difference anyway, since the problem is not related to this method, or to the way the validation is done.

In my humble opinion this is a bug, and a fix is needed.
Unfortunately I can not use the suggested solution, as we can not offer our customers this “look” for the Grid.

Any other suggestion/solution would be appreciated.

Thank you,
Ioana

May 15, 2015 at 1:39 pm Grid error on cell validation for one row Grid #71187

Dimitar
Participant

Hi Ioana,

There is virtually no visual difference between your example with height: ‘100px’ and our example. The difference is only functional – the proper way to validate a cell value is with the validation callback. Your custom implementation with cellvaluechanging and showCellError is not recommended and may lead to unexpected behaviour (the error that is thrown when your example is tested). As stated in the API Documentation entry of cellvaluechanging: The function can be used for modifying the edited value. It is not a bug if you are using this callback for other purposes than the intended ones and an error is thrown.

Best Regards,
Dimitar

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

May 15, 2015 at 2:18 pm Grid error on cell validation for one row Grid #71190

ioana
Participant

Hi Dimitar,

In your example there is no javascript error – true, yet the message is not displayed, if I change the autorowheight to true.

As for the rest, I will check if it possible to refactor my code the way you proposed. By this I mean that the scenario is more complex then the simple example we discussed on.

For example:
When a cell value is changed following should happen:
* a request is sent to server
* if the response is not a success, then the cell background color changes to red and the error message is saved in order to be displayed on another action (save)

I am using the cellvaluechanging to send the request and check the response and cellclassname to change the cell style. I’ve been choosing this solution because the cellvaluechanging method is called before cellclassname.
The idea with ‘cellvaluechanging’ got from here.
In the API I can not find the cellvaluechanging property.

Can I achieve the same using the validation callback?

Thanks,
Ioana

May 18, 2015 at 7:00 am Grid error on cell validation for one row Grid #71211

Dimitar
Participant

Hi Ioana,

The message is not visible because there is not enough space for it to be shown. That is why the fixed/larger height is necessary.

We suggest this to be done in the source updaterow callback function, which is used for server synchronisation. If necessary, cellclassname can be invoked manually by calling refresh.

As for cellvaluechanging, it is documented under the columns entry, as are all other column properties and callback functions.

Best Regards,
Dimitar

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

May 18, 2015 at 9:35 am Grid error on cell validation for one row Grid #71221

ioana
Participant

Hi Dimitar,

thank you for your answers and for proposed solutions.
If autoheight is true then there should be enough space for the error message to be displayed. Is this not the purpose for this attribute?
I need to set autoheight true.

I can not start a refactoring (as you suggested) without being sure that it will work as expected. And it will not.

Please provide a solution for this problem if possible.

Thank you,
Ioana

May 19, 2015 at 5:43 am Grid error on cell validation for one row Grid #71255
Dimitar
Participant
Hi Ioana,

Unfortunately, if there is not enough space for the validation pop-up, it will not be displayed.

And here is our suggestion for your other requirement:
1. In updaterow, make an Ajax call to your server.
2. The server will validate the new cell value.
3. In the Ajax call’s success callback, check the server’s response and set a flag variable. Then call commit(true).
4. cellclassname will be called automatically. In it, colour the edited cell based on the flag variable.
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
May 21, 2015 at 10:05 am Grid error on cell validation for one row Grid #71393

ioana
Participant

Hi Dimitar,

thank you.

Regards,
Ioana
Author

Posts

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

You must be logged in to reply to this topic.