jQWidgets Forums

jQuery UI Widgets Forums Grid selectionmode: "singlecell" issue

Tagged: ,

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • selectionmode: "singlecell" issue #10558

    DavidSimmons
    Participant

    I have 2 grid they both use the selectionmode: “singlecell”. Other than the source they are almost the same design. My problem is, after editing a cell, hover and cell edit is off by one row as to the mouse position. If the mouse is in the first row, first cell the hover and cell edit will be one row below. I don’t see anything wrong. Have you heard of this before, could this be a bug?

    selectionmode: "singlecell" issue #10560

    Peter Stoev
    Keymaster

    Hi David,

    We are not aware of such issues. If you experience it, please send us a small sample to support@jqwidgets.com which demonstrates the behavior.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    selectionmode: "singlecell" issue #10734

    DavidSimmons
    Participant

    I try to recreate my problem with your example here, but was unable to. In my application I have a large data set at the top of the grid the hover and cell select is correct, but as you go to the bottom of the grid the hover and cell select is off or below the actual cell. As you go down to the bottom of a large grid the difference that it is off is greater.

    I think it has to do with my height: (WindowHeight-200) method, because if I replace it with a fixed number say height: 600 the problem goes away. I am using this because I wanted the the height to be a percentage of the screen, say 80% which the height method does not take. I would rather use a percentage for the height if there is a way…

    Thanks for all you help…

    $(document).ready(function () {
    var theme = getTheme();
    var WindowHeight = (window.outerHeight);

    // 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 < 1000; 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["id"] = i;
    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,
    totalrecords: 1000,
    datatype: "array"
    };

    $("#jqxgrid").jqxGrid(
    {
    theme: theme,
    width: '99.9%',
    height: (WindowHeight-200),
    source: source,
    scrollbarsize: 10,
    sortable: true,
    sorttogglestates: 1,
    altrows: true,
    virtualmode: false,
    pageable: false,
    enablehover: true,
    columnsresize: true,
    editable: true,
    selectionmode: "singlecell",
    filterable: true,
    showfilterrow: true,
    statusbarheight: 26,
    showstatusbar: true,
    columns: [
    { text: 'Id', datafield: 'id', width: 50, pinned: true},
    { 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: 80, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' },
    { text: '', dataField: '', width: '100%', editable: false, filterable: false }
    ]
    });

    $("#jqxgrid").bind('cellvaluechanged', function (event) {
    var rowid = args.rowindex;
    var column = args.datafield;
    var value = args.newvalue;
    var oldvalue = args.oldvalue;
    var data = new Object();

    var id = $('#jqxgrid').jqxGrid('getcellvalue', rowid, "ID");

    data.update='true&';
    data.id=id;
    data.column=column;
    data.value=value;

    if(value !== oldvalue ){
    //do something
    }
    });
    $('#jqxgrid').bind('rowclick', function (event) {
    var args = event.args;
    var row = args.rowindex;
    selectedID = $('#jqxgrid').jqxGrid('getcellvalue', row, "ID");
    });
    });

    selectionmode: "singlecell" issue #10737

    Peter Stoev
    Keymaster

    Hi David,

    You can set the Grid’s height to a percentage value, too. For example: When you set the Grid’s height to 100%, It will be expanded to its container’s height and will depend on it. Please, send us the HTML part of the code, too and as an additional information, tell us the jQuery’s version, jQWidgets version and the browser that you use to reproduce that issue.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    selectionmode: "singlecell" issue #10743

    DavidSimmons
    Participant

    I have tried this many times and can not get height percentage to work. The width percentage works fine.

    width: ‘99.9%’,
    height: ‘80%’,

    selectionmode: "singlecell" issue #10751

    Peter Stoev
    Keymaster

    Hi David,

    When you set the Grid’s height to 100%, It will be expanded to its container’s height and will depend on it If your parent element’s height is small, the Grid’s height will be small, too. The Mobile Demo about jqxGrid actually have a Grid with height set to 100% and width set to 100%. The Grid is expanded to fit to its container’s size. You can see the demo’s code from the download package.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.