[akanshaMember]

[akanshaMember]

I dont know why full code is not getting copied. Sorry for 2 many reply.

[akanshaMember]

.

$(document).ready(function () {
var theme = '';

// prepare the data
var data = generatedata(200);

var source =
{
localdata: data,
datatype: "array",
updaterow: function (rowid, rowdata) {
// synchronize with the server - send update command
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177},
{ text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
{ text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd',
validation: function (cell, value) {
var year = value.getFullYear();
if (year >= 2013) {
return { result: false, message: "Ship Date should be before 1/1/2013" };
}
return true;
}
},
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
validation: function (cell, value) {
if (value 150) {
return { result: false, message: "Quantity should be in the 0-150 interval" };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
}
},
{ text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
validation: function (cell, value) {
if (value 15) {
return { result: false, message: "Price should be in the 0-15 interval" };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}

}
]
});

// events
$("#jqxgrid").bind('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").html("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});

$("#jqxgrid").bind('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").html("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
});

function MapButtonClick() {
var data = $('#jqxgrid').jqxGrid('getrowdata', 0);
var rows = $('#jqxgrid').jqxGrid('getrows');
console.log(data);
console.log(rows[0].productname);
alert(rows[0].productname);
}

[akanshaMember]

.

$(document).ready(function () {
var theme = ”;

// prepare the data
var data = generatedata(200);

var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 90 },
{ text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 177},
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67 },
{ text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 90, cellsalign: ‘right’, cellsformat: ‘d’,
validation: function (cell, value) {
var year = value.getFullYear();
if (year >= 2013) {
return { result: false, message: “Ship Date should be before 1/1/2013” };
}
return true;
}
},
{ text: ‘Quantity’, datafield: ‘quantity’, width: 70, cellsalign: ‘right’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value 150) {
return { result: false, message: “Quantity should be in the 0-150 interval” };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
}
},
{ text: ‘Price’, datafield: ‘price’, width: 65, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value 15) {
return { result: false, message: “Price should be in the 0-15 interval” };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}

}
]
});

// events
$(“#jqxgrid”).bind(‘cellbeginedit’, function (event) {
var args = event.args;
$(“#cellbegineditevent”).html(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});

$(“#jqxgrid”).bind(‘cellendedit’, function (event) {
var args = event.args;
$(“#cellendeditevent”).html(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
});

function MapButtonClick() {
var data = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, 0);
var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’);
console.log(data);
console.log(rows[0].productname);
alert(rows[0].productname);
}

[akanshaMember]

In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "Enter" or "F2" keys. You
can also navigate through the cells with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.

$(document).ready(function () {
var theme = '';

// prepare the data
var data = generatedata(200);

var source =
{
localdata: data,
datatype: "array",
updaterow: function (rowid, rowdata) {
// synchronize with the server - send update command
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177},
{ text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
{ text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd',
validation: function (cell, value) {
var year = value.getFullYear();
if (year >= 2013) {
return { result: false, message: "Ship Date should be before 1/1/2013" };
}
return true;
}
},
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
validation: function (cell, value) {
if (value 150) {
return { result: false, message: "Quantity should be in the 0-150 interval" };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
}
},
{ text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
validation: function (cell, value) {
if (value 15) {
return { result: false, message: "Price should be in the 0-15 interval" };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}

}
]
});

// events
$("#jqxgrid").bind('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").html("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});

$("#jqxgrid").bind('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").html("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
});

function MapButtonClick() {
var data = $('#jqxgrid').jqxGrid('getrowdata', 0);
var rows = $('#jqxgrid').jqxGrid('getrows');
console.log(data);
console.log(rows[0].productname);
alert(rows[0].productname);

}

please try this example.It is still giving me old value of product, not the modified one.

[akanshaMember]

i saw that. But the problem is button is outside of the grid. And i want all rows with modified values in an object to send it back to server.

i tried
var rows = $(‘#jqxgridMapping’).jqxGrid(‘getrows’);

but it gives me old values of dropdown.

[akanshaMember]

thanks!. I have changed the grid to editable.

i have only 2 columns in grid 1 textbox and 1 dropdown. and there is a button. On click of button i want the current state of grid, whatever user has modified. below mentioned function is not giving the current state , rather it is giving me original state.

function MapButtonClick() {
var data = $(‘#jqxgridMapping’).jqxGrid(‘getrowdata’, 0);
var rows = $(‘#jqxgridMapping’).jqxGrid(‘getrows’);
console.log(data);
console.log(rows);
}

[akanshaMember]

[akanshaMember]

My question is

1) if i am mentioning the type explicitly as string then also i m getting options foe numeric type like”less than ” , and greater than etc,
2) I am getting scroll bar in column sorting and filtering menu. How can get rid of that?

[akanshaMember]

i have included type as string as mentioned below, but still i am getting option as less than and greater than, may be because the data in the grid is like ‘ra1’, ‘ra2’.

Please find below the code,

function GetColumns(jsonObj) {
var columns = new Array();
columns.push({
text: 'Select',
datafield: 'Select',
columntype: 'button',
cellsrenderer: function() {
return "Select";
},
sortable: false,
filterable: false,
"width": 70

});
for (var i = 0; i < jsonObj.length; i++) {
//console.log(jsonObj[i].Text[0].Text);
columns.push({
"text": jsonObj[i].Text[0].Text,
"datafield": jsonObj[i].Text[0].Text,
"value": jsonObj[i].Text[0].Text,
"width": 220,
"type": 'string'
});

}
return columns;
}
function Getdata(headers, dataRowsValues) {

// prepare the data
var data = new Array();
var datafieldarray = new Array();

for (var i = 0; i < headers.length; i++) {
// console.log(headers[i].Text[0].Text);
datafieldarray.push({
"name": headers[i].Text[0].Text
, type: "string"
});
}
for (var i = 0; i < dataRowsValues.length; i++) {
var row = {};
for (var j = 0; j < headers.length; j++) {
//console.log(dataRowsValues[i].string[j].Text);
row[headers[j].Text[0].Text] = dataRowsValues[i].string[j].Text;
}
data[i] = row;
}
var source =
{
datatype: "array",
localdata: data
};
return source;
}

Am i missing something???

And also i am getting scroll bar in column sorting and filtering menu. How can get rid of that?

[akanshaMember]

It works!! ..Thanks a ton!
I have version 2.1. I will install 2.3.
Do have any plans to give gallery plugin in near future with search and filter option??

[akanshaMember]

may be above code it not very clear:
but if i check for document, it returns #document . PFB, the code I values i am getting from firebug or from console.

$(document) = null

document= #document

$= bound: function () { return document.getElementById.apply(document, arguments) }

[akanshaMember]

okay. Thanks for the information.

[akanshaMember]

i was missing cellsrenderer:function () {
return “Select”;}

Thanks!!!

[akanshaMember]

I am adding button in grid as mentioned below. I want the text in button as “select” . But i am getting text as “false”.

columns.push({
“text”: “Select”,
“datafield”: “Select”,
columntype: ‘button’,
“value”:”Select”,
“width”: 220

});

[Author]

Posts