Telerik Forums
UI for ASP.NET MVC Forum
2 answers
275 views

Hi I would like to develop a user management screen using Telerik grid having one drop down column from which user can able select the role. But when user selecting any role from dropdown its not getting bind in backend. Please find attached code below.

 

Role.cshtml (Its under ..\Views\Shared\EditorTemplates)

@model IT_GRCData_Service.ViewModel.RoleOptionViewModel 

@(Html.Kendo().DropDownList().Name("roleOption")
            .DataTextField("PortalRoleName")
            .DataValueField("PortalRoleId")
            .DataSource(d => d
                .Read(r => r.Action("Index", "Role"))
            )
            .ValuePrimitive(true)
            .AutoBind(true)
)

RoleControler.cs

 public class RoleController : Controller
    {
        private GRCPortalEntities db = new GRCPortalEntities();
        public JsonResult Index()
        {
            
            var roleOption = db.PORTAL_ROLE.Select(s => new RoleOptionViewModel
            {               
                PortalRoleId = s.PORTAL_ROLE_ID,
                PortalId = s.PORTAL_ID,
                PortalRoleName = s.PORTAL_ROLE_NAME,
                PortalRoleDescription = s.PORTAL_ROLE_DESCRIPTION,
                IsActive = s.IS_ACTIVE
            });

            roleOption = roleOption.Where(r => r.IsActive);
            return this.Json(roleOption, JsonRequestBehavior.AllowGet);
        }
    }

RoleOptionViewModel.cs

public class RoleOptionViewModel
    {
        public int PortalRoleId { get; set; }
        public int PortalId { get; set; }
        public string PortalRoleName { get; set; }
        public string PortalRoleDescription { get; set; }
        public bool IsActive { get; set; }
    }

Above are used for dropdown template..

Below are used for grid design..

UseManagementViewModel.cs

 public class UserManagementViewModel
    {
        public string Guid { get; set; }
        public string UserName { get; set; }
        public string PwCPreferredEmail { get; set; }
        public int PortalUserId { get; set; }
        public bool IsActive { get; set; }

        [UIHint("Role")]
        public RoleOptionViewModel RoleOptionViewModelProperty { get; set; }

    }

UserManagement\Index.cshtml

@using IT_GRCData_Service.ViewModel;
@{
    ViewBag.Title = "User Management";
}

<div class="panel panel-danger">
    <div class="panel-heading">
        <div class="panel-title" style="font-size: 14px; ">
            <b style="padding-right:50px">User Management</b>
        </div>
        <div style="float:right; font-size: 85%; position: relative; top:-10px">help?</div>
    </div>
    <div class="panel-body">
        @(Html.Kendo().Grid<UserManagementViewModel>()
                            .Name("gridUserManagement")
                            .Columns(columns =>
                            {
                                columns.Bound(c => c.UserName).Title("User Name");
                                columns.Bound(c => c.PwCPreferredEmail).Title("Preferred Mail");
                                columns.Bound(c => c.Guid).Title("User Guid");
                                columns.Bound(c => c.RoleOptionViewModelProperty).ClientTemplate("#: RoleOptionViewModelProperty.PortalRoleName #").Title("Role");
                                columns.Bound(c => c.IsActive).Title("Is Active").ClientTemplate("<input type='checkbox' #= IsActive ? checked='checked' :'' # />");
                                columns.Command(command => { command.Edit(); command.Destroy(); });
                            })
                            .ToolBar(t => t.Create())
                            .Editable(editable => editable.Mode(GridEditMode.InLine))
                            .Pageable()
                            .Sortable()
                            .Scrollable()
                            .HtmlAttributes(new { style = "height:550px;" })
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Events(events => events.Error("error_handler"))
                                .Model(model =>
                                {
                                    model.Id(p => p.PortalUserId);
                                    model.Field(p => p.UserName).Editable(false);
                                    model.Field(p => p.Guid).Editable(false);
                                    model.Field(p => p.PwCPreferredEmail).Editable(false);
                                    //model.Field(p => p.RoleOptionViewModelProperty).Editable(true);
                                    model.Field(p => p.RoleOptionViewModelProperty).DefaultValue(ViewData["roleOption"] as IT_GRCData_Service.ViewModel.RoleOptionViewModel);
                                })
                                .PageSize(20)
                                .Create(update => update.Action("EditingPopup_Create", "Scoring"))
                                .Read(read => read.Action("User_Read", "UserManagement"))
                                .Update(update => update.Action("User_Update", "UserManagement"))
                                .Destroy(update => update.Action("EditingPopup_Destroy", "Scoring"))

                            )
        )
    </div>

      

    <script type="text/javascript">

        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }

    </script>

 

UserManagementController .cs

 public class UserManagementController : Controller
    {

        private GRCPortalEntities db = new GRCPortalEntities();
        // GET: UserManagement
        public ActionResult Index()
        {
            ViewData["roleOption"] = db.PORTAL_ROLE.Select(s => new RoleOptionViewModel
            {
                PortalRoleId = s.PORTAL_ROLE_ID,
                PortalId = s.PORTAL_ID,
                PortalRoleName = s.PORTAL_ROLE_NAME,
                PortalRoleDescription = s.PORTAL_ROLE_DESCRIPTION,
                IsActive = s.IS_ACTIVE
            }).First();
            return View();
        }


        public ActionResult Editing_Popup()
        {
            return View();
        }

        public ActionResult User_Read([DataSourceRequest] DataSourceRequest request)
        {
            try
            {
                var userListQuery = db.PORTAL_USER.AsQueryable();
                userListQuery = userListQuery.Where(s => s.PORTAL_USER_ROLE.PORTAL_ROLE_ID > 0);
                var userList = userListQuery.Select(p => new UserManagementViewModel
                {
                    UserName = p.UNIQUE_NAME,
                    Guid = p.USER_GUID,
                    PwCPreferredEmail = p.PWC_PREFERRED_EMAIL,
                    IsActive = p.IS_ACTIVE,
                    PortalUserId = p.PORTAL_USER_ID,
                    RoleOptionViewModelProperty = new RoleOptionViewModel
                    {
                        PortalRoleId = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_ID,
                        PortalId = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ID,
                        PortalRoleName = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_NAME,
                        PortalRoleDescription = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_DESCRIPTION,
                        IsActive = p.PORTAL_USER_ROLE.PORTAL_ROLE.IS_ACTIVE
                    }
            });
                var userListResult = userList.ToDataSourceResult(request);
                return Json(userListResult);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult User_Update([DataSourceRequest] DataSourceRequest request, UserManagementViewModel userObj)
        {
            if (userObj != null && ModelState.IsValid)
            {
                userObj.RoleOptionViewModelProperty    //Data not binding with dropdown selection change
    
            }

            return Json(new[] { userObj }.ToDataSourceResult(request, ModelState));

        }

    }

In User_Update dropdown selection change not bunding with old data. Its holding with new data

 

Alex Hajigeorgieva
Telerik team
 answered on 27 Feb 2020
4 answers
415 views

No errors but the chart is not showing.  The model has two "series" that are IEnumerable of objects that have properties for category, value and color.  The model is filled properly and if I don't try to use Ajax via DataSource / action and just load the object and set the Series it works fine.  Meaning I load an object <FlowsInOutChartData> inout in the top of a Razor page and then set the series via .Series(series => ... series.Donut(inout.InFlows) .Name("In Flows") etc. chart works fine.  Want to load via Ajax so the page comes back immediately (the chart takes a few seconds to load due to database calculation delay).

I think the problem is in the series func<>

series.Donut(d => d.InFlows, null)
               .Name("In Flows");

But not sure what I'm doing wrong.

 

@(Html.Kendo().Chart<WAPDBBusiness.Charts.FlowsInOutChartData>()
                                             .Name("chart")
                                             .ChartArea(chartArea => chartArea
                                                 .Background("transparent"))
                                             .Title(title => title
                                                 .Text("Cash Flows")
                                                 .Position(ChartTitlePosition.Bottom)
                                             )
                                             .Legend(legend => legend
                                                 .Visible(false)
                                             )
                                             .SeriesDefaults(series =>
                                                 series.Donut().StartAngle(150)
                                             )
                                              .DataSource(dataSource => dataSource
                                                                .Read(read => read.Action("CashInOutChartData", "PracticeAnalytics")) //Specify the action method and controller names.
                                            )
                                            .Series(series =>
                                                    {
                                                series.Donut(d => d.InFlows, null)
                                                      .Name("In Flows");
                                            })
                                            .Series(series =>
                                                    {
                                                series.Donut(d => d.OutFlows, null)
                                                      .Name("Out Flows");
                                            })
                   )

 

Controller:

public ActionResult CashInOutChartData()
 {
      var data = new WAPDBBusiness.Charts.CashFlowsInOutChart().GetFirmAnalyticsFlowsByQuarter(loginInfo.FirmID, 1, loginInfo.FirmID, true);

 

     return Json(data, JsonRequestBehavior.AllowGet);
 
 }

 

Model:

public class FlowsInOutChartData
    {
        public IEnumerable<FlowInOutChartItem> InFlows { get; set; }
        public IEnumerable<FlowInOutChartItem> OutFlows { get; set; }
    }
    public class FlowInOutChartItem
    {
        public int? myYear { get; set; }
        public int? myQtr { get; set; }
        public decimal Total { get; set; }
        public decimal PercentOfTotal { get; set; }
        /// <summary>
        /// Used by Telerik Donut Chart
        /// </summary>
        public string category
        {
            get
            {
                return "Q" + myQtr.ToString() + " " + myYear.ToString();
            }
        }
        /// <summary>
        /// Used by Telerik Donut Chart
        /// </summary>
        public decimal value
        {
            get
            {
                return PercentOfTotal;
            }
        }
        /// <summary>
        /// Used by Telerik Donut Chart
        /// </summary>
        public string color { get; set; }
      
    }

 

 

Abe
Top achievements
Rank 1
 answered on 27 Feb 2020
1 answer
591 views

I need to customize only some tooltips not all the tooltips. Can this be done? (For instance change the background color of some tooltips)

I tried to add HtmlAttributes but they are ignored.

I tried to use a div for the content but the telerik is adding a padding to the tooltip content and instead of having an uniform background color I get a big border and a background in a different color.

I also tried to set a negativ margin to my div but the padding is done not to the parent but the parent of the parent of the content

I do not want to modify all the tooltips (Setting the padding to 0 it would mean that I have to add all the other tooltips in a div where I set padding back).

Ivan Danchev
Telerik team
 answered on 26 Feb 2020
1 answer
156 views

Hallo everyone,

I'm trying to connect my Test_DataBase To the Scheduler so i did everything what Vladimir IIiev in the Clip did

https://www.telerik.com/forums/simple-working-example-of-scheduler-fetching-information-from-sql#_2OZsTOj7EaZuGz0GQ0UhQ

 

but this is an old version of telerik

 

So actually i can't do anything READING CREATING UPDATING AND DELETING ! No CRUD operation working completely right for me

 

so can you please show me in a new clip if it is possible ..

OR A NEW BASIC EXAMPLE FOR A C#.NET MVC SCHEDULER CONNECTION WITH A DATABASE READING CREATING UPDATING AND DELETING

 

i need to know if i should buy this tool or not !

Martin
Telerik team
 answered on 26 Feb 2020
9 answers
489 views
Hello

I'm a total beginner with Telerik and I'm having problems binding the scheduler to at database for showing events. Is there somebody who knows of a step-by-step tutorial for making that connection or could tell me step-by-step how I should do it (preferably with a working example).

BR
Jonas
Dimitar
Telerik team
 answered on 25 Feb 2020
18 answers
2.2K+ views
Hello,

I'm using the new feature of the filter row (.Filterable(ftb => ftb.Mode(GridFilterMode.Row))) in my MVC kendo UI grids. It works just as I wished. But I have two problems with it.

1. How can I disable the autocomplete feature of the filters?
2. How can i make the filter smaller or let them autofit to the column width. I have a grid with more then 10 small columns and with the activated filter row the columns width is enlarged to fit the filter and so the grid doesn't fit any more on one screen.
Dimo
Telerik team
 answered on 24 Feb 2020
1 answer
93 views

Hi,

I have added a Search Panel for the grid. But when I click on the input text, it causes the postback. I haven't entered anything yet and merely placing cursor causes the postback. Here is the snippet.

Appreciated your help!

@(Html.Kendo().Grid<AAMVA.Website.OnlineMemberDirectory.Models.MemberViewModel>()
     .Name("grid")
     .Columns(columns =>
     {
         columns.Bound(p => p.Name).Width("12%").ClientTemplate("<span class='content'>#=Name#</span>").Filterable(false);
         columns.Bound(p => p.Organization).ClientTemplate("<span class='content'>#=Organization#</span>").Filterable(false);
         columns.Bound(p => p.EmailAddress).Width("19%").ClientTemplate("<span class='content'>#=EmailAddress#</span>").Filterable(false);
     })
         .Filterable()
         .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
         .Sortable()
         .Scrollable()
         .ToolBar(t => t.Search())
         .HtmlAttributes(new { style = "height:700px;" })
         .NoRecords("No Members to display")
         .DataSource(dataSource => dataSource
             .Ajax()
             //.ServerOperation(false) // Paging, sorting, filtering, and grouping will be done client-side.
             .PageSize(10)
             .Read(read => read.Action("People", "Search"))
             )
         .Events(e => e
             .DataBound("onDataBound")
         )
 )
function onDataBound() {
 
    var filter = this.dataSource.filter();
 
    var highlightedItems = $('.highlighted');
    highlightedItems.each(function () {
        var span = this;
        var text = span.textContent;
        span.parentNode.replaceChild(document.createTextNode(text), span);
    });
 
 
    if (filter && filter.filters.length) {
        var values = [];
        iterateFilters(filter, values);
        highlight(values)
    }
}
 
   function iterateFilters(expression, collection) {
        if (expression.filters) {
            $.each(expression.filters, function (_, filter) {
 
                iterateFilters(filter, collection);
                if (filter.value) {
 
                    collection.push(filter.value)
                }
            });
        }
    }
 
function highlight(values) {
 
    $('#grid td .content').each(function () {
 
 
        var originalValue = $(this).text();
        var lowerValue = originalValue.toLocaleLowerCase();
 
       // values = values.map(x => x.toLocaleLowerCase());
        values = values.map(function (x) { return x.toLocaleLowerCase(); });
        
 
        var flag = false;
        var newValues = [];
 
 
        values.forEach(function (x) {
            //if (lowerValue.includes(x)) {
            if(lowerValue.indexOf(x) > -1) {
                flag = true;
                newValues.push(x)
            }
        })
 
        newValues;
 
        if (flag) {
            //var indexes = newValues.map(x => lowerValue.indexOf(x));
            var indexes = newValues.map(function (x) { return lowerValue.indexOf(x); });
 
            //var lengths = newValues.map(x => x.length);
            var lengths = newValues.map(function (x) { return  x.length; });
             
 
            var substring = "(";
 
            indexes.forEach(function (x, i) {
                substring += originalValue.substring(x, x + lengths[i]);
 
                if (i != lengths.length - 1) {
                    substring += "|";
                }
            });
 
            substring += ")"
 
            var re = new RegExp(substring, 'g');
            var newValue = $(this).text().replace(re, function (x) {
                return "<span class='highlighted'>" + x + "</span>"
 
            });
 
            $(this).html(newValue)
        }
    })
}
Viktor Tachev
Telerik team
 answered on 21 Feb 2020
1 answer
2.4K+ views

Hi,

I have the following code using datepicker for a Datetime filed but it is not showing the date icon to show the dropdown of calendar. It just shows the text box.

FYI. I am using datepicker and it works fine. Also, I am using Timepicker which works fine.

Is there any reason why it shows the calendar pop up in one screen and not in other.

 <div class="form-group col-md-6 row rowSmall text-right ">
                    @Html.LabelFor(model => model.XStartDate, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8 text-left">
                        @*@(Html.Kendo().DatePickerFor(model => model.XStartDate).Value(DateTime.Today).HtmlAttributes(new { style = "width: 150px", title = "datepicker" }))*@
                        @(Html.Kendo().DatePickerFor(model => model.HearingStartDate).HtmlAttributes(new { style = "width: 200px", title = "datepicker" }))
                    </div>

Thanks

 

Guest10
Top achievements
Rank 1
 answered on 20 Feb 2020
1 answer
286 views

I have some buttons on a page, which when required, show badges containing a number. The code is:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Value((string)ViewBag.NoToReview).Type("error").Visible((bool)ViewBag.ReviewBadge)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

 

This is fine, however I have a bootstrap 3 drop-down menu at the top of the page, and when it is shown, the button badge appears over the menu, not hidden by it.

How can I stop this happening?

 

Ivan Danchev
Telerik team
 answered on 19 Feb 2020
8 answers
623 views

The grids I'm working on have quite a bit going on so I have tried to cut the details down to just what seems to pertain to this query.

 

For these grids, which are in InLine mode, there is a dropdown cascade setup so when a location is chosen the state gets set as well though can still be changed.

This is working well for all of the rows which are already in the grid to be updated.

However it is not triggering for a new row before it is submitted into the datasource.

The cascade works off of the onchange event; found this way through the forums here.

 

Here is one of the grid definitions:

@(Html.Kendo().Grid<NexusPWI.ViewModels.Wizard.OfficerPayrollReportingViewModel>()
    .Name("OfficerGrid")
    .Columns(c =>
    {
    c.Command(command => { command.Edit(); }).Width(120).Title("Update");
    c.Bound(vm => vm.FirstName).Width(120);
    c.Bound(vm => vm.LastName).Width(120);
    c.Bound(vm => vm.Title).Width(120);
 
    c.ForeignKey(vm => vm.LocationNumber, (System.Collections.IEnumerable)ViewData["LocationsList"], "LocationNumber", "Drop_Text").HtmlAttributes(new { onchange = "triggerDropChange(this);" }).Width(200).Hidden(Model.Locations_ColumnInitHidden); //Display UIHint in Dropdown through LocationsList ClientTemplate with just the LocationNumber value behind
 
    c.Bound(vm => vm.State).HtmlAttributes(new { @class = "locationLinkedState" }).Width(180).ClientFooterTemplate("Total");
 
    c.Command(command => { command.Edit(); }).Width(120);
    c.Command(command => { command.Destroy(); }).Width(40);
    c.Template(@<text></text>);//Blank Column to handle Scrollable variable width so headers do not skew
    })
    .Scrollable(s => s.Enabled(true).Height("auto"))//Scrollable to control column widths
    .ToolBar(toolbar =>
    {
        toolbar.Template("<div class='col-lg-8'>" +
            @Html.Raw(@Model.OfficerPayrollHeader) +
            "</div>" +
            "<div class='col-lg-3'>" +
            "<a class='pull-right k-button k-button-icontext k-grid-add' href='/Wizard/OfficerPayrollRead?OfficerGrid-mode=insert'><span class='k-icon k-add'></span>Add Row</a>" +
            "</div>");
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine)
        .CreateAt(GridInsertRowPosition.Bottom)
        )
 
    .Navigatable()
    .Pageable()
    .Events(events => events.Edit("gEdit('OfficerGrid')")
        .Remove("gRemove('OfficerGrid')")
        .DataBound("gDataBoundOfficer")
        .Cancel("gCancel('OfficerGrid')")
        )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("officerGrid_error") // Handle the "error" event
            .RequestEnd("Grid_RequestEnd")
            .RequestStart("dRequestStart")//Hooked up for event sequencing and debugging
            .Change("Grid_Delete")
            .Sync("dSync('OfficerGrid')")
            )
        .Model(model => {
            model.Id(vm => vm.PolicyHolderPayroll_OfficerGridId);
        })
        )
        .PageSize(1000)
        .Create("OfficerPayrollCreate", "Wizard")
        .Read("OfficerPayrollRead", "Wizard")
        .Update("OfficerPayrollUpdate", "Wizard")
        .Destroy("OfficerPayrollDestroy", "Wizard")
))

