Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #101369
    dusrkdldlr
    Member

    hello!
    I want to use the commandColumns option to do column show/hide in the edit option..
    <pre id=”tw-target-text” class=”tw-data-text tw-text-large XcVN5d tw-ta” dir=”ltr” data-placeholder=”번역”><span lang=”en”>However, I wish the rows of commandColumns were not displayed.</span>
    Is it possible?

    #101370
    yavordashew
    Member

    Hi dusrkdldlr,
    If you want the whole ‘command’ column to not be displayed you can simply use the ‘visible’ property of the command column.
    I have a little code snippet to showcase you how to set this property:
    //In your JS file

    window.Smart('#grid', class {
        get properties() {
            return {
                appearance: {
                    showRowHeaderNumber: true
                },
                dataSource: new window.Smart.DataAdapter({
                    dataSource: window.generateData(1000),
                    dataFields: [
                        'id: number',
                        'firstName: string',
                        'lastName: string',
                        'productName: string',
                        'available: bool',
                        'quantity: number',
                        'price: number',
                        'total: number'
                    ]
                }),
                editing: {
                    enabled: true,
                    action: 'none',
                    mode: 'row',
                    commandColumn: {
      /* With the 'visible' property you can set in order to have the command column  visible or not */
                        visible: true,
                        /* Or you can use the inline property if you don't want to display the command column but when you hover on the row an edit panel will  appear */
                        inline: true
                    }
                },
                columns: [
                    {
                        label: 'First Name', dataField: 'firstName'
                    },
                    {
                        label: 'Last Name', dataField: 'lastName'
                    },
                    { label: 'Product', dataField: 'productName', editor: 'autoComplete' },
                    { label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
                    { label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
                    { label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
                ]
            };
        }
    });

    You can have a look at the following demo:
    https://www.htmlelements.com/demos/grid/editing-command-column-inline/
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

    #101373
    dusrkdldlr
    Member

    thank you for answer! Yavor Dashev
    What kind of values are in cellsformat?
    What does c2 mean?

    #101377
    yavordashew
    Member

    Hi dusrkdldlr,
    For more information about the ‘cellsFormat’ property I would advice you to take a look at this demo :
    https://www.htmlelements.com/demos/grid/column-formatting/
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.