GRID NOT RERENDERING

[antrax13Participant]

Hi and thank you to that person who will make this working.

Just to describe issue.

I have 2 tabs. When second tab is clicked I need to refresh data. This is working and data is refreshed ALWAYS also FIRST time I will click on tab imagerendererRC is called and icon for tickbox is showing.
Now when I click on first tab and back to SECOND tab I will call the getReviewTechnique() function that will refresh data but imagerendererRC is not called anymore so instead of ICON for TICKBOX column I see default jqxwidget checkboxes.
So the question is how to make sure that imagerendererRC is executed and icons are shown when getReviewTechnique() function is called.

please note this imagerendererRC because it is run just once for what ever reason and I need it to run everytime

var imagerendererRC = function(row,datafield, value){
                    console.log(row+' - '+datafield+' - '+value);
                    if(value){
                        return '<span class="fa fa-check" alt="" title="Selected" style="vertical-align:middle; line-height: 25px; padding: 2px 0 0 24px; color: green; font-size: 20px;"></span>';
                    }else{
                        return '<span class="fa fa-remove" alt="" title="Not Selected" style="vertical-align:middle; line-height: 25px; padding: 2px 0 0 26px; color: red; font-size: 20px;"></span>';
                    }
                }
                var cellclassname = function (row, columnfield, value, rowdata) {
                    if(rowdata.isInTechnique == false){
                        return 'red';
                    }
                }

This is a function to get data for grid

function getReviewTechnique(){
                    var id= $("#id").val();
                    var itemSource = {
                        datatype: "json",
                        datafields: [
                            {name: 'id'},
                            {name: 'technique', type: 'bool', cellsalign: 'center'}
                        ],
                        url: 'controllers/getTICKBOX.php',
                        method: 'GET',
                        data: {id: id},
                        async: true
                    };
                    var itemDataAdapter = new $.jqx.dataAdapter(itemSource);
                    
                    $("#jqxReviewGrid").jqxGrid({
                        width: '100%',
                        source: itemDataAdapter,
                        sortable: true,
                        altrows: true,
                        editable: false,
                        showfilterrow: true,
                        filterable: true,
                        columns: [
                            {text: 'id', datafield: 'id', hidden: true},
                            {text: 'TICKBOX', datafield: 'technique', filterable: true, filtertype: 'bool', columntype: 'checkbox', width: 70, cellsalign: 'center', cellclassname: cellclassname,cellsrenderer: imagerendererRC}
                        ]
                    });
                };

Following code is just to show when I click on tab

$("#reviewtechniquetab").click(function(){
                    getReviewTechnique();
                });

[antrax13Participant]

$("#jqxReviewGrid").on('bindingcomplete',function(){
                   $(this).jqxGrid('refresh');
               });

this seems to fix it

[antrax13Participant]

this has throw new issue….
with sizing suddenly I have horizontal scrollbar …

[HristoParticipant]

Hello antrax13,

You should do some changes, it is not recommended to initialize widgets in function.
I mean your getReviewTechnique function there you should update only the source.
Please, take a look at this example.
The initialization has to happen just once.
Could you tell is there any error message in the console?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts