jQWidgets Forums

Forum Replies Created

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

Author

Posts

October 24, 2016 at 6:53 pm in reply to: Row Details vs Horizontal Scrolling Row Details vs Horizontal Scrolling #88445

Participant

Hi Hristo,

I will do that as soon as possible. I have some work to do to be able to provide an example due to the way we are emitting the grid configuration code. I will try to get that done this week.

Here is more basic info: We are currently using jQWidgets version 4.1.2. The performance issue that we saw was not terrible, but bad enough to be reported by our QA staff. A grid had ~75 columns, and horizontal scrolling was sluggish and jerky in IE11 on the desktop, and in Chrome on iOS and Android.

More details to follow when I get the example ready.

Thanks!
Stan

October 21, 2016 at 2:44 pm in reply to: Row Details vs Horizontal Scrolling Row Details vs Horizontal Scrolling #88383

StanLogan

Participant

Hi Hristo,

Thanks for the response.

The example performs well, but we have had some issues both in IE and on iPad/Android with only 75 columns. There must be something else going on. When I get to implementing the larger grids, I will probably have questions on what we are doing wrong 🙂

Thanks again,
Stan

June 13, 2016 at 2:06 pm in reply to: Certain text breaks column resizing Certain text breaks column resizing #85072

StanLogan

Participant

Hi Peter,

Thanks for the reply. This text appears only in one row for that column. The other rows have text that is also larger than the calculated column width. I understand that things are not always perfect, but even if the cell with the text returns a smaller width value, why would that affect the final column width when the other rows have values that should make the column wider?

I can live with this issue, since our users are unlikely to have text like this, and they can still resize the column manually. I just thought it indicated a problem that you might like to address.

Stan

June 13, 2016 at 1:07 pm in reply to: Internet Explorer 11 on Surface RT tablet Internet Explorer 11 on Surface RT tablet #85063

StanLogan

Participant

Bummer.

Well, I guess I have to hope that my management lets us modify our target specifications.

Thanks for the info.

June 3, 2016 at 11:42 am in reply to: Retrieve extra data supplied to DataAdapter Retrieve extra data supplied to DataAdapter #84868

StanLogan

Participant

Hi Peter,

Thank you very much!

To make this a little more clear for others reading this later: This means that I can add the fields only to the datafields collection of the DataAdapter to make them available, without having to also add hidden columns to the grid.

Stan

May 31, 2016 at 6:06 pm in reply to: Problem with showfilterrow Problem with showfilterrow #84772

StanLogan

Participant

Oops! Never mind – I figured it out. You were correct, I was not setting the dataadapter correctly.

A lot of this code is being created on the server in our app, which helped confuse the issue. Even after paring down the code, I missed that I was using the original source instead of the adapter.

Thanks for listening 🙂

May 31, 2016 at 2:53 pm in reply to: Problem with showfilterrow Problem with showfilterrow #84770

StanLogan

Participant

Hi Peter,

Thanks for the response. I am trying to use the grid exactly as in the demos. I now have a reproducible case, which I include below. I had to chop up our code quite a bit, so there may be some loose ends, but hopefully at least you will see the issue.

<!DOCTYPE html>
<html class="fill-window">
    <head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
        
    <title>E2 Mobile Shop</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/Content/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />

    <script src="/Content/assets/js/jquery-2.1.4.js" charset="UTF-8"></script>

    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxcore.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxdata.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxbuttons.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxscrollbar.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxlistbox.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxdropdownlist.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxmenu.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.pager.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.filter.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.sort.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.selection.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.columnsresize.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxlistbox.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxpanel.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxcalendar.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxdatetimeinput.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxcheckbox.js" charset="UTF-8"></script>

    <style type="text/css">
        .jqx-grid-cell {
            margin-top: -2px;
            font-size: 18px;
        }

        .jqx-grid-column-header {
            font-size: 18px;
            font-weight: bold;
        }
    </style>

<script type="text/javascript">

    var ST = {};
    ST.ClientData = {};
    ST.Application = {};

