[SyaiParticipant]

Hello peter,
Happy new year,may God bless you and your family………You doing wonderful job.

I have resolved the problems which I stated before.Today my question is can you please give me demo example of the all the operation(loading data,updating,inserting,using rowdetails and nested grid.) in jqxGrid using ajax call….most of your examples are from the generateddata() function.I know if there is no example then it may take some while but if you create once you can put it in the demo menu..it will benefit others also……Thanking you.

Best Regards
Syai

[SyaiParticipant]

Hello peter,
Happy new year,may God bless you and your family………You doing wonderful job.

I have resolved the problems which I stated before.Today my question is can you please give me demo example of the all the operation(loading data,updating,inserting,using rowdetails and nested grid.) in jqxGrid using ajax call….most of your examples are from the generateddata() function.I know if there is no example then it may take some while but if you create once you can put it in the demo menu..it will benefit others also……Thanking you.

Best Regards
Syai

[SyaiParticipant]

//Whenever this method is called an ajax call is made to the webservice to get values and call filessource method.
function Filedetails() {
var SaveORUpdate = $(“#<%=btnSave.ClientID%>”).val();
var checklistid = $(“#<%=hfChecklistID.ClientID%>”).val();
if (SaveORUpdate != “Save”) {
$.ajax({
type: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (data) {
debugger;
filessource(data.d);
},
error: function () {
alert(“There was an error connecting to the server!”);
}
});
}

}

//Files grid view.
function filessource(data) {
debugger;
_Column = [
{ text: ‘checklistid’, hidden: true, datafield: ‘intID’, width: “0%” },
{ text: ‘File type’, datafield: ‘FileType’, width: “20%” },
{ text: ‘File path’, datafield: ‘FilePath’, width: “50%” },
{ text: ‘File name’, datafield: ‘FileName’, width: ‘30%’ }
]

var source = {
localdata: data,
datatype: “json”,
deleterow: function (rowid, commit) {

commit(true);

},
addrow: function (rowid, rowdata, position, commit) {
debugger;
//ReLoading the data after the adding row
commit(true);

},
updaterow: function (rowid, newdata, commit) {
debugger;
//this method checks is intID is present/assigned to some value or not.
if (!isNaN(newdata.intID)) {
$.ajax({
type: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (data) {

commit(true);
},
error: function () {
alert(“There was an error connecting to the server!”);
}
});
}

},
datafields:
[

{ name: ‘intID’, type: ‘int’ },
{ name: ‘FileType’, type: ‘string’ },
{ name: ‘FilePath’, type: ‘string’ },
{ name: ‘FileName’, type: ‘string’ }

]
};

var dataAdapter = new $.jqx.dataAdapter(source);
//Outer grid
$(“#jqxgridDropdown”).jqxGrid(
{
width: 728,
source: dataAdapter,
enabletooltips: true,
selectionmode: ‘singlerow’,
rowdetails: true,
filterable: true, //Allows to filter function for the data.
sortable: true, //sort The data.if required.
autoheight: true, //Sets the total height of the grid.
autorowheight: true, //Sets the row height automatically.
editable: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
debugger;
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
var span = $(“<span style=’float: left; margin-top: 5px; margin-right: 0px;’></span>”);
var addInput = $(” <input id=’addrowbutton’ type=’button’ value=’Add New Row’ />”);
var deleteInput = $(” <input id=’deleterowbutton’ type=’button’ value=’Delete selected row’ />”);
toolbar.append(container);
container.append(span);
container.append(addInput);
container.append(deleteInput);
},
//Experiment end.
//method to stop the enter event and act as normal.
columns: _Column

});

// $(“#addrowbutton”).jqxButton();
$(“#addrowbutton”).on(‘click’, function () {

var datarow = generaterow();
var commit = $(“#jqxgridDropdown”).jqxGrid(‘addrow’, null, datarow);
});

// delete row.
// $(“#deleterowbutton”).jqxButton();
$(“#deleterowbutton”).on(‘click’, function () {
var selectedrowindex = $(“#jqxgridDropdown”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgridDropdown”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgridDropdown”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#jqxgridDropdown”).jqxGrid(‘deleterow’, id);
}
});
}

//creating new blank row.
var generaterow = function () {
var row = {};
row[“FileType”] = “”;
row[“FilePath”] = “”;
row[“FileName”] = “”;
return row;
}

