Telerik Forums
Kendo UI for jQuery Forum
1 answer
118 views
I just started playing with the DataViz components and I have some line graphs created that work fine in Firefox and Chrome, but not IE.   Any thoughts on what I've missed here?

Sample HTML file attached.
Iliana Dyankova
Telerik team
 answered on 30 Aug 2012
0 answers
116 views
Hi,
I have a problem with the telerik menu, when i use a grid to 100% of page, the menu passes below the grid, i don't know the solution for this problem, ahhh only with Internet Explorer
Gian
Top achievements
Rank 1
 asked on 30 Aug 2012
0 answers
96 views
I have an issue with my web page that contains Kendo UI grid. In this web page, I have a top portion that uses Knockout. The bottom part of the page is a Kendo UI Grid which is from another partial page (RenderPartial)

...
<fieldset >
<div >
<span id="MyId" class="uneditable-input koeditable" data-bind="text: Name"></span>
</div>
</fieldset>
<section>
@{ Html.RenderPartial("DetailEntries", new ViewDataDictionary {{ "Id", @ViewBag.Id } });}
</section>

DetailEntries is the partial page which is a Kendo ui grid with Filterable() option.

I got an error when rendering this page. 

It happens at this knockout function

// The following function is only used internally by this default provider.
// It's not part of the interface definition for a general binding provider.
'parseBindingsString': function(bindingsString, bindingContext) {
try {
var viewModel = bindingContext['$data'];
var rewrittenBindings = " { " + ko.jsonExpressionRewriting.insertPropertyAccessorsIntoJson(bindingsString) + " } ";
return ko.utils.evalWithinScope(rewrittenBindings, viewModel === null ? window : viewModel, bindingContext);
} catch (ex) {
throw new Error("Unable to parse bindings.\nMessage: " + ex + ";\nBindings value: " + bindingsString);
}
}


Error: 
Uncaught Error: Unable to parse bindings. 
Message: ReferenceError: filters is not defined; 
Bindings value: value: filters[0].operator  

bindingsString : "value: filters[0].operator"
bindingContext: ko.bindingContext which contains the ViewModel for my top portion.

If I remove the filterable option from the Kendo UI grid, the page renders without error.

Please help.

Alex
Alex
Top achievements
Rank 1
 asked on 30 Aug 2012
1 answer
98 views
I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view with a view template and an edit template 

After editing a listview item using an edit template, I click the save button. The edit template is immediately replaced by the view template before the Create/Update controller action is hit on the server. If the controller action fails some validation I can not show this to the user as the edit template is no longer visible. Is there a way to make the edit template remain open until either the controller action has completed successfully or if the controller action fails validation push the validation errors to the edit template. This would be a fairly typical pattern.


<div class="k-toolbar k-grid-toolbar">
    <a id="addRoleButton" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Role</a>
</div>
 
    @(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)
        .Name("rolesListView")       
        .TagName("div")       
        .ClientTemplateId("rolesList")       
        .Editable()
        .Pageable()
        .DataSource(dataSource => dataSource           
            .Model(model =>
                {
                    model.Id("RoleId");
                    model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);
                    model.Field(f => f.Title);
                    model.Field(f => f.Description);;
                })
            .Events(e => e               
                .Error("rolesListViewData_error")
                .Change("rolesListViewData_change")
                .RequestStart("rolesListViewData_requestStart"))          
            .Create(create => create.Action("createRole", "Project"))           
            .Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))
            .Update(update => update.Action("updateRole", "Project"))   
            .PageSize(30)           
         )
        .Events(e => e
            .Change("rolesListView_change")
            .Edit("rolesListView_edit")
            .DataBound("rolesListView_databound"))     
    )

view template
//View template
<script type="text/x-kendo-template" id="rolesList">
    <div class="roleView" >
        <div> ${Title} </div>
        <div> ${Description} </div>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
        </div>
    </div>
</script>

edit template
@model iProjX.Models.RoleModel
 
<div class="roleView" id = "newRoleForm2" >
    @Html.ValidationSummary(true)
 
    @Html.HiddenFor(model => model.ProjectId)
    @Html.HiddenFor(model => model.RoleId)
 
    <div class="editor-label">
        @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Title, new { style = "width:99%", maxlength = 100 })
        <span data-for="Title" class="k-invalid-msg"></span>
    </div>
 
    <div class="editor-label">
        @Html.LabelFor(model => model.Description)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.Description, new { style = "width:100%; height:100px"})
        <span data-for="Description" class="k-invalid-msg"></span>
    </div>
 
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" onclick="updateClick()" href="\\#"><span class="k-icon k-update"></span>Save</a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
    </d
brian keating
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
262 views
I have an autocomplete widget that works when I prepopulate the data from my ajax service but not when I use the DataSource Transport.

I am allowed to use json (dont need jsonp) but something else is the issue.
my table holds 60K employees so obviously I need to filter it down.
any ideas where I am making my mistake?
Thanks.


                 
                 var dataSource = [];  
                 var dataParam = [];
                 var remoteHost="http://www.myHost.com/Service.asmx/";
                 var remoteMethod ="getEmployees";
                                    
                 $(function () {                                         
                     // method 1: remotely hosted ajax - works with AutoComplete
                     callAjax(remoteMethod, dataParam, onSuccess);
                    
                     // method 2: Kendo Transport
                         $("#input").kendoAutoComplete({
                             minLength:3,
                             dataTextField:'Value',
                             dataSource:{
                                 serverPaging:true,
                                 pageSize:20,
                                 contentType:'application/json; charset=utf-8',
                                 type:'POST',
                                 dataType:'json',
                                 transport:{
                                     read: remoteHost + remoteMethod
                                 }
                             }
                         })
                 });                 

                // SUPPORT FUNCTIONS FOR METHOD #1
                 function onSuccess(data, status){
                     alert("got data");                    
                    // dataSource=data.d;                    
                    // buildAutoComplete();                    
                 }
                
                 function buildAutoComplete() {
                     $("#input").kendoAutoComplete({
                        minLength: 2,
                        dataTextField: "Value",
                        dataSource: dataSource                        
                     });                    
                 }
Edemilson
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
188 views
Hello,
I am following the examples linking the grid with a database through php found here.
Also, following the example of grid with popup editing found here.
I am trying to combine these examples so i can edit a grid linked with a database through php using popup editing, without a success.

First approach - keeping the different end points for the dataSource as in the popup editing example.

<div id="order_example" class="k-content">
    <div id="grid"></div>
     
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                          url: "order.php"
                        },
                        update: {
                          url: "order_update.php"
                        },
                        parameterMap: function(options, operation) {
                          if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                          }
                        }
                    },
                    schema: {
                        data: "data",
                        model: {
                          id: "_id",
                          fields: {
                            description: {validation: {required: true} }
                          }
                        }
                    }
                    //pageSize: 10
                },
                batch: true,
                columns: [
                           {title: "ID", field: "_id"},
                           {title: "Description", field: "description"},
                           {command: "edit"}
                ],
                height: 450,
                navigatable: true,
                editable: "popup"
            });
        });
     
        </script>
  </div>

Second approach - keeping the whole functionality in one php file as in the first example...
Code changed is in dataSource: 
transport: {
      read: {
        url: "order.php"
      },
      update: {
        url: "order.php",
        type: "POST"
      }
},

In both approaches the following happen:

  • With jquery 1.7.1, when i click the edit button it just disappears!! It reappears though, when i click another one, so the last one disappears...

  • With jquery 1.8.0 i get the following error in the console...
Uncaught Error: Syntax error, unrecognized expression: tr:not(.k-grouping-row) > td:not(.k-hierarchy-cell,.k-detail-cell,.k-group-cell,.k-edit-cell,:has(a.k-grid-delete)) jquery-1.8.0.min.js:2
Z.error jquery-1.8.0.min.js:2
bg jquery-1.8.0.min.js:2
Z.compile jquery-1.8.0.min.js:2
bm jquery-1.8.0.min.js:2
h.querySelectorAll.bm jquery-1.8.0.min.js:2
Z jquery-1.8.0.min.js:2
h.querySelectorAll.Z.matchesSelector jquery-1.8.0.min.js:2
p.extend.filter jquery-1.8.0.min.js:2
p.fn.extend.is jquery-1.8.0.min.js:2
p.event.dispatch jquery-1.8.0.min.js:2
p.event.add.g.handle.h jquery-1.8.0.min.js:2

Any ideas? Has anyone tried to do the same thing? Please any help is appreciated!! 

Alexander Valchev
Telerik team
 answered on 30 Aug 2012
3 answers
196 views
Hi,

We are really struggeling to get the DataSource working the way we want it. We are building a PoC with Kendo UI Complete. We've created a ViewModel that looks like this:

[DataContract]
    public partial class VMProject : VMRoot
    {
        public VMProject() {}
 
        public static VMProject GetById(object sender, int id)
        {
            return CallGetVMById<VMProject>("", id);
        }
 
        public static VMEntitySet<VMProject> AllVMProjectList(object sender)
        {
            return (VMEntitySet<VMProject>)CallGetVMAllList<VMEntitySet<VMProject>>(sender);
        }
 
        [DataMember]
        public String Name
        {
            get { return CallGetData<String>("Name"); }
            set { CallSetData ("Name", value); }
        }
 
        [DataMember]
        public VMEntitySet<VMProjectRegel> ProjectRegelList
        {
            get { return CallGetData<VMEntitySet<VMProjectRegel>>("ProjectRegelList"); }
            // set  { CallSetData ("ProjectRegelList", value); }
        }
 
    }

The consumed class VMRoot looks like this:
[DataContract]
    public partial class VMRoot : Viewmodel
    {
        public VMRoot() {}
 
        public static VMRoot GetById(object sender, int id)
        {
            return CallGetVMById<VMRoot>("", id);
        }
 
        public static VMEntitySet<VMRoot> AllVMRootList(object sender)
        {
            return (VMEntitySet<VMRoot>)CallGetVMAllList<VMEntitySet<VMRoot>>(sender);
        }
 
        [DataMember]
        public Int32 Id
        {
            get { return CallGetData<Int32>("Id"); }
            set { CallSetData ("Id", value); }
        }
 
        [DataMember]
        public DateTime CreatedOn
        {
            get { return CallGetData<DateTime>("CreatedOn"); }
            set { CallSetData ("CreatedOn", value); }
        }
 
        [DataMember]
        public Int32 CreatedBy
        {
            get { return CallGetData<Int32>("CreatedBy"); }
            set { CallSetData ("CreatedBy", value); }
        }
 
        [DataMember]
        public DateTime ChangedOn
        {
            get { return CallGetData<DateTime>("ChangedOn"); }
            set { CallSetData ("ChangedOn", value); }
        }
 
        [DataMember]
        public Int32 ChangedBy
        {
            get { return CallGetData<Int32>("ChangedBy"); }
            set { CallSetData ("ChangedBy", value); }
        }
 
    }

The VMEntitySet is an ObservableCollection which contains VMProjectRegel objects. These are defined like so:
    [DataContract]
    public partial class VMProjectRegel : VMRoot
    {
        public VMProjectRegel() {}
 
        public static VMProjectRegel GetById(object sender, int id)
        {
            return CallGetVMById<VMProjectRegel>("", id);
        }
 
        public static VMEntitySet<VMProjectRegel> AllVMProjectRegelList(object sender)
        {
            return (VMEntitySet<VMProjectRegel>)CallGetVMAllList<VMEntitySet<VMProjectRegel>>(sender);
        }
 
        [DataMember]
        public Int32 Aantal
        {
            get { return CallGetData<Int32>("Aantal"); }
            set { CallSetData ("Aantal", value); }
        }
 
        [DataMember]
        public Decimal Prijs
        {
            get { return CallGetData<Decimal>("Prijs"); }
            set { CallSetData ("Prijs", value); }
        }
 
        [DataMember]
        public Decimal BTW
        {
            get { return CallGetData<Decimal>("BTW"); }
            set { CallSetData ("BTW", value); }
        }
 
    }

We have defined the Model like so:
var Project = kendo.data.Model.define(
{
    id: "Id",
    fields:
    {
        DatumAanvang:
        {
            type: "date"
        },
        DatumFaktuur:
        {
            type: "date"
        },
        Name:
        {
            type: "string"
        },
        CreatedOn:
        {
            "type": "date"
        },
        CreatedBy:
        {
            "type": "number"
        },
        ChangedOn:
        {
            "type": "date"
        },
        ChangedBy:
        {
            "type": "number"
        }
    }
});

And the DataSource like so:

var dataSourceprojecten = new kendo.data.DataSource(
            {
                // the transport tells the datasource what endpoints
                // to use for CRUD actions
                schema:
                {
                    model: Project
                },
                transport:
                {
                    read:
                    {
                        url: "../api/projectonderhoud/get",
                        dataType: "json"
                    }
                }
            });

The JSON we receive looks like this:
[
  {
    "DatumAanvang": "\/Date(1345732135057+0200)\/",
    "DatumFaktuur": "\/Date(1345732135059+0200)\/",
    "Name": "Project onderhoud",
    "ProjectRegelList": [
      {
        "Aantal": 99,
        "Prijs": 99.000000000000,
        "BTW": 1.000000000000,
        "Id": 101,
        "CreatedOn": "\/Date(1345732135085+0200)\/",
        "CreatedBy": 10,
        "ChangedOn": "\/Date(1345732135085+0200)\/",
        "ChangedBy": 10
      }
  ],
    "Id": 1,
    "CreatedOn": "\/Date(1345732135060+0200)\/",
    "CreatedBy": 10,
    "ChangedOn": "\/Date(1345732135060+0200)\/",
    "ChangedBy": 10
  }
]

If I let the code run it results in HTML that shows the wrong Date format for the CreatedOn date. When however I specify the Model in the DataSource like so:

var dataSourceprojecten = new kendo.data.DataSource(
{
    // the transport tells the datasource what endpoints
    // to use for CRUD actions
    schema:
    {
        model:
        {
            id: "Id",
            fields:
            {
                DatumAanvang:
                {
                    type: "date"
                },
                DatumFaktuur:
                {
                    type: "date"
                },
                Name:
                {
                    type: "string"
                },
                CreatedOn:
                {
                    "type": "date"
                },
                CreatedBy:
                {
                    "type": "number"
                },
                ChangedOn:
                {
                    "type": "date"
                },
                ChangedBy:
                {
                    "type": "number"
                }
            }
        }
    },
    transport:
    {
        read:
        {
            url: "../api/projectonderhoud/get",
            dataType: "json"
        }
    }
});

Now the date is shown correctly. I just don't understand why the defined Model is not seen by the DataSource and the model defenition inside the DataSource is seen.

Regards
Paul

Atanas Korchev
Telerik team
 answered on 30 Aug 2012
6 answers
406 views
Hi Guys,

I have probably rather stupid, but still very frustrating problem with Kendo Datasource - particulary binding a remote service (json) to a list. I spent few hours yesterday reading, trying, experimenting - but to no avai, so this is my very last ressource...

It's the following scenario: I want to take an existing Kendo Mobile Ui example, "Pull to Refresh", which comes in the example folders when Kendo mobile is downloaded, but can also be found online here, and instead of binding it to Twitter REST service (as shown in the example), to bind it to my own datasource - data from remote REST service.

My service is located at:
http://sharedove.cld.sr/sahreconf2012/_vti_bin/ShareDoveRestService/ShareDove.svc/anonymous/GetSessions

So what I do with the original code is following:
- Change service address to the one above
- Change the name of the data field property from "results" (Twitter service) to "AllSessions" (my service)
- Change the template to show one single field ("TrackName")

What happens is following: In fiddler, I see my data loaded (hurray), with response code 200 (everything ok), but it just won't display (bind).

Screenshot of the Chrome developer tools with the service response selected is here.

So, I have no idea where does it go wrong. Everything looks plain and simple, I get my data, but it still would not show/bind.

Any ideas from you, good people?

Thanks!!

A, of course, my full code is (this is the "Pull to Refresh" example, with few lines modified):

<!DOCTYPE html>
<html>
<head>
    <title>Pull to refresh</title>
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
 
    <ul id="pull-to-refresh-listview"></ul>
</div>
 
<script id="pull-to-refresh-template" type="text/x-kendo-template">
    <div class="tweet">
        #= TrackName #
    </div>
</script>
 
<script>
    function mobileListViewPullToRefresh() {
            var lastID;
            var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                transport: {
                    read: {
                        url: "http://sharedove.cld.sr/sahreconf2012/_vti_bin/ShareDoveRestService/ShareDove.svc/anonymous/GetSessions", // the remove service url
                        dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
                    },
                    parameterMap: function(options) {
                        var page = options.page;
                        var parameters = {
                            q: "javascript",
                            since_id: lastID //additional parameters sent to the remote service
                        }
 
                        return parameters;
                    }
                },
                change: function() {
                    var item = this.view()[0];
 
                    if (item) {
                        lastID = item.id_str;
                    }
                },
                schema: { // describe the result format
                    data: "AllSessions" // the data which the data source will be bound to is in the "results" field
                }
            });
 
        $("#pull-to-refresh-listview").kendoMobileListView({
            dataSource: dataSource,
            pullToRefresh: true,
            appendOnRefresh: true,
            template: $("#pull-to-refresh-template").text()
        });
    }
</script>
 
<style scoped>
    .tweet {
        font-size: .8em;
        line-height: 1.4em;
    }
    .pullImage {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        float: left;
        margin-right: 10px;
    }
    .sublink {
        font-size: .9em;
        font-weight: normal;
        display: inline-block;
        padding: 3px 3px 0 0;
        text-decoration: none;
        opacity: .8;
    }
</style>
 
 
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
HDC
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
157 views
Hi Friends,

I want to enter data in grid using popup.  But when I try to load, it's not display popup.  I have attached my cshtml code and mvc controller code here.

cshtml:
 
@(Html.Kendo().Grid(Model.CustomerOrderDetails)
            .Name("CustomerOrder")
            .Columns(columns =>
                {
                    columns.Bound(p => p.TransitionSN).Width(70);
                    columns.Bound(p => p.DateOfPurchase).Width(140);
                    columns.Bound(p => p.CustomerName).Width(140);
                    columns.Bound(p => p.BrandName).Width(140);
                    columns.Bound(p => p.Qty).Width(50);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
                }
            )
            .ToolBar(toolbar => toolbar.Create())
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.TransitionSN))
                .Read(read => read.Action("NewCustomer_Read", "CustomerOrder"))
                .Create(update => update.Action("NewCustomer_Create", "CustomerOrder"))
                .Update(update => update.Action("NewCustomer_Create", "CustomerOrder"))
                .Destroy(update => update.Action("NewCustomer_Create", "CustomerOrder")))
            )



------------------------------------------------------------------------------
Controller:

 
public ActionResult NewCustomer()
        {
            return View(new NewCustomer { CustomerAddress = "", CustomerEmail = "", CustomerName = "", CustomerCode = "", CustomerOrderDetails = SQLOrder.SelectAll() });
            //return View();
        }
 
 
        public ActionResult NewCustomer_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(SessionNewCustomerRepository.All().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            //return Json(SQLOrder.SelectAll().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
 
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult NewCustomer_Create([DataSourceRequest] DataSourceRequest request, CustomerOrder.Models.OrderDetails newcustomer)
        {
            if (newcustomer != null && ModelState.IsValid)
            {
                SessionNewCustomerRepository.Insert(newcustomer);
            }
            return Json(new[] { newcustomer }.ToDataSourceResult(request, ModelState));
        }

I have also attached the screen shot which I got.

Please help me .

Thanks & Regards,

Rupendra
Top achievements
Rank 1
 answered on 30 Aug 2012
1 answer
321 views
Does the Window object support an event which is fired when the user clicks the close icon but BEFORE the window is actually closed? Something like jQuery-UI's beforeClose event.

i'm trying to build a conditional close.

Thanks
Rafi
Nohinn
Top achievements
Rank 1
 answered on 30 Aug 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
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?