jQWidgets Forums

Forum Replies Created

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

Author

Posts
October 25, 2013 at 2:33 am in reply to: Feature request: grid state captues and loads scroll position Feature request: grid state captues and loads scroll position #31315

Fritz45
Participant

I strongly support this suggestion – I have a grid with about 1000 rows in it, and depending on user action the grid may get refreshed.

However, if the user scrolled to (say) row 950, when the grid is reloaded, the user has to scroll down all the way to the location where they were previously working, which almost renders my application un-usable for them

If anyone has suggestions on how to work around this, please let me know!

August 27, 2013 at 9:49 pm in reply to: Manually collapse dropdown when item clicked Manually collapse dropdown when item clicked #27816
Fritz45
Participant
Thanks Dimitar, it is now much clearer to me since I was under the impression the second call also initializes the menu.

However, if I place the destroy method before the second call, then the menu is not shown anymore (not the dynamically added items or the static ones).

So there is a first call when the page loads, to show the menu with static items. The code looks like this:
```
$("#jqxMenu").jqxMenu({ height: 30 });
    $("#jqxMenu").addClass("topmenu");
```
Then, when some data is loaded from the server, the second call to build the menu looks like this:
```
$("#jqxMenu").jqxMenu("destroy");
 $("#jqxMenu").jqxMenu({height: 30 });
 $("#jqxMenu").addClass("topmenu");
 $('#jqxMenu').jqxMenu({ autoCloseOnClick: true });
```
But after this call, nothing is shown in the menu area anymore.

Please bear with me to sort this out.

Kind Regards,

Fritz
August 26, 2013 at 6:10 pm in reply to: Manually collapse dropdown when item clicked Manually collapse dropdown when item clicked #27729

Fritz45
Participant

Thanks Dimitar, but I am not just adding items. I am simply initializing the menu twice. Once with few items and once with more.

Why is the behaviour different after the second initialization?

Fritz

August 22, 2013 at 11:25 pm in reply to: Grid Filter Not Cleared when Table Reloading Grid Filter Not Cleared when Table Reloading #27487
Fritz45
Participant
Hi Peter

Here is an example page that reproduces the error. I downloaded the latest version of JQWidgets yesterday.

To reproduce error:

1. Change reference paths to stylesheets and script references
2. Load page
3. Click ‘Reload Grid’ link to load grid
4. Put a filter to show only values less than 2 on column “Quantity” (you should see 7 rows).
5. Click ‘Reload Grid’ link to load grid again
6. Note that filter is still applied (row count differs because of random data generation, but still only rows that have Quantity less than 2 are shown). ALSO, I cannot see the filter button on column Quantity, and if I open filter and click clear, nothing happens. Filter is invisible/not alterable and stuck

Here is an example page which shows this behaviour in Chrome and IE10:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Example Reproducing Filter Problem</title>    
       
     <link rel="stylesheet" href="/assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/assets/jqwidgets/styles/jqx.bootstrap.css" type="text/css" />    
</head>
<body class='default'>
    <div style="position:relative; left:30px;  top:40px;">
        <a id="btnLoadGrid" href="#" class="btn">Reload Grid</a>
    </div>
    <br />
    <div id='jqxWidget' style="position:relative; left:30px; top:100px; font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
    
    <script src="/assets/js/jquery.js"></script>
    
    <script type="text/javascript" src="/assets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxdropdownlist.js"></script>    
    <script type="text/javascript" src="/assets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.filter.js"></script>
   
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnLoadGrid").click(buildGrid);
        });
        function buildGrid() {
            // prepare the data
            var data = new Array();
            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"
            ];
            for (var i = 0; i < 100; 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,
                selectionmode: 'multiplecellsadvanced',
                sortable: 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>
</body>
</html>
```
Am I missing something very basic?

I also noted that if I clear all children on the parent DIV for the grid, then the grid no longer shows after the first reload. It seems some elements are still in the DOM somewhere.

Kind Regards,

Fritz
August 22, 2013 at 11:02 pm in reply to: Manually collapse dropdown when item clicked Manually collapse dropdown when item clicked #27486
Fritz45
Participant
Hi Dimitar

Thanks, this is basically what I was already doing. I have now found that the problem seems to be caused by the following:

I am doing this:
```
jQuery(document).ready(function () {
    
   //I initialize the menu so it will look good when page loads (menu only partly populated)
    $("#jqxMenu").jqxMenu({ height: 30 });  
    $("#jqxMenu").addClass("topmenu");
    
    //pseudoCode:
    gotoServerAndLoadMenuData()
    
});
gotoServerAndLoadMenuData() {
   //build menu here using code like:
    $("#lastUl").append("<li><a href='#Become an affiliate'>Become an affiliate</a></li>");
    $("#jqxMenu").jqxMenu({ height: 30 });  
    $('#jqxMenu').jqxMenu({ autoCloseOnClick: true });
}
```
Now the problem (of menu not closing on click of an item) goes away if I do not initialize the menu when the page loads. So in other words if I do this:
```
jQuery(document).ready(function () {
    
   //DO NOT initialize menu
   //pseudoCode:
    gotoServerAndLoadMenuData()
    
});
gotoServerAndLoadMenuData() {
   //build menu here using code like:
    $("#lastUl").append("<li><a href='#Become an affiliate'>Become an affiliate</a></li>");
    $("#jqxMenu").jqxMenu({ height: 30 });  
    $('#jqxMenu').jqxMenu({ autoCloseOnClick: true });
}
```
This works, whereas the topmost code shows the menu but it does not collapse. Can you maybe explain why this is?
August 22, 2013 at 2:22 am in reply to: Grid Filter Not Cleared when Table Reloading Grid Filter Not Cleared when Table Reloading #27332

Fritz45
Participant

Another update:

Behaviour is like this:

Load/Construct Grid with data and display – OK
Apply Filter – OK
Clear Filter using Button Click – OK!
Re-Load/Construct Grid with data and display – Error: filter still applied
Clear Filter using Button Click – No effect

I thought maybe this could help you see what I am doing wrong?

Kind Regards,

Fritz

August 22, 2013 at 2:09 am in reply to: Grid Filter Not Cleared when Table Reloading Grid Filter Not Cleared when Table Reloading #27331
Fritz45
Participant
Peter, update to my last post:

The filter is still applied, even though I call the clearfilter method like this:

…code to build source dataAdapter goes here
```
$('#tableGroup').jqxGrid({ enableellipsis: true });
        $("#tableGroup").jqxGrid(
            {
                width: w,
                height: h,
                source: dataAdapter,
                columns: cols,
                selectionmode: 'multiplecellsadvanced',
                sortable: true,
                filterable: true
            });
  $('#tableGroup').jqxGrid('clearfilters');
```
I can confirm that this code is run after each round trip to the server, but the filter stays in place unless I reload the page.

I get the same behaviour in IE10 and Chrome.

Am I missing something basic?

Kind Regards,

Fritz
August 22, 2013 at 2:01 am in reply to: Grid Filter Not Cleared when Table Reloading Grid Filter Not Cleared when Table Reloading #27330
Fritz45
Participant
Hi Peter

But that’s what I don’t understand, the filter stays in place even though I re-construct the DataAdapter and the table from scratch every time a round-trip to the server is completed.

So basically the filter stays in place even though I return the same data, and run the grid construction method again, which contains this code:
```
var data = new Array();
        treatLenIDs = new Array();
        for (var i = 0; i < tableData.length; i++) {
            var sRow = tableData[i];
            treatLenIDs.push(sRow[0]);      
            var lRow = {};
            lRow["id"] = sRow[0];
            lRow["areaname"] = sRow[1];
            lRow["location"] = sRow[2];
            var k = 3;
            for (var j = minYear; j <= maxYear; j++) {
                var t = "yr" + j.toString();
                lRow[t] = sRow[k];
                k++;
            }
            data[i] = lRow;
        }
        var source =
        {
            localdata: data,
            datatype: "array"
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function (data) { },
            loadError: function (xhr, status, error) { }
        });
        $('#tableGroup').jqxGrid({ enableellipsis: true });
        $("#tableGroup").jqxGrid(
            {
                width: w,
                height: h,
                source: dataAdapter,
                columns: cols,
                selectionmode: 'multiplecellsadvanced',
                sortable: true,
                filterable: true
            });