//This method stores the value that are entered in the grid.
function FileDetails() {
var rows = $(‘#jqxgridDropdown’).jqxGrid(‘getrows’);
return rows;
}

[SyaiParticipant]

Hello Peter,
I am using jQWidgets v3.0.4 (2013-Nov-01).

Regards
Syai

[SyaiParticipant]

Hello Peter,

I used same template of that row details demo.but its not working.if you can give some example code ehre i can make changes and also can you please tell me how to make text inde grid selectable so I can copy the text i want.As by default grid doesn’t allow coping text inside grid.

Thank you for your concern
regards
Syai

[SyaiParticipant]

hello peter,

Sorry but i couldn’t find it…Can you please give some example so that i can find it….and also i want to Make all the fields required validation can you give some demo on that to…..
Thank you very much.

Regards
Syai

[SyaiParticipant]

thanks for the quick replies.

[SyaiParticipant]

But manually it can be done by template code.

[SyaiParticipant]

thank you peter for you help…i figure it how how to do it ….

[SyaiParticipant]

I have modified the your code to the extend of my code all the functionality is there so please check.I hope it runs.

$(document).ready(function () {
var theme = getDemoTheme();
// 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) {

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,
theme: theme,
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' },
{ text: "Delete", width:"8%",filterable: false, sortable: false,
cellsrenderer: function (row, column, value) {
var selRow = $("#jqxgrid").jqxGrid('getrowdata', row);
return '

‘;//Code for button.

},
]
});
$(“#addrowbutton”).jqxButton({ theme: theme });
$(“#addmultiplerowsbutton”).jqxButton({ theme: theme });
$(“#updaterowbutton”).jqxButton({ theme: theme });
// update row.
$(“#updaterowbutton”).on(‘click’, function () {
var datarow = generaterow();
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
$("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
}
});
// create new row.
$("#addrowbutton").on('click', function () {
var datarow = generaterow();
var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
});
// create new rows.
$("#addmultiplerowsbutton").on('click', function () {
$("#jqxgrid").jqxGrid('beginupdate');
for (var i = 0; i < 10; i++) {
var datarow = generaterow();
var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
}
$("#jqxgrid").jqxGrid('endupdate');
});
// delete row.
function DeleteRow(event) {
var selRow = $("#jqxgrid").jqxGrid('getrowdata', event.target.id);
if ( confirm( "Confirm you want to delete this entry" ) ) {
var commit = $( "#jqxgrid" ).jqxGrid( 'deleterow', event.target.id);
}
}
});

[SyaiParticipant]

Hi peter,
Thank you for your support, you are right about the that I am passing html id .Bu t can you tell me how to overcome these problem i can get the Id of the row i want to delete . i.e. if I want to delete 3rd row the “event.target.id” will pass me “2” ,now how to get the Row’s Data ID, and If there if way in which i just can refresh all full grid.

Regards
Syai

[SyaiParticipant]

hello peter,

On second delete i am getting thses error …………………. “Uncaught TypeError: Cannot read property ‘rowindex’ of null ”

The whole code for the delete option i hope these helps…..
please help……thanking you.

{ text: “Delete”, width:”8%”,filterable: false, sortable: false,
cellsrenderer: function (row, column, value) {
var selRow = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
var CatchBug=selRow.Comments.split(“”);
if(CatchBug[0]==”value”)
{
return “”;
}
else{
// return ‘

‘;//Code for button.
return ‘

‘;

}
}
},

function DeleteRow(event) {
debugger;
var selectedrowindex = $(“#jqxgrid”).jqxGrid(“getselectedrowindex”);
var selRow = $(“#jqxgrid”).jqxGrid(‘getrowdata’, event.target.id);
//alert(“id:”+event.target.id+”You are going to delete : ” +selRow.Comments);
if ( confirm( “Confirm you want to delete this entry” ) ) {
var commit = $( “#jqxgrid” ).jqxGrid( ‘deleterow’, event.target.id);
}
}

deleterow: function (rowid, commit) {

commit(true);
},

[SyaiParticipant]

If you are having any problem to understand the code you can inform me i will explain.Thank you.

[SyaiParticipant]

function Source(Fetchdetails){
//fetchdetails variables are more loaded from some source.

_Column=[
{ text: ‘Comments’, editable: true, datafield: ‘Comments’,cellsrenderer:cellsrenderer,cellbeginedit:cellbeginedit},

{ text: “Delete”, width:”8%”,filterable: false,
cellsrenderer: function (row, column, value) {
var selRow = $(“#jqxsomegrid”).jqxGrid(‘getrowdata’, row);
var CatchBug=selRow.Comments.split(“”);
if(CatchBug[0]==”Bug Recorded”)
{
return “”;
}
else{

return ‘

‘;

}
}
},
//some more code
]

var source={
localdata:Fetchdetails,
datatype:”json”,
pagesize: 50,//default loading size for paging.
updaterow: function (rowid, rowdata) {
},
deleterow: function (rowid, commit) {
$.ajax({
type: ‘POST’,
data:JSON.stringify({//sending multiple object}),
contentType: ‘application/json;charset=utf-8’,
dataType: ‘json’,
url: //webservice url
success: function (data, status, xhr) {

commit(true);

}

});
},

datafields:
[

{ name: ‘Comments’, type: ‘string’ }

]

}
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxsomegrid”).jqxGrid(
{
width: “98.5%”,
source: dataAdapter,
editable: true,
selectionmode:’singlecell’,
filterable: true,
autoheight: true,
autorowheight: true,

sortable: true,
pageable: true,
pagesizeoptions: [’10’, ’25’, ’50’],
columns:_Column
});
}

//Method converts the normal text into clickable link for the attach files.
var linkrenderer = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var downloadlink=_websiteURL + “/AttachedFiles/”;
var html = “” + value +”“;
return html;
}

//Method is fired whenever any delete button is clicked.This method passes the required data to delete from the database.
function DeleteRow(event) {
var selRow = $(“#jqxsomegrid”).jqxGrid(‘getrowdata’, event.target.id);

if ( confirm( “Confirm you want to delete this entry” ) ) {

var commit = $( “#jqxsomegrid” ).jqxGrid( ‘deleterow’, event.target.id);
}
}

[SyaiParticipant]

Hello Peter,
Thank you for support.I have a question based on delete operation.I am loading all files from the database.Now when I make delete operation on the one row,it gets deleted and updates the grid.but when i delete another it gets deleted but doesnt update the grid and after it doesn’t delete at all..Its weird but I am hoping there is logical answer to this question. Please help..

Best Regards
Syai.

[Author]

Posts