@boikom
@boikom
Forum Replies Created
-
AuthorPosts
-
admin
KeymasterHi Anshika,
What do you mean by nested dropdown?
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/August 27, 2022 at 8:23 am in reply to: [Blazor Scheduler]How to add an item to a scheduler datasource from an event #103553KeymasterHi,
You can use the AddEvent method to add a new Event to the Scheduler.
` private void SchedulerReady(Scheduler scheduler)
{
DateTime today = DateTime.Today;
scheduler.AddEvent(new SchedulerDataSource()
{
Label = “1Google AdWords Strategy”,
DateStart = new DateTime(today.Year, today.Month, today.Day, 9, 0, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 10, 30, 0).AddDays(1),
AllDay = true,
BackgroundColor = “#3F51B5”
});
}`another way is to set the DataSource property of the Scheduler to a new List.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/August 27, 2022 at 8:08 am in reply to: [Blazor Scheduler] Add event from an external source #103552KeymasterHi,
It can be achieved with a combination of Razor and Javascript. On the left side of the page, we will have a list with items which we will be able to drag and drop into the Scheduler. The drag and drop is implemented with Javascript.
Example:
@page "/" @inject IJSRuntime JSRuntime @using Smart.Blazor.Demos.Data <style> /* This is the CSS used in the demo */ html, body { width: 100%; height: 100%; margin: 0 auto; --smart-scheduler-timeline-cell-min-width: 40px; --smart-scheduler-event-border-radius: 4px; --smart-scheduler-timeline-nonworking-color: var(--smart-background); } .layout { display: flex; } .events { width: 200px; margin-right: 50px; } .smart-scheduler { width: calc(100% - 250px); height: 100%; } </style> <Example Name="Scheduler"> <div class="layout"> <div class="events"> <ul> @foreach (var item in Items) { <li value="@item" draggable="true">@item</li> } </ul> </div> <Scheduler OnReady="Ready" @ref="scheduler" Views="@views" View="SchedulerViewType.Week" DateCurrent="@dateCurrent"></Scheduler> </div> </Example> @code { Scheduler scheduler; string[] Items = new string[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" }; private object dateCurrent = DateTime.Today; private IEnumerable<SchedulerViewType> views = new List<SchedulerViewType>() { SchedulerViewType.Day, SchedulerViewType.Week, SchedulerViewType.Month, SchedulerViewType.Agenda }; public async void Ready(Scheduler scheduler) { await JSRuntime.InvokeVoidAsync("dragDrop"); } protected override void OnInitialized() { base.OnInitialized(); } }and the index file.
<!DOCTYPE html> <html> <head lang="en-us"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Smart Blazor Components Library</title> <base href="/" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" /> <link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script type="text/javascript" src="js/smart.blazor.js"></script> <script type="text/javascript" src="js/rrule.min.js"></script> <script type="text/javascript" src="_content/Smart.Blazor/js/smart.elements.js"></script> <script type="text/javascript"> function dragover_handler(ev) { ev.preventDefault(); ev.dataTransfer.dropEffect = 'move'; } function drop_handler(ev) { ev.preventDefault(); const scheduler = document.querySelector('smart-scheduler'); // Get the target element's data from the data transfer object const data = ev.dataTransfer.getData('text/plain').split(','); // gets the date from the drop coordinates. const date = scheduler.getDateFromCoordinates(ev.clientX, ev.clientY); // gets if we dropped over an all day cell. const isAllDay = scheduler.getIsAllDayCellFromCoordinates(ev.clientX, ev.clientY); if (!date) { return; } const dateStart = date; const dateEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + 1, date.getMinutes(), 0) // adds a new scheduler event. scheduler.createEvent( data[0], data[1], dateStart, dateEnd, isAllDay ) // finds the dragged item. const item = [...document.querySelectorAll('[draggable]')].find((item) => { if (item.getAttribute('value') === data[1]) { return true; } return false; }); // removes the dragged item. if (item) { item.remove(); } } function dragstart_handler(ev) { // Add the target element's data to the data transfer object ev.dataTransfer.setData('text/plain', ev.target.innerHTML + ',' + ev.target.getAttribute('value')); ev.dataTransfer.effectAllowed = 'move'; } // called by the scheduler after it is created. Setups drag & drop. function dragDrop() { const scheduler = document.querySelector('smart-scheduler'); scheduler.addEventListener('drop', (event) => { drop_handler(event); }); scheduler.addEventListener('dragover', (event) => { dragover_handler(event); }); document.querySelectorAll('[draggable]').forEach((item) => { item.ondragstart = dragstart_handler; }); } window.onload = () => { // } document.oncontextmenu = () => { return false; } // Single Page Apps for GitHub Pages // https://github.com/rafrex/spa-github-pages // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License // ---------------------------------------------------------------------- // This script checks to see if a redirect is present in the query string // and converts it back into the correct url and adds it to the // browser's history using window.history.replaceState(...), // which won't cause the browser to attempt to load the new url. // When the single page app is loaded further down in this file, // the correct url will be waiting in the browser's history for // the single page app to route accordingly. (function (l) { if (l.search) { var q = {}; l.search.slice(1).split('&').forEach(function (v) { var a = v.split('='); q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&'); }); if (q.p !== undefined) { window.history.replaceState(null, null, l.pathname.slice(0, -1) + (q.p || '') + (q.q ? ('?' + q.q) : '') + l.hash ); } } }(window.location)) </script> </head> <body> <div id="app"> <div style="position:absolute; top:30vh; width:100%; text-align:center"> <p><i class="fas fa-spin fa-spinner"></i>Loading...</p> </div> </div> <script src="_framework/blazor.webassembly.js"></script> </body> </html>Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterHi,
smart.elements.js will still exist in the source/modules folder. The github repo is updated now.
Best Regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterThe documentation to get started with components is https://www.htmlelements.com/docs/grid/ and the Overview topics for any other component.
Thank you for mentioning places which we missed to update. We will remove these.
Best Regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterHi rkever,
All examples use the files from source/modules. We do not use source/smart.elements.js or source/smart.element.js in our demos. You can look at them here: https://www.htmlelements.com/demos/grid/overview/. You can download the software from https://www.htmlelements.com/download/ or from npm. The issue is that these are still in github and we will remove them from there as well. The files which should be used are within the source/modules. The styles which should be used are within the source/styles folder. If there is any place on our website where we use something else, we will need to update it.
Best Regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/-
This reply was modified 2 years, 7 months ago by
admin.
August 24, 2022 at 5:23 am in reply to: Is there a simple way to add Smart.dropdownlist to an existing Blazorise applica #103524KeymasterHi,
With the DropDownList, you should choose whether to create it with the DataSource property set or you will add the ListItem elements. It is not possible to have both things at the same place.
For example:
<DropDownList @bind-SelectedIndexes="selectedIndexes" DataSource="dataSource" Filterable></DropDownList> @code { private int[] selectedIndexes = new int[] { 0 }; private List<string> dataSource = new List<string>() { "Affogato", "Americano", "Bicerin", "Breve", "Café Bombón", "Café au lait", "Caffé Corretto", "Café Crema", "Caffé Latte", "Caffé macchiato", "Café mélange", "Coffee milk", "Cafe mocha", "Cappuccino", "Carajillo", "Cortado", "Cuban espresso", "Espresso", "Eiskaffee", "The Flat White", "Frappuccino", "Galao", "Greek frappé coffee", "Alabala", "Indian filter coffee", "Instant coffee", "Irish coffee", "Liqueur coffee" };Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterHi,
The position accepts ‘near’, ‘far’ and ‘both’. ‘top and ‘bottom’ are invalid values. Reference: https://www.htmlelements.com/docs/grid-api/
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/August 23, 2022 at 5:04 am in reply to: Is there a simple way to add Smart.dropdownlist to an existing Blazorise applica #103521KeymasterHi,
You can add it to your code as Smart.Blazor.Button to avoid ambiguous usage.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterHi,
smart.elements.js is within the source/modules folder in the download package.
Best Regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterHi Rafa,
You can use the column’s showActionButton property for that purpose.
columns: [ { label: 'First Name', dataField: 'firstName', showActionButton: false }, { label: 'Last Name', dataField: 'lastName'}, { label: 'Product', dataField: 'productName' }, { label: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right',}, { label: 'Unit Price', dataField: 'price', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }, { label: 'Total', dataField: 'total', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' } ]Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterHi Aviv,
The help topic which was referred in the previous post has Setup with Vue 3 and Setup with Vue 2.x. The Scheduler is created in the mounted function in the example.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/KeymasterHi Aviv,
You can use it with Vue 2 or Vue 3. Look at https://www.htmlelements.com/docs/scheduler/#vue
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/June 3, 2022 at 1:10 pm in reply to: Server-side grouping of mass data with virtual scrolling possible? #103284KeymasterHi Joey2,
We have a property called ‘pageHierarchySize’, which is part of the ‘paging’ property which determines that. That property is still in development mode, but you can experiment with it. It should not be a problem to load thousands of records with paging and grouping enabled and groups loaded on demand like in https://www.htmlelements.com/demos/grid/server-side-grouping/.
Hope this helps.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/June 3, 2022 at 11:05 am in reply to: Server-side grouping of mass data with virtual scrolling possible? #103282KeymasterHi Joey,
Thank you for evaluating our Grid component. At present, it is not possible to combine grouping & virtual scroll. I will create a work item for this missing functionality and we will implement it in a future version. It is currently possible to use either virtual scroll or load on demand independently.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/ -
This reply was modified 2 years, 7 months ago by
-
AuthorPosts