Products

[Yavor Dashev]

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, 3 months ago by Yavor Dashev.

[Yavor Dashev]

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/

[Yavor Dashev]

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/

[Yavor Dashev]

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, 3 months ago by Yavor Dashev.
• This reply was modified 2 years, 3 months ago by Yavor Dashev.

[Yavor Dashev]

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/

 

 

 

[Yavor Dashev]

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/

[Yavor Dashev]

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/

[Yavor Dashev]

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>

[Yavor Dashev]

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>
 

[Yavor Dashev]

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&gt;
<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>

[Yavor Dashev]

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>

[Yavor Dashev]

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, 4 months ago by Yavor Dashev.

[Yavor Dashev]

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/

[Yavor Dashev]

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/

[Yavor Dashev]

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