Products

[yavordashew]

Hi davout,
I agree yes this is a missing feature and I will add work item for it.
Thank you for you corporation as thanks to this we are able to improve our products constantly!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi kboughaba,
It will be best to share a bit more context of the use case of the Type error you are getting – the best is to create a code example which reproduces is in order to be able to give you a solution about it.
For the question before, take my apologies for missing it.
You have to define in the projectId in Scheduler in the SchedulerDataSource like so-

 dataSource: SchedulerDataSource[] = (() => {
        const today = new Date(),
            currentYear = today.getFullYear(),
            currentMonth = today.getMonth(),
            currentDate = today.getDate(),
            data = [
  {
                    label: 'Prescribe and/or administer treatment and medication',
                    doctorId: 3,
                    dateStart: new Date(currentYear, currentMonth, currentDate + 3, 9, 20),
                    dateEnd: new Date(currentYear, currentMonth, currentDate + 3, 10, 35)
                },
                {
                    label: 'Monitor the cognitive side effects of medication',
                    doctorId: 3,
                    dateStart: new Date(currentYear, currentMonth, currentDate + 4, 10, 20),
                    dateEnd: new Date(currentYear, currentMonth, currentDate + 4, 13)
                },
                {
                    label: '1111111Order supportive care services for patients',
                    projectId: 2,
                    dateStart: new Date(currentYear, currentMonth, currentDate - 4, 9),
                    dateEnd: new Date(currentYear, currentMonth, currentDate - 4, 11, 15)
                },
                {
                    label: '222222Participate in neuroscience research activities',
                    projectId: 1,
                    dateStart: new Date(currentYear, currentMonth, currentDate - 3, 9),
                    dateEnd: new Date(currentYear, currentMonth, currentDate - 3, 11, 15)
                }]

And then you can use it in the SchedulerResource like so:

resources: SchedulerResource[] = [
        {
            label: 'Project',
            value: 'projectId',
            dataSource: [
                {
                    label: 'Projet1',
                    id:1
                },
                {
                    label: 'Projet2',
                    id: 2
                }
            ]
        }
        ];

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Sebastian Calvo,
I have created a code example which showcases how to get the selectedIndexes when you have set the valueMember of the SmartTree.

       selectedItems =  [];
	getItems (){
		let selected= this.tree.current.selectedIndexes;
		this.selectedItems = [];
		for (let i =0; i < selected.length; i++) {
			this.selectedItems.push(this.tree.current.getItem(selected[i]));
		}
		Promise.all(this.selectedItems).then((values) => {
			this.selectedItems = values;
		});
	}
	expandItem () {
		if (!this.selectedItems[0].expanded){
			this.tree.current.expandItem(this.selectedItems[0], true)
		}
	}
	render() {
		return (
			<div>
				<Tree id="tree1" ref={this.tree} scrollMode="scrollbar" className="animation" selectionMode="oneOrMany"
					showLines dataSource={this.treeDataSource} displayMember="label" valueMember="value"></Tree>
        <button onClick={this.getItems.bind(this)}> Get selected items</button>
		<button onClick={this.expandItem.bind(this)}> Expand item</button>
      </div>
		);
	}
}

In this code snippet also showcases a simple way to manage expanded and checked items.
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
Yes I’m aware that is a bug and I have added a work item for it and.
We will work to fix this issue as soon as we are able to.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
If I have understood you inquiries correctly, we have demos which showcase the functionality you need.

https://www.htmlelements.com/demos/kanban/hierarchical-columns/
https://www.htmlelements.com/demos/kanban/hierarchical-columns-tabs/

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
Yes the reported behavior is present as described.
However when you want to remove tasks from the SmartKanban I suggest you use the removeTask() method.
Quick code example if you want to remove all the tasks in a kanban:

   for(let i = 0; i < this.kanban.dataSource.length; i ++){
                this.kanban.removeTask(i);
    }

More about it you can find in the API of the Kanban:
https://www.htmlelements.com/docs/kanban-api/
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
I have prepared a quick code snippet which showcases how to get the data you need.
First in your app.component.html file you define the event like this:

<smart-kanban
    #kanban id="kanban"
    [dataSource]="dataSource"
    [columns]="columns"
    [formatStringDate]="'dd MMM yyyy'"
    [taskUserIcon]="false"
    [taskActions]="true"
    [taskDue]="true"
    (dragEnd) = "dragEndHandler($event)"
    >
</smart-kanban>

//And in your app.component.ts file:

    dragEndHandler(event): void {
        const detail =  event.detail,
        item = detail.item;
        setTimeout(() => {
            console.log(item.data.status);
            console.log(item.data.id)
        }, 100);
    };

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi kboughaba,
I have edited the code snippet that you have shared so that it achieves the functionality you need for your use case.

    resources: SchedulerResource[] = [
        {
            label: 'Doctors',
            value: 'doctorId',
            dataSource: [
                {
                    label: 'Andrew Johnson',
                    id:1,
                    speciality: 'Anesthesiology',
                    image: '../../../images/phonebook/andrew.png',
                    backgroundColor: '#28a745'
                }
            ]
        },
        {
            label: 'Project',
            //Instead projectId we set it to doctorId
            value: 'doctorId',
            dataSource: [
                {
                    label: 'Projet1',
                    id:1
                },
                {
                    label: 'Projet2',
                    id: 2
                }
            ]
        }
        ];

If you set the value of the resource to doctorId like in our case the project list will be ‘checked’ too.
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
You can find the arguments that are passed into the function in the documentation of the SmartKanban component in its API docs here:
https://www.htmlelements.com/docs/kanban-api/
Also in the demo that I have sent you in my previous reply you can see how exactly is used.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
I have tested a similar case as yours but I wasn’t able to completely reproduce the issue as you do.
However one possible source for this issue can be if you have loaded the SmartKanbanTask before your data is loaded as its asynchronous task.
If you still struggle with this issue it will be best to create a complete code example which reproduces the issue in order to be able to give you a solution about it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Ronak,
Well as stated from our previous reply the exact functionality that you need is supported by the TreeGrid and when applying this functionality to non TreeGrid it will be normal to have some compromises.
IF you want to get the checked rows/data/ just use the getSelection method of the SmartGrid like so:

  const result = this.grid.getSelection();
   console.log(result)

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi kboughaba,
Yes, that is normal because event.detail.editors are generated by the SmartScheduler depending on properties and etc.
If you want to add a event listener (for example) to the item that you have added you can do it like in the code snippet that I have sent you in my
previous reply.
Also if you need more assistance do not hesitate to contact us!
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

HI Ronak,
1. The default SmartGrid doesn’t support the functionality you need, but the Tree Grid has the exact functionality as described by you.
Please, take a look at this demo: https://www.htmlelements.com/angular/demos/grid/tree-grid-checkbox/
2. For this inquiry you can set the ‘selection’ property and its mode to extended like so:
//In your app.components.ts file for example

selection = {
  enabled: true,
  allowCellSelection: true,
  mode: 'extended',
}

//in your app.component.html file:

<smart-grid #grid id="grid" [behavior]="behavior" [selection]="selection" [checkBoxes]="checkBoxes"
    [dataSource]="dataSource" [columns]="columns" [filtering]="filtering"  [editing]="editing" >
</smart-grid>

Also you can check out this demo regarding the selection: https://www.htmlelements.com/angular/demos/grid/selection-mode-row/
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi kboughaba,
I have prepared a quick code snippet which showcases how to achieve the functionality you want.
//In your JS file:

window.onload = function () {
    const scheduler = document.querySelector('smart-scheduler');
    scheduler.addEventListener('editDialogOpen', function (event) {
        const editors = event.detail.editors;
        if (!editors) {
            return;
        }
        const schedulerEvent = event.detail.item,
        dateEndEditor = editors.dateEnd,
        backgroundColorEditor = editors.backgroundColor,
        statusEditor = editors.status;
        let checkbox = document.createElement('smart-check-box');
        checkbox.innerHTML = 'Checkbox label'
        checkbox.addEventListener('click' , () => {
            let statusInput = statusEditor.querySelector('smart-input');
            if(checkbox.checked){
                statusInput.disabled = true;
            }
            else {
                statusInput.disabled = false;
            }
        })
        dateEndEditor.insertAdjacentElement('afterend', checkbox)
    });
};

Also we have two demos regarding customization of the editing window:
https://www.htmlelements.com/demos/scheduler/custom-window/index.htm
https://www.htmlelements.com/demos/scheduler/custom-window-editors/index.htm
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
Yes, excuse me for the mistake as I totally forgot about this property of the SmartKanban component.
This is the better approach for this use case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts