Telerik Forums
UI for ASP.NET MVC Forum
9 answers
381 views

Hi,

I upgraded to 2020 of the Telerik ASP.NET MVC UI and using the Grid control Export to Excel feature in my cloud application.  During upgrade,Telerik required me to upgrade my System.Web.Mvc reference to a newer version, which I did.  My web application is working fine on my local system, but now when I'm trying to publish the project to Azure I get the following error in my preview...

 

Could not load type 'System.Web.Mvc.ViewUserControl<DateTime?>'.

 

And I am not able to publish.  

 

Any ideas on what is causing this and what I need to fix to publish my project to Azure?

Thanks,

Shawn

 

Shawn
Top achievements
Rank 1
 answered on 04 Nov 2020
3 answers
173 views

Hello,

I'm trying to make a WeekTimeLine without TimeHeader, only date and Employee.

So I did this in scheduler => View() =>

views.TimelineWeekView(weekView =>
{
    weekView.Title("Woche");
    weekView.WorkDayStart(8, 0, 0);
    weekView.WorkDayEnd(18, 0, 0);
    weekView.ColumnWidth(25);
    weekView.DateHeaderTemplate("#= kendo.toString(date,'ddd/d')#");
    weekView.MajorTimeHeaderTemplate("<p>-</p>");
    weekView.Groups(g =>
    {
        g.Date(true);
        g.Orientation(SchedulerGroupOrientation.Vertical);
    });
    weekView.MajorTick(600);
    weekView.MinorTickCount(1);
});

 

If i show the WeekTimeLine_View Grouped with 9 Employees, then it works great, but starting from the 10th, the Event in the PNG starts to go outside the Lines of its Employee.

All the Events in the PNG end at 18:00, the first 4 start at 08:00 and the last small one starts at 17:00.

Any Idea what can cause this Problem ?

Thanks in advance

Ramadan

Ivan Danchev
Telerik team
 answered on 04 Nov 2020
5 answers
516 views
I'm using a scheduler in cshtml:
@(Html.Kendo().Scheduler<TaskViewModel>()
            .Name("scheduler")
            .Views(views => { views.CustomView("ThreeDayView"); })
            .DataSource(d => d
                .Read("Read", "Home")
                .Create("Create", "Home")
                .Destroy("Destroy", "Home")
                .Update("Update", "Home")
            )
 
    )



In this scheduler I'm using a custom view defined below.  This works fine in making the scheduler only show 3 days at a time. However the next day and previous day functionality doesn't work.  I'm assuming I have to overwrite the previousday and nextday functionality, but am not sure how.  What I expect to happen is for the view to advance 1 day at a time (i.e. April 16 - 18 moves to April 17 - 19).

Also I am wanting to add custom edit functionality.  So when a task / event is clicked on, I want to do something other then opening the edit window (i.e set some variable) I think this is done with overwriting the editable function in the below jscript, but again am not sure how.  Any help and/or examples are greatly appreciated 
var ThreeDayView = kendo.ui.MultiDayView.extend({
            options: {
                selectedDateFormat: "{0:D} - {1:D}"
            },
            name: "ThreeDayView",
            calculateDateRange: function () {
                //create a range of dates to be shown within the view
 
                var selectedDate = this.options.date,
                    start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                    idx, length,
                    dates = [];
 
                for (idx = 0, length = 3; idx < length; idx++) {
                    dates.push(start);
                    start = kendo.date.nextDay(start);
                }
 
                this._render(dates);
            }
        });
Neli
Telerik team
 answered on 04 Nov 2020
5 answers
1.7K+ views

Hello, this is my very first day with Kendo UI for ASP.NET MVC.

 

01.@(Html.Kendo().Grid<DataLibrary.ProjectCost>()
02.    .Name("CostGrid")
03.    .Columns(columns =>
04.    {
05.        columns.Bound(c => c.Month)
06.            .Width(100)
07.            .Title("Mois")
08.            .Hidden();
09.        columns.Bound(c => c.SupplierName)
10.            .Width(300)
11.            .Title("Fournisseur")
12.            .HtmlAttributes(new { @style = "text-align:left;" })
13.            .HeaderHtmlAttributes(new { @style = "text-align:left;" });;
14.        columns.Bound(c => c.OrderAmount)
15.            .Format("{0:C}")
16.            .Width(100)
17.            .Title("Commandé")
18.            .HtmlAttributes(new { @style = "text-align:right;" })
19.            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#");
20.        columns.Bound(c => c.InvoiceAmount)
21.            .Format("{0:C}")
22.            .Width(100)
23.            .Title("Facturé")
24.            .HtmlAttributes(new { @style = "text-align:right;" })
25.            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#");
26.    })
27.    .DataSource(dataSource => dataSource
28.        .Ajax()
29.        .Sort( s =>
30.        {
31.            s.Add("Month").Descending();
32.            s.Add("SupplierName").Descending();
33.        })
34.        .Aggregates(aggregates =>
35.        {
36.            aggregates.Add(c => c.OrderAmount).Sum();
37.            aggregates.Add(c => c.InvoiceAmount).Sum();
38.        })
39.        .Group(groups =>
40.        {
41.            groups.Add(c => c.Month);
42.        })
43.        .Read(read => read.Action("CostSummary", "Project", new { ID = Model.projectID }))
44.    )
45.    .Events(events => events.DataBound("collapseGroupRows"))
46.)
47....
48. 
49. 
50.<script type="text/javascript">
51.    function collapseGroupRows() {
52.        var grid = $("#CostGrid").data("kendoGrid");
53.        grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row"));
54.        $('tr[class*="k-master-row"]').hide();
55.    };
56.</script>

 

Here's my problem: the Sort does not work for the Month column on line 31 (it does work for the SupplierName column). I suspect this has to do with the fact that the Month is hidden or that is is grouped by.

Second issue: I can't figure out how to display the header of column SupplierName left-aligned (lines 12-13); the data is properly aligned but not the header text, is HeaderHtmlAttributes not working proplerly?.