The Javascript Event:

function triggerDropChange(e) {
        var dropKey = e.innerText.replace("select", "");
        var locationCode = dropKey.split(":")
        var currentRowIndex = $(e).closest("tr").index();
        var digOutToGrid = e.parentElement;
        var digOutToGrid2 = digOutToGrid.parentElement;
        var digOutToGrid3 = digOutToGrid2.parentElement;
        var digOutToGrid4 = digOutToGrid3.parentElement;
        var GridLevel = digOutToGrid4.parentElement;
        var grid = $("#" + GridLevel.id.toString()).data().kendoGrid;
 
        var dataItem = grid.dataItem("tr:eq(" + (currentRowIndex + 1) + ")"); //Row
         
        var locationValueList = {};
 
        @foreach(EntityLocationsViewModel entry in (System.Collections.IEnumerable)ViewData["LocationsList"])
        {//Make Value LookUp Listing
            <text>locationValueList["@entry.LocationNumber"] = "@entry.State";</text>
        }
 
        @if (Model.DisplayEntities)
        {
        <text>
        var inVal = dataItem.LocationNumber.trim();
        var changeTo = locationValueList[inVal];
        </text>
        }
        else
        {
            <text>var changeTo = locationValueList[locationCode[0].trim()];</text>
        }
 
        dataItem.set("State", changeTo);
 
        var nod = 2;
    }

 

Is there any way to have this cascade applied to the dropdown in the new row before it is submitted?

 

Also is there is a way to have this new row have some default values (such as dropdown values pre-selected) before "entered" and sent to the controller to be inserted?

Viktor Tachev
Telerik team
 answered on 18 Feb 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
Window
ListView
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
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
Licensing
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
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?