[mkrajewParticipant]

Just wanted to chime in that this fixed my issue as well, but we are not using cellclassname that I’m aware of. We just have a cellsrender for non-data bound columns and that used to trigger on each column. Now it only triggers on the first column and the other columns did not get that event.

[mkrajewParticipant]

Thank you for the post. I am working on updating our program to the latest jqwidgets version to fix the grid’s scrollbar issues in the latest Chrome version, but ran into this problem. I’ll put in this workaround for the time being.

[mkrajewParticipant]

Correction: it’s jqxdata.export.js (not jqxgrid.export.js) that I’m having problems with. If I leave the old version of jqxdata.export in there, everything appears to work correctly without any exceptions being thrown.

[mkrajewParticipant]

Thanks for the comments, though it still does not work for us.

I’ve developed my own caching method with virtualmode so I don’t need to go to the server as often, so this “page” is not the same as what the grid thinks is a page. But that part all works fine. This is some error the grid export is throwing on the client-side before getting to the server (which I already have implemented in .NET).

Updating all of the jqWidgets files to the latest 9.0.0 version and leaving jqxgrid.export.js at version 8.0.0 appears to work on a surface level, though I’m not sure what other problems we will end up having if we do that. However if we can’t get the new version working, that’s likely what we’ll have to do.

[mkrajewParticipant]

Thanks for your consideration! I would be happy if the scrollfeedback event fired with just the row index the scrollbar is at if a row does not yet exist. That way I can maintain my own index of data outside the grid and display it in the deferred popup based on the index.

Alternatively, an alternate scrollfeedback_virtual event could be created if the row doesn’t exist, that provides just the row’s index. That way your currently scrollfeedback event would work exactly the same and all you’d be doing is adding another event.

• This reply was modified 4 years, 4 months ago by  mkrajew.

[mkrajewParticipant]

Thanks for looking into it. It seems to me all this does is frustrate users because they don’t know the technicalities of how the grid works. They just see it as “it unselected things automatically for me when I didn’t tell it to”.

It seems like virtualmode should logically allow you to select any number of rows (they’ve been selected virtually), then it’s up to me as the programmer to decide how to handle these selections which have not yet been loaded into the grid. I’ll probably need to go to the server to download the data I need if the grid doesn’t have the data loaded, but at least that’s work on my side and the users don’t see it as a bug.

Right now this is my biggest issue with how the grid works, because it effectively “loses” a user’s selections without telling them. They could easily try to select 100 rows, the grid will let them do it, but only the last 20 or so actually get processed.

[mkrajewParticipant]

For what it’s worth, I had this problem as well and I needed to set the z-index. The only browser that it wasn’t working on was Firefox and when I set the z-index (I also had to add !important) it worked fine.

[mkrajewParticipant]

Let me chime in and say this is exactly what I’m looking for as well. It needs to essentially be “virtual paging”. The scrollbar should be the length of all the totalrows, but download a “page” of data at a time. Once you scroll down past the data you already have, it should request a new page of data. That lets the grid be responsive for a portion of the data, and not continually reloading data we already have.

The way virtualmode is now, the grid will request the 20 visible rows and one down scrollbar click will then request 19 of the same rows from the server and 1 new one. It is very choppy. It should request the next 20 and then have all 40 available so the grid is fast and responsive while moving between those 40 rows, and it shouldn’t need to request anything until you get to a row you don’t already have, in this case the 41st row.

TP_DTNA – I understand you can’t post your code, but would it be possible to write a little pseudocode or get us started? Did you bind to a localsource array the size of totalrows so the grid would be responsive, and then somehow trigger server-side events manually when rows aren’t filled in or something? Just trying to figure out how the source was set up and which methods should implement what.

[mkrajewParticipant]

The FormatFunction actually contains 2 parameters which aren’t really in the documentation. The second is the item index, which you can then use to look up the text.

series: [{
      dataField: 'Percent',
      displayText: 'Country',
      labelRadius: 170,
      initialAngle: 15,
      radius: 145,
      centerOffset: 0,
      formatFunction: function(value, itemIndex) {

        return sampleData[itemIndex].Country;
      },
      toolTipFormatFunction: function(value, itemIndex) {
        var label = sampleData[itemIndex].Country + ': ' + 	sampleData[itemIndex].Percent + '%';
        return label;
      }
    }]

See this example: https://jsfiddle.net/p7zd3pkv/

[mkrajewParticipant]

My grid is in virtual mode and using a data adapter that gets its data from the server and not local data. I had filters on separate columns. It looks like it was attempting to call the service method more than once when clearfilters is called.

