@yavor-dashev

@yavor-dashev

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 54 total)
  • Author
    Posts
  • in reply to: Dynamically Add TabItem (LayoutPanelItem) #102789
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    in reply to: Dynamically Add TabItem (LayoutPanelItem) #102782
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    in reply to: smart-check-box collection on change event #102770
    Yavor Dashev
    Participant
    Up
    0
    Down

    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 4 months, 1 week ago by Yavor Dashev.
    • This reply was modified 4 months, 1 week ago by Yavor Dashev.
    in reply to: Set AllowCellsWrap dynamically (Blazor) #102758
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

     

     

     

    in reply to: find a specific row in a grid #102710
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    in reply to: Smart Router Cache Page #102684
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    in reply to: focus on input inside opened window not works #102683
    Yavor Dashev
    Participant
    Up
    0
    Down

    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>

    in reply to: onRowUpdate #102669
    Yavor Dashev
    Participant
    Up
    0
    Down

    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>
     

    in reply to: WindowCustomizationFuction Edit Repeating Event #102660
    Yavor Dashev
    Participant
    Up
    0
    Down

    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>

    in reply to: WindowCustomizationFuction Edit Repeating Event #102658
    Yavor Dashev
    Participant
    Up
    0
    Down

    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>

    in reply to: How to translate in french kanban component #102656
    Yavor Dashev
    Participant
    Up
    0
    Down

    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>

    in reply to: js-problems with dropdownlist in form #102630
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    in reply to: js-problems with dropdownlist in form #102629
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    in reply to: Change row height of the time line month view #102618
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

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