Add Row in Jqxgrid

[GabrielCostaAlvesParticipant]

Hi,

I need add new row in first line in jqxgrid. But I have columns all types (numbers, dropdown, date, time and datetime) e some custom columns.

My problem is in the columns of dropdown and customized.

For example, my dropdown column I need have options for the user to select. And custom columns I have html for load and columns using jqxnumberinput, jqxDateTimeInput.

Resume: The new line must have jqxdatetimeinput, jqxnumberinput, jqxdropdownlist, etc.

Can anybody help me?

My code:

var controleestoque = [{ value: “Yes”, label: “Yes”},
{ value: “No”, label: “No”}
,{ value: “Not Applicable”, label: “Not Applicable”}
];

var controleestoqueSource = {
datatype: “array”,
datafields: [ { name: ‘label’, type: ‘string’ }, { name: ‘value’, type: ‘string’ } ],
localdata: controleestoque
};

var controleestoqueAdapter = new $.jqx.dataAdapter(controleestoqueSource, {
autoBind: true
});
var jsonData = [
{
“ButtonColumn”: “<div class=\”action-buttons\” style=\”width:50px;\”><i class=\”ace-icon fa fa-pencil bigger-130\”></i><i class=\”ace-icon fa fa-floppy-o bigger-130\”></i><i class=\”ace-icon fa fa-times bigger-130\”></i> <i class=\”red ace-icon fa fa-trash-o bigger-130\”></i></div>”,
“User”: “gabriel.alves”,
“Creation Date”: “6/15/2016 09:10:47”,
“Active”: “Yes”,
“Id”: “9060”,
“12”: “SmartPhone”,
“5111”: “No”,
“5112”: “00:56:00”,
“5113”: “7/26/2016 22:52:19”,
“6111”: “98.76”
}
];
var source = {
dataType: “json”,
dataFields: [
{ name: “ButtonColumn”, type: “string” },
{ name: “User”, type: “string” },
{ name: “Creation Date”, type: “date”, format: “M/d/yyyy HH:mm:ss” },
{ name: “Active”, type: “string” },
{ name: “Id”, type: “integer” },
{ name: “12”, type: “string” },
{ name: “5111”, type: “string”, values: { source: controleestoqueAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: “5112”, type: “date”, format: “h:mm tt” },
{ name: “5113”, type: “date”, format: “M/d/yyyy HH:mm:ss” },
{ name: “6111”, type: “float” }
],
localData: jsonData
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid(
{
source: dataAdapter,
editable: true,
width: “100%”,
sortable: true,
selectionmode: “none”,
editmode: “selectedrow”,
columnsResize: true,
columns: [
{ text: “”, width: “100”, sortable: false, resizable: false, pinned: true, editable: false, dataField: “ButtonColumn” },
{ text: “User”, width: “100”, editable: false, dataField: “User” },
{ text: “Creation Date”, width: “100”, editable: false, dataField: “Creation Date”, cellsformat: “M/d/yyyy HH:mm:ss” },
{ text: “Active”, width: “100”, editable: false, dataField: “Active” },
{ text: “Id”, width: “100”, editable: false, dataField: “Id” },
{ text: “Descrição”, width: “100”, dataField: “12” },
{ text: “Controle Estoque”, width: “100”, dataField: “5111”, columntype: ‘custom’, createeditor: function (row, column, editor) {editor.jqxDropDownList({source: controleestoqueAdapter, displayMember: ‘label’, valueMember: ‘value’, filterable: false, placeHolder: ‘Choose…’});}, initeditor: function (row, cellvalue, editor) { editor.jqxDropDownList(‘selectItem’, cellvalue);}},
{ text: “Hora Atual”, width: “100”, dataField: “5112”, cellsformat: “HH:mm:ss”, columntype: ‘datetimeinput’, createeditor: function (row, column, editor) {editor.jqxDateTimeInput({formatString: ‘HH:mm:ss’, culture: ‘en-US’, showTimeButton: true, enableBrowserBoundsDetection: false, showCalendarButton: false});}},
{ text: “DataHora Atual”, width: “100”, dataField: “5113”, cellsformat: “M/d/yyyy HH:mm:ss”, columntype: ‘datetimeinput’, createeditor: function (row, column, editor) {editor.jqxDateTimeInput({formatString: ‘M/d/yyyy HH:mm:ss’,culture: ‘en-US’, showTimeButton: true, enableBrowserBoundsDetection: false, showCalendarButton: true});}},
{ text: “Decimal”, width: “100”, dataField: “6111”, columntype: ‘numberinput’,createeditor: function (row, column, editor) {editor.jqxNumberInput({decimalDigits: 2, decimalSeparator: ‘.’, inputMode: ‘simple’, spinButtons: false}); editor.on(‘keyup’, function (event) { if(event.keyCode == 46 || event.keyCode == 8){ editor.jqxNumberInput(‘val’,null);} });}, initeditor: function (row, cellValue, editor, cellText) { debugger;if (cellValue == null) { editor.jqxNumberInput(‘val’,null);} }, geteditorvalue: function (row, cellvalue, editor) {return editor.val() == null ? null : editor.val(); } }
]

});
var localizationobj = {};
localizationobj.sortascendingstring = ‘Sort Ascending’
localizationobj.sortdescendingstring = ‘Sort Descending’
localizationobj.sortremovestring = ‘Remove Sort’
localizationobj.decimalseparator = ‘.’
$(“#jqxGrid”).jqxGrid(‘localizestrings’, localizationobj);
$(“#jqxGrid”).jqxGrid(‘autoresizecolumns’);

[Ivo ZhulevParticipant]

Hi GabrielCostaAlves,

For the jqxdatetimeinput, jqxnumberinput, jqxdropdownlist type columns just set the columntype property and when you add a new row it will be automaticly made the same.
Here is a short demo:
https://www.jseditor.io/?key=grid-add-new-row-with-dropdownlist

Best Regards,
Ivo

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

[GabrielCostaAlvesParticipant]

Hi Ivo,

I have custom columns type.

For example:

{ text: “Controle Estoque”, width: “100”, dataField: “5111”, columntype: ‘custom’, createeditor: function (row, column, editor) {editor.jqxDropDownList({source: controleestoqueAdapter, displayMember: ‘label’, valueMember: ‘value’, filterable: false, placeHolder: ‘Choose…’});}, initeditor: function (row, cellvalue, editor) { editor.jqxDropDownList(‘selectItem’, cellvalue);}}

How can I solve this?

Best Regards.

[Ivo ZhulevParticipant]

Hi GabrielCostaAlves,

Its the same with the custom type columns. You have it defined in the grid columns property and when you add new row it adds it. See the fiddle updated.

Best Regards,
Ivo

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

[Author]

Posts