Telerik Forums
Kendo UI for jQuery Forum
2 answers
1.6K+ views

I'm trying to hide the paging control when is not needed  but I'm missing something, here is my code, hope you can help me to solve this, thanks in advance! Line 261

001.var NoFoundMessage = $("#NoFoundMessage");
002.var Kendogrid = $("#grid");
003.var isOrderById = false;
004. 
005.kendo.pdf.defineFont({
006.    "DejaVu Sans": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
007.    "DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
008.    "DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
009.    "DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
010.});
011. 
012.(function (myOrders, $) {
013. 
014.    myOrders.OrderHistory = (function () {
015. 
016.        var Order = $("#Order").text();
017.        var PSQ = $("#PSQ").text();
018.        var Date = $("#Date").text();
019.        var Status = $("#Status").text();
020.        var OrderPurpose = $("#OrderPurpose").text();
021.        var Purchaser = $("#Purchaser").text();
022.        var ShipTo = $("#ShipTo").text();
023.        var Volume = $("#Volume").text();
024.        var OrderAgain = $("#OrderAgain").text();
025.        var ViewReceipt = $("#ViewReceipt").text();
026. 
027.        var getUrlWithLocale = function (url) {
028.            var pathArray = window.location.pathname.split('/');
029.            var segment = pathArray[1];
030.            var regex = /^([a-zA-Z]{2}-[a-zA-Z]{2})$/;
031. 
032.            if (regex.test(segment)) {
033.                return "/" + segment + url;
034.            }
035.            return url;
036.        }
037. 
038.        var load = function () {
039.            if (typeof localStorage.searchByOrderId !== "undefined" && JSON.parse(localStorage.searchByOrderId) === true) {
040.                localStorage.searchByOrderId = false;
041.                isOrderById = true;
042.                orderIdCtrl.val(localStorage.OrderID);
043.            }
044.            showGrid();
045.            kendo.ui.progress(Kendogrid, true);
046.            Kendogrid.kendoGrid({
047.                excel: {
048.                    fileName: "OrdersHistory.xlsx",
049.                    allPages: true,
050.                    proxyURL: "/Account/OrderInquiry/Save/"
051.                },
052.                pdf: {
053.                    allPages: true,
054.                    avoidLinks: true,
055.                    paperSize: "A4",
056.                    margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
057.                    landscape: true,
058.                    repeatHeaders: true,
059.                    template: $("#page-template").html(),
060.                    scale: 0.8
061.                },
062.                noRecords: true,
063.                dataSource: {
064.                    type: "POST",
065.                    transport: {
066.                        read: function (options) {
067.                            if (isOrderById === false) {
068.                                getOrdersDataSource(myOrders.SearchControl.pagingSearch(), options);
069.                            } else {
070.                                getOrderByIdDataSource(localStorage.OrderID, options);
071.                                isOrderById = false;
072.                            }
073.                        }
074.                    },
075.                    batch: true,
076.                    schema: {
077.                        type: 'json',
078.                        model: {
079.                            id: "OrderID",
080.                            fields: {
081.                                OrderID: { type: "string" },
082.                                PurchasedBy: { type: "string" },
083.                                LocalizedDate: { type: "string" },
084.                                OrderStatusDesc: { type: "string" },
085.                                LocalizedHapOrderStatus: { type: "string" },
086.                                OrderPurpose: { type: "string" },
087.                                PurchaserName: { type: "string" },
088.                                Recipient: { type: "string" },
089.                                VolumePoints: { type: "string" },
090.                                OrderAgain: { type: "string" },
091.                                ViewReceipt: { type: "string" }
092.                            }
093.                        }
094.                    },
095.                    pageSize: 10
096.                },
097.                groupable: false,
098.                sortable: true,
099.                pageable: {
100.                    refresh: false,
101.                    pageSizes: [10, 20, 30]
102.                },
103.                columns: [
104.                    {
105.                        field: "OrderID",
106.                        title: Order,
107.                        template: function (data) {
108.                            var url = getUrlWithLocale("/Account/OrderHistory/GetOrderDetails/");
109.                            return "<a id='btnViewDetails' data-orderID='" +
110.                                data.OrderID +
111.                                "' href='" +
112.                                url +
113.                                data.OrderID +
114.                                "/Ds' target='_self'>" +
115.                                data.OrderID +
116.                                "</a>";
117.                        }
118.                    },
119.                    {
120.                        field: "PurchasedBy",
121.                        title: PSQ
122.                    },
123.                    {
124.                        field: "LocalizedDate",
125.                        title: Date
126.                    },
127.                    {
128.                        field: "OrderStatusDesc",
129.                        title: Status,
130.                        template: function (data) {
131.                            if (data.OrderStatus === '03') {
132.                                return "<span class='complete'>" + data.OrderStatusDesc + "</span>";
133.                            } else if (data.OrderStatus === "90") {
134.                                return "<span class='cancelled'>" + data.OrderStatusDesc + "</span>";
135.                            } else if (data.OrderStatus === "01") {
136.                                return "<span class='paid'>" + data.OrderStatusDesc + "</span>";
137.                            }
138.                            else {
139.                                return "<span class='processing'>" + data.OrderStatusDesc + "</span>";
140.                            }
141.                        }
142.                    },
143.                    {
144.                        field: "LocalizedHapOrderStatus",
145.                        title: Status,
146.                        hidden: true,
147.                        template: function (data) {
148.                            if (data.HapOrderStatus === "ACTIVE") {
149.                                return "<span class='complete'>" + data.LocalizedHapOrderStatus + "<span>";
150.                            } else if (data.HapOrderStatus === "CANCELLED") {
151.                                return "<span class='cancelled'>" + data.LocalizedHapOrderStatus + "<span>";
152.                            } else {
153.                                return "<span class='processing'>" + data.LocalizedHapOrderStatus + "<span>";
154.                            }
155.                        }
156.                    },
157.                    {
158.                        field: "OrderPurpose",
159.                        title: OrderPurpose,
160.                        template: function (data) {
161.                            return data.LocalizedOrderPurpose;
162.                        }
163.                    },
164.                    {
165.                        field: "PurchaserInfo.PurchaserName",
166.                        title: Purchaser,
167.                        attributes: {
168.                            "class": "tablet"
169.                        },
170.                        template: function (data) {
171.                            return data.PurchaserInfo.PurchaserName
172.                        }
173.                    },
174.                    {
175.                        field: "Shipment.Recipient",
176.                        title: ShipTo,
177.                        template: "#:kendo.toString(Shipment.Recipient)#"
178.                    },
179.                    {
180.                        field: "Pricing.VolumePoints",
181.                        title: Volume,
182.                        template: function (data) {
183.                            return data.Pricing.VolumePoints;
184.                        }
185. 
186.                    },
187.                    {
188.                        field: "OrderAgain",
189.                        title: OrderAgain,
190.                        sortable: false,
191.                        template: (function () {
192.                            var url = getUrlWithLocale("/Shop/Cart/Copy/Index/Ds/");
193.                            if (myOrders.SearchControl.pagingSearch().IsHapOrder === false) {
194.                                return "<a class='icon-files-ln-3' href='" + url + "#:OrderID#'> </a>";
195.                            }
196.                            return "";
197.                        }())
198.                    },
199.                    {
200.                        field: "ViewReceipt",
201.                        title: ViewReceipt,
202.                        sortable: false,
203.                        template: (function (data) {
204.                            var url = getUrlWithLocale("/Shop/Receipts/Invoice/Display/" + data.ReceiptNumber);
205.                            if (data.OrderPurpose !== null && data.OrderPurpose.toLocaleLowerCase() == "cd") {
206.                                return "<a href='" + url + "'><i class='icon-receipt-ln-4'></i></a>";
207.                            }
208.                            return "";
209.                        })
210.                    }
211.                ]
212.            });
213.        }
214. 
215.        var searchByOrderId = function (orderId) {
216.            localStorage.searchByOrderId = true;
217.            isOrderById = true;
218.            localStorage.OrderID = orderId;
219.            load(false);
220.        }
221. 
222.        function getOrdersDataSource(data, options) {
223.            $.ajax({
224.                url: getUrlWithLocale("/Account/OrderInquiry/GetOrders"),
225.                data: data,
226.                dataType: "json",
227.                success: function (result) {
228.                    if (result == null) {
229.                        noFound();
230.                    } else {
231.                        formatColumns(myOrders.SearchControl.pagingSearch().IsHapOrder);
232.                        showGrid();
233.                    }
234.                    kendo.ui.progress(Kendogrid, false);
235.                    options.success(result);
236.                }
237.            });
238.        }
239. 
240.        function getOrderByIdDataSource(orderId, options) {
241.            $.ajax({
242.                url: getUrlWithLocale("/Account/OrderInquiry/GetOrderById"),
243.                data: { orderId: orderId },
244.                dataType: "json",
245.                success: function (result) {
246.                    if (result == null) {
247.                        noFound();
248.                    } else {
249.                        if (result[0].IsStandingHapOrder === true) {
250.                            formatColumns(true);
251.                            $(".k-grid-header-wrap > table").addClass("hap-table");
252.                            $(".k-grid-content > table").addClass("hap-table");
253.                        }
254.                        showGrid();
255.                    }
256.                    kendo.ui.progress(Kendogrid, false);
257.                    options.success(result);
258.                }
259.            });
260.        }
261. 
262.        function onGridDataBound(e) {
263.            if (this.dataSource.view().length == 0) {
264.                $('.k-pager-info').hide();
265.            } else {
266.                $('.k-pager-info').show();
267.            }
268. 
269.            if (this.dataSource.totalPages() == 1) {
270.                this.pager.element.hide();
271.                $(".k-grid-pager").hide();
272.            }
273.        }
274. 
275.        function noFound() {
276.            Kendogrid.hide();
277.            NoFoundMessage.show();
278.        }
279. 
280.        function showGrid() {
281.            NoFoundMessage.hide();
282.            Kendogrid.css("display", "block");
283.        };
284. 
285.        function formatColumns(isHapOrder) {
286. 
287.            var grid = Kendogrid.data("kendoGrid");
288. 
289. 
290.            if (isHapOrder === true) {
291.                grid.hideColumn("Recipient");
292.                grid.hideColumn("OrderAgain");
293.                grid.hideColumn("ViewReceipt");
294.                grid.hideColumn("OrderStatusDesc");
295.                grid.hideColumn("PurchasedBy");
296.                grid.hideColumn("PurchaserName");
297.                grid.showColumn("LocalizedHapOrderStatus");
298. 
299.                $("#grid thead [data-field=LocalizedDate] .k-link").html("Start Date");
300. 
301.            } else {
302.                //CSS
303.                grid.showColumn("Recipient");
304.                //$("th[data-field='Recipient']").show();
305.                grid.showColumn("OrderAgain");
306.                //$("th[data-field='Order Again']").show();
307.                grid.showColumn("ViewReceipt");
308.                //$("th[data-field='ViewReceipt']").show();
309.                grid.showColumn("OrderStatusDesc");
310.                //$("th[data-field='OrderStatusDesc']").show();
311.                grid.showColumn("PurchasedBy");
312.                //$("th[data-field='PurchasedBy']").show();
313.                grid.showColumn("PurchaserName");
314.                //$("th[data-field='PurchaserName']").show();
315.                grid.hideColumn("LocalizedHapOrderStatus");
316.                //$("th[data-field='HapOrderStatus']").hide();
317.                $("#grid thead [data-field=LocalizedDate] .k-link").html("Date");
318.            }
319.        }
320. 
321.        return {
322.            load: load,
323.            gerUrlWithLocale: getUrlWithLocale,
324.            searchByOrderId: searchByOrderId
325.        };
326. 
327.    }());
328. 
329.    return false;
330. 
331.})(window.myOrders = window.myOrders || {}, jQuery);
332. 
333.$(document).ready(function () {
334. 
335.    myOrders.OrderHistory.load();
336. 
337.    $("#show-form").click(function (e) {
338.        $("#search-form").slideToggle();
339.        $(this).find("i").toggleClass("icon-arrow-circle-ln-29 icon-arrow-circle-ln-30");
340.        e.preventDefault();
341.    });
342. 
343.    $("#export").click(function () {
344.        var grid = Kendogrid.data("kendoGrid");
345.        grid.saveAsExcel();
346.        return false;
347.    });
348. 
349.    $("#modal-cancel").click(function () {
350.        $("#modal-download").data("kendoWindow").close();
351.        return false;
352.    });
353. 
354.    $("#modal-ok").click(function () {
355. 
356.        if ($('#radio-excel').is(':checked')) {
357.            var grid = Kendogrid.data("kendoGrid");
358.            grid.hideColumn("OrderAgain");
359.            grid.hideColumn("ViewReceipt");
360.            grid.saveAsExcel();
361.            grid.showColumn("OrderAgain");
362.            grid.showColumn("ViewReceipt");
363.            $("#modal-download").data("kendoWindow").close();
364.        } else if ($('#radio-pdf').is(':checked')) {
365.            var grid = Kendogrid.data("kendoGrid");
366.            grid.saveAsPDF();
367.            $("#modal-download").data("kendoWindow").close();
368.        } else {
369.            return false;
370.        }
371.        return false;
372.    });
373.});

 

Ismaelc
Top achievements
Rank 1
 answered on 19 Dec 2016
4 answers
6.7K+ views
How to make grid not load data when first time go  to the page? Because I have some filter condition before load data,Now when I first go to the page,It load all data  to me without filter because my filter condition is null as user have not set the filtercondition
Nikolay Rusev
Telerik team
 answered on 19 Dec 2016
3 answers
186 views

It is found that all browsers except IE do not auto convert text into hyperlink. eg. abc@xyz.com is auto created to a link - <a href="mailto:abc@xyz.com">abc@xyz.com</a> in IE

 

I want to know what is the way to avoid hyperlink creation in IE.

Rumen
Telerik team
 answered on 19 Dec 2016
2 answers
90 views

I'm trying to get the latest kendo angular 2 drop to work in my angular 2 + web pack project.  I followed the startup docs and installed the buttons and default styles using npm.

Webpack version: 1.14.0

Angular 2.3

Kendo buttons ^0.14.2

kendo-theme-default: ^1.32.1

 

Webpack builds the app fine

When i startup my web app I see this in the console 

 

Error: Unexpected module 'ButtonsModule' declared by the module 'AppModule'
_reportError — compiler.umd.js:672
(anonymous function) — compiler.umd.js:17758
forEach
getNgModuleMetadata — compiler.umd.js:17740
_loadModules — compiler.umd.js:26465
_compileModuleAndComponents — compiler.umd.js:26425
compileModuleAsync — compiler.umd.js:26402
_bootstrapModuleWithZone — core.umd.js:8417
(anonymous function) — main.ts:7
Eval Code — main.ts:7
eval
(anonymous function) — app.js:15
__webpack_require__ — polyfills.js:51
(anonymous function) — app.js:7
__webpack_require__ — polyfills.js:51
webpackJsonpCallback — polyfills.js:22
Global Code — app.js:1

Kiril Nikolov
Telerik team
 answered on 19 Dec 2016
1 answer
181 views

Hi,

we are looking for a way to get around overlapping text/icons for our chart notes, it's a time series chart and when you choose a long time frame the notes start to overlap on the x-axis.

We want to introduce a note that can combine multiple notes (by simply using a differnt icon and add all info into the hover) but only when notes overlap, to determine that we would need the x-position in the chart, as we have the chart width and the width of the note label icon.

I did not see a way of accessing any kind of "position.x" property for a Note though in the API. Can you please point me into the right direction.

I would even be fine if it's not a supported API property but some other way  (via JavaScript) to get that information. WHen I look at the SVG ion the browser I notice there is a x and y position for the SVG element making up the note icon but I don't see a way of determining shich SVG element is linked to which Note in the series.

(attached an example of overlapping icons)

Thanks,

Steve

Daniel
Telerik team
 answered on 19 Dec 2016
3 answers
1.6K+ views
Hi, I need to disable excel export button if row count is zero. or show pop up "Now records found" then prevent download.
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 16 Dec 2016
2 answers
268 views

Is there a way to get Resharper to accept Kendo tags?  For example I have this html

<kendo-grid k-data-source="vm.gridData" k-columns="vm.gridColumns" k-toolbar='["create"]' k-editable="'incell'" k-navigatable="'true'" >
</kendo-grid>

 

