jQWidgets Forums

Tagged: angular grid, angular2 grid, bootstrap grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid, typescript grid

This topic contains 1 reply, has 2 voices, and was last updated by Hristo 8 years, 6 months ago.

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

Author

Issue with Resizing Grid & SelectedRow editmode Posts

November 18, 2016 at 6:57 pm Issue with Resizing Grid & SelectedRow editmode #89156

lastrom

Participant

I’ve run into an issue in my application that I was able to replicate in the demo code provided with 4.1.2. I have a simple editable grid where the editmode is set to “SelectedRow” and the columns are resizable. If a user starts to edit a row, and without exiting edit mode, tries to resize the column, the values entered in all fields of the row revert back to the previous value.

Here’s the code (from the demo):

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example, the columns resizing feature is enabled. The resizing of the 'Total' column is disabled by 
    setting the 'resizable' property to false.</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.columnsresize.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata();

            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                selectionmode: 'singlerow',
                editmode: 'selectedrow',
                editable: true,
                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', minwidth: 100, resizable: false, width: 'auto', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            // trigger the column resized event.
            $("#jqxgrid").on('columnresized', function (event) {
                var column = event.args.columntext;
                var newwidth = event.args.newwidth
                var oldwidth = event.args.oldwidth;
                $("#eventlog").text("Column: " + column + ", " + "New Width: " + newwidth + ", Old Width: " + oldwidth);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
        <div style="margin-top: 30px;" id="eventlog"></div>
    </div>
</body>
</html>

Is this a known issue or is the functionality expected? Is there a workaround that can be used?

Thanks!

November 21, 2016 at 8:38 am Issue with Resizing Grid & SelectedRow editmode #89180

Hristo

Participant

Hello lastrom,

In this case, the Grid stay in the edit mode.
You could use endcelledit method when the “columnresized” event is triggered. Thus will set the new value.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.