jQuery UI Widgets › Forums › Grid › Stuck after adding one value
Tagged: add row, addrow, angular grid, commit, CRUD, database, grid, id, jquery grid, jqxgrid, refreshfilterrow, server-side, updatebounddata
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years ago.
-
Author
-
Hello,
After adding values to row not able to add values again and got stuck there. Problem may be with “$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);” if i use updatebounddata to refresh grid then it stuck there, if i use ” refreshfilterrow ” function it shows error for process not completed.
Here is my code Thanks in advance.
<script type=”text/javascript”>
$(document).ready(function ()
{
// inizializzo lo splitter
// $(“#vSplitter”).jqxSplitter({ width: ‘100%’, height: ‘100%’, showSplitBar: true, resizable: true, orientation: ‘vertical’, theme: ‘bootstrap’, panels: [{ size: 200, collapsible: true }] });// prepare the data
var theme = ‘bootstrap’;// prepare the data
var data = {};
var theme = ‘classic’;
var name = [“Nancy”, “Andrew”, “Janet”, “Margaret”, “Steven”, “Michael”, “Robert”, “Laura”, “Anne”];
var provvigione = [“Davolio”, “Fuller”, “Leverling”, “Peacock”, “Buchanan”, “Suyama”, “King”, “Callahan”, “Dodsworth”];
var generaterow = function(id)
{
var row = {};
var k = Math.floor(Math.random() * name.length);
//var surname = Math.floor(Math.random() * surname.length);
//var username = Math.floor(Math.random() * username.length);
//var password = Math.floor(Math.random() * password.length);
//var email = Math.floor(Math.random() * email.length);row[“codice”] = id;
row[“nome”] = name[k];
row[“provvigione”] = provvigione[k];
return row;
}var source =
{
datatype: “json”,
datafields: [
{ name: ‘codice’},
{ name: ‘nome’},
{ name: ‘provvigione’}
],
id: ‘codice’,
url: ‘<?php echo site_url(“/Dashboard/agentSData”) ?>’,
//—-ADD ROW——-
addrow: function (rowid, rowdata, position, commit)
{
var numbersString = $.param(rowdata);
var aa = numbersString.replace(/nome=|provvigione=/g,”);
var numbersArray = aa.split(‘&’);var nome = numbersArray[0];
var provvigione = numbersArray[1];if(nome == ” || provvigione ==”)
{
$(“#all_require”).jqxNotification({
width: 850, position: “top-right”, opacity: 0.9,
autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 3000, blink: false, template: “warning”
});
$(“#all_require”).jqxNotification(“open”);
return false;
}
else
{
//alert(‘1’);
var data = “insert=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘<?php echo site_url(“/Dashboard/agentsAddData/”);?>’,
data: data,
cache: false,
success: function (data, status, xhr)
{
//alert(‘2’);
commit(true);
$(“#row_add”).jqxNotification({
width: 850, position: “top-right”, opacity: 0.9,
autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 3000, blink: false, template: “success”
});
$(“#row_add”).jqxNotification(“open”);
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
//$(‘#jqxgrid’).jqxGrid(‘clearfilters’);
//$(“#jqxgrid”).jqxGrid(‘clearfilters’);
//$(“#jqxgrid”).jqxGrid({ source: dataAdapter });
//$(“#jqxgrid”).jqxGrid(‘refreshdata’);
//$(“#jqxgrid”).jqxGrid(‘refresh’);
//var dataAdapter = new $.jqx.dataAdapter(source);
//$(“#jqxgrid”).jqxGrid({ source: dataAdapter });},
//–UPDATE ROW——————error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
}
},
//—DELETE ROW——————
deleterow: function (rowid, commit)
{
var data = “delete=true&” + $.param({agentid: rowid});
$.ajax({
dataType: ‘json’,
url: ‘<?php echo site_url(“/Dashboard/agentsDelete”) ?>’,
cache: false,
data: data,
success: function(data, status, xhr)
{$(“#row_delete”).jqxNotification({
width: 850, position: “top-right”, opacity: 0.9,
autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 3000, blink: false, template: “success”
});
$(“#row_delete”).jqxNotification(“open”);commit(true);
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
//$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
//$(‘#jqxgrid’).jqxGrid(‘refreshfilterrow’);
//$(“#jqxgrid”).jqxGrid(‘refreshdata’);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
},
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘57.5%’,
filterable: true,
source: dataAdapter,
theme: theme,
autoheight: true,
pageable: true,
virtualmode: true,
showeverpresentrow: true,
everpresentrowposition: “top”,
everpresentrowactions: “add reset”,
everpresentrowactionsmode: “columns”,
editable: true,
editmode: ‘dblclick’,
selectionmode: ‘checkbox’,
altrows: true,
sortable: true,
rendergridrows: function () {
return dataAdapter.records;
},
columns: [
//{ text: ‘User ID’, editable: false, datafield: ‘EmployeeID’, width: 100 },
{ text: ‘CODAGE’, editable: false, datafield: ‘codice’, width: 200, cellsalign: ‘center’,
initEverPresentRowWidget: function (datafield, htmlElement)
{
var input = htmlElement.find(‘input’);
input.attr(‘readonly’, true);
input.attr(‘disabled’, true);
htmlElement.addClass(‘jqx-fill-state-disabled’);
}
},
{ text: ‘DESCAGE’, datafield: ‘nome’, width: 200, cellsalign: ‘left’},
{ text: ‘PROVVAGE’, datafield: ‘provvigione’, width: 200, cellsalign: ‘right’} ,
{ text: ”, datafield: ‘addButtonColumn’, width: 111},
{ text: ”, datafield: ‘resetButtonColumn’, width: 112}
]
});
$(“#deleterowbutton”).jqxButton({ theme: theme });
$(“#deleterowbutton”).bind(‘click’, function ()
{
var rowIndexes = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindexes’);
var rowIds = new Array();
for (var i = 0; i < rowIndexes.length; i++) {
var currentId = $(‘#jqxgrid’).jqxGrid(‘getrowid’, rowIndexes[i]);
rowIds.push(currentId);
};
$(‘#jqxgrid’).jqxGrid(‘deleterow’, rowIds);
$(‘#jqxgrid’).jqxGrid(‘clearselection’);
});$(‘#textboxeditorjqxgridpassword’).css(‘background’,’red’);
});
</script>Hello vicky,
In the addrow callback function,
commit(true);
updates the client-side grid. That is why you do not need to call updatebounddata. Please take a look at our help topic Build CRUD Web App with jqxGrid using PHP and MySQL, which showcases a correct implementation including the addrow callback.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
If i remove updatebounddata it’s not updating rowid and started showing from 1,2,3. Response from database is coming as expected but when appends data then it changes id to 0,1,2 etc.
Regards,
Vikash THakurHi Vikash THakur,
In addrow, the commit callback has a second parameter you can set to synchronise the grid row ids with the ids of database records. For more information, please take a look at this forum post: http://www.jqwidgets.com/community/topic/getting-the-database-generated-id-when-adding-row/#post-52646.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.