Telerik Forums
UI for ASP.NET MVC Forum
4 answers
147 views
Hi,

First off; it's absolutelty GREAT that you've released server wrappers for use with mobile! Up until now, I've made my own "homerolled" asp.net mobile application using javascript and different views with mvc. (Quite the hassle!)

Now, I've finally decided to port it over to your new server wrappers, and that's where I need some help!
I see from your demos that you include a
@{   
    Layout = "~/Areas/razor/Views/Shared/_MobileLayout.cshtml";
}
in all of your examples. What does this layout contain? For me, the examples doesn't really do me much good if I do not know how to setup my layout properly. The reason for my asking is that I have two shared layouts; one for logged in users and one for users that has not logged in yet.

My "_AnonynmousUserLayout.cshtml" (razor) looks like this:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="~/Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet"/>
        <link href="~/Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet"/>
        <link href="~/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"/ rel="stylesheet">
         
        <script src="~/Scripts/kendo/2013.2.716/jquery.min.js"></script>
        <script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
    </head>
    <body>
        @RenderBody()
    </body>
</html>
And the @RenderBody() will render the Login page, that at the moment looks like this (until I get the wrappers to work):
@(Html.Kendo().MobileView()
        .Name("loginView")
        .Title("Stimline Mobile")
        .Content(
            @<text>
                    <h2>New login form goes here</h2>
                 </text>
           )
      )
When I open the page, nothing is displayed, but if I view the page source (in browser), all the markup including the text is there and produced by the wrappers.
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="/Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet"/>
        <link href="/Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet"/>
        <link href="/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"/ rel="stylesheet">
         
        <script src="/Scripts/kendo/2013.2.716/jquery.min.js"></script>
        <script src="/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
    </head>
    <body>
         
 
 
        <div data-reload="false" data-role="view" data-stretch="false" data-title="Stimline Mobile" data-use-native-scrolling="false" data-zoom="false" id="loginView"><div data-role="content">
            <h2>New login form goes here</h2>    
        </div></div>
 
 
 
    </body>
</html>
A little help would be appreciated :)

Also, do you have a template for creating a new asp.net mvc mobile project available? Couldn't seem to find one :)
Ruud
Top achievements
Rank 1
 answered on 17 Sep 2014
1 answer
148 views
Hi ,

I have a  one tab strip control and binding dynamically. now i want to generate one grid on tab selection which will get the data by using id of tab node.

How to implement above functionality ?

Thanks in advance

Uday
Dimiter Madjarov
Telerik team
 answered on 17 Sep 2014
11 answers
134 views

Ive opened a bug ticket (856347) for the below problem. Previous versions are fine (2014.2.801 was the last that I was using)

Here it is again just in case any one else has found this happening when updating to SP1 (2014.2.903)...
Javascript error: "Error: Invalid template:'<div class="k-widget k-grid" id="InnerGrid"> ..."

The client detail templates's client template is invalid. Here is a simple demo:

@(Html.Kendo()
    .Grid<TestFilterTemplate.Models.Model>()
    .Name("MainGrid")
    .Columns(cols => {
        cols.Bound(e => e.Id);
        cols.Bound(e => e.Name);
    })
    .ClientDetailTemplateId("testtemplate")
    .DataSource(data => {
        data.Ajax().Read(read => read.Action("ListA", "Value"));
    })
)
 
<script type="text/html" id="testtemplate">
@(Html.Kendo()
    .Grid<TestFilterTemplate.Models.Model>()
    .Name("InnerGrid")
    .Filterable() //<--- remove me and i work.
    .Columns(cols => {
        cols.Bound(e => e.Id);
        cols.Bound(e => e.Name); 
    })
    .DataSource(data => {
        data.Ajax().Read(read => read.Action("ListA", "Value"));
    }).ToClientTemplate()
)
</script>

Removing the .Filterable() line from the client template appears to resolve the problem, but not quite the fix that is needed.

Thanks,
Matt

Dimiter Madjarov
Telerik team
 answered on 17 Sep 2014
1 answer
2.2K+ views
Hi telerik Members:

step1:  I had added    @(Html.Kendo().Editor().name("editor") in view

step2:  I want to set value to editor,  but   $("#editor").val("XXX")  is not work.

step3:  I had found the paper : http://www.telerik.com/forums/empty-editor-by-jquery-628e7aaaa9af, 
            var editor = $("#editor").data("kendoEditor");
            editor.value('');  

           But It is not work too.


Is there some way can set value to editor?    

thank you. 

CUID : QD1612651




Dimiter Madjarov
Telerik team
 answered on 16 Sep 2014
1 answer
134 views
after upgrading to latest version of kendo asp.net mvc 2014.2.903, it is making javascript error "Invalid Template".
It is observed that error occurs if hierarchical grid is filterable, for testing here is the sample code take from the example, i have changed this code to make sub grid as Filterable


@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.FirstName).Width(110);
            columns.Bound(e => e.LastName).Width(110);
            columns.Bound(e => e.Country).Width(110);
            columns.Bound(e => e.City).Width(110);
            columns.Bound(e => e.Title);
           
        })               
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))            
        )        
        .Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(70);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress);
                columns.Bound(o => o.ShipName).Width(200);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .Filterable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
Dimiter Madjarov
Telerik team
 answered on 16 Sep 2014
6 answers
816 views
I am trying to calculate days interval(finish date - start date) and draw it with Kendo Chart.

My categories are like that:0-5 days; 6-10 days; 11-15 days; 16-20 days;...; Bigger than 30I

n my model, I have timespan day values, and string category names(0-5 days; 6-10 days; 11-15 days; 16-20 days).

model => model.zerotofivevalues = 3, 2 , 4 , 1
model => model.zerotofive = "0-5, "0-5", "0-5"

How can i remove blue prints at my attached picture and "null" ? I think, i have a problem with categorisation but i can't solve this problem.Here is my code:


@(Html.Kendo().Chart(Model)
.Name("chart")
.Series(series =>
{
series
.Column(model => model.zerotofivevalues, categoryExpression: model => model.zerotofive)
.Aggregate(ChartSeriesAggregate.Sum);

series
.Column(model => model.fivetotenvalues, categoryExpression: model => model.fivetoten)
.Aggregate(ChartSeriesAggregate.Sum);


series
.Column(model => model.tentofifteenvalues, categoryExpression: model => model.tentofifteen)
.Aggregate(ChartSeriesAggregate.Sum);

etc, etc, etc,


.CategoryAxis(axis => axis
.Categories("0-5", "5-10", "10-15", "15-20", "20-25")
.MajorGridLines(lines => lines.Visible(false))
Gokhan
Top achievements
Rank 1
 answered on 16 Sep 2014
1 answer
312 views
Can we have cascaded typeahead textbox instead of ordinary DropDownList in kendo grid? The reason is we want to choose BrandName(string) from database first, if it's not an existing BrandName, we want the ability to enter a new one. Then the choice of Model#(string) would be depending on BrandName. If there is some model# for that brand, we list all of them and let user make a choice. If not, we allow user to enter a new model#.

I tried combobox and autocomplete. Couldn't succeed.

Here is the code that I'm trying (just in case it would be helpful)
                @(Html.Kendo().Grid<mobiCore.Models.ReportDetailModel>()
                .Name("ReportDetail")
                .Columns(columns =>
                {
                    columns.Bound(p => p.BrandName).HeaderHtmlAttributes(new { @title = "Brand Name" }).ClientTemplate("#=BrandName.Name#");
                    columns.Bound(p => p.ModelNo).HeaderHtmlAttributes(new { @title = "Model Number" }).EditorTemplateName("ModelNo");
                    columns.ForeignKey(p => p.ProductID, (SelectList)ViewBag.Product).Title("Product");
                    columns.Bound(p => p.Units).Width(75);
                    columns.Command(command => { command.Destroy(); }).Width(85);
                })
                .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Pageable()
                .Sortable()
                .Navigatable()
                .Scrollable()
        // .HtmlAttributes(new { style = "maxwidth:1400px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .Events(events => events.Error("error_handler"))
                    .Model(model =>
                    {
                        model.Id(p => p.ReportDetailID);
                        model.Field(p => p.ReportID).Editable(false);
                        model.Field(p => p.Units).DefaultValue(0);
                        model.Field(p => p.ProductID).DefaultValue(0);

                    })
                    .ServerOperation(false)
                    .Read(read => read.Action("Detail_Read", "ReportDetail", new { id = Model.ReportID }))
                    .Create(create => create.Action("Detail_Create", "ReportDetail", new { id = Model.ReportID }))
                    .Update(update => update.Action("Detail_Update", "ReportDetail"))
                    .Destroy(delete => delete.Action("Detail_Destroy", "ReportDetail"))
                )
            )
 <script type="text/javascript">


    function filterBrand() {
        return {
            CompanyID: '@Model.CompanyID'
        };
    }
    function filterModel() {
        return {
            CompanyID: '@Model.CompanyID',
            BrandName: $("#BrandName").data("AutoComplete").value()
        };
    }
</script>

Below is partial view under EditorTemplates: BrandName.schtml
@model string

@(Html.Kendo().AutoComplete()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
    .DataTextField("Name")
     .DataSource(dataSource => dataSource.Read(read => read.Action("GetBrand", "CustomerUnitReports").Data("filterBrand")).ServerFiltering(true))
    .HtmlAttributes(new { @class = "k-widget k-autocomplete k-input", style = string.Format("width:200px") })
    .Delay(500)
    .HighlightFirst(true)
)  

Below is partial view under EditorTemplates: ModelNo.schtml
@model string

@(Html.Kendo().ComboBoxFor(m => m)
                  .AutoBind(false)
                          .Placeholder("Select Model#...")
                                  .DataTextField("ModelNumber")
                              .DataValueField("ModelNumber")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetModelNo", "CustomerUnitReports").Data("filterModel"))
                                .ServerFiltering(true);
                  })
                  .CascadeFrom("BrandName")
)


@Html.ValidationMessageFor(m => m)

Thanks a lot,
Petur Subev
Telerik team
 answered on 15 Sep 2014
1 answer
288 views
Hi,
   
  I am using below code to display Kendo Grid inside Kendo TabStrip. Here GetDetails is a JsonResult method in controller returning different data based on each tab selection.Each selected tab name is sent as parameter to Grid ,based on that , data is binded to Grid.According to our requirement , We have tabstrip where tabs are loaded dynamically . Inside of this tabstrip, we have Kendo grid. Based on tab selection we need to display different data in kendo grid present inside tabstip.Grid inside tabstrip may have different column names based on tab selection.Suppose if user click on First tab,then that value is sent to JsonResult method in controller to retrieve  data and if obtained data has only 2 columns like Name,Title  then only  those 2 columns should be displayed in grid. If user click on Second tab,then that value is sent to JsonResult method in controller to retrieve  data and if obtained data has only 5 columns like Name,Location,City,Address,Status then only  those 5 columns should be displayed in grid.

     With below code, i am getting same column names for all tab grids.For each tab selection , same column names are binded to all grids.How can i bind different column names to gird present in each tab.Column names in grid should  change for each tab selection based on data obtained from GetDetails is a JsonResult method in controller.

@(Html.Kendo().TabStrip()
    .Name("tabstrip") 
       
          .Items(tabstrip =>
          {
             foreach (var tab in @Model)
              {
                   tabstrip.Add().Text(tab.ComponentTypes).Content(@<text>
            @(Html.Kendo().Grid<Portal.Entity.ComponentProperty>().Name("grids" + tab.ComponentTypes)
                //+ DateTime.Now.ToString().Replace(" ", ""))
        .Columns(columns =>
        {
 
        }) .HtmlAttributes(new { style = "width: 980px;height: 800px" })
                .Scrollable().Sortable().Pageable().DataSource(dataSource => dataSource
                                .Ajax()
                                  .Read(read => read.Action("GetDetails", "ComponentProperties", new { PropertyName = tab.ComponentTypes }  ))
                                        .ServerOperation(false)      ))
                </text>                       
                );
              }
             
          })
Daniel
Telerik team
 answered on 15 Sep 2014
2 answers
408 views
Hi

I'm having an issue with populating some fields in a Kendo Grid.

I have a page that displays details about a Team. On that page is a Kendo grid that displays a list of members in the current team that is being viewed. The grid has the following columns

Username
FirstName
LastName
EffectiveFromDate
EffectiveToDate

The page can be put into an edit state which allows you to then edit or delete team members in the grid using edit or delete buttons in each row of the grid. There is also top level option to add a new member to the team.

When i click on the new button to add a new member, a popup is displayed. On the popup is an autocomplete list for selecting who is to be added to the team, and two datetime pickers for the effective to and from dates.

When i select a user from the autocomplete, enter the effective to and from dates, and click Ok to close the popup, a new row is added to the grid as expected. But the Username, First Name and Last Name fields are not populated.

I have added hidden fields onto the popup view that are populated on an onUserAutoCompleteChanged event in the AutoComplete view. When i debug i can see these fields are being correctly populated with the correct data when i make a user selection with the autocomplete. The issue is that the data is not being re-bound to the grid when i close the popup.

I added a text field for FirstName to the popup so i could see that it was being populated when i made a selection in the autocomplete, which it definitely is.

If i make a user selection without making any changes to the First Name text field and close the popup, the data is not displayed in the grid although a new row is created. However, if i select a user from the autocomplete to populate the FirstName text field and then alter the text in that field, and then close the popup, the data is displayed in the grid for FirstName.

How do i go about firing whatever is causing the data to bind to the grid when i update the text field without having to update the text field?

TeamPage cshtml
<div class="row">
    <div class="form-group  col-md-6 ">
        @Html.LabelFor(model => model.TeamCode)
        @Html.EditorFor(model => model.TeamCode)
        @Html.ValidationMessageFor(model => model.TeamCode)
    </div>
</div>
<div class="row">
    <div class="form-group  col-md-6 ">
        @Html.LabelFor(model => model.TeamName)
        @Html.EditorFor(model => model.TeamName)
        @Html.ValidationMessageFor(model => model.TeamName)
    </div>
</div>
<div class="row">
    <div class="form-group  col-md-12 ">
        @Html.LabelFor(model => model.TeamDesc)
        @Html.EditorFor(model => model.TeamDesc)
        @Html.ValidationMessageFor(model => model.TeamDesc)
    </div>
</div>
<div class="row">
    <div class="form-group col-md-12">
        @Html.Partial("~/Areas/Teams/Views/TeamMember/_List.cshtml", this.Model.Members, null)
        @Html.ValidationMessageFor(model => model.Members)
    </div>
</div>
  
<script type="text/javascript">
  
    function buildData() {
        // Get the form values into simple key value array
        var formData = getFormObj();
        var gridData = $("#teamMemberGrid").data("kendoGrid").dataSource.data();
  
        // Prepare the model
        return {
            TeamDetailId: formData["TeamDetailId"],
            TeamCode: formData["TeamCode"],
            TeamDesc: formData["TeamDesc"],
            TeamName: formData["TeamName"],
            Members: gridData,
            Dto: formData["Dto"]
        };
    }
  
    $(function () {
        $("form").on("submit", function (event) {
            event.preventDefault();
            var request = buildData();
            submitForm(request, this.action);
        });
    });
  
</script>

TeamMemberGrid cshtml
<div>
    @(Html.AjaxGridFor<TeamMemberModel>("teamMemberGrid", "Teams", "TeamMember")
        .ToolBar
        (
            toolbar =>
            {
                if (Html.ShowEditControls())
                {
                    toolbar.Template("<a class='k-button k-button-icontext ' href='' id='customGridAdd'><span></span>New</a><span></span>");
                }
            }
        )
        .Columns
        (
            columns =>
            {
                if (Html.ShowEditControls())
                {
                    columns.Command(commands =>
                    {
                        commands.Custom("Edit").Text("Edit").Click("onGridEdit");
                        commands.Custom("Delete").Text("Delete").Click("onGridDelete");
                    });
                }
            }
        )
        .BuildAjaxDataSource<TeamMemberModel>("TeamMember", updateAction: "UpdateMember", createAction: "AddMember", destroyAction: "RemoveMember")
    )
 
    <script type="text/javascript">
 
        function onGridEditing(e) {
            var id = $('#TeamDetailId').val();
            if (e.model.isNew()) {
                e.model.set("TeamDetailId", id);
                e.model.set("TeamMemberId", kendo.guid());
            }
            setPopupTitle(e);
            setGridPopupButtons(e);
        }
 
        //set username, first name, last name
        function onGridSaving(e) {
            var data = e.sender.dataSource.data();
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                if (item.TeamMemberId === e.model.TeamMemberId) {
                    item.set('Username', $('Username').val());
                }
            }
        }
 
        function onGridDelete(e) {
            var grid = $("#teamMemberGrid").data("kendoGrid");
            var row = $(e.currentTarget).closest("tr");
            grid.removeRow(row);
        }
 
    </script>
</div>

Popup View cshtml
<div class="form-group col-md-11">
    @Html.LabelFor(model => model.UserDetailId)
    @Html.EditorFor(model => model.UserDetailId)
    @Html.ValidationMessageFor(model => model.UserDetailId)
</div>
 
<div class="form-group col-md-11">
    @Html.LabelFor(model => model.EffectiveFromDate)
    @Html.EditorFor(model => model.EffectiveFromDate)
    @Html.ValidationMessageFor(model => model.EffectiveFromDate)
</div>
 
<div class="form-group col-md-11">
    @Html.LabelFor(model => model.EffectiveToDate)
    @Html.EditorFor(model => model.EffectiveToDate)
    @Html.ValidationMessageFor(model => model.EffectiveToDate)
</div>
 
<div class="form-group col-md-11">
    @Html.LabelFor(model => model.FirstName)
    @Html.EditorFor(model => model.FirstName)
    @Html.ValidationMessageFor(model => model.FirstName)
</div>
@Html.HiddenFor(model => model.TeamMemberId)
@Html.KendoScripts()
 
 
<input id="Username" name="Username" data-val="true" data-bind="value:Username" type="hidden" value="">
<input id="FirstName" name="FirstName" data-val="true" data-bind="value:FirstName" type="hidden" value="">
<input id="LastName" name="LastName" data-val="true" data-bind="value:LastName" type="hidden" value="">

AutoComplete cshtml
    function onUserAutoCompleteChange(e) {
        var dataItem = $("#@this.ViewData.ModelMetadata.PropertyName").data("kendoDropDownList").dataItem();
 
        $("#Username").val(dataItem.Username);
        $("#FirstName").val(dataItem.FirstName);
        $("#LastName").val(dataItem.LastName);
    }
</script>

TeamMemberController
/// <summary>
/// For use with Kendo Grid ajax binding
/// Creates new models by inserting the data posted by the Kendo Grid into the grid datasource.
/// </summary>
/// <param name="products">The model created by the user.</param>
/// <returns>The inserted model so the Kendo Grid is aware of the newly generated model</returns>
[HttpPost]
public virtual ActionResult AddMember([DataSourceRequest]DataSourceRequest request, TeamMemberModel model)
{
    return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}

Thanks in advance
Michael
Top achievements
Rank 1
 answered on 15 Sep 2014
1 answer
208 views
I wish I could get as far as all the other users having issues with formatting dates, but I'm stuck right here. The Format method isn't working. My grid is still displaying a Json date looking like this /Date(1364927400000)/. My date field is actually a DateTimeOffset field and I really would rather use a format string like yyyy-MM-dd hh:mm:ss tt K or yyyy-MM-dd hh:mm:ss tt zzz, but /Date(1364927400000)/ is completely unacceptable.


​ @(Html.Kendo().Grid<UtiliPoleOfficeWeb.Models.JobPriorityModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.Description).Width(150);
columns.Bound(p => p.Priority).Width(100);
columns.Bound(p => p.Owner).Width(100);
columns.Bound(p => p.Started).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.Inspector).Width(150);
columns.Bound(p => p.Completed).Width(425).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.FRInspector).Width(140).Title("Field Review Inspector");
columns.Bound(p => p.FRCompleted).Width(425).Title("Field Review Completed");
columns.Command(command => { command.Edit(); }).Width(100);
}) . . .

Please help.

Kiril Nikolov
Telerik team
 answered on 15 Sep 2014
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
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
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
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
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?