var recordsDataSource =
            {
                dataType: "json",
                datafields: [
                    { name: 'RecordNumber' },
                    { name: 'Author' },
                    { name: 'Title' },

                ],
                sortcolumn: "RecordNumber",
                sortdirection: "ASC",
                filter: function ()
                {
                    $('#jqxRecordsGrid').jqxGrid('updatebounddata', 'filter');
                },
                beforeprocessing: function (data)
                {
                    var returnData = {};
                    data = data.d;

                    try
                    {
                        var jsonObj = JSON.parse(data);
                        if (jsonObj.Error)
                        {
                            alert(jsonObj.Error);

                            returnData.totalrecords = 0;
                            returnData.records = [];
                        }
                        else
                        {
                            returnData.totalrecords = jsonObj.totalRows;
                            returnData.records = jsonObj.data;
                        }
                    }
                    catch (err)
                    {
                        console.log(err);
                        if (data)
                            console.log(data);
                        alert(err);
                    }

                    return returnData;
                },
                type: 'get',
                formatdata: function (data)
                {
                    data.pagenum = data.pagenum || 0;
                    data.pagesize = data.pagesize || 10;

                    var sortinformation = $('#jqxRecordsGrid').jqxGrid('getsortinformation');
                                                
                    var sortcolumn = sortinformation.sortcolumn;
                    data.sortdatafield = sortcolumn || 'RecordNumber';

                    data.sortorder = data.sortorder || 'asc';
                    data.filterscount = data.filterscount || 0;

                    formatedData = buildQueryString(data);
                    return formatedData;
                },
                url: '../Services/MyService.asmx/GetGridRecords'
            };
            this.m_DataAdapter = new $.jqx.dataAdapter(recordsDataSource, {
                contentType: 'application/json; charset=utf-8',
                loadError: function (xhr, status, error)
                {
                    try
                    {
                        var errorObj = JSON.parse(xhr.responseText);
                        $.IPS.ShowMessage(errorObj.Message);
                    }
                    catch (err)
                    {
                        alert(error);
                    }
                }
            });

            var jqxRecordsGrid = $("#jqxRecordsGrid");
            jqxRecordsGrid.jqxGrid(
            {
                width: '99.5%',
                height: 600,
                sortable: true,
                pageable: true,
                pageSize: 100,
                columnsResize: true,
                columnsReorder: true,
                columnsautoresize: false,
                source: this.m_DataAdapter,
                selectionmode: "multiplerowsadvanced", 
                virtualmode: true,
                autoHeight: false,
                autorowheight: false,
                pagesizeoptions: ['25', '50', '100', '250'],
                filterable: true,
                columns: [
		            { text: 'No.', dataField: 'RecordNumber', width: 70, filterable: false },
		            { text: 'Author', dataField: 'Author', width: 150, filtertype: "custom", createfilterpanel: $.Grinder.Records.CreateFilterPanel },
		            { text: 'Title', dataField: 'Title', width: 250, filtertype: "custom", createfilterpanel: $.Grinder.Records.CreateFilterPanel }
                ],
                rendergridrows: function (args)
                {
                    return args.data;
                }
            });

[mkrajewParticipant]

Oh, and the workaround is to get the filterinformation and manually remove the filters, then refresh the grid:

            var filterInfo = $("#jqxRecordsGrid").jqxGrid('getfilterinformation');
            for (var i = 0; i < filterInfo.length; i++)
            {
                $("#jqxRecordsGrid").jqxGrid('removefilter', filterInfo[i].filtercolumn, false);
            }

// now rebind
$("#jqxRecordsGrid").jqxGrid( { source: m_DataAdapter });

[mkrajewParticipant]

Then going back to my original request, how can I embed the full scheduler directly on the page with no scrollbar? The “null” suggestion worked great other than the slight incorrect drawing at the bottom.

[mkrajewParticipant]

I was told to set it to null by Peter Stoev in this thread:
http://www.jqwidgets.com/community/topic/no-scrollbar/

[mkrajewParticipant]

Thank you! That is exactly what I’m looking for. (I’d suggest adding this tidbit to your documentation for Height)

However…..the Day view doesn’t calculate the height correctly.
Again, see your example here:
https://www.jseditor.io/?key=jqxscheduler-columnsheight-property

1) Set the height to null
2) It displays correctly on Week view
3) Switch to Day view
4) Notice the bottom resources bar is drawn incorrectly, covering up the hours 11pm-midnight.

[mkrajewParticipant]

If I don’t set the height, the height is being set automatically to 600px.

See your example here and comment out the height property:
https://www.jseditor.io/?key=jqxscheduler-height-property

[Author]

Posts