var SearchGrid_properties = {
        width: "100%",
        height: 590,
        pageable: true,
        sortable: true,
        filterable: true,
        showfilterrow: true,
        selectionmode: "multiplerows",
        altrows: true,
        rowsheight: 50,
        filterrowheight: 50,
        columnsresize: true,
        columnsheight: 50,
        columns: ""
    };

var SearchGrid_columns = [
                                  { text: 'Name', datafield: 'name', width: 250 },
                                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                                  { text: 'Calories', datafield: 'calories', width: 180 },
                                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
];
var SearchGrid_datafields = [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
];
var SearchGrid_datasource = {localdata:"",datatype:"array",datafields:""};
var SearchGrid_data = [];
SearchGrid_properties.source = SearchGrid_datasource;
SearchGrid_properties.columns = SearchGrid_columns;

SearchGrid_properties.ready = getData('SearchGrid');

SearchGrid_datasource.localdata = SearchGrid_data;
SearchGrid_datasource.datafields = SearchGrid_datafields;

$(document).ready(function () {
    var SearchGrid_adapter = new $.jqx.dataAdapter(SearchGrid_datasource);
    $('#SearchGrid_div').jqxGrid(SearchGrid_properties);
    $('#SearchGrid_div').jqxGrid('showloadelement');
})

function getData(gridname) {

    var data = {};

    var context = {};

    callPageMethod("GetGridData",
                    data,
                    context,
                    function (data) {

                        window[gridname + "_datasource"].localdata = data;

                        $("#" + gridname + "_div").jqxGrid({ source: window[gridname + "_datasource"] });
                    }
                );
}

    function callPageMethod (methodName, data, context, onSuccess, onFailure, synchronous) {
        var retVal;

        if (typeof synchronous == "undefined")
            synchronous = false;

        $.ajax({
            type: "GET",
            cache: false,
            async: !synchronous,
            url: "/sampledata/beverages.txt",
            contentType: "application/json; charset=utf-8",
            dataType: "msjson",
            converters: {
                "text msjson": function (jsonString) {
                    return (new Function("return " + jsonString.replace(/\"\\\/Date\((-?\d+)\)\\\/\"/g, "new Date($1)")))();
                }
            },
            success: function (data, textStatus, jqXHR) {
                retVal = data;

                if (typeof onSuccess == "function")
                    onSuccess(retVal, context, data);

            },
            error: function (jqXHR, textStatus, errorThrown) {
                var msg = "";
                try {
                    var response = JSON.parse(jqXHR.responseText);
                    msg = errorThrown + "\rMessage: " + response.Message + "\r" + response.StackTrace;
                }
                catch (e) {
                }
                if (typeof onFailure == "function")
                    onFailure(msg, context);
                else
                    alert(msg);

                retVal = false;

            }
        });

        return retVal;
    }

</script>
        

    </head>
    <body class="">
        

<div class="main-container" id="main-container" style="height: inherit;">
    <!-- page content -->
    
    <div data-role="page">

        <div id="GeneralRow" class="row " style="">
            <div class="col-xs-1 form-horizontal">
            </div>
            <div class="col-xs-10 form-horizontal vertical-fill">
                <div class="row vertical-fill" >
                    <div id="SearchGrid_div"></div>
                </div>
            </div>
            <div class="col-md-1 form-horizontal">
            </div>
        </div>

    </div><!-- /content -->

</div>

    </body>
</html>

May 23, 2016 at 2:20 pm in reply to: Deferred Scrolling not working on mobile devices Deferred Scrolling not working on mobile devices #84551

StanLogan

Participant

Hi Peter,

Thanks for the response. I would like it if it worked the same on mobile :). As I mentioned, the kinetic scrolling is not useful for large amounts of data, since the user could spend many minutes trying to reach the end of the data. It might be worth a note on the example or in the documentation that this is expected behavior.

I have a need to show large amounts of data in the grid on mobile devices.

I’m guessing that I will have to use a paging scheme instead. However, the default paging methods provided have some shortcomings for my purposes, so I am now looking for recommendations for setting up a custom pager that works something like the deferred scrolling would.

Do you think there would be any problem with creating a pager using either a jqxScrollBar or a jqxSlider widget? Any chance you would have an example that does something like this?

Thanks,
Stan

Author

Posts

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