Telerik Forums
Kendo UI for jQuery Forum
3 answers
483 views
Dear Kendo Team,
I try to run a tooltip (see code below and result in attachment).
var tooltip = $("#Button_Settings_ID").kendoTooltip({
        filter: "input",
        width: 210,
        height: heigth,
        position: "bottom",
        autoHide: false,
        showOn: "click",
        callout: true,
        content: kendo.template($("#Button_Settings_template").html())
    }).data("kendoTooltip");

This works fine, excepted I can see the call out...
I force the value to true, but without succes...
I take your example, provided here, and I've got the same result....(see in attachment)
<head>
    <title></title>
    <link href="Content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="Script/kendo/2013.1.319/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
            <div id="example" class="k-content">
            <div class="demo-section">
                <div id="agglomerations">
                    <a href="#" title="Canton - 26,300,000" id="canton"></a>
                    <a href="#" title="Jakarta - 25,800,000" id="jakarta"></a>
                    <a href="#" title="Mexico City - 23,500,000" id="mexico"></a>
                    <a href="#" title="Delhi - 23,500,000" id="delhi"></a>
                    <a href="#" title="Karachi - 22,100,000" id="karachi"></a>
                    <a href="#" title="New York - 21,500,000" id="newyork"></a>
                    <a href="#" title="Sao Paulo - 21,300,000" id="saopaolo"></a>
                    <a href="#" title="Mumbay/Bombay - 21,100,000" id="bombay"></a>
                    <a href="#" title="Los Angeles - 17,100,000" id="losangeles"></a>
                    <a href="#" title="Osaka - 16,800,000" id="osaka"></a>
                    <a href="#" title="Moscow - 16,200,000" id="moscow"></a>
                </div>
            </div>
 
            <script>
                $(document).ready(function () {
                    var tooltip = $("#agglomerations").kendoTooltip({
                        filter: "a",
                        width: 120,
 
                        position: "top"
                    }).data("kendoTooltip");
 
                    tooltip.show($("#canton"));
 
                    $("#agglomerations").find("a").click(false);
                });
            </script>
 
            <style scoped="scoped">
 
                .demo-section {
                    width: 692px;
                }
 
                #agglomerations {
                    position: relative;
                    width: 692px;
                    height: 480px;
                    margin: 0 auto;
                    background: url('../../content/web/tooltip/world-map.jpg') no-repeat 0 0;
                }
 
                #agglomerations a {
                    position: absolute;
                    display: block;
                    width: 12px;
                    height: 12px;
                    background-color: #fff600;
                    -moz-border-radius: 30px;
                    -webkit-border-radius: 30px;
                    border-radius: 30px;
                    border: 0;
                    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
                    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
                    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
                    -moz-transition:  -moz-box-shadow .3s;
                    -webkit-transition:  -webkit-box-shadow .3s;
                    transition:  box-shadow .3s;
                }
 
                #agglomerations a:hover {
                    -moz-box-shadow: 0 0 0 15px rgba(0,0,0,0.5);
                    -webkit-box-shadow: 0 0 0 15px rgba(0,0,0,0.5);
                    box-shadow: 0 0 0 15px rgba(0,0,0,0.5);
                    -moz-transition:  -moz-box-shadow .3s;
                    -webkit-transition:  -webkit-box-shadow .3s;
                    transition:  box-shadow .3s;
                }
 
                #canton { top: 226px; left: 501px; }
                #jakarta { top: 266px; left: 494px; }
                #mexico { top: 227px; left: 182px; }
                #delhi { top: 214px; left: 448px; }
                #karachi { top: 222px; left: 431px; }
                #newyork { top: 188px; left: 214px; }
                #saopaolo { top: 304px; left: 248px; }
                #bombay { top: 233px; left: 438px; }
                #losangeles { top: 202px; left: 148px; }
                #osaka { top: 201px; left: 535px; }
                #moscow { top: 153px; left: 402px; }
 
                #canton:hover,
                #jakarta:hover,
                #mexico:hover,
                #delhi:hover,
                #karachi:hover,
                #newyork:hover,
                #saopaolo:hover,
                #bombay:hover,
                #losangeles:hover,
                #osaka:hover,
                #moscow:hover { z-index: 10; }
 
            </style>
        </div>
 
 
</body>
</html>

The only things that i've changed, it's the jquery path (currently using jquery-1.8.3.min.js)
Thanks for your help!
Best regards
Dimo
Telerik team
 answered on 17 Apr 2013
2 answers
404 views
I am absolutely new to Kenod and all it attached features and needed tasks - so please forgive me.

I was able to retrieve data from my sql database and bind it to a tabstrip.

var dsBuecherAT = new kendo.data.DataSource(
                    {
                    transport: {
                            read: {
                            url: "/api/t_buechers",
                            dataType: "json"
                        }
                        }
                });
                 
                $("#buecherAT").kendoTabStrip({
                    dataTextField: "Buch",
                    dataContentField: "Buch_ID",
                    dataSource: dsBuecherAT
                });
However when I try to filter (remember I am actually clueless what I am doing) its not working.

1)  http://docs.kendoui.com/api/framework/datasource the syntax looks like

var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { field: "name", operator: "startswith", value: "Jane" }
});
If I search the web I mostly find fiields operator and value in""

Does it matter?
Which is correct?

var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe" },
    { name: "John Doe" }
  ],
  filter: { "field": "name", "operator:" "startswith", "value:" "Jane" }
});

2) this are two ways I tried and both did not work. Any suggestions?

Try # 1

//we are getting the kapitels
               function getKapitels(buch_ID) {
                   alert(buch_ID);
                   var dsKapitels = new kendo.data.DataSource({
                       transport: {
                           read: {
                               url: "/api/t_kapitels",
                               dataType: "json"
                           }
                       }
 
                   });
 
                   $("#kapitel").kendoTabStrip({
                
                       dataTextField: "Kapitel_ID",
                       dataContentField: "Buch_ID",
                       dataSource: dsKapitels.filter({ field: "Buch_ID", operator: "eq", value: "1" })
                   })
               }
Try #2

 
//we are getting the kapitels
               function getKapitels(buch_ID) {
                   alert(buch_ID);
                   var dsKapitels = new kendo.data.DataSource({
                       transport: {
                           read: {
                               url: "/api/t_kapitels",
                               dataType: "json"
                           }
                       },
                         
                      filter: { field: "Buch_ID", operator: "eq", value: "1" }
 
                   });
 
                   $("#kapitel").kendoTabStrip({
                
                       dataTextField: "Kapitel_ID",
                       dataContentField: "Buch_ID",
                       dataSource: dsKapitels
                   })
               }

Any help is appreciated, and please forgive me if these questions are to clear.

Markus
Markus
Top achievements
Rank 2
 answered on 16 Apr 2013
1 answer
203 views
I searched around for a while in the forums, etc. but wasn't able to find an answer, so my apologies if this has already been addressed elsewhere.

I'm using a DataViz pie chart and would like to have the option for labels to show outside the pie or on the pie slices themselves.  I can accomplish this by setting series.labels.position to outsideEnd for outside the chart and centered to render them on the pie slices.

However, if there are pie slices that are too small (let's say %5 of the pie or less) having the labels render on the pie slice is not very useful, and I'd like to have them render outsider the pie.  In other words, it would be nice if there were an option to tell the chart to render the label on the slice except in cases where the slice is too small, in which case the label will automatically render outside the slice.  This sort of behavior seems pretty standard in other pie charts I've seen in the past.

Is there a way to easily do this? 

Thanks!
--Joel
Iliana Dyankova
Telerik team
 answered on 16 Apr 2013
1 answer
201 views
I am running Chrome version 26.0.1410.60M. In this version of my browser, from within the grid I cannot seem to modify and change the check boxes. When I click on the true or false within grid, it does change the OptOut field from true or false to a checkbox. But then when I try to update the checkbox, the grid doesn't let me, and it just toggles back to True or false. Here is the HTML from the page. Is there something I'm doing wrong on the page, or is this an issue with the kendo libraries?

Attached is the cshtml file that generated the code, and the final HTML.
Thanks!

File1:
@model Pipeline.Web.Models.EmailPreferencesViewModel@{
    ViewBag.Title = "title";
  //  Layout = "About.cshtml";
}<h2>title</h2>
<script>
    $(document).ready(function() {
    //    window.emailTemplateGrid = @Html.Raw(Json.Encode(Model.emailTemplateSelectionsViewModel));        var dataSource = new kendo.data.DataSource({
            data: @Html.Raw(Json.Encode(Model.emailTemplateSelectionsViewModel)),
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { type: "number" },
                        NotificationName: { type: "string" },
                        Description: { type: "string" },
                        OptOut: { type: "boolean",editable:true }
                    }
                }
            },
            pageSize: 20                
        });                //var dataSource = new kendo.data.DataSource({
        //    data: [
        //     { ID:1,NotificationName:"test1",Description: "Test Desc",OptOut:true },
        //     { ID:2,NotificationName:"test2",Description: "Test Desc2",OptOut: false}
           
           
        //    ]
               
        //        ,
        //    schema: {
        //        model: {
        //            id:"ID",
        //            fields: {
        //                ID: { type: "number" },
        //                NotificationName: { type: "string" },
        //                Description: { type: "string" },
        //                OptOut: { type: "boolean" }
        //            }
        //        }
        //    },
        //    pageSize: 20
                           
        //});          console.log("Client Contact Grid Data: " + JSON.stringify(dataSource, null, 4));
        var grid = $("#emailTemplateGrid").kendoGrid({
           
            dataSource:dataSource,
            pageable:true,
            columns: [
                { title: "ID", field: "ID", hidden: true },
                { title: "Notification Name", field: "NotificationName" },
                { title: "Description", field: "Description" },
                { field: "OptOut", title: "OptOut", width:210}],
                       
            editable: true
          
        });    
        //{ command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }        $("#btnSave").click(function() {
         //   var notes = $("#ATPNotes").data("kendoEditor").value();
            var emailTemplate = [];
            $.each(dataSource._data, function (index, value) {
               
                var emailTemplateSelectionsViewModel = { };
                emailTemplateSelectionsViewModel.ID = value.ID;
                emailTemplateSelectionsViewModel.NotificationName = value.NotificationName;
                emailTemplateSelectionsViewModel.Description = value.Description;
                emailTemplateSelectionsViewModel.OptOut = value.OptOut;
               
               
                emailTemplate.push(emailTemplateSelectionsViewModel);
                console.log("emailTemplateSelectionsViewModel: " + JSON.stringify(emailTemplateSelectionsViewModel, null, 4));
            });
         //   var searchTeam = [];
         //   $.each(window.searchTeamGridData, function(index, value) {
         //       searchTeam.push(value.ID);
         //   });       
                        var DTO = { 'emailTemplateSelectionsViewModels': emailTemplate };     $.ajax({
         type: 'POST',
         url: "@Url.Action("EmailPreferencesUpdate", "DataService")",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify(DTO),
                dataType: 'json'
            //    success: function(data) {
            //        $("#ATPhoneCall").data("kendoWindow").close();
            //        location.reload(true);
           //     }
            });
 });
    });
</script>
<div id="emailTemplateGrid"></div>
<BR /><strong>Regional Approvers:</strong><br/>
    <div id="searchTeam"><!-- Filled from jquery load call --></div>
<br/> <input id="btnSave" type="button" value="Save" />
    

Final HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>title - Pipeline</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/Main.css" rel="stylesheet"/>        <link href="/Content/Kendo/kendo.common.css" rel="stylesheet"/>
<link href="/Content/Kendo/kendo.default.css" rel="stylesheet"/>
        <script src="/Scripts/Lib/jquery-1.9.1.js"></script>        <script src="/Scripts/Kendo/kendo.web-2013.1.319.js"></script>
<script src="/Scripts/Kendo/kendo.aspnetmvc-2013.1.319.js"></script>        <script src="/Scripts/Lib/modernizr-2.5.3.js"></script>        <script src="/Scripts/pipeline.dataservice.js"></script>        <script src="/Scripts/pipeline.utilities.js"></script>    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">your logo here</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                        Hello, <span class="username">CTNET\adm_kkess</span>!
                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Admin">Admin</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
           
            <section class="content-wrapper main-content clear-fix">
                <h2>title</h2>
<script>
    $(document).ready(function() {
    //    window.emailTemplateGrid = [{"ID":3,"NotificationName":"1OnListToGet","Description":"Another to send","OptOut":false},{"ID":4,"NotificationName":"2LOETestEveryoneCanOptOut","Description":"LOE Test Email Avail to everyone and can opt out","OptOut":true}];        var dataSource = new kendo.data.DataSource({
            data: [{"ID":3,"NotificationName":"1OnListToGet","Description":"Another to send","OptOut":false},{"ID":4,"NotificationName":"2LOETestEveryoneCanOptOut","Description":"LOE Test Email Avail to everyone and can opt out","OptOut":true}],
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { type: "number" },
                        NotificationName: { type: "string" },
                        Description: { type: "string" },
                        OptOut: { type: "boolean",editable:true }
                    }
                }
            },
            pageSize: 20                
        });                //var dataSource = new kendo.data.DataSource({
        //    data: [
        //     { ID:1,NotificationName:"test1",Description: "Test Desc",OptOut:true },
        //     { ID:2,NotificationName:"test2",Description: "Test Desc2",OptOut: false}
           
           
        //    ]
               
        //        ,
        //    schema: {
        //        model: {
        //            id:"ID",
        //            fields: {
        //                ID: { type: "number" },
        //                NotificationName: { type: "string" },
        //                Description: { type: "string" },
        //                OptOut: { type: "boolean" }
        //            }
        //        }
        //    },
        //    pageSize: 20
                           
        //});          console.log("Client Contact Grid Data: " + JSON.stringify(dataSource, null, 4));
        var grid = $("#emailTemplateGrid").kendoGrid({
           
            dataSource:dataSource,
            pageable:true,
            columns: [
                { title: "ID", field: "ID", hidden: true },
                { title: "Notification Name", field: "NotificationName" },
                { title: "Description", field: "Description" },
                { field: "OptOut", title: "OptOut", width:210}],
                       
            editable: true
          
        });    
        //{ command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }        $("#btnSave").click(function() {
         //   var notes = $("#ATPNotes").data("kendoEditor").value();
            var emailTemplate = [];
            $.each(dataSource._data, function (index, value) {
               
                var emailTemplateSelectionsViewModel = { };
                emailTemplateSelectionsViewModel.ID = value.ID;
                emailTemplateSelectionsViewModel.NotificationName = value.NotificationName;
                emailTemplateSelectionsViewModel.Description = value.Description;
                emailTemplateSelectionsViewModel.OptOut = value.OptOut;
               
               
                emailTemplate.push(emailTemplateSelectionsViewModel);
                console.log("emailTemplateSelectionsViewModel: " + JSON.stringify(emailTemplateSelectionsViewModel, null, 4));
            });
         //   var searchTeam = [];
         //   $.each(window.searchTeamGridData, function(index, value) {
         //       searchTeam.push(value.ID);
         //   });       
                        var DTO = { 'emailTemplateSelectionsViewModels': emailTemplate };     $.ajax({
         type: 'POST',
         url: "/DataService/EmailPreferencesUpdate",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify(DTO),
                dataType: 'json'
            //    success: function(data) {
            //        $("#ATPhoneCall").data("kendoWindow").close();
            //        location.reload(true);
           //     }
            });
 });
    });
</script>
<div id="emailTemplateGrid"></div>
<BR /><strong>Regional Approvers:</strong><br/>
    <div id="searchTeam"><!-- Filled from jquery load call --></div>
<br/> <input id="btnSave" type="button" value="Save" />
   
       
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2013 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>     </body>
</html>
         

Vladimir Iliev
Telerik team
 answered on 16 Apr 2013
1 answer
152 views
I want to know about the event of 'series chart click event and plot area click'.

I gave a click event to series chart and plot area chart , but the problem is "I don't know the 'ID' of clicked chart'

How can I get the 'Id' of chart that I clicked??

Thanks in advance.
Iliana Dyankova
Telerik team
 answered on 16 Apr 2013
1 answer
125 views
I'm trying to use the Kendo UI colour picker with the opacity slider, which the documentation describes as being available if you use the hsv selector. 

If I use the hsv selector and change the RGB values first, all select events fire normally. However if I try and change the opacity first using the opacity slider, the select event doesn't fire, and therefore the colour doesn't update to reflect the new opacity value. If I change the rgb colour values at any stage, the select event then fires normally from then on.

So basically there seems to be an issue if the user only wishes to change the opacity of particular colour, but does not need to change the RGB values for the colour. 

Can anyone confirm whether this is a bug?  It is happening in IE9 and Chrome for me, Kendo UI Q1 2013 release.  
Dimiter Madjarov
Telerik team
 answered on 16 Apr 2013
2 answers
265 views
I am new to Kendo UI and would like to try to use it to build my first mobile app. I found this article: http://www.kendoui.com/blogs/teamblog/posts/12-08-15/rocking_kendo_ui_in_visual_studio_2012_and_windows_8.aspx but it seems to be more about Kendo UI Web rather than mobile. How does mobile development work? What project type do I start with in Visual Studio? Does Kendo provide some sort of phone emulator? Do the apps just run in your browser window? Are there ways to test/support multiple screen sizes? Does Kendo UI Mobile support intellisense in Visual Studio? 

Really exciting to begin using this and if it works out as planned I will definately be purchasing a license. Thanks so much!
Sebastian
Telerik team
 answered on 16 Apr 2013
4 answers
113 views
Dear Kendo Team,
I've created detail row grid with specific css (see below).
This works properly on Chrome, Firefox, but on IE10, only the second lines are taken the right css style....(see file attached)
Could you provide us a solution for this issue?
Thanks in advance
Kind regards.
.k-grid table tr:hover
{
    background: #ffb76b; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjc2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmE3M2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3YzAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmN2YwNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 100%, #ff7c00 100%, #ff7f04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(100%,#ffa73d), color-stop(100%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* W3C */
     cursor:pointer;
}

HUA
Top achievements
Rank 1
 answered on 16 Apr 2013
1 answer
133 views
Is there a way to maintain the pending changes on the grid when using ServerPaging, ServerGrouping, ServerFiltering, ServerSorting and ServerAggregates?  We're losing all pending changes whenever a filter is applied, page is changed, column sorted, etc.  Should these changes be preserved by default or is there something we can do to preserve them?  At a minimum, is there something we can do to detect these actions and prompt the user to commit the changes before filtering, paging, etc?
Alexander Valchev
Telerik team
 answered on 16 Apr 2013
3 answers
157 views
We have just updated to Kendo Mobile build 2013.1.319, and we are very glad to see the TypeScript definition file there.

However, it appears to be incorrect. The definition for the kendo.mobile.Application class constructor reads as:

    class Application extends Observable {
        constructor(options?: ApplicationOptions);

but the constructor actually takes two parameters. And should read something like:

    class Application extends Observable {
        constructor(element: any, options?: ApplicationOptions);

At least according to any documentation or example I can find.

Do you have a running Kendo Mobile example in TypeScript?

Thanks,
David Sykes
Atanas Korchev
Telerik team
 answered on 16 Apr 2013
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? 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?