jQuery UI Widgets Forums TreeGrid Dynamically make cell property to editable true or false

This topic contains 6 replies, has 4 voices, and was last updated by  Hristo 7 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • rani
    Participant

    Hi,

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

    Regards,
    rani.


    Peter Stoev
    Keymaster

    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


    AneVisser
    Participant

    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.


    AneVisser
    Participant

    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 Stoev
    Keymaster

    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/


    AneVisser
    Participant

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


    Hristo
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.