@yavordashew
@yavordashew
Forum Replies Created
-
AuthorPosts
-
yavordashew
MemberHi Mike,
For your case I have made a code snippet to showcase how this can be achieved.
In you HTML file:
<smart-tree id=”tree”>
<smart-tree-items-group>
<i class=”material-icons”></i> Attractions
<smart-tree-item>Movies <button id=”menuItemButton” >Click Me</button> </smart-tree-item>
<smart-tree-item>Circus <button id=”anotherMenuItemButton”>Click Me</button> </smart-tree-item>
<smart-tree-item>Concerts</jqx-tree-item>
<smart-tree-item>Monuments</jqx-tree-item>
</smart-tree-items-group>
</smart-tree>
In your CSS file(this is for positioning the button to the right side) :
.smart-tree .smart-tree-item-label-element > span{
width: 100%;
height: 100%;
}
.smart-tree .smart-tree-item-label-element span button{
position: absolute;
right: 0;
}
And in your JavaScript file:
var button = document.getElementById(‘menuItemButton’)
var button2 = document.getElementById(‘anotherMenuItemButton’)
button.onclick= function(){
console.log(‘Button clicked’)
alert(‘The button in the menu tree was clicked’)
}
button2.onclick= function(){
console.log(‘Button clicked’)
alert(‘The button in the menu tree was clicked’)
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi Cetin Sert,
Yes the syntax is a bit different if you want to have a boolean expression.
The addFilter method should look like this:
addFilter(‘ColumnName’,’equal YourCondition‘)
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi Johnny,
Happy New Year best wishes from Smart UI Team!
There is a way that you can access the column headers properties and change them according to your needs.
I have made a code snippet for you to showcase one way of doing this:
<script>
let clickHandler = function(){
const table = document.getElementById(‘table’)
table.columns = [
{ label: ‘ID your language’, dataField: ‘id’, dataType: ‘number’ },
{ label: ‘Name in Another Language’, dataField: ‘firstName’, dataType: ‘string’ },
{ label: ‘Last Name in Another Language’, dataField: ‘lastName’, dataType: ‘string’ },
{ label: ‘Product Name in Another Language’, dataField: ‘productName’, dataType: ‘string’ },
{ label: ‘Qunatity in Another Language’, dataField: ‘quantity’, dataType: ‘number’ }
]
console.log(‘Column Headers Changed’)
}
</script>
<body>
<smart-table id=”table”></smart-table>
<button onclick=”clickHandler()”>Click Me</button>
</body>
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 12, 2021 at 1:08 pm in reply to: how to create docking layout dynamically using java script and jquery? #101317MemberHi kaltura,
In this case you cant have ‘<p>’ tag inside the smart-docking-layout component like in your last reply therefore you can’t have the functionality to drag and drop the ‘<p>’.
The closest thing in to what you want to achieve is to drag a tab from the docking layout and insert it into another docking layout component.
In a previous reply from 4th of January I have made a code snippet with you can achieve this functionality.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi Walter,
For your particular case I would suggest you to take a look at the dataGrid update data demo where you will find a case similar to yours.
However I have made a code snippet with a code with the result you want to achieve:
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
// myDataSourceArray its just an example data
var myDataSourceArray = [firstNames, lastNames, productNames, priceValues]
updateBtn.onclick = () => {
console.log(‘DataUpdated’)
const grid = document.querySelector(“#treegrid”);
grid.dataSource = new window.Smart.DataAdapter({
dataSource: myDataSourceArray,
dataFields: [
‘id: number’,
‘firstName: string’,
‘lastName: string’,
‘productName: string’,
‘quantity: number’,
‘price: number’,
‘total: number’
]
})
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi kaltura,
I have replied to your question in the ‘how to create docking layout dynamically using java script and jquery?’ topic in the forum.
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 12, 2021 at 8:44 am in reply to: how to create docking layout dynamically using java script and jquery? #101312MemberHi kaltura,
Unfortunately the ‘smart-docking-layout’ doesn’t support dragging the entire ‘smart-docking-layout’ component to be inserted into another ‘smart-docking-layout’ component.The best option is to drag ‘tabs’ from one docking layout into another as I mentioned in my previous post although you mentioned you have some API conflicts using the provided code snippet. If the option for drag and drop a ‘tab’ into another docking layout suits your purposes you can share some of your code to help you solve the API conflicts you mentioned.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi Ronak,
If you want to customise the grid header so that it spans over two column you can do this by accessing the columnGroups property like this:
this.grid.columns = [
{label: ‘First Name’, dataField: ‘firstName’, columnGroup: ‘name’},
{ label: ‘Last Name’, dataField: ‘lastName’, columnGroup: ‘name’ },
{ label: ‘Product’, dataField: ‘productName’, columnGroup: ‘order’},
{ label: ‘Quantity’, dataField: ‘quantity’, columnGroup: ‘order’}
]
this.grid.columnGroups = [
{ label: ‘Customer Name’, align: ‘center’, name: ‘name’ },
{ label: ‘Order Detals’, align: ‘center’, name: ‘order’ }
]
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi davout,
You can use ‘event.target’ to check from where the event is coming from, also you use event.preventDefault() and event.target can be the window or another component that is inside the window that fires the same event.
For example:
onClose(event): void {
const smartWindow = this.smartWindow;
if (event.target === smartWindow.nativeElement) {
event.preventDefault()
}
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi davout,
If you want the popup date selection panel to be displayed outside of the smart-window component you can achieve this by changing the dropDownAppendTo property of the smart-date-time-picker component.By default it is in the date-time-picker but you can set it to an HTML element or the id of an HMTL element.
For example :
<smart-date-time-picker [dropDownAppendTo]=”‘body'”></smart-date-time-picker>
For further information you can check the component API here: https://www.htmlelements.com/angular/demos/datetimepicker/drop-down-position/#toc-dropdownappendto_any .
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/MemberHi davout,
I have tried to recreate the situation you have described but I was unable to encounter the problem you described.
I would suggest you to share the code for this particular situation in order to be able to come up with a solution for your 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/MemberHi davout,
Our component doesn’t support to add items in the html. For your case maybe it will be more reasonable to use ‘<smart-drop-down-list>’ component.
In the ‘<smart-drop-down-list>’ you can add items in the html similar to what you want to achieve with the ‘smart-input’.
Here is a little example of the drop-down-list component:
<smart-drop-down-list selected-indexes=”[0]” filterable>
<smart-list-item value=”1″>Affogato</smart-list-item>
<smart-list-item value=”2″>Americano</smart-list-item>
<smart-list-item value=”3″>Bicerin</smart-list-item>
<smart-list-item value=”4″>Breve</smart-list-item>
</smart-drop-down-list>
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 7, 2021 at 9:29 am in reply to: smart-window is center aligning all content – how to change? #101296MemberHi davout,
I have tested the ‘smart-window’ component with a form in it and I don’t get the same behaviour as described from you.
Would you share some of your code if its possible, also you can use the following class to style the components inside our component and check if the ‘smart-window’ is inheriting styles.
/*The class you can use to style the container inside the window */
.smart-window .smart-content-container{
/* Your Styles Here */
}
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 6, 2021 at 10:32 am in reply to: how to create docking layout dynamically using java script and jquery? #101292MemberHi kaltura,
From the example you have shared from the w3schools.com I have succeded to implement their example with our component.
Once more I have prepared a code snippet for you, which has the functionality of dragging a paragraph tag(this is just for example) into
our component tabs. This is the code snippet to add in your javascript file:
function drag_handler(ev) {
console.log(“Drag Confirmed”);
}
function dragstart_handler(ev) {
console.log(“dragStart Confirmed”);
ev.dataTransfer.setData(“text”, ev.target.id);
}
function drop_handler(ev) {
console.log(“Drop Confirmed”);
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log(“dragOver Confirmed”);
ev.preventDefault();
}
const dockingLayoutComponent = document.querySelector(‘jqx-docking-layout’);
dockingLayoutComponent.addEventListener(‘stateChange’, function(event){
});
And the code snippet for your HMTL file :
<smart-docking-layout id=”dockingLayout2″ ondrop=”drop_handler(event);” ondragover=”dragover_handler(event);”></smart-docking-layout>
<div>
<p id=”drag1″ draggable=”true” ondrag=”drag_handler(event);” ondragstart=”dragstart_handler(event);”>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</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/MemberHi davout,
As I mentioned before the reason for the footer not to be displayed is that you have included the footer template inside your app.component.html file.
From the code you have sent us from your last message I can suggest that you have added the footer template inside your app.component.html file.
In order for the footer to be displayed you have to include it in your application root html file, for example: index.html.
There you have to include the footer template after your ‘<app-root></app-root>’ tag.
Yes, there is an option to send images via the IMG button when replying in ‘Text’ mode or in ‘Visual’ mode above the textfield there is icon for uploading images.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts