@yavordashew
@yavordashew
Forum Replies Created
-
AuthorPosts
-
yavordashew
MemberHi Riyaz Qureshi,
Here is another approach with which you can get the “First Name” for example using the same example as my first reply but with some
changes that you can see in the code snippet below
<Grid DataSource="dataRecords" Appearance="@appearance" Selection="@selection" OnRowClick="GridRowClicked">@code { //rest of the code private void GridRowClicked(Event eventObj) { GridRowClickEventDetail detail = eventObj["Detail"]; eventLog += "Row clicked Column " + detail.Row.data.FirstName + " "; } }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 Riyaz Qureshi,
Thank you for your interest in our components.
Below you will find a code snippet on how to achieve this using the ‘change’ event and from it you can get the ‘row’ data .@page "/grid-selection-mode-events" @using Smart.Blazor.Demos.Data @inject RandomDataService dataService <style> body, html, app { height: 100%; } app { overflow: auto; } .content { height: calc(100% - 70px); } /* This is the CSS used in the demo */ @@media only screen and (max-width: 400px) { smart-grid { width: 100%; } } smart-grid { width: 60%; } </style> <Example Name="Grid"> <p> This demo demonstrates the Grid's "change" event. The "change" event occurs when the user selects cells, rows or columns. The "change" event has two boolean arguments: "started" and "finished". When the selection starts, the "started" boolean argument value is "true". When the selection ends, the "finished" boolean argument value is "true". If the selection is with dragging, the values of "started" and "finished" is false. </p> @if (dataRecords == null) { <p><em>Loading...</em></p> } else { <Grid DataSource="dataRecords" Appearance="@appearance" Selection="@selection" OnChange="OnGridChanged"> <Columns> <Column DataField="FirstName" Label="First Name"></Column> <Column DataField="LastName" Label="Last Name"></Column> <Column DataField="ProductName" Label="Product"></Column> <Column DataField="Quantity" Label="Quantity" DataType="number" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right"> </Column> <Column DataField="Price" Label="Unit Price" DataType="number" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right" CellsFormat="c2"> </Column> <Column DataField="Total" Label="Total" DataType="number" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right" CellsFormat="c2"> </Column> </Columns> </Grid> <div class="options"> <div class="caption">Event</div> <div class="option" id="eventsLog"> @((MarkupString)eventLog) </div> </div> } </Example> @code { private string eventLog = ""; GridAppearance appearance = new GridAppearance() { ShowRowHeader = true }; GridSelection selection = new GridSelection() { Enabled = true, Mode = GridSelectionMode.Extended, AllowCellSelection = true }; private List<DataRecord> dataRecords; protected override void OnInitialized() { base.OnInitialized(); dataRecords = dataService.GenerateData(3000); } private void OnGridChanged(Event eventObj) { GridChangeEventDetail detail = eventObj["Detail"]; if (detail.Started) { eventLog = ""; } eventLog += "changed - started: " + detail.Started + ", finished: " + detail.Finished + "<br/>"; } }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,
The functionality you want to achieve is doable using the dataExport property.
More about it you can find in the Grid API and also in the Docs section we have a code example on how to have similar functionality.
Link to the mentioned documentation: https://www.htmlelements.com/docs/grid-export-selected-records/
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 Dark Beccio,
Take my apologies for the late reply.
You can use the templateApplied setting of the Smart.Router and with it you can run the javascript each time the template is applied.
I have made a little code snippet on how to achieve this:
//In your JS filewindow.onload = function () { const router = new JQX.Router('mainView', './'); router.setRoutes([ { path: '/', template: 'homeTemplate', title: 'Home' }, { path: '/about', template: 'aboutTemplate', title: 'About',}, { path: '/contacts', template: 'contactsTemplate', title: 'Contacts' } ]); router.templateApplied = viewChanged; function viewChanged(route) { const path = route.path; if (path == '/about'){ alert('The route is: '+ path) } } router.route('/'); };Note that for base for this code snippet I have used the example from the documentation about the Router.
Here is a link for it: https://www.htmlelements.com/docs/router/
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 tullio0106,
I don’t know if you tested my code example that I send but let me clarify it a bit.
window.onload in this case its executed when the whole page to be completely loaded with including all dependent resources such as stylesheets and images but one important thing to note here that it doesn’t fire any events at all and we just add an event listener onchange for every combobox and from it you can access the changed element id for example and I didn’t get the modified code from 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/MemberHi tullio0106,
Well this functionality is quite possible to achieve.You can also overwrite the default styles of thegrid-template-columnsif you want to have more columns in the row, but I am not aware of the your logic for displaying the grid but below I will share a example for you which has rows with column span of 20.<div class="smart-grid-layout"> <div class="row"> <div class="col-6"> 1 of 4 with 6 columns </div> <div class="col-6"> 2 of 4 with 6 columns </div> <div class="col-6"> 3 of 4 with 6 columns </div> <div class="col-2"> 4 of 4 with 2 columns </div> </div> <div class="row"> <div class="col-1"> 1 of 20 </div> <div class="col-1"> 2 of 20 </div> <div class="col-1"> 3 of 20 </div> <div class="col-1"> 4 of 20 </div> <div class="col-1"> 5 of 20 </div> <div class="col-1"> 6 of 20 </div> <div class="col-1"> 7 of 20 </div> <div class="col-1"> 8 of 20 </div> <div class="col-1"> 9 of 20 </div> <div class="col-1"> 10 of 20 </div> <div class="col-1"> 11 of 20 </div> <div class="col-1"> 12 of 20 </div> <div class="col-1"> 13 of 20 </div> <div class="col-1"> 14 of 20 </div> <div class="col-1"> 15 of 20 </div> <div class="col-1"> 16 of 20 </div> <div class="col-1"> 17 of 20 </div> <div class="col-1"> 18 of 20 </div> <div class="col-1"> 19 of 20 </div> <div class="col-1"> 20 of 20 </div> </div> </div>And in your CSS:
.smart-grid-layout .row{ grid-column: span 20!important; grid-template-columns: repeat(20, 1fr)!important; }Repeat represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
Hope that gives you a bit more clarification.
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 tullio0106,
Thank you for creating a code example of this issue with which I was able to duplicate it.
I have two option for which eliminate this issue.
The first one is replace the code in your script tag with this code snippet:<script type="text/javascript"> window.onload = () => { let combobox = document.querySelectorAll('smart-combo-box'); for (let i = 0; i < combobox.length; i++) { combobox[i].onchange = function (event) { eseguiRefresh(event) } } function eseguiRefresh() { alert("test "+event.currentTarget.id); } function mostraAlertMsgOption(elem) { } } </script>With the code above you don’t need to bind to ‘this’ like in the rest of your code in your example to get the combobox id and you can remove the eseguiRefresh() function from the smart-combo-boxx itself.
Also the shouldn’t be a problem to use our components with other libraries like with the ones you mentioned.
One other thing to mention is that I tested your code with my previous solution and it worked.
In the smart-combo-box I usedselected-indexesinstead ofselected-valueslike you do in your code example and with selected-indexes the issue was not present at all.
However if the problem still persists I will be glad to be able to help you again!
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 tullio0106,
Just to clarify a thing which you may already know.
Each row in the smart-grid-layout has col span of 12 columns and you can use different col classes depending on the window size.
For example if you want a column to take 12 columns of the grid on small screen devices you use the classcol-sm-12and to take 10 columns on medium screen device you use thecol-md-10class. Here is a quick example:<div class="smart-grid-layout"> <div class="row"> <div class="col-sm-12 col-md-1"> One of three columns </div> <div class="col-sm-12 col-md-1"> One of three columns </div> <div class="col-sm-12 col-md-10"> One of three columns </div> </div>Basically what you do with the grid layout is to set how much columns each
colclass will take on different screen sizes.
Also here is example for you previous question about how to have something like 2% / 18% / 30% / 2% / 18% / 30%.<div class="smart-grid-layout"> <div class="row"> <div class="col-1"> One of three columns </div> <div class="col-2"> One of three columns </div> <div class="col-3"> One of three columns </div> <div class="col-1"> One of three columns </div> <div class="col-2"> One of three columns </div> <div class="col-3"> One of three columns </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/MemberHi tullio0106,
We will require a full code example in order to duplicate you issue and give you a solution.
However I have a code example on your problem and I don’t encounter problem, the problem may be caused by some of your functions.
//In your HTML<smart-combo-box id="combobox" name="e818843742" drop-down-position="bottom" selected-indexes='[1]' onchange = "mostraAlertMsgOption();reloadFunction();" optional="true" type="combo" desc="ProdottoFERRETTI" onfocus="on_focus();" > <smart-list-item value="LAN" >Lang</smart-list-item> <smart-list-item value="LAN" >Lang</smart-list-item> <smart-list-item value="LAN" >Lang</smart-list-item> <smart-list-item value="LAN" >Lang</smart-list-item> <smart-list-item value="LAN" >Lang</smart-list-item> <smart-list-item value='**'></smart-list-item> </smart-combo-box>In your Js file:
function on_focus() { console.log('on_focus function') } function mostraAlertMsgOption(){ alert('test'); }; function reloadFunction (){ window.location.reload(); }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 Casper,
It is better to give us a bit more context and idea on what you are exactly trying to achieve with the grid header.
However I have made a quick code example on how to have basic setup for the grid header and I have used this demo for base: https://www.htmlelements.com/demos/grid/overview/
//In your JS file :window.Smart('#grid', class { get properties() { return { behavior: { columnResizeMode: 'growAndShrink' }, appearance: { alternationCount: 2, showRowHeader: true, showRowHeaderSelectIcon: true, showRowHeaderFocusIcon: true }, paging: { enabled: true }, pager: { visible: true }, sorting: { enabled: true }, editing: { enabled: true }, selection: { enabled: true, allowCellSelection: true, allowRowHeaderSelection: true, allowColumnHeaderSelection: true, mode: 'extended' }, dataSource: new window.Smart.DataAdapter({ dataSource: window.generateData(500), dataFields: [ 'id: number', 'firstName: string', 'lastName: string', 'productName: string', 'quantity: number', 'price: number', 'total: number' ] }), 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' }, { label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) { const rowId = settings.row; const columnDataField = settings.column; const template = settings.template; if (settings.value >= 4) { settings.cell.background = '#00A45A'; settings.cell.color = '#fff'; } else if (settings.value < 2) { settings.cell.background = '#DF3800'; settings.cell.color = '#fff'; } else { settings.cell.background = '#FFFDE1'; settings.cell.color = '#333'; } settings.value = '$' + new Number(settings.value).toFixed(2); } }, { label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) { const rowId = settings.row; const columnDataField = settings.column; const template = settings.template; if (settings.value >= 20) { settings.cell.background = '#00A45A'; settings.cell.color = '#fff'; } if (settings.value <= 5) { settings.cell.background = '#DF3800'; settings.cell.color = '#fff'; } else { settings.cell.background = '#FFFDE1'; settings.cell.color = '#333'; } settings.value = '$' + new Number(settings.value).toFixed(2); } } ], columnGroups: [ { label: 'Customer Name', align: 'center', name: 'name' }, { label: 'Order Detals', align: 'center', name: 'order' } ] }; } }); window.onload = function (){ const grid = document.getElementById('grid'); grid.header.visible = true; grid.header.buttons= [ "columns", "filter", "group", "sort", "format", "search" ] grid.header.template = '<span> Your Header Template </span> <button> Click me </button>' }The HTML file is the same as the one from the demo.
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 tullio0106,
You can overwrite the default style of columns of the grid layout like so :
//In your css file.col{ width: 10%!important; } .col-sm-8{ width: 5%!important; }//in your HTML file
<div class="smart-grid-layout"> <div class="row"> <div class="col">Header</div> </div> <div class="row"> <div class="col-sm-4">Side Bar</div> <div class="col-sm-8">Content. Grid system with 3 rows. The Header and Footer are with 100px height. The Content and Side Bar fill the rest of the remaining space. The Side Bar and Content sre stacked on small device screen.</div> </div> <div class="row"> <div class="col">Footer</div> </div>However if this is not the case I would advise you give us more context about your situation.
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 Dark Beccio,
In your specific case I will suggest to use our ComboBox component and I have prepared a little code snippet on how to achieve the functionality you intend to.
//In your Js file :window.onload = function () { const comboBox = document.querySelector('smart-combo-box'); comboBox.dataSource = [ { "label": "Afghanistan", "value": "AF" }, { "label": "land Islands", "value": "AX" }, { "label": "Albania", "value": "AL" }, { "label": "Algeria", "value": "DZ" }, { "label": "American Samoa", "value": "AS" }, { "label": "AndorrA", "value": "AD" }, { "label": "Angola", "value": "AO" }, { "label": "Anguilla", "value": "AI" }, { "label": "Antarctica", "value": "AQ" }, { "label": "Antigua and Barbuda", "value": "AG" }, { "label": "Argentina", "value": "AR" }, { "label": "Armenia", "value": "AM" }, { "label": "Aruba", "value": "AW" }, { "label": "Australia", "value": "AU" }, { "label": "Austria", "value": "AT" }, { "label": "Yemen", "value": "YE" }, { "label": "Zambia", "value": "ZM" }, { "label": "Zimbabwe", "value": "ZW" } ]; setInterval(function(){ console.log('Value',comboBox.selectedValues) },300) };//In you HTML file:
<smart-combo-box auto-complete="manual" min-length="1" selection-mode="zeroOrOne"></smart-combo-box>
One thing to have in mind although that these are different components they share similar 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/March 22, 2021 at 11:49 am in reply to: Autocomplete – Textbox – Datasource – using keyup event #101646MemberHi Gourav,
If you want yo change the dataSource of the texbox component you don’t need to bind to the (keyup) event in order to do that. That is because if you have datasouce of a function type it will call this function but only when you have the autocomplete property set to any other value except none. I have made code example about this and also one another if you need to bind to (keyup).
Please, do not hesitate to contact us if you have any additional questions.
<smart-text-box #textbox [autoComplete]="'manual'" [dataSource]="data" [inputMember]="'name'"></smart-text-box>export class AppComponent implements AfterViewInit, OnInit { @ViewChild('textbox', { read: TextBoxComponent, static: false }) textbox: TextBoxComponent; data = [ { "name": "Afghanistan", "code": "AF" }, { "name": "land Islands", "code": "AX" }, { "name": "Albania", "code": "AL" }, { "name": "Algeria", "code": "DZ" }, { "name": "American Samoa", "code": "AS" }, { "name": "AndorrA", "code": "AD" }, { "name": "Angola", "code": "AO" }, { "name": "Anguilla", "code": "AI" }, { "name": "Antarctica", "code": "AQ" }, { "name": "Antigua and Barbuda", "code": "AG" }, ]; ngOnInit(): void { // onInit code. } ngAfterViewInit(): void { // afterViewInit code. this.init(); } init(): void { const data2= [{ "name": "Moldova, Republic of", "code": "MD" }, { "name": "Monaco", "code": "MC" }, { "name": "Mongolia", "code": "MN" }, { "name": "Montenegro", "code": "ME" }, { "name": "Montserrat", "code": "MS" }, { "name": "Ukraine", "code": "UA" }, { "name": "United Arab Emirates", "code": "AE" }, { "name": "United Kingdom", "code": "GB" }, { "name": "United States", "code": "US" }, { "name": "United States Minor Outlying Islands", "code": "UM" }, { "name": "Uruguay", "code": "UY" }, { "name": "Vanuatu", "code": "VU" }, { "name": "Venezuela", "code": "VE" }, { "name": "Viet Nam", "code": "VN" }, { "name": "Yemen", "code": "YE" }, { "name": "Zambia", "code": "ZM" }, { "name": "Zimbabwe", "code": "ZW" }] const textBox = this.textbox; textBox.dataSource = function(input: string, callback: Function):void { let result: Array<object> = []; textBox.displayMember = 'name'; textBox.valueMember = 'code'; for (let d = 0; d <data2.length; d++) { if (data2[d].name.toLowerCase().indexOf(input.toLowerCase()) > -1) { result.push(data2[d]); } } setTimeout(function () { callback(result); }, 100); }; }And the second case when you want to bind to (keyup):
export class AppComponent implements AfterViewInit, OnInit { @ViewChild('textbox', { read: TextBoxComponent, static: false }) textbox: TextBoxComponent; data = [ { "name": "Afghanistan", "code": "AF" }, { "name": "land Islands", "code": "AX" }, { "name": "Albania", "code": "AL" }, { "name": "Algeria", "code": "DZ" }, { "name": "American Samoa", "code": "AS" }, { "name": "AndorrA", "code": "AD" }, { "name": "Angola", "code": "AO" }, { "name": "Anguilla", "code": "AI" }, { "name": "Antarctica", "code": "AQ" }, { "name": "Antigua and Barbuda", "code": "AG" }, ]; updateDataSource=function ():void { //let result: Array <object> = []; this.data = [{ "name": "Moldova, Republic of", "code": "MD" }, { "name": "Monaco", "code": "MC" }, { "name": "Mongolia", "code": "MN" }, { "name": "Montenegro", "code": "ME" }, { "name": "Montserrat", "code": "MS" }, { "name": "Ukraine", "code": "UA" }, { "name": "United Arab Emirates", "code": "AE" }, { "name": "United Kingdom", "code": "GB" }, { "name": "United States", "code": "US" }, { "name": "United States Minor Outlying Islands", "code": "UM" }, { "name": "Uruguay", "code": "UY" }, { "name": "Vanuatu", "code": "VU" }, { "name": "Venezuela", "code": "VE" }, { "name": "Viet Nam", "code": "VN" }, { "name": "Yemen", "code": "YE" }, { "name": "Zambia", "code": "ZM" }, { "name": "Zimbabwe", "code": "ZW" }] const textBox = this.textbox; textBox.displayMember = 'name'; textBox.valueMember = 'code'; }; setTimeout(function () { callback(result); }, 100); };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 Gourav,
Thecomboboxcomponent does not support the exact same functionality you aim to achieve.
However one way to do so is to useinputMemberproperty to show in the input of the combobox.
Little code snippet on how to do this:
In your app.component.ts file:export class AppComponent implements AfterViewInit, OnInit { @ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent; ngOnInit(): void { // onInit code. } ngAfterViewInit(): void { // afterViewInit code. this.init(); } init(): void { // init code. comboBox.dataSource = [ {label: 'Affogato' , value: 'fruit', group : 'Affogato fruit' }, { label: 'Americano' , value: 'fruit', group : 'Affogato fruit' }, {label: 'Breve', value: 'fruit', group : 'Affogato fruit' }, { label: "Café Crema", value: 'fruit', group : 'Affogato fruit' } ] this.combobox.inputMember = 'group'; }And in you app.component.html file :
<smart-combo-box #combobox [selectionMode]="'zeroOrMany'" [selectionDisplayMode]="'tokens'" [placeholder]="'Select items:'" ></smart-combo-box>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 Dark Beccion,
The default filter row does not support the functionality you want to achieve.
However you can add similar functionality in several ways.
You can do it programmatically for example like this :filtering: { enabled: true, filter: [ ['firstName', 'contains Andrew or contains Nancy'], ] }Or one way is to have filter panel enabled like in this demo https://www.htmlelements.com/demos/grid/filtering-panel/.
And third solution is to have custom filterEditor in the column to achive this.
I have used this demo for base example https://www.htmlelements.com/demos/grid/filtering-row-custom-editor/
And add the filterEditor in the column :columns: [ { label: 'First Name', dataField: 'firstName',filterEditor: { template: '<smart-input drop-down-button-position="right" placeholder="Azienda" style="border-radius: 0px; border: none; width: 100%; height:100%"></smart-input>', onInit(column, editor) { const input = editor.querySelector('smart-input'); input.addEventListener('change', () => { if (input.value === '') { grid.clearFilter(); // if the use enters empy value the filtering is cleared } else { if ( input.value.indexOf(' ') >= 0 ){ let inputValue = input.value.split(' '); //split the values where the whitespase is grid.addFilter('firstName' , "contains "+inputValue[0]+" or equal "+inputValue[1]+"") }else { column.filter = 'equal "' + input.value.trim() + '"'; } } }); } }},Hope one of these solutions 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/ -
AuthorPosts