Bonus: to collapse the grid (to the month's totals level) I use a small script: is this the proper way to do this? Is there not an easier built-in method?

Thanks!

 

 

 

 

Francois
Top achievements
Rank 1
Veteran
 answered on 04 Nov 2020
1 answer
116 views
hello. the recurrence exception generated from scheduler is in the format 20201028T053000Z. how can i parse it to datetime in c#?
Neli
Telerik team
 answered on 03 Nov 2020
11 answers
692 views

Hi,

I have a very simple grid that binds to a object List collection property of my model:

@(Html.Kendo().Grid<ObjectBO>()
.Name("ObjectGrid")
.BindTo(Model.ObjectBOList)
.Columns(columns =>
{
columns.Select().Width(40);
columns.Bound(obj => obj.Id).Hidden();
columns.Bound(obj => obj.Description);
})

Whilst it displays and binds fine, the SELECT column only shows the "SELECT" checkbox in the column header (i.e. to select all rows) it does not show the individual checkboxes on the rows themselves against the items.

It works fine if I use the datasource property of the grid (rather than "BindTo")and get the same data via a datasource request, but this isn't really my preferred method because it will involve another DB call. I'd rather use the model collection,

Any ideas why this is happening?

Not sure if it's relevant, but the grid is displayed inside a Kendo Window shown modally.

Many thanks!

 

Tsvetomir
Telerik team
 answered on 02 Nov 2020
1 answer
207 views

Hi!

I want to create a kendo grid with expandable detail grids, ie each master row will have an expand button which will create a detail row containing a new kendo grid with aligned columns. For this I use ClientDetailTemplateId. However, my problem is that the detail grids are always empty!

The view model used for each master row:

public int CountryId { get; set; }
 
public string CountryName { get; set; }
 
public IEnumerable<StateViewModel> StateList { get; set; }

 

StateList should be used to initiate the detail grids. My template looks like this

<script id="template_StateList" type="text/kendo-tmpl">
    <p style="margin:1rem">The country has #=data.StateList.length# states.</p>
    @(Html.Kendo().Grid<StateViewModel>()
            .Name("grid_#=CountryId#")
            .Columns(columns =>
            {
                columns.Bound(c => c.StateId).Width(265).Title("Id");
                columns.Bound(c => c.StateName).Width(85).Title("Name");
            })
            .DataSource("#= StateList #")
            .Sortable()
            .ToClientTemplate())
</script>

I have found others with a similar problem that have solved this by using read.Action(), but I would really prefer it if I could pass the data through my view model instead. Thanks for your time!

Tsvetomir
Telerik team
 answered on 02 Nov 2020
3 answers
318 views

Hello,

Anyone have any idea how to handle translation when you want to use data persistence?

Here, template helper + template kendo + kendo grid

        @* ===================================== HELPER and Template ===================================== *@
 
        @* =============== Toolbar =============== *@
        @helper ToolbarTemplate()
        {
            <div>
                <a class="k-button k-button-icontext k-grid-excel" href="\#">@Tools.GetStringRessource("AllList_ExportToExcel", "Download To Excel")</a>
            </div>
        }
        <script type="text/x-kendo-template" id="toolbarTemplate">
            @Html.Raw(@ToolbarTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
        </script>
 
 
        @* =============== ColumnAction =============== *@
        @helper ColumnActionTemplate(bool canEdit, bool canDelete)
        {
            @* Voir page CableDrum_Customer pour les différentes recherches *@
 
            @* VERSION 2: Solution bricolé - href généré avec Url.Action (encode les params mais sera décodé dans le js pour retrouver #= #) *@
 
            var hrefEdit = Url.Action("CableDrumEdit_Site", new { idCustomer = @ViewContext.RouteData.Values["idCustomer"], idSite = @ViewContext.RouteData.Values["idSite"], idCableDrum = "#=Id#" });
            var edit = $"<a class=\"btn icon bg-white tooltip-bottom\" href=\"{@hrefEdit}\" title = \"{Tools.GetStringRessource("AllList_EditItem", "Edit")}\" >#=library.getKendoTemplate(data,'IconCreateTemplate')#</a>";
            var resultEdit = Convert.ToBoolean(canEdit) ? edit : "";
 
            var resultDelete = Convert.ToBoolean(canDelete) ? "#=library.getKendoTemplate(data,'DeleteTemplate')#" : "";
 
            <div class="action">
                <span>
                    @Html.Raw(@resultEdit)
                </span>
                <span>
                    @Html.Raw(@resultDelete)
                </span>
            </div>
        }
        <script type="text/x-kendo-template" id="columnActionTemplate">
            @Html.Raw(@ColumnActionTemplate(ViewBag.CanEdit, ViewBag.CanDelete).ToHtmlString())
        </script>
 
 
        @* =============== Header =============== *@
        @helper HeaderTemplate()
        {
        <span class="k-link">
            @Tools.GetStringRessource("AllList_EditBtn", "Action")
        </span>
}
        <script type="text/x-kendo-template" id="headerTemplate">
            @Html.Raw(@HeaderTemplate().ToHtmlString())
        </script>
        @* ===================================== FIN HELPER and Template ===================================== *@
 
 
        @(Html.Kendo().Grid<CableDrumUIDto>()
            .Name("CableDrumGrid")
            .ToolBar(tools =>
            {
                tools.Template(@<text>@ToolbarTemplate()</text>);
            })
            .Excel(excel => excel
                .FileName(Tools.GetStringRessource("ExportToExcel_CableDrums", "siteDrum.xlsx"))
                .Filterable(true)
                .AllPages(true)
            )
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("CableDrumInfo_Read", "CableDrums").Data("CableDrumLib.getAdditionalData").Type(HttpVerbs.Post))
            )
            .Events(e => e
                .DataBound(@<text>function(e){  CableDrumLib.gridDataBound(); library.dataBound(); }</text>)
                .ExcelExport("onExcelExport")
            )
            .Columns(columns =>
            {
                columns.Bound(p => p.ProductName).Title(Tools.GetStringRessource("CableDrum_ProductName", "PRODUCT NAME"));
                columns.Bound(p => p.ProductRef).Title(Tools.GetStringRessource("CableDrum_ProductRef", "REFERENCE"));
                columns.Bound(p => p.ProductRefCustomer).Title(Tools.GetStringRessource("CableDrum_ProductRefClient", "REFERENCE CUSTOMER"));
                columns.Bound(p => p.LabelProductSerialNumber).Title(Tools.GetStringRessource("CableDrum_Identifier", "DRUM"));
                columns.Bound(p => p.Location).Title(Tools.GetStringRessource("CableDrumEdit_DetailsTab_Location", "LOCATION"));
                if (ViewBag.DisplayLengthInFeets.Equals(true))
                {
                    columns.Bound(p => p.CurrentLengthInM).Title(Tools.GetStringRessource("CableDrum_ProductLengthInF", "LENGTH"));
                }
                if (ViewBag.DisplayLengthInMeters.Equals(true))
                {
                    columns.Bound(p => p.CurrentLengthInM).Title(Tools.GetStringRessource("CableDrum_ProductLengthInM", "LENGTH"));
                }
                /**/
                columns.Bound(p => p.CF_CustomerDrumNumber).Title(Tools.GetStringRessource("Generic_CF_CustomerDrumNumber", "Customer Drum Number")).Hidden();
                columns.Bound(p => p.CF_CustomerShipmentDate).ClientTemplate("#= (CF_CustomerShipmentDate !== null) ? kendo.toString(CF_CustomerShipmentDate,'d') : '' #").Title(Tools.GetStringRessource("Generic_CF_CustomerShipmentDate", "Customer Shipment Date")).Hidden();
                columns.Bound(p => p.CF_SaleOrderNumber).Title(Tools.GetStringRessource("Generic_CF_SaleOrderNumber", "Sale Order Number")).Hidden();
                columns.Bound(p => p.CF_LineOrderNumber).Title(Tools.GetStringRessource("Generic_CF_LineOrderNumber", "Line Order Number")).Hidden();
                columns.Bound(p => p.CF_CustomerPurchaseOrderNumber).Title(Tools.GetStringRessource("Generic_CF_CustomerPurchaseOrderNumber", "Customer Purchase Order Number")).Hidden();
                columns.Bound(p => p.CF_CustomerLineOrderNumber).Title(Tools.GetStringRessource("Generic_CF_CustomerLineOrderNumber", "Customer Line Order Number")).Hidden();
                columns.Bound(p => p.CF_ProductionOrderNumber).Title(Tools.GetStringRessource("Generic_CF_ProductionOrderNumber", "Production Order Number")).Hidden();
 
                columns
                    .Template(@<text></text>)
                    .Title(@Tools.GetStringRessource("AllList_EditBtn", "Action"))
                    .HeaderTemplate(HeaderTemplate().ToHtmlString())
                    .Width(90)
                    .ClientTemplate(ColumnActionTemplate(ViewBag.CanEdit, ViewBag.CanDelete).ToHtmlString());
            })
            .NoRecords(Tools.GetStringRessource("Grid_NoRecords", "No Data"))
 
            .ColumnMenu()
            .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
            .Reorderable(r => r.Columns(true))
            .Resizable(r => r.Columns(true))
            .Scrollable(sc => sc.Height("auto"))
 
            .Pageable(page => page
                .Input(true)
                .Numeric(false)
                .Info(true)
                .PreviousNext(true)
                .Messages(message => message
                    .Display(ViewBag.Title + " {0}-{1}/{2}")
                    .Empty(Tools.GetStringRessource("Grid_NoRecords", "No Data"))
                    .Of("/{0}")
                    .Page(string.Empty)
                )
            )

 

 

Here, i save grid option

window.onbeforeunload = function () {
    var elGrid = $(GRID_CABLEDRUM);
    if (elGrid !== null)
    {
        var grid = elGrid.data("kendoGrid");
        if (grid !== null && grid.element.length > 0)
        {
            var fullOptions = grid.getOptions();
            // Récupération uniquement des informations qui m'intéresse (affichage des colonnes, tri, filtre, taille colonnes)
            var options = {
                columns: fullOptions.columns,
                dataSource: fullOptions.dataSource
            }
            localStorage.setItem(`_kendoGridCookie_${grid.element[0].id}`, kendo.stringify(options));
        }
    }
}

 

Here i add my template toolbar + template header + i manually apply the translations.

var gridElement = $(this);
        var gridId = gridElement[0].id;
        var kendoGrid = $(`#${gridId}`).data("kendoGrid");
         
        // Récupération des préférences utilisateurs de la grille dans le localStorage
        var kendoGridOptions = localStorage.getItem(`_kendoGridCookie_${gridId}`);
        if (kendoGridOptions && kendoGridOptions !== null) {
            var kendoGridOptionsParse = JSON.parse(kendoGridOptions);
 
            var templateToolbar = $("#toolbarTemplate").html();
            if (templateToolbar !== undefined) {
                kendoGridOptionsParse.toolbar = [
                    { template: templateToolbar }
                ];
            }
 
            //Récupération de la colonne Action. J'ai pas beaucoup de moyen pour l'identifier donc je me base sur qu'elle est la propriété template
            var colAction = kendoGridOptionsParse.columns.find(c => c.template !== undefined)
 
            //Template header colonne action
            var templateHeader = $("#headerTemplate").html();
            if (templateHeader !== undefined) {
                colAction.headerTemplate = templateHeader;
            }
 
            // Template colonne action
            var templateAction = $("#columnActionTemplate").html();
            if (templateAction !== undefined) {
                var action = decodeURIComponent(templateAction);
                colAction.template = action;
            }
 
 
            //Récupération des traductions des entêtes des colonnes
            if (kendoGridOptionsParse !== null && kendoGrid !== null && kendoGridOptionsParse.columns !== null && kendoGrid.columns !== null && kendoGridOptionsParse.columns.length === kendoGrid.columns.length) {
                for (let indice = 0; indice < kendoGridOptionsParse.columns.length; indice++) {
                    var kendoGridOptionsColCurrent = kendoGridOptionsParse.columns[indice]
 
                    var listCorrespondanceColonne;
                    var titleCurrent = "";
 
                    // Soit colonne lié à des champs
                    if (kendoGridOptionsColCurrent.field !== undefined) {
                        listCorrespondanceColonne = kendoGrid.columns.filter(c => c.field !== undefined && c.field === kendoGridOptionsColCurrent.field);
 
                    }
                    else {// Soit colonne template
                        listCorrespondanceColonne = kendoGrid.columns.filter(c => c.field === undefined && c.template !== undefined);
                    }
 
                    if (listCorrespondanceColonne.length === 1) {
                        titleCurrent = listCorrespondanceColonne[0].title;
                    }
 
                    kendoGridOptionsColCurrent.title = titleCurrent;
                }
            }
 
            kendoGrid.setOptions(kendoGridOptionsParse);
        }

 

I see that the operation is not solid and I would like to find a more standard solution for the translation of the columns.

 

Thank you for your time.

Georgi Denchev
Telerik team
 answered on 30 Oct 2020
1 answer
358 views

I'm using the MVC Grid to allow users to search for items and add them to a BOM.  The grid currently has three columns, ItemNumber, Description, and a column with a ClientTemplate that calls an Action method and passes it the ItemNumber. 

I need to add a column that has an empty/unbound textbox that only accepts numbers so they can enter a quantity value that will also get passed to the Action method along with the ItemNumber. 

Am I going about this the best way?  Is there a better way?  How can I add a numeric only textbox and capture the value entered and pass it to an Action method along with the ItemNumber?

 

My grid is defined as:

@(Html.Kendo().Grid<AFLExternal.Models.afl_vw_OTS_Items>()
    .Name("OTSItemGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ITEMNMBR).Width(50).Title("")
                .ClientTemplate(
                    "<a href='" +
                        Url.Action("AddItem", "OTSBOM") +
                        "?id=#= ITEMNMBR #'" +
                    " class='btn btn-success'>#= ITEMNMBR #</a>"
                    );
        columns.Bound(c => c.ITEMDESC).Title("Desc").Width(174).HtmlAttributes(new { style = "font-size: 12px;" });
    })
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(false)
        .Batch(true)
        .Model(m =>
        {
            m.Field(p => p.ITEMNMBR).Editable(false);
            m.Field(p => p.ITEMDESC).Editable(false);
        })
        .Read(read => read.Action("OTSItem_Read", "OTSBOM"))
        .ServerOperation(true)
        .Events(events => events.Error("error_handler"))
    )
    .ToolBar(toolBar =>
    {
        toolBar.Search();
    })
    .Height(400)
    .Sortable()
    .Navigatable()
    .Search(srch =>
    {
        srch.Field(f => f.ITEMNMBR);
        srch.Field(f => f.ITEMDESC);
    })
    )
Neli
Telerik team
 answered on 30 Oct 2020
5 answers
1.9K+ views

Having spent may frustrating hours trying to solve this and now having found a solution, I thought that I would post my findings for the benefit of others.

Grid:

                    @(Html.Kendo().Grid<Models.Data.Database>
                                        ()
                                        .Name("grid")
                                        .Columns(columns =>
                                        {
                                        columns.Bound(p => p.Name).Title(language.TranslateSchema(Enums.Schema.ImportData_Database));
                                        columns.Bound(p => p.Legacy).Title(language.TranslateSchema(Enums.Schema.ImportData_Legacy)).Width(100);
                                        columns.Bound(p => p.TableCount).Title(language.TranslateSchema(Enums.Schema.ImportData_TableCount)).Width(100);
                                        columns.Command(c => c.Custom("Select").TemplateId("SelectTemplate")).Width(75);
        })
                                        .HtmlAttributes(new { style = "height: 450px; font-size: 12px" })
                                        .Scrollable()
                                        .Selectable(s => s
                                            .Mode(GridSelectionMode.Single)
                                            .Type(GridSelectionType.Row))
                                        .Pageable(pageable => pageable
                                            .Refresh(true)
                                            .PageSizes(true)
                                            .ButtonCount(5))
                                        .Sortable()
                                        .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .PageSize(20)
                                        .Model(model => model.Id(m => m.Name))
                                        .Read(read => read.Action("Utility", "Index", new { handler = "DatabaseRead" }).Data("AntiForgeryToken"))
                                        )
                    )
Template:

            <script type="text/x-kendo-template" id="SelectTemplate">
                <a class="btn btn-s-primary"
                   onclick="SelectRow(this)"
                   data-toggle="tooltip"
                   data-trigger="hover"
                   data-delay="{ show: 1000,hide: 0}"
                   data-placement="bottom"
                   role="button"
                   title="@language.Translate(Enums.Tooltip.Question_Text)">
                    <span class='glyphicon glyphicon-ok'></span>
                </a>
            </script>

Script:

    <script type="text/javascript">
        function SelectRow(e) {
            var grid = $("#grid").data("kendoGrid");
            var item = grid.dataItem($(e).closest("tr")[0]);
            if (item != null && item != "undefined") {
                $.ajax({
                    url: "/Utility/Index?handler=SelectDatabase&name=" + item.Name,
                    datatype: "json",
                    type: "GET"
                });
            }
        }
    </script>

Findings:

I scoured the web and tried many solutions based around 'grid.select()' to no avail. The main problem and the moment of enlightenment came when I clicked on the row before clicking the custom link. When you click on the row - that row is selected - when you only click on the custom link the row is not selected !

I believe that the Template and script is self explanatory but please note that the script passes an instance of the clicked link to the script (onclick="SelectRow(this)") and further when locating the data the use of the 0 index ($(e).closest("tr")[0])

I could not find any reference to this problem and only found the solution through many attempts and breakpoints !

I am sure that there is a better solution, and I would be really grateful if Support would comment and enlighten me !

Viktor Tachev
Telerik team
 answered on 29 Oct 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?