jQuery UI Widgets Forums Grid Grid shakes up and down when mouse click on the radio button in the scroll grid

This topic contains 9 replies, has 3 voices, and was last updated by  misocap 3 years, 11 months ago.

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

  • misocap
    Participant

    Hi,
    I use jqxgrid and bind data around 50k Rows to display and for some reason don’t use paging in grid.
    And I use cellsrenderer(include radio button) in jqxgrid.
    When I click on the radio button, execute “updaterow”.

    After scroll grid when click on the radio button, grid shakes up and down.
    I use jqwidgets version 11.0.1

    Please, take a look at this example : https://jsfiddle.net/mintade/1s3ct4m9/4/

    Best Regards,


    Yavor Dashev
    Participant

    Hi misocap,

    I was able to recreate the problem you mentioned from the jsfiddle.
    If you want to change the text inside the cell its better to use the built in method ‘setcellvalue’.
    Here is a code snippet of its usage also using it the ‘grid’ component doesn’t ‘shake’.

    <body>
        <script>
    $(document).ready(function () {
        var data = generatedata(500);
        var source = {
            localdata: data,
            datafields: [{
                name: 'firstname',
                type: 'string'
            }, {
                name: 'lastname',
                type: 'string'
            }, {
                name: 'productname',
                type: 'string'
            }, {
                name: 'date',
                type: 'date'
            }, {
                name: 'quantity',
                type: 'number'
            }, {
                name: 'price',
                type: 'number'
            }],
            datatype: "array"
        };
    
        var renderlist = function (row, columnfield, value, defaulthtml, columnproperties) {
           return '<input type=radio id="rs_'+row+'" name ="rs_'+row+'" /> <label class="rdo_label" for="rs_'+ row+'">'+value+'</value> '
        };
        var adapter = new $.jqx.dataAdapter(source);
        $("#jqxgrid").jqxGrid({
            width: 600,
            theme: 'energyblue',
            source: adapter,
            sortable: true,
            ready: function () {
                $("#jqxgrid").jqxGrid('selectrow', 0);
            },
            columns: [{
                text: 'First Name',
                datafield: 'firstname',
                width: 90
            }, {
                text: 'Last Name',
                datafield: 'lastname',
                width: 90
            }, {
                text: 'Product',
                datafield: 'productname',
                width: 170,
                cellsrenderer: renderlist
                
            }, {
                text: 'Order Date',
                datafield: 'date',
                width: 160,
                cellsformat: 'dd-MMMM-yyyy'
            }, {
                text: 'Quantity',
                datafield: 'quantity',
                width: 80,
                cellsalign: 'right'
            }, {
                text: 'Unit Price',
                datafield: 'price',
                cellsalign: 'right',
                cellsformat: 'c2'
            }],
     });
    
    $("#jqxgrid").on("cellclick", function (event) {         
        $("input").click(function(){
            var rowIndex = event.args.rowindex;
            $("#jqxgrid").jqxGrid('setcellvalue', rowIndex,'productname', "zzzzzz change");
        })           
    })
    });
        
    </script>
    <style>
        input{
            margin-top: auto;
            margin-bottom:auto;
            align-self: center;
        }
          
    </style>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
        </div>
        <div style="margin-top: 10px;">
            <input id="updaterowbutton" type="button" value="Update Selected Row" />
        </div>
        </body> 

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev
    jQWidgets Team
    https://www.jqwidgets.com/


    misocap
    Participant

    Thank you for your answer.
    I have additional questions.

    1) Do I use ‘setcellvalue’ if I need to update several columns?

    2) Do you have any plan to modify the shaking when using ‘updaterow’? If there is, can you tell when it is?
    There’s a lot of places that use ‘updaterow’.
    If I have to write ‘setcellvalue’, I have to modify many places…..

    Best Regards,


    Yavor Dashev
    Participant

    Hi misocap,

    For your first question:
    If you want to use the ‘setcellvalue’ to update the several columns you have to use it multiple times in order to update several columns.
    But one solution for you could be to have an ‘update’ button like in the jsfiddle you shared in your first post and in the ‘oncellclick’ function to get the ‘datafield’ in different columns by clicking them(for example) which will select them then when clicking the button to update them or updating the cells(after clicking on them) in different columns when clicking the ‘radio button’:

    $("#jqxgrid").on("cellclick", function (event) {         
        $("input").click(function(){
            var rowIndex = event.args.rowindex;
            var datafield = event.args.datafield;
            var column = $('#jqxgrid').jqxGrid('getcolumn', datafield)
    
            $("#jqxgrid").jqxGrid('setcellvalue', rowIndex, datafield, "zzzzzz change");
        })           
    })

    For your second question I would like to know if the solution I gave you have worked out for your case.

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev
    jQWidgets Team
    https://www.jqwidgets.com/


    misocap
    Participant

    Thank you so much for your kind reply.
    But the answer is a little different from what I intended in the question.
    So I made a sample example again.

    Please, take a look at this example : https://jsfiddle.net/mintade/410d7vqa/2/

    If you look at the sample, I need to update the entire column with one event.
    In this case….

    $(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex,’firstname’, “fn change”);
    $(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex,’lastname’, “ln change”);
    $(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex,’productname’, “zzzzzz change”);
    $(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex,’date’, “d change”);
    $(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex,’quantity’, “q change”);
    $(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex,’price’, “p change”);

    Do I have to update each of them using ‘setcellvalue’?

    Best regards,


    Yavor Dashev
    Participant

    Hi misocap,

    We had a more detailed look on your case and we have made ‘work item’ for it and we are going to work on it.

    Thank you for your patience and corporation.

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev
    jQWidgets Team
    https://www.jqwidgets.com/


    misocap
    Participant

    Thank you.

    I hope it can be modified quickly.

    Best regards,


    misocap
    Participant

    Hi,

    https://github.com/jqwidgets/jQWidgets/issues/389

    I checked that the issue was colse and downloaded and tested jqxwidgets ver12.0.1.
    But the grid’s view still twitch even when I clean and test the Chrome browser cache.
    How shall I do it?

    Best regards,


    admin
    Keymaster

    Hi misocap,

    The issue you refer to is not related to this post. In addition, the observed behavior is due to the custom rendering implementation with radio buttons. If you need to render UI Components within Grid cells, the correct approach is shown here: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/


    misocap
    Participant

    Hi.
    Thank you for your quick response.

    However, I only tested “updaterow” with another simple source.
    There is no the custom rendering implementation with radio buttons in the source I tested.
    But grid still twitch(shakes up and down). I tested it in jqxwidgets ver12.0.1.

    Even if tested with this sample (http://jsfiddle.net/jqwidgets/KCqqG/), the grid still twitch.
    What else can I do?

    Best regards,

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

You must be logged in to reply to this topic.