[assaf.frank123Participant]

If this is what you are referring to it is set to number-

var row_1 = {};
row_1[“id”] = ‘123’;
row_1[“no”] = ‘1’;
rulesData[0] = row_1;

var data = rulesData;
var source =
{
localdata: data,
datafields:
[
{ name: ‘id’, type: ‘string’},
{ name: ‘no’, type: ‘number’}
],
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};

I am having great trouble to try achieve what I asked in the past – “move” up/down of rows.
Any idea how this can be done?

Many thanks,

[assaf.frank123Participant]

Hi Peter,

Still not working (returning the id into the cell after a value was selected from the dropdown.

My method is –

var gridEditorValue = function (row, cellValue, editor) {
var data = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, row);
var level = data[“obj”];
var title = ”;

if (eval(‘actions_’+level)) {
for (var i=0;i<eval(‘actions_’+level).length;i++) {
var curr = eval(‘actions_’+level)[i];

if (curr.value == editor.val()) {
title = curr.label;
}
}
}

return {value: editor.val(), label: title};

}

Any idea?

[assaf.frank123Participant]

Hi Peter,

There is no “gridEditorValue ” in the sample you gave.
That is static binding of sources/adapters with ID/NAME.

I implemented the same way but still I need the 3 methods for the dynamic binding – createGridEditor,initGridEditor & gridEditorValue. These exist in the customrowcelledit.htm.

Still no change (after changing the binding to adapters rather directly to the array)

[assaf.frank123Participant]

The createGridEditor method will do the following –

editor.jqxDropDownList({autoDropDownHeight: true, theme: theme, width: width, height: height, source: actions_1 ,valueMember: ‘value’,displayMember: ‘title’});

[assaf.frank123Participant]

That was it.
Thank you.

[assaf.frank123Participant]

Sorry – found it – checkboxselection.htm
Thanks anyway.

[assaf.frank123Participant]

Do you have a suggestion how to achieve what I am looking for?
I need a simple way of moving a row up / down without loading the page from the server..

a. Perhaps can I “Rebuild” the data source for the grid in the correct order and refresh/refreshdata/render etc.. (I am not sure what the
difference is between all these).
b. this grid in question is in a tab – and the content is loaded by an external jsp – when tab is clicked I execute-

$.get(url, function (data) {
$(‘#tab1’).html(data);
});

how can i “click” the tab I am currently inside of?

c. Is it possible to purchase capabilities for jqxwidgets (such as what I am asking to do)?

Many Thanks

[assaf.frank123Participant]

Hi Peter,

Am I missing something?
How in the StatusBar example can I set the delete button created in the StatusBar disabled
dynamically?

I would like to execute:
$(‘#deleteButton’).jqxButton({disabled: false });

Thanks

[assaf.frank123Participant]

Hi Peter,

Is there a plan to add this support ?

I mean it is quite basic –
You have a grid with an ID. The grid is ordered by this ID.
Now the user create a new row with an ID in between if the existing IDs.

How should I keep the grid ordered in this case?
I remind you the grid is groupable.

Thanks

[assaf.frank123Participant]

I tried to get control of the Buttons in the rowClick event of the grid but it is not possible –

In the grid statusbarrenderer –

renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
var container = $(“

“);
var deleteButton = $(“

Delete

“);
..
..
deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });

Then later on I would like to do something like –

