jQWidgets Forums

This topic contains 7 replies, has 3 voices, and was last updated by Peter Stoev 11 years, 5 months ago.

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

Author

Resize column with showfilterrow and in a div with position absolute Posts

October 17, 2013 at 3:26 pm Resize column with showfilterrow and in a div with position absolute #30945

Participant

Hi,
I have a problem. I searched but I did not find a solution.
I have a grid, where you are allowed to resize the column width. I have also a filter row. In my case I display the grid in a div with a style attribute “position: absolute;”. This is necessary, because I use a library with insert this attribute automatically.
In this combination the resize function of the columns do not work correctly.
An example is below.
Do you have any solution?
Best Regards,
codemaker

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xxx</title>
<link href="core/lib/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<link href="core/lib/jqwidgets/styles/jqx.web.css" rel="stylesheet" />
<script src="core/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="core/lib/jqwidgets/jqx-all.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            var theme = 'web';
            // prepare the data
            var data = {};
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            var generaterow = function (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;
                return row;
            }
            for (var i = 0; i < 10; i++) {
                var row = generaterow(i);
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "local",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                height: 350,
                source: dataAdapter,
                theme: theme,
                sortable : false,
                columnsresize : true,
                showfilterrow : true,
                filterable : 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', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
	<div style='position: absolute;'>
		<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
			<div style="float: left;" id="jqxgrid"></div>
		</div>
	</div>
</body>
</html>

EDIT:
It Works in ie 9 but I use firefox 24.0

October 17, 2013 at 3:32 pm Resize column with showfilterrow and in a div with position absolute #30948

Peter Stoev

Keymaster

Hi codemaker,

Please, find below a working sample with jQWidgets 3.0.3.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.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.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnreorder.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          var theme = 'web';
          // prepare the data
          var data = {};
          var firstNames =
          [
              "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
          ];
          var lastNames =
          [
              "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
          ];
          var productNames =
          [
              "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
          ];
          var priceValues =
          [
              "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
          ];
          var generaterow = function (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;
              return row;
          }
          for (var i = 0; i < 10; i++) {
              var row = generaterow(i);
              data[i] = row;
          }
          var source =
          {
              localdata: data,
              datatype: "local",
              datafields:
              [
                  { name: 'firstname', type: 'string' },
                  { name: 'lastname', type: 'string' },
                  { name: 'productname', type: 'string' },
                  { name: 'quantity', type: 'number' },
                  { name: 'price', type: 'number' },
                  { name: 'total', type: 'number' }
              ]
          };
          var dataAdapter = new $.jqx.dataAdapter(source);
          // initialize jqxGrid
          $("#jqxgrid").jqxGrid(
          {
              width: 500,
              height: 350,
              source: dataAdapter,
              theme: theme,
              sortable: false,
              columnsresize: true,
              showfilterrow: true,
              filterable: 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', width: 100, cellsalign: 'right', cellsformat: 'c2' }
              ]
          });
      });
    </script>
</head>
<body class='default'>
	<div style='position: absolute;'>
		<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
			<div style="float: left;" id="jqxgrid"></div>
		</div>
	</div>
    </body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 17, 2013 at 3:48 pm Resize column with showfilterrow and in a div with position absolute #30953

codemaker

Participant

I am sorry, but it does not work for me!
I downloaded jqx 3.0.3 and jquery 1.10.2 but I still have the same problem.
Did you test with firefox 24.0?

October 17, 2013 at 6:53 pm Resize column with showfilterrow and in a div with position absolute #30966

Peter Stoev

Keymaster

Hi codemaker,

Resizing on my side works with FireFox 24.0. The only difference is that while a column is being resized, the Text is selected, too and that sometimes breaks the user experience and a new drag is required. Of course, we will improve that in the future releases.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 25, 2013 at 12:42 pm Resize column with showfilterrow and in a div with position absolute #31332

arajput

Member

Hi Peter,
We are similar issue in FF 24.0, resizing of the column selects the column header and also makes it nearly impossible to drag the column header edge.
Do you guys have a handle on this issue, and when a fix would be available? we cannot go to prod with this issue, so any solution or workaround would be highly appreciated.

Thanks,
Ashish

October 25, 2013 at 1:55 pm Resize column with showfilterrow and in a div with position absolute #31337

Peter Stoev

Keymaster

Hi Ashish,

Everything that I had to say about this topic can be found in my last answer.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 25, 2013 at 7:59 pm Resize column with showfilterrow and in a div with position absolute #31349

arajput

Member

Hi Peter,
Thank you for a very short tempered answer, but I was trying to get specifics on Of course, we will improve that in the future releases. (as we cannot have a broken application on FF!!!)
We have already purchased an enterprise license, but unfortunately, find this kind of answer very unprofessional.

October 25, 2013 at 8:25 pm Resize column with showfilterrow and in a div with position absolute #31350

Peter Stoev

Keymaster

Hi arajput,

Columns Resizing works in Firefox and that is demonstrated in this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/columnsresizing.htm?arctic. Columns Resizing when Filter Row is enabled works in Firefox, too. However, the columns resizing currently makes a browser selection which is unnecessary and should be improved in a future version. That is what I meant in my previous post. If you do not like how the columns resizing feature currently performs, then you have 2 temporary options – turn off columns resizing or turn off the filter row and use the filtering menu.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.