```
I don’t see how this is possible but it seems to be the case that the filter stays in place even though the grid is rebuilt from scratch.

I think I can solve the problem by manually applying the clearfilters method you suggested, but still would like to know what is going on here.

Finally, is there an example on how updatebounddata works?

Many thanks for your patient help.

Fritz
August 22, 2013 at 1:49 am in reply to: Manually collapse dropdown when item clicked Manually collapse dropdown when item clicked #27327
Fritz45
Participant
Hi Dimitar

Yes, I have added autoCloseOnClick = true and also replaced all my jqxWidgets with version 3.0.1.

But the problem still persists. I think I may not be adding the right classes when I add the menu items programatically. At the moment I am doing this:

for (var i = 0; i < data.length; i++) {
var s = data[i];
$statsDropDown.append("” + s + ““);
}

Where $statsDropDown is a jquery reference to this html:
```
<ul id="statsDropDown">
     <li><a href="#">Setup not loaded or loading...</a></li>
</ul>
```
AFTER the items are dynamically added, I call:

$(“#jqxMenu”).jqxMenu({height: 30 });
$(“#jqxMenu”).addClass(“topmenu”); //this is just to add custom background colour
$(‘#jqxMenu’).jqxMenu({ autoCloseOnClick: true });

With this code, the menu does NOT close when a dropdown item is clicked. If I do not programmatically add items, it does close.

Any ideas?
August 21, 2013 at 1:08 am in reply to: Grid Sort and Filter panel background color Grid Sort and Filter panel background color #27231

Fritz45
Participant

I solved this partly by doing the following:

Instead of overriding the background color for .jqx-menu, I added a class within my page header:

.topmenu
{
background-color:#233140 !important;
color:#ffffff;
}

then, where I initialize the menu, I added:

$(“#jqxMenu”).jqxMenu({ height: 30 });
$(“#jqxMenu”).addClass(“topmenu”);

Now the grid menu still has the default colour.

August 19, 2013 at 6:23 am in reply to: Custom background color on selected cells Custom background color on selected cells #27096

Fritz45
Participant

Hi Peter.

I load the reference to the jqx-bootstrap.css file into the head section of the page, right after the jqx-core.css reference. I think injust copied this from examples in your documentation. Both these css references come only after the bootstap framework’s css files. Is that not right?

Kind regards,

Fritz

August 18, 2013 at 9:59 pm in reply to: Custom background color on selected cells Custom background color on selected cells #27075

Fritz45
Participant

Hi Peter. Thanks for your persistence in helping me solve this problem.

Your last solution did not work for me. Whenever I added the “:not(…)” part to my style, the conditional formatting did not show anymore. This was the case no matter where I put the style (in body, in header or in jqx-bootstrap.css file).

I also tried your second last solution, which was to put the custom formatting style (.warning) inside the jqx-bootstrap.css file. This also did not work (the conditional format style showed, but was not overriden by the selected style when cells were selected).

However, THE PROBLEM WAS SOLVED when I put the custom formatting style in “jqx-base.css” right before style:

/*applied to a selected grid cell.*/
.jqx-grid-cell-selected {
border-left: 0px solid transparent;
}

So the final solution, in the jqx-base.css file, looked like this:

.myConditionalStyle
{
color: black;
background-color: yellow;
}

/*applied to a selected grid cell.*/
.jqx-grid-cell-selected {
border-left: 0px solid transparent;
}

I hope this can be of help to someone else. Thanks again for your help.

Kind Regards,

Fritz

August 18, 2013 at 12:41 am in reply to: Custom background color on selected cells Custom background color on selected cells #27047

Fritz45
Participant

Thanks Peter for the prompt response. Yes, the link you posted shows the behaviour I need. Now I just need to figure out how to do it!

I am referencing jqx.base.css and then jqx.bootstrap.css. I tried to follow your suggestion by modifying class .jqx-grid-cell-selected-bootstrap by adding !important to the the following properties:

background-color: #003399 !important;
*background-color: #003399 !important;

But this does not seem to have any effect. Apologies if I am doing the wrong thing – I am not expert with CSS.

My custom cell rendering looks something like this:

var cellclass = function (row, columnfield, value) {
value = Number(value);
if (value > 10) {
return “warning”;
}
}

the class “warning” looks like this:

.warning
{
background-color:lightsalmon;
}

(note that there is no “!important;” on this class)

and I build the columns array using this code in a for loop:

cols.push({ text: year, datafield: “yr” + year, width: 50, cellsalign: ‘center’, cellclassname: cellclass });

As I noted, it all works well except for the selected cell background on custom formatted cells.

Any help greatly appreciated.

Kind Regards,

Fritz
Author

Posts

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