Products

[Markov]

Hi Cesar,

The important thing here is that OnEndEdit handler should be there in order to get what’s edited by the user. Then you can use different options to send this information to the backend. In our help tutorial, we demonstrated a popular one.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Cesar,

As a frontend UI component, it does not automatically update the backend. This requires custom code to synchronize the front-end with the backend. You can read how to do this here: https://www.htmlelements.com/docs/blazor-grid-server-side-crud/

Regards,
Markov

[Markov]

Hi Catdoken,

I would request a stackblitz sample in order to test the specific use case.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

1. The rowResize event is called only when the row size is updated by the user via drag and resize of a row header. It is not called when you manually set row height by using the row’s height property.

2. The .smart-grid-cell-editor CSS class is applied to cell editors and you can use it for styling purposes.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi matdjon,

Could you send a sample of this?

Best regards,
Markov

Smart UI team
https://www.htmlelements.com/

[Markov]

Hi Hazwani,

Could you share an example of this? Screenshot will help.

Best regards,
Markov

[Markov]

Hi,

The Tree will raise a change event after editing is finished.

Best regards,
Markov

Smart UI team
https://www.htmlelements.com/

[Markov]

Hi,

It is not possible to have different cell editors in the different rows. The editors are per column.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can use the contextMenuOpening event to prevent the default context menu. In the event.detail, depending on whether you clicked a cell or event, you will have either cellObj or eventObj. By calling event.preventDefault() you will prevent the default context menu and you can open a custom context menu.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Catdoken,

You can try the Grid’s onCellBeginEdit callback function. grid.onCellBeginEdit = (id, dataField, cellValue) => { if (id === 2) return false; }

Best regards,
Markov

[Markov]

It is basically gantt.scrollTop or gantt.scrollLeft. Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Aviv,

It is resolved in the current version.

Regards,
Markov

[Markov]

Hi,

I checked the code and below is a full example based on your data source. Hope it helps.

/// <reference path=”../../../source/typescript/smart.elements.d.ts” />

window.Smart(
    "#gantt",
    class {
        get properties() {
            return {
                theme: 'bootstrap',

                height: 'auto',

                width: 'auto',

                view: 'month',

                dayFormat: 'short',

                firstDayOfWeek: 1, //Monday

                nonworkingDays: [6],

                adjustToNonworkingTime: true,

                durationUnit: 'day',

                monthScale: 'day',

                autoSchedule: true,

                disableTaskProgressChange: true,

                //resourceTimelineMode: 'histogram',

                //disableWindowEditor: true,

                //groupByResources: true,

                hideTimelineHeaderDetails: true,

                snapToNearest: true,

                taskColumns: [

                    {

                        label: 'Tasks',

                        value: 'label',

                        sort: 'asc',

                        size: '60%'

                    },

                    {

                        label: 'Duration (days)',

                        value: 'duration',

                        formatFunction: (date) => parseInt(date)

                    }

                ],

                dataSource: new window.Smart.DataAdapter({
                    dataSource:
                        [{
                            id: 0,
                            label: 'Project 1',
                            synchronized: true,
                            expanded: true,
                            type: 'project',
                            connections: [
                                {
                                    target: 1,
                                    type: 0
                                }
                            ],
                        },
                        {
                            id: 1,
                            label: 'Project 1.1',
                            reportsTo: '0',
                            dateStart: '2021-2-31',
                            dateEnd: '2021-6-1',
                            expanded: true,
                            type: 'project',
                            connections: [
                                {
                                    target: 4,
                                    type: 0
                                }
                            ]
                        },
                        {
                            id: 2,
                            reportsTo: 1,
                            label: 'Task 1.1.1',
                            dateStart: '2021-3-10',
                            dateEnd: '2021-4-1',
                            type: 'task',
                        },
                        {
                            id: 3,
                            reportsTo: 1,
                            label: 'Task 1.1.2',
                            dateStart: '2021-4-2',
                            dateEnd: '2021-6-1',
                            type: 'task',
                            connections: []
                        },
                        {
                            id: 4,
                            reportsTo: 2,
                            label: 'Task 1.1.1.1',
                            dateStart: '2021-07-10',
                            dateEnd: '2021-08-30',
                            type: 'task',
                        },
                        {
                            id: 5,
                            reportsTo: 2,
                            label: 'Task 1.1.1.2',
                            dateStart: '2021-08-30',
                            dateEnd: '2021-10-1',
                            type: 'task'
                        }
                        ],
                    keyDataField: 'id',
                    parentDataField: 'reportsTo',
                    id: 'id',
                    dataFields: [
                        'id: number',
                        'label: string',
                        'dateStart: date',
                        'dateEnd: any',
                        'type: string',
                        'duration: any',
                        'progress: any',
                        'reportsTo: any',
                        'synchronized: boolean',
                        'expanded: boolean'
                    ]
                })
            }
        }
    }
);
export { };

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Joko,

You can use this:

<script>
import “smart-webcomponents/source/modules/smart.splitter.js”;
import {onMount} from ‘svelte’;
onMount(() => {
const splitter = document.querySelector(“#splitter”);
splitter.innerHTML = `
<smart-splitter id=”splitter” live-resize>
<smart-splitter-item id=”item0″>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside.</p>
</smart-splitter-item>
<smart-splitter-item id=”item1″>
<h2>BENGAL TIGER</h2>
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Tiger_in_Ranthambhore.jpg/220px-Tiger_in_Ranthambhore.jpg&#8221; />
<p>The Bengal tiger’s coat is yellow to light orange, with stripes ranging from dark brown to black; the belly and the interior parts of the limbs are white, and the tail is orange with black rings.</p>
<p>Males have an average total length of 270 to 310 cm (110 to 120 in) including the tail, while females measure 240 to 265 cm (94 to 104 in) on average. The tail is typically 85 to 110 cm</p>
</smart-splitter-item>
</smart-splitter>`;
})

</script>

<h1>Welcome to SvelteKit</h1>
<div id=”splitter”>
</div>

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, you can use scrollTop and scrollLeft properties of the gantt chart.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts