Telerik Forums
UI for ASP.NET MVC Forum
3 answers
681 views

Hi 

I have textbox, a button and a Grid in my screen, i am binding data to it on a button click with the textbox input.

If the user clicks the button again with different inputs, i have to go to DB, get data  and append the new data to the existing Grid data.

I should not lose the existing data and i need to append new data to the same grid I should be able to call the same URL to get data.

Please let me know how I can achieve this.

 

Sample Code: 

<input type="text" class="k-textbox"/>

<button id="btnAdd">Add</button></td>

<div id="grid"></div>
<script>

 $("#btnAdd").on('click', function () {

$("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read:
                            {
                                url: // my url with textbox inputs,
                                cache: false
                            }
                    },
schema: {
                        model: {
                            fields: {
ID: {type: "string"},
Name: {type: "String"}
   }
                        }
                    },

 columns: [
                //{ hidden: true, field: "AssetID", editable: false },
                { template: "<input type='checkbox' class='checkbox' />" },
                { field: "ID"},
                { field: "Name"}]
 }).data("kendoGrid");
});
});

</script>

 

 

Petyo
Telerik team
 answered on 21 Sep 2015
2 answers
99 views

I have a Project that uses Entity Framework as it data source, and I have a Kendo grid for that data set. 

The Grid populates find while running from my development box but when I publish it; it just spins and nothing happens no error "nothing".

I have confirmed that the published page is talking to the Database as I can create a normal Model and for loop and return the data into a default div list.  The query generated for the page does take about 3-4 seconds to process which I really can't speed up due to the size of the tables, it only returns though at most 100 records. 

 

 Below is the Index page 

<style>
    .cont {
  padding-right: 10%;
  padding-left: 10%;
  margin-right: auto;
  margin-left: auto;
}
</style>
 
<div class="cont">
    @(Html.Kendo().Grid<Portal.Model.DAX.PurchaseJournalTransaction>()
      .Name("grid")
      .Columns(columns =>
            {
              columns.Bound(c => c.PurchId);
              columns.Bound(c => c.LineNum).Visible(false);
              columns.Bound(c => c.ItemId).Width(100);
              columns.Bound(c => c.ExternalItemId);
              columns.Bound(c => c.Name);
              columns.Bound(c => c.DeliveryDate).Format("{0:MM/dd/yy}");
              columns.Bound(c => c.CurrencyCode).Visible(false);
              columns.Bound(c => c.PriceUnit).Visible(false);
              columns.Bound(c => c.Quantity).Format("{0:#,##0}");
              columns.Bound(c => c.PurchUnit).Locked();
              columns.Bound(c => c.PurchasePrice).Format("{0:$#,##0.00}");
              columns.Bound(c => c.PurchaseMarkup).Visible(false);
              columns.Bound(c => c.DiscountPercentage).Visible(false);
              columns.Bound(c => c.DiscountAmount).Visible(false);
              columns.Bound(c => c.LineAmount).Visible(false);
              columns.Bound(c => c.Dimension1).Visible(false);
              columns.Bound(c => c.Dimension2).Visible(false);
              columns.Bound(c => c.Dimension3).Visible(false);
              columns.Bound(c => c.TaxAmount).Visible(false);
              columns.Bound(c => c.TaxWriteCode).Visible(false);
              columns.Bound(c => c.MultiLineDiscount).Visible(false);
              columns.Bound(c => c.MultiLinePercent).Visible(false);
              columns.Bound(c => c.LineDiscount).Visible(false);
              columns.Bound(c => c.LinePercent).Visible(false);
              columns.Bound(c => c.TaxGroup).Visible(false);
              columns.Bound(c => c.TaxItemGroup).Visible(false);
              columns.Bound(c => c.OriginalPurchId).Visible(false);
              columns.Bound(c => c.InventDimId).Visible(false);
              columns.Bound(c => c.InventQuantity).Visible(false);
              columns.Bound(c => c.LineAmountTax).Visible(false);
              columns.Bound(c => c.LineHeader).Visible(false);
              columns.Bound(c => c.RecVersion).Visible(false);
              columns.Bound(c => c.RecId).Visible(false);
              columns.Bound(c => c.Dimension4).Visible(false);
              columns.Bound(c => c.Source).Visible(false);
              columns.Bound(c => c.ApprovalUserId).Visible(false);
              columns.Bound(c => c.ApprovalDate).Visible(false);
              columns.Bound(c => c.ApprovalStatus).EditorTemplateName("ApprovalStatusEditor");
              //columns.Command(command => { command.Edit(); }).Width(180);
      })
      .ToolBar(toolbar =>
      {
          toolbar.Excel();
          toolbar.Save();
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Pageable()
      .Navigatable()
      .Filterable()
      .Groupable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => {
              model.Id(p => p.CompanyId);
              model.Field(c => c.PurchId).Editable(false);
              model.Field(c => c.LineNum).Editable(false);
              model.Field(c => c.ItemId).Editable(false);
              model.Field(c => c.ExternalItemId).Editable(false);
              model.Field(c => c.Name).Editable(false);
              model.Field(c => c.CurrencyCode).Editable(false);
              model.Field(c => c.PriceUnit).Editable(false);
              model.Field(c => c.Quantity).Editable(false);
              model.Field(c => c.PurchUnit).Editable(false);
              model.Field(c => c.PurchasePrice).Editable(false);
              model.Field(c => c.DeliveryDate).Editable(false);                 
          })
          .Read(read => read.Action("PurchaseJournalTransactions_Read", "Approval"))
          .Update(update => update.Action("PurchaseJournalTransactions_Update", "Approval"))
      )
    )
    <br />
</div>

 

And here is the Controller:

using Microsoft.AspNet.Identity;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Portal.Model.DAX;
 
namespace Portal.Views
{
    [Authorize(Roles="Vendor")]
    public class ApprovalController : Controller
    {
        private DAXContext db = new DAXContext();
 
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult PurchaseJournalTransactions_Read([DataSourceRequest]DataSourceRequest request)
        {
            DataSourceResult result;
 
            IQueryable<PurchaseJournalTransaction> purchasejournaltransactions;
            string UserId = User.Identity.GetUserId(); //"ffd508d2-10e1-4b34-b1e1-f35862d90b70";
            try
            {
 
                purchasejournaltransactions =
                   from userVendor in db.UserVendors
                   join vendor in db.Vendors on
                       new { userVendor.CompanyId, userVendor.VendId }
                       equals
                       new { vendor.CompanyId, vendor.VendId }
                   join journal in db.PurchaseJournals on
                       new { p1 = (string)vendor.CompanyId, p2 = (string)vendor.VendId }
                       equals
                       new { p1 = (string)journal.CompanyId, p2 = (string)journal.OrderAccount }
                   join tran in db.PurchaseJournalTransactions on
                       new { p1 = (string)journal.CompanyId, p2 = (DateTime)journal.PurchaseOrderDate, p3 = (string)journal.PurchaseOrderId, p4 = (string)journal.PurchId }
                       equals
                       new { p1 = (string)tran.CompanyId, p2 = (DateTime)tran.PurchaseOrderDate, p3 = (string)tran.PurchaseOrderId, p4 = (string)tran.PurchId }
                   where
                   userVendor.UserId == UserId
                   && tran.PurchaseLine.RemainPurchPhysical != 0
                   && tran.PurchaseLine.Purchase.PurchaseTypeId == 3
                   select tran;
 
                result = purchasejournaltransactions.ToDataSourceResult(request, purchaseJournalTransaction => new {
                    CompanyId = purchaseJournalTransaction.CompanyId,
                    PurchaseOrderDate = purchaseJournalTransaction.PurchaseOrderDate,
                    PurchaseOrderId = purchaseJournalTransaction.PurchaseOrderId,
                    InventTransId = purchaseJournalTransaction.InventTransId,
                    PurchId = purchaseJournalTransaction.PurchId,
                    LineNum = purchaseJournalTransaction.LineNum,
                    ExternalItemId = purchaseJournalTransaction.ExternalItemId,
                    Item = purchaseJournalTransaction.Item,
                    ItemId = purchaseJournalTransaction.ItemId,
                    Name = purchaseJournalTransaction.Name,
                    CurrencyCode = purchaseJournalTransaction.CurrencyCode,
                    Quantity = purchaseJournalTransaction.Quantity,
                    LineAmount = purchaseJournalTransaction.LineAmount,
                    ApprovalDate = purchaseJournalTransaction.ApprovalDate,
                    ApprovalStatus = purchaseJournalTransaction.ApprovalStatus,
                    PurchUnit = purchaseJournalTransaction.PurchUnit,
                    PurchasePrice = purchaseJournalTransaction.PurchasePrice,
                    PriceUnit = purchaseJournalTransaction.PriceUnit,
                    PurchaseMarkup = purchaseJournalTransaction.PurchaseMarkup,
                    DiscountPercentage = purchaseJournalTransaction.DiscountPercentage,
                    DiscountAmount = purchaseJournalTransaction.DiscountAmount,
                    Dimension1 = purchaseJournalTransaction.Dimension1,
                    Dimension2 = purchaseJournalTransaction.Dimension2,
                    Dimension3 = purchaseJournalTransaction.Dimension3,
                    TaxAmount = purchaseJournalTransaction.TaxAmount,
                    TaxWriteCode = purchaseJournalTransaction.TaxWriteCode,
                    MultiLineDiscount = purchaseJournalTransaction.MultiLineDiscount,
                    MultiLinePercent = purchaseJournalTransaction.MultiLinePercent,
                    LineDiscount = purchaseJournalTransaction.LineDiscount,
                    LinePercent = purchaseJournalTransaction.LinePercent,
                    TaxGroup = purchaseJournalTransaction.TaxGroup,
                    TaxItemGroup = purchaseJournalTransaction.TaxItemGroup,
                    OriginalPurchId = purchaseJournalTransaction.OriginalPurchId,
                    DeliveryDate = purchaseJournalTransaction.DeliveryDate,
                    InventDimId = purchaseJournalTransaction.InventDimId,
                    InventQuantity = purchaseJournalTransaction.InventQuantity,
                    LineAmountTax = purchaseJournalTransaction.LineAmountTax,
                    LineHeader = purchaseJournalTransaction.LineHeader,
                    RecVersion = purchaseJournalTransaction.RecVersion,
                    RecId = purchaseJournalTransaction.RecId,
                    Dimension4 = purchaseJournalTransaction.Dimension4,
                    Source = purchaseJournalTransaction.Source,
                    ApprovalUserId = purchaseJournalTransaction.ApprovalUserId,
                    ApprovalReasonId = purchaseJournalTransaction.ApprovalReasonId,
                });                     
 
                return Json(result);
            }
            catch (Exception ex)
            {
                throw new HttpException(ex.InnerException.ToString());
            }
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult PurchaseJournalTransactions_Update([DataSourceRequest]DataSourceRequest request, PurchaseJournalTransaction purchaseJournalTransaction)
        {
            if (ModelState.IsValid)
            {
                var entity = new PurchaseJournalTransaction();
                entity = db.PurchaseJournalTransactions.FirstOrDefault(t => t.PurchaseOrderId == purchaseJournalTransaction.PurchaseOrderId &&
                                                                            t.PurchaseOrderDate == purchaseJournalTransaction.PurchaseOrderDate &&
                                                                            t.PurchId == purchaseJournalTransaction.PurchId &&
                                                                            t.InventTransId == purchaseJournalTransaction.InventTransId &&
                                                                            t.CompanyId == purchaseJournalTransaction.CompanyId
                                                                            );                              
                //entity.CompanyId = purchaseJournalTransaction.CompanyId;
                //entity.PurchaseOrderId = purchaseJournalTransaction.PurchaseOrderId;
                //entity.PurchaseOrderDate = purchaseJournalTransaction.PurchaseOrderDate;
                //entity.PurchId = purchaseJournalTransaction.PurchId;
                //entity.InventTransId = purchaseJournalTransaction.InventTransId;
                //entity.LineNum = purchaseJournalTransaction.LineNum;
                //entity.ItemId = purchaseJournalTransaction.ItemId;
                //entity.ExternalItemId = purchaseJournalTransaction.ExternalItemId;
                //entity.Name = purchaseJournalTransaction.Name;
                //entity.CurrencyCode = purchaseJournalTransaction.CurrencyCode;
                //entity.Quantity = purchaseJournalTransaction.Quantity;
                //entity.PurchUnit = purchaseJournalTransaction.PurchUnit;
                //entity.PurchaseMarkup = purchaseJournalTransaction.PurchaseMarkup;
                //entity.PurchasePrice = purchaseJournalTransaction.PurchasePrice;
                //entity.DiscountPercentage = purchaseJournalTransaction.DiscountPercentage;
                //entity.DiscountAmount = purchaseJournalTransaction.DiscountAmount;
                //entity.LineAmount = purchaseJournalTransaction.LineAmount;
                //entity.Dimension1 = purchaseJournalTransaction.Dimension1;
                //entity.Dimension2 = purchaseJournalTransaction.Dimension2;
                //entity.Dimension3 = purchaseJournalTransaction.Dimension3;
                //entity.TaxAmount = purchaseJournalTransaction.TaxAmount;
                //entity.TaxWriteCode = purchaseJournalTransaction.TaxWriteCode;
                //entity.MultiLineDiscount = purchaseJournalTransaction.MultiLineDiscount;
                //entity.MultiLinePercent = purchaseJournalTransaction.MultiLinePercent;
                //entity.LineDiscount = purchaseJournalTransaction.LineDiscount;
                //entity.LinePercent = purchaseJournalTransaction.LinePercent;
                //entity.TaxGroup = purchaseJournalTransaction.TaxGroup;
                //entity.TaxItemGroup = purchaseJournalTransaction.TaxItemGroup;
                //entity.OriginalPurchId = purchaseJournalTransaction.OriginalPurchId;
                //entity.DeliveryDate = purchaseJournalTransaction.DeliveryDate;
                //entity.InventDimId = purchaseJournalTransaction.InventDimId;
                //entity.InventQuantity = purchaseJournalTransaction.InventQuantity;
                //entity.LineAmountTax = purchaseJournalTransaction.LineAmountTax;
                //entity.LineHeader = purchaseJournalTransaction.LineHeader;
                //entity.RecVersion = purchaseJournalTransaction.RecVersion;
                //entity.RecId = purchaseJournalTransaction.RecId;
                //entity.Dimension4 = purchaseJournalTransaction.Dimension4;
 
                if ( entity.ApprovalStatus != purchaseJournalTransaction.ApprovalStatus)
                {  
                    entity.ApprovalUserId = User.Identity.GetUserId();
                    entity.ApprovalDate = DateTime.Now;
                    entity.ApprovalStatus = purchaseJournalTransaction.ApprovalStatus;
                    entity.Source = ApprovalSource.Web;
                    //entity.ApprovalReasonId = purchaseJournalTransaction.ApprovalReasonId;
                    
                };
 
                //db.PurchaseJournalTransactions.Attach(entity);
                db.Entry(entity).State = EntityState.Modified;
                db.SaveChanges();
            }
            else
            {
 
            }
 
            return Json(new[] { purchaseJournalTransaction }.ToDataSourceResult(request, ModelState));
        }
 
        [HttpPost]
        public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);
 
