Dynamically make cell property to editable true or false

[raniParticipant]

Hi,

How to dynamically make the column property to editable false or true.Please help me in this.

Regards,
rani.

[Peter StoevKeymaster]

Hi rani,

You can use the “setColumnProperty” method of the TreeGrid to dynamically change the column properties. For more information visit: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-api.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AneVisserParticipant]

Hi

I have tried this as follows:

$(“#treeGrid”).on(‘rowBeginEdit’, function (event) {
var args = event.args;
var rowKey = args.key;
var rowData = args.row;
if (rowData.groupid==3 || rowData.groupid==4) {
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘editable’, true);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘width’, 200);
}
else {
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘editable’, false);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘replacement’, ‘width’, 100);
}
});

It seems that setting the width works fine, but the property ‘editable’ seems to be set to false, even if you try to set it to true.

[AneVisserParticipant]

As a more complete example: I tried it with the example script for rowBeginEdit, and got the same result: you can change the width, but not the editable property of the tree grid

var employees = [{
“EmployeeID”: 2,
“FirstName”: “Andrew”,
“LastName”: “Fuller”,
“Country”: “USA”,
“Title”: “Vice President, Sales”,
“HireDate”: “1992-08-14 00:00:00”,
“BirthDate”: “1952-02-19 00:00:00”,
“City”: “Tacoma”,
“Address”: “908 W. Capital Way”,
“expanded”: “true”,
children: [{
“EmployeeID”: 8,
“FirstName”: “Laura”,
“LastName”: “Callahan”,
“Country”: “USA”,
“Title”: “Inside Sales Coordinator”,
“HireDate”: “1994-03-05 00:00:00”,
“BirthDate”: “1958-01-09 00:00:00”,
“City”: “Seattle”,
“Address”: “4726 – 11th Ave. N.E.”
}, {
“EmployeeID”: 1,
“FirstName”: “Nancy”,
“LastName”: “Davolio”,
“Country”: “USA”,
“Title”: “Sales Representative”,
“HireDate”: “1992-05-01 00:00:00”,
“BirthDate”: “1948-12-08 00:00:00”,
“City”: “Seattle”,
“Address”: “507 – 20th Ave. E.Apt. 2A”
}, {
“EmployeeID”: 3,
“FirstName”: “Janet”,
“LastName”: “Leverling”,
“Country”: “USA”,
“Title”: “Sales Representative”,
“HireDate”: “1992-04-01 00:00:00”,
“BirthDate”: “1963-08-30 00:00:00”,
“City”: “Kirkland”,
“Address”: “722 Moss Bay Blvd.”
}, {
“EmployeeID”: 4,
“FirstName”: “Margaret”,
“LastName”: “Peacock”,
“Country”: “USA”,
“Title”: “Sales Representative”,
“HireDate”: “1993-05-03 00:00:00”,
“BirthDate”: “1937-09-19 00:00:00”,
“City”: “Redmond”,
“Address”: “4110 Old Redmond Rd.”
}, {
“EmployeeID”: 5,
“FirstName”: “Steven”,
“LastName”: “Buchanan”,
“Country”: “UK”,
“Title”: “Sales Manager”,
“HireDate”: “1993-10-17 00:00:00”,
“BirthDate”: “1955-03-04 00:00:00”,
“City”: “London”,
“Address”: “14 Garrett Hill”,
“expanded”: “true”,
children: [{
“EmployeeID”: 6,
“FirstName”: “Michael”,
“LastName”: “Suyama”,
“Country”: “UK”,
“Title”: “Sales Representative”,
“HireDate”: “1993-10-17 00:00:00”,
“BirthDate”: “1963-07-02 00:00:00”,
“City”: “London”,
“Address”: “Coventry House Miner Rd.”
}, {
“EmployeeID”: 7,
“FirstName”: “Robert”,
“LastName”: “King”,
“Country”: “UK”,
“Title”: “Sales Representative”,
“HireDate”: “1994-01-02 00:00:00”,
“BirthDate”: “1960-05-29 00:00:00”,
“City”: “London”,
“Address”: “Edgeham Hollow Winchester Way”
}, {
“EmployeeID”: 9,
“FirstName”: “Anne”,
“LastName”: “Dodsworth”,
“Country”: “UK”,
“Title”: “Sales Representative”,
“HireDate”: “1994-11-15 00:00:00”,
“BirthDate”: “1966-01-27 00:00:00”,
“City”: “London”,
“Address”: “7 Houndstooth Rd.”
}]
}]
}];

//// prepare the data
var source = {
dataType: “json”,
dataFields: [{
name: ‘EmployeeID’,
type: ‘number’
}, {
name: ‘FirstName’,
type: ‘string’
}, {
name: ‘LastName’,
type: ‘string’
}, {
name: ‘Country’,
type: ‘string’
}, {
name: ‘City’,
type: ‘string’
}, {
name: ‘Address’,
type: ‘string’
}, {
name: ‘Title’,
type: ‘string’
}, {
name: ‘HireDate’,
type: ‘date’
}, {
name: ‘children’,
type: ‘array’
}, {
name: ‘expanded’,
type: ‘bool’
}, {
name: ‘BirthDate’,
type: ‘date’
}],
hierarchy: {
root: ‘children’
},
id: ‘EmployeeID’,
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);

// create Tree Grid
$(“#treeGrid”).jqxTreeGrid({
width: 680,
source: dataAdapter,
editable: true,
sortable: true,
pageable: true,
pagerMode: ‘advanced’,
theme: ‘energyblue’,
columns: [{
text: ‘FirstName’,
dataField: ‘FirstName’,
width: 150
}, {
text: ‘LastName’,
dataField: ‘LastName’,
width: 120
}, {
text: ‘Title’,
dataField: ‘Title’,
width: 200
}, {
text: ‘Birth Date’,
dataField: ‘BirthDate’,
cellsFormat: ‘d’,
width: 120
}, {
text: ‘Hire Date’,
dataField: ‘HireDate’,
cellsFormat: ‘d’,
width: 120
}, {
text: ‘Address’,
dataField: ‘Address’,
width: 250
}, {
text: ‘City’,
dataField: ‘City’,
width: 120
}, {
text: ‘Country’,
dataField: ‘Country’,
width: 120
}]

});
$(‘#treeGrid’).on(‘rowBeginEdit’, function (event) {
var args = event.args;
var row = args.row;
alert(“The row you are editing is: ” + row.FirstName + ” ” + row.LastName);

$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘FirstName’, ‘editable’, true);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘LastName’, ‘editable’, false);
$(“#treeGrid”).jqxTreeGrid(‘setColumnProperty’, ‘LastName’, ‘width’, 200);

});

[Peter StoevKeymaster]

rowBeginEdit is raised when the row is in edit mode. Setting editable of some columns to false will have effect in subsequent edits, but not in the editing which already started.

Best Regards,
Peter Stoev

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

[AneVisserParticipant]

So is there a way then within one column, to make some cells editable, and some cells read-only?

[HristoParticipant]

Hello AneVisser,

Please, take a look this example:
https://www.jseditor.io/?key=jqxtreegrid-custom-cells-editing

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts