Add row acts weird on checkbox

[ashwin prabhuParticipant]

Hi,

I have a function which adds rows to a grid when a button is clicked. The rows gets added correctly with null values… suppose, i click the button thrice, three rows gets added. Now, if i try to delete a particular row, the rows below that deleted row gets affected. i.e. the checkbox only gets affected of added rows. It doesnot show a tick mark or a blank box. Instead it shows a black box.

I have added the below image for reference. If you check the solutions tab, it has the blacked out checkbox. I get those checkboxes in my row. How do i avoid getting those in my page ?

[ashwin prabhuParticipant]

Here is my code

script is as follows:

function addrow() {
			\$('#jqxgrid').jqxGrid('addrow', null, {}, 'first');
			   }

Inside .jqxgrid({

renderer: function() {
							return '<button id=add onclick="addrow()"><img src="..../jqwidgets-ver3.5.0/jqwidgets/styles/images/add.png" width="13px" height="13px" /></button>';
						},

I have used renderer to show add button as a column header. If i click add button, row gets added…

[DimitarParticipant]

Hi ashwin prabhu,

Could you share a JSFiddle/jsEditor example demonstrating the issue? Make sure you are using the latest version of jQWidgets (3.8.1).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[ashwin prabhuParticipant]

Hi Dimitar,

Here is the link. https://www.jseditor.io/?key=click-on-edit-tab-dropdown-menu-items-in-grid-doesnt-show-up

This link was posted by Ivalio when i had some other issue. We can use this same example.

1) There is a ADD ROW button at the top. Please click it 4-5 times and 5 new rows will be added to the grid with empty cells.
2) Now, click on any one of the checkboxes. The other checkboxes will be affected by it. This is the same error i get in my webpage.

Any suggestions to avoid this situation ?

[ashwin prabhuParticipant]

i suspect there is some issue with this function.

function addrow() {
                            $('#jqxgrid').jqxGrid('addrow', null, {}, 'first');
                        }

We write null values to cell whenever we create a row. Should we replace the null values for checkbox with either true or false ? If yes, could you please let me know how to write null values for other columns and true, false condition for checkbox.

[DimitarParticipant]

Hi ashwin prabhu,

Indeed, this is what causes the issue. Changing the addrowbutton click handler to the following should fix it:

$("#addrowbutton").on('click', function() {
    var row = {
        Order: null,
        Id: null,
        Comment: null,
        Id_Type: null,
        UbAction: null,
        LbAction: null,
        Ub_Factorc: false,
        Lb_Factorc: false

    };
    var commit = $("#jqxgrid").jqxGrid('addrow', null, row, 'first');
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[ashwin prabhuParticipant]

Hi dimitar,

Thanks. I have a slight change in my code. I want the add button to act as a column header. Here is the link

https://www.jseditor.io/?key=click-on-add-row-checkbox-behaves-different

If i click on the square box which is a column header, new rows gets added. If i now click on this new checkbox, it behaves different. How can i edit this code to make it functional in this case. Here is the code

 text: 'Add row',
                            sortable: false,
                            datafield: 'Delete',
                            renderer: function() {
                                return '<button id=add onclick="addrow()"></button>';
                            },
                            columntype: 'button',

function addrow() {
           $('#jqxgrid').jqxGrid('addrow', null, {}, 'first');
        }

I want to edit the above addrow function like u did for the addrowbutton() in the previous comment of yours. Can you please shed some light into this.

[ashwin prabhuParticipant]

aaghh, same function did work.. When i tried replacing the code, it gave me an error. so i thought maybe there is a different way of initializing in case of renderer buttons. It works now. thanks

[Author]

Posts