            return File(fileContents, contentType, fileName);
        }
 
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

 

 

 

T. Tsonev
Telerik team
 answered on 21 Sep 2015
1 answer
243 views
I have just started using Kendo for MVC. I have a requirement in which i have to show different record in different rows and in few rows there will be a plus icon when i click it i need to show some child rows.Its like nesting of controls.I just want to know which kendo control will be more suitable-listview or gridview?See attached image.
I searched over google but didn't get similar implementations.Can someone guide me?
Rene
Top achievements
Rank 1
 answered on 21 Sep 2015
3 answers
1.3K+ views

Here's what I'm doing:

 

// client side:

//I get a grid datasource filter

var fs = grid.dataSource.Filter()

// I then stringify it and pass it over to the server via an ajax call

// server side, I get the full filter string

// now i do this:

DataSourceRequest dsr = new DataSourceRequest();

Question:  How do I take that filter string and recreate the full datasource Filters ?

p.s. I have to do it this way - I cannot have a DataSourceRequest in the endpoint parameters passed in.

 

 

Rene
Top achievements
Rank 1
 answered on 20 Sep 2015
5 answers
231 views

I'm sharing a datasource between a grid and listview. Everything works great - except when the user groups in the grid - the listview is unable to deal with a datasource having groups.  Sorting and filtering works great.

 Would it be possible in the future to consider adding grouping to listviews where the listview code would use the same datasource functionality as found in the grid grouping functionality?

 Thanks,

 Rene.

Nikolay Rusev
Telerik team
 answered on 18 Sep 2015
1 answer
477 views

Hi all,

I've seen all of the 4 episodes of the Getting Started with the Kendo UI for ASP.Net MVC, however I can't seem to figure out how to set up a DataSource with a Generic ObjectList.

This is the piece of code I currently have:

public JsonResult Get([DataSourceRequest] DataSourceRequest request)
{
            Runner runner = new Runner();
            Task<List<CustomOrder>> customOrderResult = Task.Run(async () => await runner.GetCustomOrders().ConfigureAwait(false));
            Task.WhenAll(customOrderResult);
            List<CustomOrder> customOrders = customOrderResult.Result;
}​

I know it ain't perfect. Going to refactor it as soon as I got it working properly.

Thanks in advance for all your help.

Genady Sergeev
Telerik team
 answered on 18 Sep 2015
2 answers
107 views

Hello All,

         i have attach a file to this thread which is based on the VSflexgrid control in asp technology.

the same functionality i want to achieve using telerik treelist control with asp.net mvc.

In the attach file there are two horizontal parts.

the above part display the treeview in left side and the associated grid that to with editable cell like excel into it towards the right side.

if we write anything on the grid cell say a number i type there the below part where there are also a grid with dynamic row and column description

gets added the value into it.

 Kindly let me know if this functionality is achievable .

Please go through the attach file screenshot and kindly let me know.

Kiril Nikolov
Telerik team
 answered on 18 Sep 2015
5 answers
409 views

Hello,

I am wondering why the highlightings (k-header-column-menu k-state-active) of filtered columns are not automatically restored by the framework after the settings have been loaded.

The settings are stored and loaded using setOptions and getOptions. But if you do so, the k-state-active class is not set to columns with active filters.

Is this missing behavior a known bug or "as designed"? And how can it be solved?

 

Thanks in advance,

Holger

License
Top achievements
Rank 1
 answered on 18 Sep 2015
1 answer
57 views

I hate bringing this up, because DST can be such a mind #$%$. But here we go: 

I have declared a Kendo datetimepicker like so:

 

@(Html.Kendo().DateTimePicker()
.Name("StartDatePicker")
.Format("yyyy/MM/dd HH:mm zzz")
.TimeFormat("HH:mm")
)​

 

I'll be using MST as my example timezone, ie. -6:00 or -7:00. On November 1st @ 2:00 AM time goes backwards 1 hour. So basically the time one second after 1:59:59 AM (-06:00) becomes 1:00:00 AM (-07:00)

The KendoDateTimePicker seems to be smart enough to recognize the timezone change. For example, selecting November 1st 00:30 (pre-time change) will show a timezone of (-06:00), and selecting November 1st 02:00 (post time change) will show a timezone of (-07:00)

The tricky part with the November time change is that there are two occurrences of 01:00:00 - 01:59:59 during that day. The first occurrence has a timezone of -06:00 and the second has a timezone one less, of -07:00. So the question is, how do I select one occurrence or the other, without having to manually input the timezone?

The expectation is that the clients current timezone is used. So if the current local time is before the time change (-06:00), then if I select November 1st 01:30 I expect the timezone to be (-06:00). If the current local time is after the time change (-07:00), then if I select November 1st 01:30 I expect the timezone to be (-07:00).

 At the moment the KendoDateTimePicker doesn't match those expectations, and instead defaults to the pre-time change timezone of (-06:00) regardless of what the timezone of the web server or the client is. It is therefore impossible to select time between 01:00:00 - 01:59:59 (-07:00).

Is this a bug or is there someway of making the datetimepicker aware of the client's current timezone?

Georgi Krustev
Telerik team
 answered on 18 Sep 2015
1 answer
103 views

I have a search form which will get a list of records.
I would like to bind the search results on pressing submit after performing some initial ​checks on the entered data. How do i bind my action result to the Kendo Grid ?
 My JS File is 
function validateDataForSearch() {
        var empNo = $("#empNo").val();
        var empName = $("#empName").val();
        var empMgr = $("#empMgr").val();
        var clientName = $("#ClientName").val();

        var noValues = empNo.length + empName.length + empMgr.length + clientName.length;

        if (noValues <= 0) {
            alert("Please enter at least one value to be able to search.");
        }
        else {
            if (empNo.length <= 0)
                empNo = 0;
            $.ajax({
                type: "POST",
                url: 'Home/Search',
                data: { empNo: empNo, empName: empName, empMgr: empMgr, clientName: clientName },
                success: function (response) {                
                        $("#pmtSearchResult").getKendoGrid().dataSource.data(response);
                        }
            });
        }​;

 

  function get​EmpLink(project) {
        var action = '@Url.Action("Index","PMP", new { ​emp= '+ ​emp +')';
        var ​empLink = kendo.format("<a href='{0}'>{2}</a>", action, ​emp.empNo);
        return empLink;
    }

 var validator = $("#searchForm").kendoValidator().data("kendoValidator");

    $("#btnSearch").click(function (e) {        
        if (!validator.validate()) {
            e.preventDefault();
        }
        else
            validateDataForSearch();
    });

 

 

 

My CSHTML is as follows

@model IEnumerable<PMT.Models.EmpData> 
<div id="kendoGrid">
    @(Html.Kendo().Grid(Model)
    .Name("SearchResult")
    .Columns(columns =>
    {
        columns.Bound(p => p.empNo).ClientTemplate("#= getEmpLink(data) #");
        columns.Bound(p => p.empName);
        columns.Bound(p => p.empMgr);
        columns.Bound(p => p.ClientName);

        columns.Bound(p => p.empSal).hidden(true);

    })
    .Pageable()
    .Sortable()
    .Scrollable(scr => scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
     )
    )​

 

I cant seem to render the grid to hide the empSal column or to show  the emloyeeid column as a hyperlink column

Rosen
Telerik team
 answered on 17 Sep 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
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
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
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
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?