Yavor Dashev's Replies

@yavor-dashev

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 54 total)

1 2 3 4 →

Author

Posts

January 17, 2022 at 5:24 pm in reply to: Dynamically Add TabItem (LayoutPanelItem) #102789

Yavor Dashev

Participant

Hi ehill,

I would like to inform you that I have added a work item for which this functionality will be supported through the ‘Update’ method as this functionality currently is not supported for Blazor.

We will work on this to be added 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/

This reply was modified 2 years, 10 months ago by Yavor Dashev.

January 14, 2022 at 5:16 pm in reply to: Is there a way to use single tooltip instance for multiple elements? #102783

Yavor Dashev

Participant

Hi MarkM,

To make matters a bit more convenient I have created a complete code example which showcases this funcitonality.

Link to the code example: https://codepen.io/yavor_htmlelement/pen/dyVOEpY

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

January 14, 2022 at 4:43 pm in reply to: Dynamically Add TabItem (LayoutPanelItem) #102782

Yavor Dashev

Participant

Hi Ehill,

I have created a complete code example which showcases the functionality that you require.

In your razor file:


<style>
		smart-docking-layout {
			width: 100%;
			height: 500px;
			max-width: 1000px;
			background-color: #EEEDF3;
		}
			smart-docking-layout .smart-items-container smart-splitter-item.smart-element,
			smart-docking-layout .smart-items-container > .smart-container > smart-splitter-item.smart-element {
				width: 50%;
				height: 50%;
			}
			smart-docking-layout smart-tabs-window smart-slider.smart-element,
			smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
				height: 100%;
				width: 100%;
			}
			smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
				display: block;
			}
	</style>
    <button @onclick="addItem"> Add item</button>
	<DockingLayout @ref="dockingLayout" OnReady="OnReady" Layout=@layoutStructure>
	</DockingLayout>
	<div id="Input">
		<br />
		<br />
		<TextArea Value="What is Lorem Ipsum?"></TextArea>
	</div>
	<div id="Slider">
		<br />
		<br />
		<Slider Value="50" ShowButtons="true" TicksVisibility="TicksVisibility.Major" TicksPosition="TicksPosition.Track"></Slider>
	</div>
@code {
    DockingLayout dockingLayout;

	private void addItem () {
        int index= 1;
        dockingLayout.InsertBeforeItem(index,  new object[] {
				new {
					type = "LayoutGroup",
					size = 200,
					items = new object[] {
						new {
							type = "LayoutPanel",
							label = "Input",
							id = "tabPanel",
							items = new object[] {
								new {
									type = "LayoutPanel",
									label = "TextBox Tab",
									content = "#Input"
								},
								new {
									type = "LayoutPanel",
									label = "Slider Tab",
									content = "#Slider"
								}
							}
						}
					}
				}
                }
                );
    }
	private object[] layoutStructure = new object[] {
		new {
			type = "LayoutGroup",
			orientation = "horizontal",
			items = new object[] {
				new {
					type = "LayoutGroup",
					size = 200,
					items = new object[] {
						new {
							type = "LayoutPanel",
							label = "Input",
							id = "tabPanel",
							items = new object[] {
								new {
									type = "LayoutPanel",
									label = "TextBox Tab",
									content = "#Input"
								},
								new {
									type = "LayoutPanel",
									label = "Slider Tab",
									content = "#Slider"
								}
							}
						}
					}
				},
				new {
					type = "LayoutPanel",
					label = "Output",
					items = new object[]{
						new {
							id="outputTab",
							label = "Output",
							headerPosition = "none",
							content = "Write more text here..."
						}
					}
				}
			}
		},
		new {
			id = "item0",
			label = "Tabs 0",
			items = new object[]{
				new {
					label = "Tab A",
					selected = true,
					content = "What is Lorem Ipsum?\n" +
						"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of" + "type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in " + "the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n" +
						"Why do we use it?\n" +
						"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal " + "distribution of letters, as opposed to using \"Content here, content here\", making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their" + "default model text, and a search for \"lorem ipsum\" will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on " + "purpose (injected humour and the like)."
				}
			}
		}
	};
	private void OnReady(DockingLayout dockingLayout)
	{
	}
}

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

January 11, 2022 at 4:44 pm in reply to: smart-check-box collection on change event #102770

Yavor Dashev

Participant

Hi Mario,

I have created a quick JavaScript code snippet to showcase how to achieve the functionality that you need and store the value of the checked checkbox.

    <smart-check-box value="1">Check Box</smart-check-box>
    <smart-check-box value="1">Check Box</smart-check-box>
    <smart-check-box value="17-333123">Check Box</smart-check-box>
    <smart-check-box value="17-22">Check Box</smart-check-box>
    <smart-check-box value="17-321">Check Box</smart-check-box>
    <smart-check-box value="17-123">Check Box</smart-check-box>
    <smart-check-box value="17-111">Check Box</smart-check-box>
    <smart-check-box value="17-333331">Check Box</smart-check-box>
    <smart-check-box value="17-22">Check Box</smart-check-box>
    <smart-check-box value="17333">Check Box</smart-check-box>
    <smart-check-box value="17-4PH1111">Check Box</smart-check-box>
    <smart-check-box value="17-4PH2">Check Box</smart-check-box>
    <smart-check-box value="17-4PH1">Check Box</smart-check-box>
    <smart-check-box value="17-4PH123">Check Box</smart-check-box>

	<!-- scripts -->  
    <script type="module" src="../../../source/modules/smart.checkbox.js"></script> 
    <script >
        window.onload = function () {
            const allCheckBoxes = document.querySelectorAll("smart-check-box");
            let checkedBoxesValues= []

            Array.from(allCheckBoxes).forEach(checkBox => {
                checkBox.addEventListener('change', ()=> {
                    checkedBoxesValues.push(checkBox.value)
                    console.log(checkedBoxesValues)
                })
            })
        };
    </script>

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

This reply was modified 2 years, 10 months ago by Yavor Dashev.
This reply was modified 2 years, 10 months ago by Yavor Dashev.

January 7, 2022 at 2:58 pm in reply to: Set AllowCellsWrap dynamically (Blazor) #102758

Yavor Dashev

Participant

Hi TurricanDE,

Yes this behavior is not intended and I have added a work item for this use case and we will work to fix it as soon we are able.

I would like to thank you for reporting this issue as it helps us 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/

December 29, 2021 at 2:50 pm in reply to: find a specific row in a grid #102710

Yavor Dashev

Participant

Hi Giovanni Zomer,

I have created a code example for you in order to showcase the functionalities that you require.

Link to the complete demo: https://codepen.io/yavor_htmlelement/pen/dyVOEpY?editors=1010

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

December 22, 2021 at 6:27 pm in reply to: Smart Router Cache Page #102684

Yavor Dashev

Participant

Hi Joko Pitoyo,

Would you like to give a bit more context of your use case?

I would suggest for your use case to use the native CacheStorage.

More information about it here: https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

December 22, 2021 at 6:15 pm in reply to: focus on input inside opened window not works #102683

Yavor Dashev

Participant

Hi Jozef,

To achieve the functionality that you need you will need to add a time out in the open event of the SmartWindow.

I have created a complete code snippet for this scenario:


<div>
<div>    <smart-window ></div>
<div>        <div id="article"></div>
<div>            <smart-text-area value="123"></smart-text-area></div>
<div>        </div></div>
<div>    </smart-window></div>
<div>    <smart-button id="windowBtn">Open/Close</smart-button></div>
<div>    <!-- scripts --></div>
<div>    <scripttype="module"src="../../../source/modules/smart.window.js"></script></div>
<div>    <scripttype="module"src="../../../source/modules/smart.textarea.js"></script></div>
<div>    <scripttype="module"src="../../../source/modules/smart.button.js"></script></div>
<div>    <script></div>
<div>           const windowElement = document.querySelector('smart-window'),</div>
<div>                btn = document.getElementById('windowBtn');</div>
<div></div>
<div>            btn.addEventListener('click', () =>{</div>
<div>                if(windowElement.opened) {</div>
<div>                    windowElement.close()</div>
<div>                }</div>
<div>                else {</div>
<div>                    windowElement.open();</div>
<div>                }</div>
<div>            });</div>
<div>            windowElement.addEventListener('open', (event) => {</div>
<div>                const textArea = document.querySelector('smart-text-area');</div>
<div>                setTimeout(() => {</div>
<div>                    textArea.focus();</div>
<div>                }, 500);</div>
<div>            });</div>
<div></div>
<div>    </script></div>
<div></body>

</div>
</div>
<div></div>
<div>Let me know what you think!</div>
<div></div>
<div>Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/</div>

December 20, 2021 at 3:56 pm in reply to: onRowUpdate #102669

Yavor Dashev

Participant

Hi Christophe Weibel,

If you want to get the new value in the cells of the row you will have to use onRowUpdated method.

Quick code snippet:

onRowUpdated: (index, stamp, rowNewValue) => {
<div>
<div>                console.log(rowNewValue)</div>
<div>            },

</div>
<div>

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

</div>
</div>

December 16, 2021 at 3:34 pm in reply to: WindowCustomizationFuction Edit Repeating Event #102660

Yavor Dashev

Participant

Hi Ede Gross,

You can bind for the itemUpdate event to record the change of the event.

Quick code snippet for this use case:

 scheduler.addEventListener('itemUpdate', function (event) {
<div>
<div>        const detail = event.detail,</div>
<div>            item = detail.item;</div>
<div>        console.log(item)</div>
<div>    })

</div>
</div>
<div>Or you can use the updateEvent method in order to update an Event of the Scheduler compoent.</div>
<div>More info about it you can find in the Scheduler API: https://www.htmlelements.com/docs/scheduler-api/</div>
<div></div>
<div>

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

</div>

December 15, 2021 at 5:49 pm in reply to: WindowCustomizationFuction Edit Repeating Event #102658

Yavor Dashev

Participant

Hi Ede Gross,

I have created a code snippet to showcase how to handle such situation.

In your JavaScript:


<div>
<div> scheduler.windowCustomizationFunction = (target, type, event, e) => {</div>
<div>        if (type === 'confirm') {</div>
<div>            let footerTemplate= target.querySelector('.smart-footer');</div>
<div>            footerTemplate.style.display = 'none';</div>
<div>            let btnElementEditEvent = document.createElement('smart-button');</div>
<div>            let btnElementEditSeries = document.createElement('smart-button');</div>
<div>            btnElementEditSeries.classList.add('smart-scheduler-window-button');</div>
<div>            btnElementEditEvent.classList.add('smart-scheduler-window-button');</div>
<div>            btnElementEditSeries.classList.add('edit-series');</div>
<div>            btnElementEditEvent.classList.add('edit-event');</div>
<div>            btnElementEditSeries.innerText = 'Edit series';</div>
<div>            btnElementEditEvent.innerText = 'Edit event';</div>
<div>            btnElementEditEvent.ariaLabel = 'edit-event';</div>
<div>            let confirmEl = document.getElementById('schedulerConfirmWindowContent');</div>
<div>            confirmEl.appendChild(btnElementEditEvent);</div>
<div>            confirmEl.appendChild(btnElementEditSeries);</div>
<div>            btnElementEditEvent.onclick = () => {</div>
<div>                scheduler.windowCustomizationFunction = null;</div>
<div>            }</div>
<div>            btnElementEditSeries.onclick = () => {</div>
<div>                scheduler.windowCustomizationFunction = null;</div>
<div>            }</div>
<div>        }</div>
<div>    }

</div>
</div>
<div>Let me know if this works for you!</div>
<div></div>
<div>Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/</div>

December 15, 2021 at 5:10 pm in reply to: How to translate in french kanban component #102656

Yavor Dashev

Participant

Hi Christian Sammut,

Thank you for your interest in our products!

You can ‘translate’ the Kanban component using its Locale and Messages properties. More information about the you can find in the API documentation of the Kanban component.

For your second question by default this functionality is not supported at the time being but there is a JavaScript workaround for this use case.

window.onload = () => {
<div>
<div>    const kanban = document.querySelector('smart-kanban');</div>
<div>    kanban.addEventListener('open', (event)=> {</div>
<div>        const editWindow = document.querySelector('.smart-kanban-window'),</div>
<div>            editForm = editWindow.querySelector('.edit');</div>
<div></div>
<div>        let newFormElement = document.createElement('smart-multi-combo-input');</div>
<div>        editForm.children[1].remove()</div>
<div>        editForm.appendChild(newFormElement);</div>
<div>    });</div>
<div>};</div>
<div>

</div>
<div></div>
<div>If you urgently need this functionality you can request custom development for this functionality by contacting sales@jqwidgets.com.</div>
Please, do not hesitate to contact us if you have any additional questions.Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/</div>
<div></div>
</div>
</div>
</div>

This reply was modified 2 years, 11 months ago by Yavor Dashev.

December 2, 2021 at 5:13 pm in reply to: js-problems with dropdownlist in form #102630

Yavor Dashev

Participant

Hi olegr,

Apologies for the wrong reply from my side.

I now tested it with version 11.0 of SmartUI and works without the mentioned issues.(previosly I tested it with v10)

If you update to the v11 of SmartUI this behavior will be resolved.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

December 2, 2021 at 3:30 pm in reply to: js-problems with dropdownlist in form #102629

Yavor Dashev

Participant

Hi olegr,

I can confirm the reported behavior form you and its definitely a issue and I have added a work item for this use case.

However as a workaround if you want to get the value of the SmartDropDown component you can do by using the following code snippet:

    const dropdownlist = document.querySelector('.smart-drop-down-list');
    dropdownlist.addEventListener('change', (event) => {
        let dropdowValue = event.detail.value;
        console.log(dropdowValue)
    });

Let me know if this suits 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/

December 1, 2021 at 3:07 pm in reply to: Change row height of the time line month view #102618

Yavor Dashev

Participant

Hi Javi Navarrete,

Thank you for the additional information.

With it I think now I completely understand your use case and which CSS variable you need to achieve the functionality that you need.

I have created a new CSS code snippet for this:

smart-scheduler {
    height: 100%;
    --smart-scheduler-timeline-cell-height:300px;
}

Let me know what you think about this!

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

Viewing 15 posts - 1 through 15 (of 54 total)

1 2 3 4 →