jQWidgets Forums

Tagged: datagrid delete multiple rows, jqwidgets datagrid delete rows

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

problem in deleting multiple rows Posts
January 2, 2014 at 10:02 pm problem in deleting multiple rows #47154

okasha
Participant

hi peter please help me to find the problem in this code

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>المستخدمين</title>
<link rel=”stylesheet” href=”<?= base_url(); ?>css/main.css” type=”text/css” />

<link rel=”stylesheet” href=”<?= base_url(); ?>js/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”<?= base_url(); ?>js/jquery-2.0.3.min.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxcombobox.js”></script>

<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”<?= base_url(); ?>js/jqwidgets/jqxgrid.pager.js”></script>

<script type=”text/javascript” src=”<?= base_url(); ?>js/scripts/gettheme.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
var theme = ‘classic’;
var localizationobj = {};
localizationobj.pagergotopagestring = “اذهب الى “;
localizationobj.pagershowrowsstring = “عدد الصفوف بالصفحة”;
localizationobj.pagerrangestring = ” of “;
localizationobj.pagernextbuttonstring = “التالي”;
localizationobj.pagerpreviousbuttonstring = “السابق”;
localizationobj.sortascendingstring = “ترتيب تصاعدي”;
localizationobj.sortdescendingstring = “ترتيب تنازلي”;
localizationobj.sortremovestring = “ازالة الترتيب”;
localizationobj.firstDay = 1;
localizationobj.percentsymbol = “%”;
localizationobj.currencysymbol = “€”;
localizationobj.currencysymbolposition = “before”;
localizationobj.decimalseparator = “.”;
localizationobj.thousandsseparator = “,”;
localizationobj.emptydatastring= “لاتوجد بيانات للعرض”;
var days = {
// full day names
names: [“الاحد”, “الاثنين”, “الثلاثاء”, “الاربعاء”, “الخميس”, “الجمعة”, “السبت”],
// abbreviated day names
namesAbbr: [“الاحد”, “الاثنين”, “الثلاثاء”, “الاربعاء”, “الخميس”, “الجمعة”, “السبت”],
// shortest day names
namesShort: [“الاحد”, “الاثنين”, “الثلاثاء”, “الاربعاء”, “الخميس”, “الجمعة”, “السبت”]
};
localizationobj.days = days;
var months = {
// full month names (13 months for lunar calendards — 13th month should be “” if not lunar)
names: [“يناير”, “فبراير”, “مارس”, “ابريل”, “مايو”, “يونيو”, “يوليو”, “اغسطس”, “سبتمبر”, “اكتوبر”, “نوفمبر”, “ديسمبر”, “”],
// abbreviated month names
namesAbbr: [“يناير”, “فبراير”, “مارس”, “ابريل”, “مايو”, “يونيو”, “يوليو”, “اغسطس”, “سبتمبر”, “اكتوبر”, “نوفمبر”, “ديسمبر”, “”]
};
localizationobj.months = months;
// apply localization.

