deleterow deletes wrong indexes in grid

[jqxforum1234Participant]

Hi,

I have a button to delete multiple checked rows in grid. But somehow it behaves weird and deletes some randow indexes.

Grid:

$("#statusTrend").jqxGrid(
            {
				width: '100%',
                source: individualReleaseStatusAdapter,                
                pageable: true,
				//height:'100%',
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
				selectionmode: 'checkbox',
				theme: 'arctic',
                editable: true,
                //showemptyrow: true,
                columns: [
                  { text: 'BU', datafield: 'BUSINESS_UNIT_ID', enablehover: true , width: 'auto', columntype: 'dropdownlist', displayField:'BUSINESS_UNIT_NAME', valueField:'BUSINESS_UNIT_ID', createeditor: function (row, cellvalue, editor) {
						editor.jqxDropDownList({source: buAdapter, displayMember: "BUSINESS_UNIT_NAME", valueMember: "BUSINESS_UNIT_ID"});
				  }},
                  { text: 'Status', datafield: 'STATUS_ID', width: 'auto',  columntype: 'dropdownlist', displayField:'STATUS_NAME', valueField:'STATUS_ID', createeditor: function (row, cellvalue, editor) {
						editor.jqxDropDownList({source: statusAdapter, displayMember: "STATUS_NAME", valueMember: "STATUS_ID"});
				  }},
                  { text: 'Trend',hidden:true, datafield: 'TREND_ID', width: 'auto', columntype: 'dropdownlist', displayField:'TREND_NAME', valueField:'TREND_ID', createeditor: function (row, cellvalue, editor) {
						editor.jqxDropDownList({source: trendAdapter, displayMember: "TREND_NAME", valueMember: "TREND_ID"});
				  }},
                  { text: 'Display Order', datafield: 'DISPLAY_ORDER', width: 'auto', columntype: 'numberinput' },
                  { text: 'Exclude', twostatecheckbox: true, datafield: 'EXCLUDE', columntype: 'checkbox',width:'auto'}
                ],
				showstatusbar: true,
                renderstatusbar: function (statusbar) {
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px; height:250px;'></div>");
                    var addButton = $("<div style='float: left; margin-left: 2px;'><img style='position: relative; margin-top: 2px;' src='/rtrack/resources/jqx/images/add.png'/><span style='margin-left: 2px; position: relative; top: -3px;'>Add</span></div>");
                    var deleteButton = $("<div style='float: left; margin-left: 2px;'><img style='position: relative; margin-top: 2px;' src='/rtrack/resources/jqx/images/close.png'/><span style='margin-left: 2px; position: relative; top: -3px;'>Delete</span></div>");
                    container.append(addButton);
                    container.append(deleteButton);
                    statusbar.append(container);
                    addButton.jqxButton({theme: 'darkblue',  width: 60, height: 20 });
                    deleteButton.jqxButton({theme: 'darkblue',   width: 75, height: 20 });
                     // add new row.
                             addButton.click(function (event) {
									//var selectedrowindex = $("#statusTrend").jqxGrid('getselectedrowindex');
									var data = {"DISPLAY_ORDER":"","RELEASE_STATUS_REPORT_ID":"","BUSINESS_UNIT_NAME":"Select BU","BUSINESS_UNIT_ID":"","STATUS_NAME":"green","STATUS_ID":1,"EXCLUDE":false,"TREND_NAME":"","TREND_ID":""};
									//$("#statusTrend").jqxGrid("addrow", selectedrowindex+1 , data, null);
									var commit = $("#statusTrend").jqxGrid('addrow', null, data);

                               });
                               
							   deleteButton.click(function (event) {
								   var selectedrowindex = $("#statusTrend").jqxGrid('getselectedrowindex');
								   var rowscount = $("#statusTrend").jqxGrid('getdatainformation').rowscount;
								   if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
										var id = $("#statusTrend").jqxGrid('getrowid', selectedrowindex);
										var commit = $("#statusTrend").jqxGrid('deleterow', id);
									}

                               });
                    

                    
             

                           }
            });

source and datadapter:

var individualReleaseStatusFields = [
										{ name: 'BUSINESS_UNIT_NAME' },
										{ name: 'BUSINESS_UNIT_ID' },
										{ name: 'STATUS_NAME' },
										{ name: 'STATUS_ID' },
										{ name: 'TREND_NAME' },
										{ name: 'TREND_ID' },
										{ name: 'DISPLAY_ORDER' },
										{ name: 'EXCLUDE'}
									];
	var individualReleaseStatusSource = {  datatype: "json" ,
								  datafields: individualReleaseStatusFields,
			                      localdata: releaseStatus,
								  addrow: function (rowid, rowdata, position, commit) {
										// synchronize with the server - send insert command
										// call commit with parameter true if the synchronization with the server is successful 
										//and with parameter false if the synchronization failed.
										commit(true);
									},
									deleterow: function (rowid, commit) {
										// synchronize with the server - send delete command
										// call commit with parameter true if the synchronization with the server is successful 
										//and with parameter false if the synchronization failed.
										commit(true);
									},
									updaterow: function (rowid, newdata, commit) {
										// synchronize with the server - send update command
										// call commit with parameter true if the synchronization with the server is successful 
										// and with parameter false if the synchronization failed.
										commit(true);
									}
								  }
			
    var individualReleaseStatusAdapter = new $.jqx.dataAdapter(
	individualReleaseStatusSource,{cache:false,
	loadComplete: function () {
				}
	});

[DimitarParticipant]

Hi jqxforum1234,

Your deleterow-related code seems correct. Moreover, it is similar to the one of the demo Statusbar, which, as you can see, works as expected. Please share if there are any errors thrown in your browser’s console and make sure you are using the latest version of jQWidgets (3.9.1). However, your code can Delete only one row at a time, not multiple selected rows.

Best Regards,
Dimitar

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

[Author]

Posts