why jqxgrid unchecked checkbox or radiobutton column in scroll grid?

Question

I use jqxwidgets grid (jqxgrid) by a renderer column that is radiobutton and checked true or false by rowdata value, when checked multiple radio and scroll grid ,unchecked checked radio buttons(change state).

cellsrenderer:function(,,rowdata){
    var radio = '<input type="radio" ' + rowdata.HasPermission?"checked":"" + '/>';
    return radio;
}

EDIT: Please run below snippet and check many radio then scroll grid, you see that unchecked old radio checked.

$(function() {
            //permission = > 1:read 2:write 3:read/write
            var data = [
            {id:1,rolename:"role1",permission:1},                                   {id:2,rolename:"role2"},
            {id:3,rolename:"role3"},
            {id:4,rolename:"role4",permission:2},
            {id:5,rolename:"role5",permission:1},                                   {id:6,rolename:"role6"},
            {id:7,rolename:"role7"},                                                 {id:8,rolename:"role8"},
            {id:9,rolename:"role9"},                                                 {id:10,rolename:"role10"},
            {id:11,rolename:"role11"},                                               {id:12,rolename:"role12"},
            {id:13,rolename:"role13"},                                                 {id:14,rolename:"role14"},            {id:15,rolename:"role15"},                                                 {id:16,rolename:"role16"},
            {id:17,rolename:"role17"},                                                 {id:18,rolename:"role18"},
            {id:19,rolename:"role19"},                                                 {id:20,rolename:"role20"},
            {id:21,rolename:"role21"},                                                 {id:22,rolename:"role22"},
            {id:23,rolename:"role23"},                                                 {id:24,rolename:"role24"},
            {id:25,rolename:"role25"},                                                 {id:26,rolename:"role26"},
            {id:27,rolename:"role27"},                                                 {id:28,rolename:"role28"},
            {id:29,rolename:"role29"},                                                 {id:30,rolename:"role30"},
            {id:31,rolename:"role31"},                                                 {id:32,rolename:"role32"},
            {id:33,rolename:"role33"},                                                 {id:34,rolename:"role34"},
            {id:35,rolename:"role35"},                                                 {id:36,rolename:"role36"},
            {id:37,rolename:"role37"},                                                 {id:38,rolename:"role38"},
            {id:39,rolename:"role39"},                                                 {id:40,rolename:"role40"}    
            ];
            // prepare the data
            var source =
            {
                datatype: "array",
                datafields: [
                { name: 'id', type: 'number' },
                    { name: 'rolename', type: 'string' },
                    { name: 'permission', type: 'number' }                   
                ],                
                id: 'id',
                localdata:data
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: "100%",
                height:400,
                source: dataAdapter,                
                pageable: false,
                autoheight: false,
                sortable: false,
                altrows: true,
                enabletooltips: true,
                editable: false,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                { datafield: 'id', hidden:true },
                { datafield: 'permission', hidden:true },
               { text: 'Role Name', datafield: 'rolename', width: 250 },
               {text:'Read',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var radio = "<input type='radio' name='"+rowdata.id+"'/>";
                return radio;
            }},
            {text:'Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var radio = "<input type='radio' name='"+rowdata.id+"'/>";
                return radio;
            }},
            {text:'Read/Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var radio = "<input type='radio' name='"+rowdata.id+"'/>";
                return radio;
            }}
               ]
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="grid"></div>

fore example ,i have a grid by 100 records that three column is radio, same as Permission(Read,Write,Read/Write), when checked some radio of grid and scroll after scroll grid unchecked all checked radio except radios that first load grid has checked. in scrolling grid cellsrenderer recall and change radio checked to old satate. — Mohsen, Dec 25 '17 at 13:41
you can see it, you can try it, i only can imagine that. I hope i have supernatural power to fix your code — plonknimbuzz, Dec 25 '17 at 13:52
i add a sample code for problem,please checked radio then scroll grid to down or up, you see unchecked old radio ckeckeded, for example please checked 'Read' radio of 'Role1' then scroll to down and scroll up,you see runchecked Role1 Read radio. — Mohsen, Dec 26 '17 at 05:47
1. jqxgrid not supported radio btn yet. 2. hard to create editable column, because jqxgrid always recreate dom when you scroll it down (weird). 3. the only example radio button is weird , you can check here http://www.jqwidgets.com/community/topic/radion-button-inside-jqxgrid/#post-85762 4. The possible way to do this is : 1st way. replace your radio button with 2 checkbox write and read (if both checked = R+W). 2nd way. replace radio with button which call modal form, 3rd way, migrate to other library like datatables which more customize compared jqxgrid in my subjective opinion — plonknimbuzz, Dec 26 '17 at 16:12
then you better to ask this on jqwidget forum or their github pages. because the moderator said that they dont support radio yet — plonknimbuzz, Jan 02 '18 at 05:54
then you better to ask this on jqwidget forum or their github pages. because the moderator said that they dont support radio yet — plonknimbuzz, Jan 02 '18 at 05:55