$(‘#deleteButton’).jqxButton({disabled: false });

This does not work – How do I access this deleteButton?

Thanks

[assaf.frank123Participant]

I see the code is cut off.
Just add –
editable:true -to the grid
cellvaluechanged event – as in example.

Thanks

[assaf.frank123Participant]

Bug happens in your example – groupsrenderer.htm.

Try editing last rows of last group.

In this sample is demonstrated how to override the built-in rendering of the Groups headers. The Grouping of Product and Ship Date columns is disabled.

$(document).ready(function () {
var theme = getDemoTheme();
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘date’, type: ‘date’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
],
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
var toThemeProperty = function (className) {
return className + ” ” + className + “-” + theme;
}
var groupsrenderer = function (text, group, expanded, data) {
if (data.groupcolumn.datafield == ‘price’ || data.groupcolumn.datafield == ‘quantity’) {
var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
var text = data.groupcolumn.text + ‘: ‘ + number;
if (data.subItems.length > 0) {
var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, [‘sum’], true, data.subItems);
}
else {
var rows = new Array();
var getRows = function (group, rows) {
if (group.subGroups.length > 0) {
for (var i = 0; i < group.subGroups.length; i++) {
getRows(group.subGroups[i], rows);
}
}
else {
for (var i = 0; i < group.subItems.length; i++) {
rows.push(group.subItems[i]);
}
}
}
getRows(data, rows);
var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, rows);
}

return '

‘ + text + ‘, ‘ + ‘‘ + “Total” + ‘ (‘ + aggregate.sum + ‘)’ + ‘‘;
}
else {
return ‘

‘ + text + ‘‘;
}
}
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
groupable: true,
editable:true,
groupsrenderer: groupsrenderer,
selectionmode: ‘singlecell’,
groups: [‘price’],
columns: [
{ text: ‘First Name’, groupable: true, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, groupable: true, datafield: ‘lastname’, width: 90 },
{ text: ‘Product’, groupable: false, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 180 },
{ text: ‘Ship Date’, groupable: false, datafield: ‘date’, width: 90, cellsalign: ‘right’},
{ text: ‘Quantity’, datafield: ‘quantity’, width: 70, cellsalign: ‘right’},
{ text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’}
]
});
$(“#jqxgrid”).on(‘cellvaluechanged’, function (event)
{

var column = args.datafield;
var row = args.rowindex;
var value = args.newvalue;
var oldvalue = args.oldvalue;

alert(value+’ ‘+column);
});
});

[assaf.frank123Participant]

In your opinion, can the code from – http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
be integrated with the Jqxwidgets grid?

[assaf.frank123Participant]

For number 3 –
I am using the scripts bellow –

[assaf.frank123Participant]

I’ll paste the HTML file bellow – after just copying the text from the “view source” from a JSP file – the text “work_area” has disappeared
and there is an empty row and [object[ in one of the columns.

Thanks.

Customers List

// set up data for grids
// prepare the data
var customerData = new Array();

var row_5464 = {};
row_5464[“id”] = ‘5464’;
row_5464[“id2”] = ‘5464’;
row_5464[“id3”] = ‘5464’;
row_5464[“id4”] = ‘5464’;
row_5464[“name”] = ‘AAA’;
row_5464[“cell”] = ‘0524646546’;
row_5464[“email”] = ‘info@aaa.com’;
row_5464[“startDate”] = ’27/11/2012′;
row_5464[“numLeads”] = ‘0’;
row_5464[“vname”] = ”;
row_5464[“pname”] = ”;
row_5464[“budget”] = ”;

customerData[1] = row_5464;

var row_v017q4166v = {};
row_v017q4166v[“id”] = ‘v017q4166v’;
row_v017q4166v[“id2”] = ‘v017q4166v’;
row_v017q4166v[“id3”] = ‘v017q4166v’;
row_v017q4166v[“id4”] = ‘v017q4166v’;
row_v017q4166v[“name”] = ‘BBBB’;
row_v017q4166v[“cell”] = ‘999999999’;
row_v017q4166v[“email”] = ‘aaa@bbb.com’;
row_v017q4166v[“startDate”] = ’14/06/2012′;
row_v017q4166v[“numLeads”] = ‘0’;
row_v017q4166v[“vname”] = ‘Vertical A’;
row_v017q4166v[“pname”] = ‘Product A’;
row_v017q4166v[“budget”] = ‘250’;

customerData[2] = row_v017q4166v;

var row_w533x4294x = {};
row_w533x4294x[“id”] = ‘w533x4294x’;
row_w533x4294x[“id2”] = ‘w533x4294x’;
row_w533x4294x[“id3”] = ‘w533x4294x’;
row_w533x4294x[“id4”] = ‘w533x4294x’;
row_w533x4294x[“name”] = ‘undefined’;
row_w533x4294x[“cell”] = ‘09865465464’;
row_w533x4294x[“email”] = ‘aaa@bbb.com’;
row_w533x4294x[“startDate”] = ’30/04/2013′;
row_w533x4294x[“numLeads”] = ‘0’;
row_w533x4294x[“vname”] = ”;
row_w533x4294x[“pname”] = ”;
row_w533x4294x[“budget”] = ”;

customerData[3] = row_w533x4294x;

var row_x449s8799u = {};
row_x449s8799u[“id”] = ‘x449s8799u’;
row_x449s8799u[“id2”] = ‘x449s8799u’;
row_x449s8799u[“id3”] = ‘x449s8799u’;
row_x449s8799u[“id4”] = ‘x449s8799u’;
row_x449s8799u[“name”] = ‘Test Customer12’;
row_x449s8799u[“cell”] = ‘56546465464’;
row_x449s8799u[“email”] = ‘aa@bbb.co.soaaaa’;
row_x449s8799u[“startDate”] = ’01/05/2013′;
row_x449s8799u[“numLeads”] = ‘0’;
row_x449s8799u[“vname”] = ”;
row_x449s8799u[“pname”] = ”;
row_x449s8799u[“budget”] = ”;

customerData[4] = row_x449s8799u;

function editCustomer(customerID) {
document.editCustomerForm.customerID.value = customerID;
document.editCustomerForm.submit();
}
function deleteCustomer(id) {
document.deleteCustomerForm.customerID.value = id;
$(“#jqxdeletecustomerwindow”).jqxWindow(‘open’);
$(‘#jqxdeletecustomerwindow’).jqxWindow(‘bringToFront’);
}
function cancelDeleteCustomer() {
$(“#jqxdeletecustomerwindow”).jqxWindow(‘close’);
}
function performDeleteCustomer() {
document.deleteCustomerForm.submit();
}
function getVerticalChanged() {
document.all(‘verticalID’).disabled=false;
document.all(‘productServiceID’).value= ”;
document.getCustomersForm.submit();
}
function getProductsServicesChanged() {
document.all(‘verticalID’).disabled=false;
document.getCustomersForm.submit();
}
function getCustomers() {
document.all(‘verticalID’).disabled=false;
document.getCustomersForm.submit();
}

function newCustomer() {

$(“#jqxaddcustomerwindow”).jqxWindow(‘open’);
$(‘#jqxaddcustomerwindow’).jqxWindow(‘bringToFront’);

}
function cancelAddCustomer() {
$(“#jqxaddcustomerwindow”).jqxWindow(‘close’);
}
function saveNewCustomer() {
document.newCustomerForm.customerName.value = document.all(‘newCustomerName’).value;
document.newCustomerForm.cell.value = document.all(‘newCustomerCell’).value;
document.newCustomerForm.email.value = document.all(‘newCustomerEmail’).value;
document.newCustomerForm.createNew.value = document.all(‘createNewCampaign’).value;

var items = $(“#jqxProductServices”).jqxDropDownList(‘getCheckedItems’);
var checkedItems = “”;
$.each(items, function (index) {
checkedItems += this.value + “,”;
});

document.newCustomerForm.productService.value = checkedItems;

document.newCustomerForm.budget.value = $(‘#budget’).jqxNumberInput(‘getDecimal’);

if (document.newCustomerForm.cell.value != ”) {

if (document.newCustomerForm.customerName.value == ”) {
alert(‘please enter Customer Name’);
} else {
if (document.newCustomerForm.cell.value == ”) {
alert(‘please enter Cellphone’);
} else {
if (document.newCustomerForm.email.value == ”) {
alert(‘please enter Email’);
} else {
if (document.newCustomerForm.budget.value == ‘0’) {
alert(‘budget must be greater than 0’);
} else {
if (document.newCustomerForm.productService.value == ”) {
alert(‘please enter Product/Service’);
} else {
document.newCustomerForm.submit();
}
}
}
}

}

}
}

$(document).ready(function () {
var theme = getDemoTheme();
var data = customerData;

var source =
{
localdata: data,
datafields:
[
{ name: ‘id’, type: ‘string’},
{ name: ‘id2’, type: ‘string’},
{ name: ‘id3’, type: ‘string’},
{ name: ‘id4’, type: ‘string’},
{ name: ‘name’, type: ‘string’ },
{ name: ‘vname’, type: ‘string’},
{ name: ‘pname’, type: ‘string’},
{ name: ’email’, type: ‘string’ },
{ name: ‘cell’, type: ‘string’ },
{ name: ‘startDate’, type: ‘date’,format: ‘dd/MM/yyyy HH:mm’},
{ name: ‘numLeads’, type: ‘string’ },
{ name: ‘budget’, type: ‘number’ }
],
datatype: “array”
};
var editimagerenderer = function (row, datafield, value) {
return ”;
}
var deleteimagerenderer = function (row, datafield, value) {
return ”;
}
var warningimagerenderer = function (row, datafield, value) {
var str = ”;

if (value == ‘5464’) {
str = ”;
}

if (value == ‘w533x4294x’) {
str = ”;
}

if (value == ‘x449s8799u’) {
str = ”;
}

return str;
}

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

$(“#jqxgrid”).jqxGrid(
{
height: 430,
width: ‘100%’,
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: ‘multiplecellsextended’,
editable: false,
showstatusbar: true,
showtoolbar: true,
statusbarheight: 45,
enabletooltips: true,
columnsresize: true,
showaggregates: true,
sortable: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“Customer List “);
toolbar.append(container);
},
columns: [

{ text:’ ! ‘,filterable: false,sortable:false,pinned: true,columntype: ‘textbox’, datafield: ‘id4′, width:’2%’,cellsalign: ‘center’, align:’center’,cellsrenderer: warningimagerenderer},

{ text:”,filterable: false,pinned: true,columntype: ‘textbox’, datafield: ‘id2′, width:’2%’,cellsalign: ‘center’, align:’center’,cellsrenderer: deleteimagerenderer},
{ text:”,filterable: false,pinned: true,columntype: ‘textbox’, datafield: ‘id3′, width:’2%’, cellsalign: ‘center’,align:’center’,cellsrenderer: editimagerenderer},
{ text: ‘Name’,pinned: true,align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’, filtercondition: ‘contains’, datafield: ‘name’,width: ‘10%’,aggregates: [‘count’]},
{ text: ‘Vertical’,pinned: true,align:’left’ , columntype: ‘textbox’, filtertype: ‘checkedlist’,cellsalign: ‘left’,datafield: ‘vname’, width: ‘13%’},
{ text: ‘Product’,pinned: true,align:’left’ , columntype: ‘textbox’, filtertype: ‘checkedlist’,cellsalign: ‘left’,datafield: ‘pname’, width: ‘12%’},
{ text: ‘Monthly Budget’,pinned: true, align:’left’ , datafield: ‘budget’, filtertype: ‘number’, cellsalign: ‘left’,width: ‘10%’ ,columntype:’numberinput’,aggregates: [‘sum’, ‘avg’]},
{ text: ‘# Leads’,pinned: true, align:’left’ , datafield: ‘numLeads’, filtertype: ‘number’, cellsalign: ‘left’,width:’7%’ ,columntype:’numberinput’,aggregates: [‘sum’, ‘avg’]},
{ text: ‘Email’,pinned: false,align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’,datafield: ’email’, width: ‘10%’},
{ text: ‘Cell’,pinned: false,align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’,datafield: ‘cell’, width: ‘10%’},
{ text: ‘Start Date’,pinned: false, align:’left’ ,datafield: ‘startDate’, filtertype: ‘date’, width: ‘22%’, cellsalign: ‘left’, cellsformat: ‘dd/MM/yyyy’},
{ text: ‘id’, align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’, filtercondition: ‘contains’, datafield: ‘id’, width: 200}
]

});
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘id’);

$(“#jqxaddcustomerwindow”).jqxWindow(
{
height: 280,
width: 580,
theme: ‘summer’,
autoOpen:false,
resizable:false,
title:’New Customer’
});
$(“#jqxeditcustomerwindow”).jqxWindow(
{
height: 520,
width: 900,
theme: ‘summer’,
autoOpen:false,
resizable:false,
title:’Edit Customer’
});
$(“#jqxdeletecustomerwindow”).jqxWindow(
{
height: 140,
width: 450,
theme: ‘summer’,
autoOpen:false,
title:’Delete Customer’
});

// Create budget Input.
$(“#budget”).jqxNumberInput({spinMode: ‘simple’ , width: ‘100px’, height: ’25px’, symbol: ‘NIS’, theme: theme, spinButtons: true ,spinButtonsStep:5,decimalDigits: 0,symbolPosition: ‘right’,digits: 5,textAlign: ‘left’});

var productsSource = [

];
// Create a jqxDropDownList
$(“#jqxProductServices”).jqxDropDownList({checkboxes:true,source: productsSource, width: ‘300’, height: ’25’, theme: theme ,valueMember: ‘value’});

});

function clearFilters () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
}

Header

Customer Name

Cellphone

Email

Monthly Budget

Product/Service

New easyleads Campaign

  

Header

Header

Are you sure you wish to delete the Customer (and all his products/services)?

 

  

[Author]

Posts