jQWidgets Forums

jQuery UI Widgets Forums Grid Original html is always rewritten when scrolling

This topic contains 4 replies, has 2 voices, and was last updated by  williamtourinho 12 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • williamtourinho
    Participant

    Hi,
    if I modify the style attribute of a cell in the grid, when I scroll my modification is canceled, ie will reappear the original style. How can I set the style to not be change with the scroll.
    What happens is that the original html is always rewritten when the user makes scroll.
    The editable state of the grid is set to false in my case.
    Thank you.


    Peter Stoev
    Keymaster

    Hi williamtourinho,

    If you want to customize a cell, use the ‘cellsrenderer’ callback function. See here: jquery-grid-cellsrendering.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    williamtourinho
    Participant

    Hi Petter, here a example to better understand my problem. Thank you for your time.

    $(document).ready(function () {
    var theme = getTheme();
    var data = generatedata(500);
    var source =
    {
    localdata: data,
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    var cellrenderer = function (row, column, value) {
    var html = ‘

    ‘ + value +’

    ‘;
    return html;
    }

    $(“#jqxgrid”).jqxGrid(
    {
    width: 685,
    source: dataAdapter,
    showfilterrow: true,
    filterable: true,
    theme: theme,
    columns: [
    { text: ‘Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, cellsrenderer: cellrenderer, datafield: ‘name’, width: 115 },
    {
    text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220
    },
    { text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
    { text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
    { text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’ }
    ]
    });
    $(‘#button’).jqxButton({ height: 25, theme: theme });
    $(‘#button’).click(function () {
    var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’);
    var rowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);

    $(“#NameRow_” + rowindex).css(“color”, “blue”);
    });
    });

    select cell, press button and them move the scroll bar to see behavior


    Peter Stoev
    Keymaster

    Hi williamtourinho,

    To modify the rendering of a cell, use the cellsrenderer callback. The Grid reuses the cells HTML elements so you can’t statically apply a style to a cell, row or any other HTML element. You should use the built-in methods provided by the widget.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    williamtourinho
    Participant

    With the ‘setcellvalue’ I was able to do what I needed. Thank you.

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

You must be logged in to reply to this topic.