$(“#user_f_name”).jqxInput({ width: ‘250px’, height: ’25px’});
$(“#user_l_name”).jqxInput({ width: ‘250px’, height: ’25px’});
$(“#user_name”).jqxInput({ width: ‘250px’, height: ’25px’});

$(“#user_email”).jqxInput({ width: ‘250px’, height: ’25px’});

$(“#user_password”).jqxInput({ width: ‘250px’, height: ’25px’});

var user_roles=[{ “role_text”:”” , “role_value”:”” },{ “role_text”:”admin” , “role_value”:”1″ },{ “role_text”:”user” , “role_value”:”2″ }];
$(“#user_role”).jqxComboBox({ selectedIndex: 0, source: user_roles, displayMember: “role_text”, valueMember: “role_value”, width: 200, height: 25});

var user_status=[{ “status_text”:”” , “status_value”:”” },{ “status_text”:”un banned” , “status_value”:”1″ },{ “status_text”:”banned” , “status_value”:”2″ }];
$(“#user_status”).jqxComboBox({ selectedIndex: 0, source: user_status, displayMember: “status_text”, valueMember: “status_value”, width: 200, height: 25});

var source =
{
datatype: “json”,
datafields: [
{ name: ‘user_code’ },
{ name: ‘user_name’ },
{ name: ‘user_email’ },
{ name: ‘user_f_name’ },
{ name: ‘user_l_name’ },
{ name: ‘user_role’ },
{ name: ‘user_status’ },
{ name: ‘تعديل’ }
],
id: ‘user_code’,
url: ‘http://localhost/portal/index.php/admin/users/display’,
root: ‘Users’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},
updaterow: function (rowid, rowdata, commit) {
// alert(rowdata[“user_name”]);
//console.log(rowdata);
var data=rowdata;
$.ajax({
type:”post”,
dataType: ‘json’,
url: ‘http://localhost/portal/index.php/admin/users/update’,
data: data,
success: function (data, status, xhr) {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);

$(‘#jqxgrid’).jqxGrid(‘unselectrow’, selectedrowindex);
//alert(rowid);
commit(true);
},
error: function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);

$(‘#jqxgrid’).jqxGrid(‘unselectrow’, selectedrowindex);
//alert(rowid);
commit(false);
}
});
//alert(“update”);
},
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
var data = rowdata;
$.ajax({
type:”post”,
dataType: ‘json’,
url: ‘http://localhost/portal/index.php/admin/users/add’,
data: data,
cache: false,
success: function (data, status, xhr) {
// insert command is executed.
rowdata.user_code=data;
//$(‘#jqxgrid’).jqxGrid(‘refresh’);
commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
},
deleterow: function (rowid, commit) {
var data={};
data[“selected_ids”] = rowid;
$.ajax({
type:”post”,

dataType: ‘json’,
url: ‘http://localhost/portal/index.php/admin/users/delete’,
cache: false,
data: data,
success: function (data, status, xhr) {
// delete command is executed.
//alert(“deleted”);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
}
};
var dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1000,
rtl:true,
selectionmode: ‘checkbox’,
source: dataadapter,
theme: theme,
autoheight: true,
pageable: true,
localization:localizationobj,
virtualmode: true,
rendergridrows: function () {
return dataadapter.records;
},
columns: [
{ text: ‘كود المستخدم’, datafield: ‘user_code’, width: 100,cellsalign:’right’ },
{ text: ‘اسم المستخدم’, datafield: ‘user_name’, width: 100,cellsalign:’right’ },
{ text: ‘البريد الالكتروني’, datafield: ‘user_email’, width: 250,cellsalign:’right’ },

{ text: ‘الاسم الاول’, datafield: ‘user_f_name’, width: 100,cellsalign:’right’ },
{ text: ‘الاسم الاخير’, datafield: ‘user_l_name’, width: 100 ,cellsalign:’right’},
{ text: ‘الدور’, datafield: ‘user_role’, width: 100 ,cellsalign:’right’},
{ text: ‘الحالة’, datafield: ‘user_status’, width: 100 ,cellsalign:’right’},

{ text:’تعديل’,width:80,columntype:”button”, cellsrenderer: function () {
return “تعديل”;
}, buttonclick: function (row) {
editrowindex = row;
//alert(editrowindex);
$(“#add_update_buttons”).html(‘ <input type=”button” value=”تحديث” id=”update_user” > <input type=”button” value=”الغاء” id=”cancel_update” >’);

$(‘#jqxgrid’).jqxGrid(‘selectrow’, editrowindex);

var id = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_code”);

$(‘#jqxwindow’).jqxWindow({rtl : true});
$(“#jqxwindow”).jqxWindow({ width: 400, height: 300,rtl:true });

$(‘#jqxwindow’).jqxWindow({ title: ‘تعديل بيانات مستخدم’ });

$(“#cancel_update”).jqxButton({ width: ‘100’, height: ’25’});
$(“#update_user”).jqxButton({ width: ‘100’, height: ’25’});

$(“#user_code”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_code”));

$(“#user_f_name”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_f_name”));
$(“#user_l_name”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_l_name”));
$(“#user_name”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_name”));

$(“#user_email”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_email”));
$(“#user_role”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_role”));
$(“#user_status”).val($(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “user_status”));

/* $(‘#update’).on(‘click’, function () {
var datarow={};

$(“#jqxgrid”).jqxGrid(‘updaterow’, id, datarow);
}); */

$(‘#cancel_update’).on(‘click’, function () { $(‘#jqxgrid’).jqxGrid(‘unselectrow’, $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’));
$(“#jqxwindow”).jqxWindow(“close”);
});

$(‘#update_user’).click( function () {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
//alert(id);
//var rowdata = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, selectedrowindex);
var rowdata={};
rowdata[“user_code”]=$(“#user_code”).val();
rowdata[“user_name”]=$(“#user_name”).val();
rowdata[“user_email”]=$(“#user_email”).val();
rowdata[“user_password”]=$(“#user_password”).val();
rowdata[“user_f_name”]=$(“#user_f_name”).val();
rowdata[“user_l_name”]=$(“#user_l_name”).val();
rowdata[“user_role”]=$(“#user_role”).val();
rowdata[“user_status”]=$(“#user_status”).val();
//$(‘#jqxgrid’).jqxGrid(‘unselectrow’, selectedrowindex);

$(“#jqxgrid”).jqxGrid(‘updaterow’, id, rowdata);

$(“#jqxwindow”).jqxWindow(“close”);
//alert(“klkk”);
});

$(“#jqxwindow”).jqxWindow(“show”);

}}
]
});

$(“#add_new_user”).jqxButton({ width: ‘100’, height: ’25’});
$(“#delete_selected”).jqxButton({ width: ‘100’, height: ’25’});

$(‘#add_new_user’).click( function () {
$(‘#jqxwindow’).jqxWindow({rtl : true});
$(“#jqxwindow”).jqxWindow({ width: 400, height: 300,rtl:true });

$(‘#jqxwindow’).jqxWindow({ title: ‘اضافة مستخدم جديد’ });

$(“#user_code”).val(“”);

$(“#user_f_name”).val(“”);
$(“#user_l_name”).val(“”);
$(“#user_name”).val(“”);

$(“#user_email”).val(“”);
$(“#user_password”).val(“”);
$(“#user_role”).val(“”);
$(“#user_status”).val(“”);

var user_roles=[{ “role_text”:”admin” , “role_value”:”1″ },{ “role_text”:”user” , “role_value”:”2″ }];
$(“#user_role”).jqxComboBox({ selectedIndex: 0, source: user_roles, displayMember: “role_text”, valueMember: “role_value”, width: 200, height: 25});

var user_status=[{ “status_text”:”un banned” , “status_value”:”1″ },{ “status_text”:”banned” , “status_value”:”2″ }];
$(“#user_status”).jqxComboBox({ selectedIndex: 0, source: user_status, displayMember: “status_text”, valueMember: “status_value”, width: 200, height: 25});

/*
$(“#update_user”).attr(“value”,”اضافة مستخدم”);
$(“#update_user”).attr(“id”,”add_user”);

$(“#cancel_update”).attr(“id”,”cancel_add”); */

$(“#add_update_buttons”).html(‘ <input type=”button” value=”اضافة مستخدم” id=”add_user” > <input type=”button” value=”الغاء” id=”cancel_add” >’);

$(‘#cancel_add’).on(‘click’, function () {
$(“#jqxwindow”).jqxWindow(“close”);
});
$(“#jqxwindow”).jqxWindow(“show”);

$(‘#add_user’).click( function () {

var rowdata={};

rowdata[“user_name”]=$(“#user_name”).val();
rowdata[“user_email”]=$(“#user_email”).val();
rowdata[“user_password”]=$(“#user_password”).val();
rowdata[“user_f_name”]=$(“#user_f_name”).val();
rowdata[“user_l_name”]=$(“#user_l_name”).val();
rowdata[“user_role”]=$(“#user_role”).val();
rowdata[“user_status”]=$(“#user_status”).val();
//var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
$(“#jqxgrid”).jqxGrid(‘addrow’,{}, rowdata);

$(“#jqxwindow”).jqxWindow(“close”);
//alert(“klkk”);
});

});

$(‘#delete_selected’).click( function () {
var selected_indexes = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindexes’);
var selected_ids=new Array();
//console.log(selected_indexes);
jQuery.each(selected_indexes, function(index, value) {
selected_ids[index]=$(“#jqxgrid”).jqxGrid(‘getrowid’, value);
});
//console.log (selected_ids);
//var data={};
//data[“selected_ids”]=selected_ids;
$(“#jqxgrid”).jqxGrid(‘deleterow’,selected_ids );
$(“#jqxgrid”).jqxGrid(‘clearselection’);
//alert(“klkk”);
});

});

</script>

</head>
<body style=”text-align: right;direction: rtl;” class=”default” >

<div id=”jqxgrid”></div>
<input type=”button” value=”اضافة مستخدم” id=”add_new_user” >
<input type=”button” value=”حذف المحدد” id=”delete_selected” >

<div style=”display:none;” id=’jqxwindow’>
<div id=”header”></div>
<div style=”text-align: right;” id=”content”>

<table width=”100%” border=”0″ dir=”rtl” style=”text-align: right;”>

<tr>
<td>الاسم الاول</td>
<td><input type=”text” name=”user_f_name” id=”user_f_name” > </td>

</tr>

<tr>
<td>الاسم الاخير</td>
<td> <input type=”text” name=”user_l_name” id=”user_l_name” >
</td>

</tr>

<tr>
<td>اسم المستخدم</td>
<td> <input type=”text” name=”user_name” id=”user_name” >
</td>

</tr>

<tr>
<td>البريد الالكتروني</td>
<td> <input type=”text” name=”user_email” id=”user_email” >
</td>

</tr>

<tr>
<td>كلمة المرور</td>
<td> <input type=”text” name=”user_password” id=”user_password” >
</td>

</tr>

<tr>
<td>نوع المستخدم</td>
<td> <div id=”user_role”></div>
</td>

</tr>

<tr>
<td>حالة المستخدم</td>
<td> <div id=”user_status”></div>
</td>

</tr>

<tr>
<td><input type=”hidden” name=”user_code” id=”user_code” > </td>
<td id=”add_update_buttons” >

</td>

</tr>
</table>

</div>

</div>

</body>
</html>

thank you in advance

January 2, 2014 at 11:10 pm problem in deleting multiple rows #47157
Peter Stoev
Keymaster
Hi okasha,

Example for deleting Multiple Rows in jqxGrid using jQWidgets 3.1.0:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = {};

            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];

            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];

            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];

            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];

            var generaterow = function (i) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                return row;
            }

            for (var i = 0; i < 10; i++) {
                var row = generaterow(i);
                data[i] = row;
            }

            var source =
            {
                localdata: data,
                datatype: "local",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                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.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    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 dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                height: 350,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            $("#deleterowbutton").jqxButton();
           
            // delete row.
            $("#deleterowbutton").on('click', function () {
                var rows = $("#jqxgrid").jqxGrid('getrows');
                var ids = new Array();
                for (var i = 0; i < rows.length; i++) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', i);
                    ids.push(id);
                }
                $("#jqxgrid").jqxGrid('deleterow', ids);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid">
        </div>
        <div style="margin-left: 10px; float: left;">
            <div style="margin-top: 10px;">
                <input id="deleterowbutton" type="button" value="Delete All Rows" />
            </div>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.