Telerik Forums
UI for ASP.NET MVC Forum
1 answer
312 views
Hi, I've begun the process of upgrading my MVC Telerik Extension app to Kendo.  I am on MVC4 using the server wrappers.  It didn't take long before I ran into a perplexing issue.
The first thing I did was upgrade the menu to this:
@( Html.Kendo().Menu()
    .Name("Menu")
    .Items(menu =>
    {
        menu.Add().Text("Tasks").Action("Index", "Tasks");
       @* Rest eliminated *@
    })
)
And I get JS error jQuery(...).kendoMenu is not a function in the browser on this code:
jQuery(function(){jQuery("#Menu").kendoMenu({});});
On that same page is a tabstrip here:
@( Html.Kendo().TabStrip()
    .Name("TabStrip")
    .Items(parent =>
    {
        parent.Add()
            .Text("My Tasks")
            .Selected(true)
            .LoadContentFrom("MyTasks", "Tasks");
        @* Abbreviated *@
    })
)
But this never calls my MyTasks controller.  This all worked fine with the Extensions, so I must have a configuration issue, right?  What am I doing wrong?

Petur Subev
Telerik team
 answered on 07 May 2013
1 answer
469 views
My grid model is essentially a collection of dynamic fields that is stored in a Dictonary<string,Values> where Values has a couple properties on it. What would be the best way to iterate thru those values and display them as grid columns? Values will have a value and header text property. I have been searching the forums but have not found anything similar yet.

thanks
Petur Subev
Telerik team
 answered on 07 May 2013
25 answers
433 views
A new bug has been introduced with the TreeView Q3.2012 release. This bug is only visible in IE 9 (maybe also IE 8).With other browsers it works fine.

The problem: When you select a node in the TreeView (and the TreeView has a vertical scroll-bar), the TreeView automatically scrolls to the top. This is a very annoying bug, please fix it soon. Because of this problem I still have to use the Q2 release. I really want to update soon. Thanks!
Alex Gyoshev
Telerik team
 answered on 06 May 2013
1 answer
745 views
In my custom edit template, I'm trying to pass InventoryImageSeq from the model to an action on the controller.  This is used to retreive the image for the inventory item.

Here's my custom editor.  model.DeviceName displays correctly.  The <img... line does call GetImage in the controller, however inventoryImageSeq is always null.  
@model Copper.Domain.Entities.EntInventory
 
 
<div class="editor-label">
    @Html.LabelFor(model => model.DeviceName)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.DeviceName)
</div>
 
<div>
   <img alt="" src="@Url.Action("GetImage", "CellInventory", new { inventoryImageSeq = Model.InventoryImageSeq })" />
</div>

Here's GetImage in CellInventoryContoller.cs:

public FileContentResult GetImage(string inventoryImageSeq)
{
    EntInventoryImage entImage = new EntInventoryImage();
    int seq;
    if (Int32.TryParse(inventoryImageSeq, out seq))
    {
        entImage = _margoRepository.GetInventoryImage((int?)seq);
    }
    return File(entImage.ActualImage, entImage.ContentType);
}

Is this a problem with my syntax for the routeValues:

new { inventoryImageSeq = Model.InventoryImageSeq }

 or is something else wrong?

Thanks,

Jerry


Petur Subev
Telerik team
 answered on 06 May 2013
3 answers
137 views
Hello!
I use this
command.Custom("edit").Click("editPlan");
How I can in js method "editplan" get line  in which was clicked my custom button
Because If I use:
var grid = $("#Grid").data("kendoGrid");
 var Id= grid.dataItem(grid.select()).Id;
I can select first element in grid and press button in other element(and I get Id from first element)
I have attached a picture that shows it(error) :

And please answer me, you don't forget to answer me?
http://www.kendoui.com/forums/mvc/grid/clientdetailtemplateid-and-id-of-parent.aspx
I wait 5 days :(

Dimo
Telerik team
 answered on 06 May 2013
1 answer
610 views
Hi to All,

I call grid.SaveChanges in a javascript function. My problem is if there was some _client_ side validation errors for example invalid date format, then I must not execute some DOM operations. Unfortunately grid.SaveChanges() hase no return value and searching for keyword 'valid' in grid documentation page has no result.

Thx in advance
Horo
Petur Subev
Telerik team
 answered on 06 May 2013
5 answers
372 views
I am trying to use the MultiSelectFor without to much luck. I have

@Html.Kendo().MultiSelectFor(m => m.SelectedEmployeeIds).BindTo(Model.Employees).DataTextField("EmployeeName").DataValueField("EmployeeId").ItemTemplate("<span class='span2'>#: data.EmployeeName #</span><span><strong>#: data.Email #</strong></span>").Placeholder("Select Names")
Posting the contents to the controller works correctly however when the view is loaded any "SelectedEmployeeIds" are not displayed.

Any help would be great.

Thank you
Georgi Krustev
Telerik team
 answered on 05 May 2013
2 answers
1.5K+ views
Hello,

I am trying to get ajax filtering to work without luck. However, there may be an overriding issue as I see in the script debugger that I am getting an error in kendo.web.min.js just upon loading my page.
Uncaught TypeError: Cannot call method replace of undefined
This is being displayed directly below line 9 in this .js file.

My Controller:
//Kendow MVC Server binding test
        public ActionResult KendoGrid([DataSourceRequest] DataSourceRequest request, string areaFilter = null)
        {
            ListLocationsViewModel viewModel = _manageLocationsAppServ.CreateListLocationsViewModel(0, areaFilter);
            return Json(viewModel.Locations.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }


Here is my .cshtml
@using Kendo.Mvc.UI
@using OTIS.domain.CompanyMgmt
@model OTIS.AppServ.CompanyMgmt.ViewModels.ListLocationsViewModel
 
@{
    ViewBag.Title = "Locations | OTIS";
}
 
<h2>Locations</h2>
@Html.Raw(TempData["message"])
<p>
    @using (Html.BeginForm())
    {   
        <p>
            Area: @Html.DropDownList("areaFilter", new SelectList(Model.AreaOptions), "")
            <input type="submit" value="Search"/>
            <button onclick="filter()">Filter</button>
        </p>
    }
</p>
<hr />
<p>
    @Html.ActionLink("Create New", "Edit", "ManageLocations", null, new { @class="button" })
</p>
@(Html.Kendo().Grid<OTIS.AppServ.CompanyMgmt.ViewModels.ListLocationsViewModel.LocationsGrid>()
    .Name("MVCClientBindGrid")
    .Columns(columns =>
    {
        columns.Bound(l => l.DisplayLocation);
        columns.Bound(l => l.Area);
        columns.Bound(l => l.Zone);
        columns.Bound(l => l.Aisle);
        columns.Bound(l => l.Bay);
        columns.Bound(l => l.Level);
        columns.Bound(l => l.Position);
        columns.Bound(l => l.Barcode);
        columns.Command(command => command.Custom("Details").Click("showDetails")).Width(100);
    })
    // Add "Create" command
    .ToolBar(toolbar =>
        {
            //Want to place this at the bottom
            toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new { onclick = "addNew()", @class = "k-grid-add" });
        })
    .DataSource(dataSource => dataSource
        .Ajax() // Specify that the data source is of ajax type
        .ServerOperation(false) // paging, sorting, filtering and grouping will be applied client-side
        .PageSize(10)
        .Model(model => model.Id(c => c.Id))
        .Read(read => read.Action("KendoGrid", "ManageLocations",  new { area = "CompanyMgmt" })// Specify the action method and controller name
                //.Data("getFilters") // the name of the JavaScript function which will return the additional data
         
        )
    )
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Groupable()
)
 
<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());
 
    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        window.location.href = "@Url.Action( "Edit", "ManageLocations")" + "/" + dataItem.id;
    }
 
    function addNew() {
        window.location.href = "@Url.Action( "Edit", "ManageLocations")";
    }
 
    function filter() {
        var grid = $("#MVCClientBindGrid").data("kendoGrid");
 
        var area = $('#areaFilter').val()
        grid.dataSource.filter({
            logic: "and",
            filters: [
                { field: 'Area', operator: 'eq', value: 'SHIP' },
                { field: 'Area', operator: 'eq', value: 'SHIP' }
            ]
        });
         
    }
    
 
</script>
Here is the full HTML as rendered...so you can see what .js files are included and in what order
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Locations | OTIS - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
         
        <link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/superfish.css" rel="stylesheet"/>
 
        <link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
  
        <link href="/Content/themes/green_machine/jquery-ui-1.9.2.custom.css" rel="stylesheet"/>
<link href="/Content/themes/green_machine/green_machine.css" rel="stylesheet"/>
 
          
        <script src="/Scripts/modernizr-2.5.3.js"></script>
          
        <script src="/Scripts/jquery-1.8.3.js"></script>
 
        <script src="/Scripts/jquery-ui-1.8.20.js"></script>
 
        <script src="/Scripts/kendo/kendo.web.min.js"></script>
<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
  
        <script>
            //JQuery custom theme application
            $(function () {
                $("input[type=submit], a.button, button").button()
 
                $('ul.sf-menu').superfish({
                    animation: { opacity: 'show', height: 'show' },  // fade-in and slide-down animation
                    speed: 'fast',                          // faster animation speed
                    autoArrows: true,                           // disable generation of arrow mark-up
                    dropShadows: true                            // disable drop shadows
                });
            });
        </script>
           
    </head>
    <body>
         
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/CompanyMgmt/Home">OTIS</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                             
        Hello, <a class="username" href="/Account/UserProfile" title="Manage">chadr</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="EHsDe8SgQElcRgrIcNq4uuC_Y8XexV-LUKiigBQGqQpjTHVVDvapFTB0W6sylMdJUAelKHrka6apyRxGy39CDJ4JUf_ae4rwGNxFR3aaXp81" />            <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
</form>   
 
                    </section>
                </div>
                <div class="float-right">
                    <nav>
                        <ul class="sf-menu sf-hover" id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="#">Admin</a>
                                <ul>
                                    <li><a href="/CompanyMgmt/ManageCompanies">Companies</a></li>
                                    <li><a href="/CompanyMgmt/ManageLocations">Locations</a></li>
                                    <li><a href="/CompanyMgmt/ManageCompanies/Kendo">Kendo Test</a></li>
                                </ul>
                            </li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="clear-fix"></div>
        </header>
        <div id="body">
             
            <section class="content-wrapper main-content clear-fix">
                 
 
<h2>Locations</h2>
 
<p>
<form action="/CompanyMgmt/ManageLocations" method="post">        <p>
            Area: <select id="areaFilter" name="areaFilter"><option value=""></option>
<option>RECV</option>
<option>SHIP</option>
</select>
            <input type="submit" value="Search"/>
            <button onclick="filter()">Filter</button>
        </p>
</form></p>
<hr />
<p>
    <a class="button" href="/CompanyMgmt/ManageLocations/Edit">Create New</a>
</p>
<div class="k-widget k-grid" id="MVCClientBindGrid"><div class="k-toolbar k-grid-toolbar k-grid-top"><a class="k-grid-add k-button k-button-icontext " href="#_" onclick="addNew()"><span></span>Add</a></div><div class="k-grouping-header">Drag a column header and drop it here to group by that column</div><div class="k-grid-header"><div class="k-grid-header-wrap"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col style="width:100px" /></colgroup><tr><th class="k-header k-filterable" data-field="DisplayLocation" data-title="Display Location" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=DisplayLocation-asc">Display Location</a></th><th class="k-header k-filterable" data-field="Area" data-title="Area" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Area-asc">Area</a></th><th class="k-header k-filterable" data-field="Zone" data-title="Zone" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Zone-asc">Zone</a></th><th class="k-header k-filterable" data-field="Aisle" data-title="Aisle" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Aisle-asc">Aisle</a></th><th class="k-header k-filterable" data-field="Bay" data-title="Bay" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Bay-asc">Bay</a></th><th class="k-header k-filterable" data-field="Level" data-title="Level" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Level-asc">Level</a></th><th class="k-header k-filterable" data-field="Position" data-title="Position" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Position-asc">Position</a></th><th class="k-header k-filterable" data-field="Barcode" data-title="Barcode" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Barcode-asc">Barcode</a></th><th class="k-header" scope="col"><span class="k-link"> </span></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col style="width:100px" /></colgroup><tbody><tr class="t-no-data"><td colspan="9"></td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">0 - 0 of 0 items</span></div></div><script>
    jQuery(function(){jQuery("#MVCClientBindGrid").kendoGrid({"columns":[{"title":"Display Location","field":"DisplayLocation","encoded":true},{"title":"Area","field":"Area","encoded":true},{"title":"Zone","field":"Zone","encoded":true},{"title":"Aisle","field":"Aisle","encoded":true},{"title":"Bay","field":"Bay","encoded":true},{"title":"Level","field":"Level","encoded":true},{"title":"Position","field":"Position","encoded":true},{"title":"Barcode","field":"Barcode","encoded":true},{"width":"100px","command":[{"name":"Details","buttonType":"ImageAndText","text":"Details","click":showDetails}]}],"groupable":{},"pageable":{"buttonCount":10},"sortable":true,"filterable":true,"toolbar":{"command":[{"name":null,"attr":" onclick=\"addNew()\" class=\"k-grid-add\"","buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"read":{"url":"/CompanyMgmt/ManageLocations/KendoGrid"}},"pageSize":10,"page":1,"total":0,"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Id","fields":{"Id":{"type":"number"},"DisplayLocation":{"type":"string"},"Area":{"type":"string"},"Zone":{"type":"string"},"Aisle":{"type":"string"},"Bay":{"type":"string"},"Level":{"type":"string"},"Position":{"type":"string"},"Barcode":{"type":"string"}}}}}});});
</script>
 
<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());
 
    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        window.location.href = "/CompanyMgmt/ManageLocations/Edit" + "/" + dataItem.id;
    }
 
    function addNew() {
        window.location.href = "/CompanyMgmt/ManageLocations/Edit";
    }
 
    function filter() {
        var grid = $("#MVCClientBindGrid").data("kendoGrid");
 
        //grid.dataSource.filter({
        //    logic: "and",
        //    filters: [
        //        { field: 'ID', operator: 'gte', value: 10 },
        //        { field: 'ID', operator: 'lte', value: 20 }
        //    ]
        //});
        var area = $('#areaFilter').val()
        grid.dataSource.filter({
            logic: "and",
            filters: [
                { field: 'Area', operator: 'eq', value: 'SHIP' },
                { field: 'Area', operator: 'eq', value: 'SHIP' }
            ]
        });
         
    }
    function getFilters() {
 
        var filters = []; // create an empty array
 
        filters.push({
            key: "areaFilter",
            value: $('#areaFilter').val()
        });
        return filters;
 
        //return {
        //    areaFilter: "SHIP"
        //};
    }
 
</script>
 
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>© 2012 - OTIS - Order Tracking and Inventory System</p>
                </div>
            </div>
        </footer>
         
         
        <script src="/Scripts/superfish.js"></script>
<script src="/Scripts/supersubs.js"></script>
 
         
        <script>
            $(document).ready(function () {
                 
 
                //to utilize jquery theme in superfish menu
                //$("ul.sf-menu li").addClass("ui-state-default");
 
                //$("ul.sf-menu li").hover(function () { $(this).addClass('ui-state-hover'); },
                //                         function () { $(this).removeClass('ui-state-hover'); });
 
            });
        </script>
         
    </body>
</html>
Any insight is much appreciated!
Thanks,
Chad
Aaron
Top achievements
Rank 1
 answered on 03 May 2013
1 answer
510 views
Hello

Using the MVC wrappers, what is the best way to call a kendo chart multiple times (in the same partial view) using different model values (the different model values are not important for now)?

I intent to allow the user to select the charts they require (from a treeview) and then add these charts to the page. There are hundreds of charts possible and the look of the page is not important, as it is only the SVG of the chart i'm interested in, as the charts will eventually be exported.

At the moment I have (just working with a the same demo chart from kendo demo)......

In the View

@using (Ajax.BeginForm("ChartPartial", "Export", new AjaxOptions() { UpdateTargetId = "chart0" }, new { id = "formChartPartial" }))
{
    <div style="display: none;">
        <input type="submit" id="chartExportSubmit" />
    </div>            
}

I'm using a form to pass data to the controller. Eventually i'll have other input fields containing the data needed to change the model passed to the partial view. 

Controller

Contains the logic to produce a model, which is not important at the moment as can be seen below in the partial view code

Partial View

<div class="chart-wrapper">
    @(Html.Kendo().Chart()
        .Name("chart" + Guid.NewGuid())
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .Series(series => {
            series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
            series.Bar(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
        })
        .CategoryAxis(axis => axis
            .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Max(140000)
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
    ) 
</div>

Javascript

Iterate through javascript array (selected) to find the amount of multiple charts needed. Create a div for each and change the target div on the form, finally, calling the form which fires the partial view.


        for (var i = 0; i < selected.length; i++) {
            $('#exportChartContainer').append('<div id="chart' + i + '" class="chart" style="height: 590px; width: 960px;"></div>');
            $('#formChartPartial').attr('data-ajax-update', '#chart' + i.toString());
            $('#chartExportSubmit').click();
        }


In fiddler, I get all the charts back fine from the ajax form submits, but only the final div actually contains a chart, which happens to be the final chart called - i'm thinking that by the time the charts return, the updateTargetId attribute (data-ajax-update) has already been changed to the final div and every chart is replacing the previous one, or something along those lines.

I've tried a different approach by including the ajax option 'InsertionMode = InserstionMode.InsertAfter', and targeting the same div, but the charts do not display at all.

I can probably do this using a combination of ajax requests and the javascript functions to call the charts, but I would rather use the MVC wrappers for consistency across the site, if possible.

Any ideas?

Thanks
Alan
Atanas Korchev
Telerik team
 answered on 03 May 2013
10 answers
703 views
Hi!

We are trying out the new client details template (ClientDetailTemplateId). We can get a basic hierarchy grid working, but have some problems:
  • We cannot get column client templates in the sub-grid to work ("[columnName] is not defined" js error)
  • We  cannot get a two level hierarchy going ("b is not defined")

Are any of these two scenarios supposed to work at the moment, and if so, is there any demo code available?


On a related note: We always bind our grids server-side first and do following operations (sort/filter/etc) using client code. Are there any plans on making it possible to define a template once and get it working in both scenarios? For us we really only use server binding once and would prefer is details are loaded via ajax on demand, but using a client details template only gives an empty details view as far as we know...

Thank you
/Victor

Rob
Top achievements
Rank 1
 answered on 03 May 2013
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
ColorPicker
DateRangePicker
Security
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
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?