And Resharper (2016.2.2) puts a squiggly line under kendo-grid with the message Cannot resolver tag 'kendo-grid'. 

 

 

Scott Waye
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 16 Dec 2016
1 answer
280 views

IE11 is autoconverting any URL syntax into a hyperlink, and this is fine, but the target of the hyperlink is the current page, which wrecks user flow when the resulting static content link is clicked. I need the hyperlinks to include the target="_blank" attribute. Is there a way to do this in the editor already?

Rumen
Telerik team
 answered on 16 Dec 2016
1 answer
243 views

The 2 most important things to note is that when working with any RadScheduler

  1. The backend implementation of the RadScheduler is NOT consistent across telerik platforms.
  2. Kendo UI does NOT support any type server-side processing

Because of the above, I have spent much time struggling with processing the server-side when using the Kendo UI RadScheduler. I saw the recommendations about using ASP.NET RadScheduler, or WinForms RadScheduler, DDay.iCal or iCal.NET. 

One of the most frustrating things was the backend storage of the recurrence string did not plug/play into other RadScheduler platforms directly: recurrence string differences, class names, methods, etc. (#1 issue above)

In many forum answers, it just says use DDay.ICal or iCal.NET but there is no sample code. Well here it is for DDay.iCal! I was able to get DDay.iCal to do server-side processing of recurring events. I offer my code up to the community for review and use. Use at own risk.

Please note that I modified that standard Kendo UI backend database structure to include an “Estimated End Date”. It is NULL when the appointment “never” ends. I calculate the value during the appointment save using settings from the recurrence string. As long as I estimate correctly or even if I over-estimate, I am in the clear with my code.

Also note, that my appointments can have multiple people tied to it. Thus, you will see a final “foreach” loop that will flatten out the appointments per person.

My primary goal was to get a list of appointments, per person, within a specified time range so i can send reminder emails.

 

public List<AppointmentItem> GetAppointments(DateTime startDate, DateTime endDate)
{
    var results = new List<AppointmentItem>();
  
    var appts = _dataContext.tblAppointments
                            .Where(w =>
                                    w.StartDateTime <= endDate
                                    && (
                                        (w.EstimatedEndDateTime == null) // this gets the "never" ends entries
                                        ||
                                        (w.EstimatedEndDateTime.Value >= w.StartDateTime)
                                    )
                            )
                            .ToList();
  
    foreach (var appt in appts)
    {
        IICalendar iCal = new iCalendar();
        IEvent eventHolder = iCal.Create<Event>();
        eventHolder.Start = new iCalDateTime(appt.StartDateTime);
        eventHolder.End = new iCalDateTime(appt.EndDateTime);
  
        if (!appt.RecurrenceAppointmentId.HasValue)
        {
            var recurPattern = new RecurrencePattern($"RRULE:{appt.RecurrenceRule}");
            eventHolder.RecurrenceRules.Add(recurPattern);
        }
  
        if (!string.IsNullOrEmpty(appt.RecurrenceException))
        {
            var periodList = new PeriodList();
            var allDates = appt.RecurrenceException.Split(char.Parse(","));
  
            foreach (var item in allDates)
                periodList.Add(new iCalDateTime(DateTime.ParseExact(item, "yyyyMMddTHHmmssZ", CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal)));
  
            eventHolder.ExceptionDates.Add(periodList);
        }
  
        //if seems GetOccurrences does BETWEEN check, non-inclusive so i have to widen the dates a little bit.
        foreach (var occurrence in iCal.GetOccurrences(startDate.AddMilliseconds(-1), endDate.AddDays(1)))
        {
            results.AddRange(appt.tblAppointmentStudents.Select(student => new AppointmentItem
                                                                           {
                                                                               AppointmentName = appt.AppointmentName,
                                                                               AppointmentNotes = appt.AppointmentDetails,
                                                                               EndTime = occurrence.Period.EndTime.Date,
                                                                               StartTime = occurrence.Period.StartTime.Date,
                                                                               StudentId = student.StudentId
                                                                           }));
        }
    }
  
    //results = results.OrderBy(t => t.StartTime).ToList();
    return results;
}

 

The AppointmentItem class:

 

public class AppointmentItem
{
   
    public int StudentId { get; set; }
    public string AppointmentName { get; set; }
    public string AppointmentNotes { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

The function call

testing.GetAppointments(new DateTime(2016,12,15), new DateTime(2016, 12, 21));


Database Table tblAppointment

 

CREATE TABLE [dbo].[tblAppointment]
(
[AppointmentId] [int] NOT NULL IDENTITY(1, 1),
[AppointmentName] [varchar] (500) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[AppointmentDetails] [varchar] (max) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[EndDateTime] [datetime] NOT NULL,
[StartDateTime] [datetime] NOT NULL,
[EstimatedEndDateTime] [datetime2] NULL,
[RecurrenceAppointmentId] [int] NULL,
[RecurrenceException] [varchar] (max) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[RecurrenceRule] [varchar] (1024) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
ALTER TABLE [dbo].[tblAppointment] ADD CONSTRAINT [PK_tblAppointment] PRIMARY KEY CLUSTERED ([AppointmentId]) ON [PRIMARY]
GO
ALTER TABLE [dbo].[tblAppointment] ADD CONSTRAINT [FK_tblAppointment_tblAppointment] FOREIGN KEY ([RecurrenceAppointmentId]) REFERENCES [dbo].[tblAppointment] ([AppointmentId])
GO

 

Warning: i am using a beta candidate of DDay.iCal. After going through each type pattern (daily, weekly, monthly, yearly) and each type of pattern (until, first day of, exact day, etc.) I did not encounter any problems.

 

The only problem is when the appointment is set up "oddly". By that i mean this by way of example. Appointment occurs the 15th of every month. You set the initial date on the 20th of January. Kendo UI RadScheduler correctly does NOT show an entry on Jan 15 or Jan 20. However, DDay will have an occurrence on Jan 20 for your "15th of the month" event. What it boils down to is setting up the appointment skewed from pattern. It is a small risk in general in my application. The worst case scenario is that an even shows when it should not. Probably better than not showing it when it should.

Happy Programming!

Ivan Danchev
Telerik team
 answered on 16 Dec 2016
3 answers
1.7K+ views

When no range is selected how do I then in javaScript get all rows for a spreadsheet ?

This does not work

var values = sheet._rows.values();
for (var row = 0; (row < values.length) ; row++) {

Dimitar
Telerik team
 answered on 16 Dec 2016
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?