deleting rows based on checkbox selection in custom column

[mailstoakhilParticipant]

hi can you help me with deleting rows by selecting checkboxs.the checkbox column is created by myself and not the one which we enable thorught multiple select.

thanks in advance?

[ivailoParticipant]

Hi mailstoakhil,

If you uses selectionmode: 'checkbox', this topic will be helpfull for you.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[mailstoakhilParticipant]

hi Ivailo Ivanov,i am not using this type i am using this http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/checkboxcolumn.htm?arctic

one. and i need to delete the ones which are checked.

thanks in advance.

[ChristianBParticipant]

Hi mailstoakhil,
maybe this can be a solution:

var data = '[{ "enable": "false", "CompanyName": "Alfreds Futterkiste",  "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "enable": "false", "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "enable": "false", "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "enable": "false", "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "enable": "false", "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "enable": "false", "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "enable": "false", "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "enable": "false", "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "enable": "false", "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "enable": "false", "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "enable": "false", "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "enable": "false", "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "enable": "false", "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "enable": "false", "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "enable": "false", "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "enable": "false", "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "enable": "false", "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "enable": "false", "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "enable": "false", "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "enable": "false", "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
   var source =
   {
       datatype: "json",
       datafields: [
           { name: 'CompanyName', type: 'string' },
           { name: 'ContactName', type: 'string' },
           { name: 'ContactTitle', type: 'string' },
           { name: 'Address', type: 'string' },
           { name: 'City', type: 'string' },
           { name: 'enable', type: 'bool'},
           { name: 'Country', type: 'string' }
       ],
       localdata: data
   };
   var dataAdapter = new $.jqx.dataAdapter(source);
   $("#jqxgrid").jqxGrid(
   {
       width: 850,
       source: dataAdapter,
       editable: true,
       columns: [
           { text: 'Company Name', datafield: 'CompanyName', width: 250, editable: false },
           { text: 'Contact Name', datafield: 'ContactName', width: 150, editable: false },
           { text: 'Contact Title', datafield: 'ContactTitle', width: 180, editable: false },
           { text: 'DelCheck', dataField: 'enable', width: 30, columntype: 'checkbox' },
           { text: 'City', datafield: 'City', width: 120, editable: false },
           { text: 'Country', datafield: 'Country', editable: false}
       ]
   });
    
$("#jqxgrid").on('cellendedit', function (event) {
	//Get Grid Data
	var rows = $('#jqxgrid').jqxGrid('getrows');
	//Create a new array
	var data = [];
	//Proof Grid-Array -> Checkbox
	for(var i = 0; i< rows.length; i++){
		if(rows[i].enable == false){
			//Take unchecked Rows to the new array
			data.push(rows[i]);
			//console.log('add:' + JSON.stringify(rows[i]));
		}else{
			//console.log('remove:' + JSON.stringify(rows[i]));
			//this is the point to call a ServerSide-Script i.e. php
			//for remove checked rows from your DB
		}
	}
	
	//build a new source
	var source =
    {
        datatype: "json",
        datafields: [
            { name: 'CompanyName', type: 'string' },
            { name: 'ContactName', type: 'string' },
            { name: 'ContactTitle', type: 'string' },
            { name: 'Address', type: 'string' },
            { name: 'City', type: 'string' },
            { name: 'enable', type: 'bool'},
            { name: 'Country', type: 'string' }
        ],
        localdata: JSON.stringify(data)
    };
	//build a new dataAdapter with clean data without checked Rows
	var dataAdapter = new $.jqx.dataAdapter(source);
	//bind it to your Grid
    $("#jqxgrid").jqxGrid({source: dataAdapter});
});

[ivailoParticipant]

Hi mailstoakhil,

You can try this demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts