Telerik Forums
UI for ASP.NET MVC Forum
25 answers
426 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
742 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
135 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
602 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
363 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.4K+ 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
504 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
699 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
2 answers
132 views
This is a new install using Visual Studio 2010/MVC 4. I followed the directions on the Getting Started page for an existing solution. I placed the datepicker in the index.cshtml file and when run I get the error mentioned in the subject.

I then reviewed the trouble shooting page and the forums. I've triple checked to enure that the _Layout.cshtml file contains the jquery reference once. I know it must be something really stupid, as I am new at this, but I could really use your help. I've attached all the relevant files.

Your help is much appreciated.

David
Top achievements
Rank 1
 answered on 02 May 2013
3 answers
197 views
Hello!
I have 2 grid!
First grid has field: Volume with Uihint ["Decimal"]
Second grid has field: Volume Uihint ["Decimal"]
I have this:

my view:
// something
 @(Html.Kendo().Grid<type1>()
                .Name("typ1")
                .ToolBar(toolBar => toolBar.Create())
                .Columns(columns =>
                {
                            // other
                            columns.Bound(o => o.Volume);
                            // other
                }
// other
)
 
<br/ >
 
// something
 @(Html.Kendo().Grid<type2>()
                .Name("typ2")
                .ToolBar(toolBar => toolBar.Create())
                .Columns(columns =>
                {
                            // other
                            columns.Bound(o => o.Volume);
                            // other
                }
// other
)
If I use bind Combobox or KendoNumbericTextbox for my field: Volume(in first grid and secondgrid)
And simultaneously edit the element in the first and second grid
I see this: 1.png

I believe that this is because jQuery will return the first element in the DOM and initialize NumericTextBox from it.

how can I get around this problem by using Kendo?
I don't want create another field for any coincidence, because I have 10+ coincidences 
Please help!
Petur Subev
Telerik team
 answered on 02 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
MultiColumnComboBox
Dialog
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?