score 0 · Answer 1 · answered Feb 08 '18 at 14:42

i find a way to resolve my problem.tanks.

           var data = [];
$(function() {
debugger
           
            
            //permission = > 1:read 2:write 3:read/write
            data = [
            {id:1,rolename:"role1",permission:1},                                   {id:2,rolename:"role2"},
            {id:3,rolename:"role3"},
            {id:4,rolename:"role4",permission:2},
            {id:5,rolename:"role5",permission:1},                                   {id:6,rolename:"role6"},
            {id:7,rolename:"role7"},                                                 {id:8,rolename:"role8"},
            {id:9,rolename:"role9"},                                                 {id:10,rolename:"role10"},
            {id:11,rolename:"role11"},                                               {id:12,rolename:"role12"},
            {id:13,rolename:"role13"},                                                 {id:14,rolename:"role14"},            {id:15,rolename:"role15"},                                                 {id:16,rolename:"role16"},
            {id:17,rolename:"role17"},                                                 {id:18,rolename:"role18"},
            {id:19,rolename:"role19"},                                                 {id:20,rolename:"role20"},
            {id:21,rolename:"role21"},                                                 {id:22,rolename:"role22"},
            {id:23,rolename:"role23"},                                                 {id:24,rolename:"role24"},
            {id:25,rolename:"role25"},                                                 {id:26,rolename:"role26"},
            {id:27,rolename:"role27"},                                                 {id:28,rolename:"role28"},
            {id:29,rolename:"role29"},                                                 {id:30,rolename:"role30"},
            {id:31,rolename:"role31"},                                                 {id:32,rolename:"role32"},
            {id:33,rolename:"role33"},                                                 {id:34,rolename:"role34"},
            {id:35,rolename:"role35"},                                                 {id:36,rolename:"role36"},
            {id:37,rolename:"role37"},                                                 {id:38,rolename:"role38"},
            {id:39,rolename:"role39"},                                                 {id:40,rolename:"role40"}    
            ];
            // prepare the data
            var source =
            {
                datatype: "array",
                datafields: [
                { name: 'id', type: 'number' },
                    { name: 'rolename', type: 'string' },
                    { name: 'permission', type: 'number' }                   
                ],                
                id: 'id',
                localdata:data
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: "100%",
                height:400,
                source: dataAdapter,                
                pageable: false,
                autoheight: false,
                sortable: false,
                altrows: true,
                enabletooltips: true,
                editable: false,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                { datafield: 'id', hidden:true },
                { datafield: 'permission', hidden:true },
               { text: 'Role Name', datafield: 'rolename', width: 250 },
               {text:'Read',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var checked = rowdata.permission == 1?"checked":"";
                var radio = "<input type='radio' name='"+rowdata.id+"' onclick='checkedX(this);' value='1' " +checked+ "/>";
                return radio;
            }},
            {text:'Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
            var checked = rowdata.permission == 2?"checked":"";
                var radio = "<input type='radio' name='"+rowdata.id+"' onclick='checkedX(this);'  value='2' " +checked+ "/>";
                return radio;
            }},
            {text:'Read/Write',width:50,cellsrenderer:function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
            var checked = rowdata.permission == 3?"checked":"";
                var radio = "<input type='radio' name='"+rowdata.id+"' onclick='checkedX(this);'  value='3' " +checked+ "/>";
                return radio;
            }}
               ]
            });           

            
        });
        
        function checkedX(element){
                debugger
               var $this = $(element);
               var roleid = $this.attr("name");
                var filteredData = data.filter(function(item){
                    return item.id == roleid * 1;
                });
                if(filteredData && filteredData.length>0){
                    var item = filteredData[0];
                    item.permission = $this.val()*1;
                }
                $("#grid").jqxGrid('updatebounddata');
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="grid"></div>

why jqxgrid unchecked checkbox or radiobutton column in scroll grid?

1 Answers1