Telerik Forums
UI for ASP.NET MVC Forum
11 answers
1.0K+ views

I have a Kendo Grid with dropdownlist for inline Batch updte.When i change the Dropdown list thevalue changes and when it loses the focus , the value of the selected item is displayed in the grid instead of the TextField to be displayed in the grid's dropdownlist. I am using EditorTemplateName for displaying the dropdownlist in the grid.Can you please help me what is wrong and help me correct this issue. I have searched Telerik forum but still couldnt find any help.

 

 

EditorTemplate:
 
@using System.Collections
 
@(Html.Kendo().DropDownList()
    .BindTo((IEnumerable)ViewData["AllTitlesList"])
    .Name("MagTitle")
    .DataValueField("MagDescID")
    .DataTextField("MagTitle")
    .OptionLabel("- Select Title - ")
)
 

Kendo Grid Code: 

 
@(Html.Kendo().Grid<ARMS_WebApi.ViewModel.AncillaryCodes>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(ac => ac.AncillaryCodeID).Width(75).Title("Id");
          //columns.Bound(ac => ac.MagDescID).Width(150).EditorTemplateName("MagazineTitleTemplate").Title("Title").ClientTemplate("#:MagTitle#");
       
          columns.ForeignKey(ac => ac.MagTitle, (IEnumerable)ViewData["AllTitlesList"], "MagDescID", "MagTitle").ClientTemplate("#:MagTitle#").
             EditorTemplateName("_AllTitlesKendoComboBoxTemplate").Title("Title").Width(100);
          columns.Bound(ac => ac.AncillaryCode).Width(75).Title("Ancillary Code");
          columns.Bound(ac => ac.AncillaryCodeDescription).Width(150).Title("Ancillary Code Description");
          columns.Command(commands =>
          {
              commands.Destroy();
          }).Width(50);
      })
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          toolbar.Save();
          toolbar.Custom().Text("Delete selection")
                   .HtmlAttributes(new { onclick = "deleteSelection(event)" });
      })
              .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
                  .Pageable()
                            .Sortable()
                            .Scrollable(scr => scr.Height(300))
                     .Filterable(
                     filterable => filterable
                  .Extra(false)
                   .Operators(operators => operators
                    .ForString(str => str.Clear()
                    .StartsWith("Starts with")
                    .IsEqualTo("Is equal to")
                  .IsNotEqualTo("Is not equal to")
                  .Contains("Contains")
         )))
            .Resizable(resize => resize.Columns(true))
            .Reorderable(reorder => reorder.Columns(true))
              .DataSource(dataSource =>
          dataSource.Ajax()
            .Batch(true)
            .Model(model =>
            {
                model.Id(ac => ac.AncillaryCodeID);
                model.Field(ac => ac.AncillaryCodeID).Editable(false);
            })
                     .Create(create => create.Action("AncillaryCode_Create", "AncillaryCode"))
                     .Read(read => read.Action("AncillaryCode_Read", "AncillaryCode"))
                     .Update(update => update.Action("AncillaryCode_Update", "AncillaryCode"))
                     .Destroy(destroy => destroy.Action("AncillaryCode_Destroy", "AncillaryCode"))
      ))

 

 

 

    

I have a Kendo Grid with dropdownlist for inline Batch updte.When i change the Dropdown list thevalue changes and when it loses the focus , the value of the selected item is displayed in the grid instead of the TextField to be displayed in the grid's dropdownlist. I am using EditorTemplateName for displaying the dropdownlist in the grid.

Can you please help me what is wrong and help me correct this issue. I have searched Telerik forum but still couldnt find any help.

I have a Kendo Grid with dropdownlist for inline Batch updte.When i change the Dropdown list thevalue changes and when it loses the focus , the value of the selected item is displayed in the grid instead of the TextField to be displayed in the grid's dropdownlist. I am using EditorTemplateName for displaying the dropdownlist in the grid.

Can you please help me what is wrong and help me correct this issue. I have searched Telerik forum but still couldnt find any help.

Harish
Top achievements
Rank 1
 answered on 25 May 2015
1 answer
131 views

I have followed the tutorials and have confirmed that I have the latest version on UI for ASP.NET MVC installed, but I still can't get the Marker Click Event to fire on the Map feature. Below is the code I am using, any thoughts?

 

@(Html.Kendo().Map()
                .Name("map")
                .Center(45.5095528, -91.9996693)
                .Zoom(7)
                .Layers(layers =>
                {
                    layers.Add()
                        .Type(MapLayerType.Tile)
                        .UrlTemplate("http://tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png")
                        .Subdomains("a", "b", "c")
                        .Attribution("&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
                                     "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>");

                    layers.Add()
                        .Type(MapLayerType.Shape)
                        .DataSource(dataSource => dataSource
                            .Read(read => read.Action("HospitalLocations", "Home"))
                            )
                            .LocationField("Location")
                            .Shape(.Pin)
                            .TitleField("Title")
                            .ValueField("ID");
                })
                .Events(events => events.MarkerClick("onClick")))

Alexander Popov
Telerik team
 answered on 25 May 2015
2 answers
691 views

Hi

I used this code to hide Edit and Delete button if a column in the grid has value of 1

function onDataBoundgridCreditors(e) {
 
    var grid = $("#gridCreditors").data("kendoGrid");
    var gridData = grid.dataSource.view();
 
    for (var i = 0; i < gridData.length; i++) {
        var currentUid = gridData[i].uid;
        if (gridData[i].CREDITOR_SOURCE_ID == 1) {
            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            var editButton = $(currenRow).find(".k-grid-edit");
            editButton.hide();
            var deleteButton = $(currenRow).find(".k-grid-delete");
            deleteButton.hide();
        }
    }
}

I added a group and now gridData[i].CREDITOR_SOURCE_ID  from the function above is not recognize.

What should I use to hide the buttons in the group?

Here is the grid:

@(Html.Kendo().Grid<ShowCreditCheck>()
    .Name("gridCreditors")
.Columns(columns =>
{
    columns.Bound(c => c.CREDITOR_ID).Hidden(true);
    columns.Bound(c => c.ASSIGNMENT_ID).Hidden(true);
    columns.Bound(c => c.ACCOUNT_REFERENCE).Title("Ref#").Width(70).HtmlAttributes(new { title = " #= ACCOUNT_REFERENCE # " });
    columns.Bound(c => c.CREDITOR_TYPE).Title("Type").Width(90);
    columns.Bound(c => c.creditorClass).Title("Class").Width(70);
    columns.Bound(c => c.CREDITOR_NAME).Title("Creditor").Width(110);
    columns.Bound(c => c.CREDITOR_SOURCE).Title("Source").Width(80);
    columns.Bound(c => c.applicantNumber).Title("Applicant").Width(60);
    columns.Bound(c => c.CREDIT_CHECK_CURRENT_BALANCE).Title("Balance").Width(60).Format("{0:#,##}").HtmlAttributes(new { style = "text-align:right" })
                        .ClientFooterTemplate("<div style='text-align:right'>#= kendo.format('{0:0,00}', sum)#</div>")
                        .ClientGroupFooterTemplate("<div style='text-align:right'>#= kendo.format('{0:0,00}', sum)#</div>");
    columns.Bound(c => c.DATE_CREATED).Title("Checked").Width(75).Format("{0:dd/MM/yyyy}");
    columns.Bound(c => c.CREDITOR_SOURCE_ID).Hidden(true);
    columns.Bound(c => c.OWNER_ID).Hidden(true);
    columns.Bound(c => c.CREDIT_STATUS_ID).Hidden(true);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(70);
})
.ToolBar(toolbar => toolbar.Create().Text("Add Creditor"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ProvidedCreditCheckTemplate"))
.Pageable(pager => pager.Refresh(true))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height:420px;" })
.Events(e => e.DataBound("onDataBoundgridCreditors"))
.Groupable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Group(group => group.Add(p => p.creditorClass))
    .ServerOperation(false)
    .Aggregates(aggregates =>
    {
        aggregates.Add(p => p.CREDIT_CHECK_CURRENT_BALANCE).Sum();
    })
    .Events(events => events.Error("error_handlerCreditorProvided"))
    .Model(model => model.Id(p => p.CREDITOR_ID))
    .Create(update => update.Action("GridCreditCheck_Create", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
    .Read(read => read.Action("GridCreditCheck_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
    .Update(update => update.Action("GridCreditCheck_Update", "Home"))
    .Destroy(update => update.Action("GridCreditCheck_Destroy", "Home"))
)
 
)

Derek
Top achievements
Rank 1
 answered on 25 May 2015
3 answers
788 views
Hi Team,

I wish to display statistical data for multiple countries in my grid. The way I retrieve data from the database, my grid would show data a bit like the following:

Country    Area(km^2)    Population        GDP($ trn)    GDP Growth (%)    Inflation (%)
India          3288000         1220200000       1.848             6.8                           7.9
USA          9827000          314686189         15.09            1.7                            2.0
.
.

But instead of the format above, I wish it show like the following:

Country                    India                USA                .
Area (km^2)             3288000          9827000         .
Population               1220200000    314686189     .
GDP ($ trn)              1.848               15.09              .
GDP Growth (%)      6.8                  1.7                   .
Inflation (%)              7.9                  2.0                  .

Please let me know how I could achieve this transposition.
Vladimir Iliev
Telerik team
 answered on 25 May 2015
7 answers
190 views
I am using cascading with a combo box and a multi select
box. You first choose a server in the combo box which gives you a list of users
from that server for the Multi select box. Previous to my upgrading to
2015.1.408 you were able to select multiple servers and multiple users and the
Multi select retained all the previously selected users. With the upgrade to
2015.1.408 the Multi select box is cleared on every read/cascade from the combo
box. We have been using this functionality for over a year now is this a bug or
functionality that you no longer support? Here’s my code.

 <div class="form-group">

                    <h5>Select Server: @Html.Raw(ViewBag.SERVER) </h5>

                    @(Html.Kendo().DropDownList()

                          .Name("ServerID")

                          .OptionLabel(Resources.Select_Server)

                          .DataTextField("ServerName")

                          .DataValueField("ServerID")

                          .HtmlAttributes(new { required = "required",
validationMessage = "Please select a
Server" })

                          .DataSource(source
=>

                          {

                              source.Read(read
=>

                              {

                                  read.Action("GetServers", "DropdownMenus", new { area = "Shared" });

                              });

                          }).Events(e =>
e.Change("onServerChange"))

                          )

                </div>

                <span class="form-group
divider" style="width:400px;">

                    <h5>Select Agent: @Html.Raw(ViewBag.AGENT)</h5>

                    @(Html.Kendo()

                          .MultiSelect()

                          .Name("AgentID")

                          .Placeholder("Select multiple Agents...")

                          .Value(Model.USER_ID)

                          .DataTextField("UserName")

                          .DataValueField("UserID")

                          .HtmlAttributes(new { required = "required",
validationMessage = "Please select some
Agents" })

                          .Events(events => events.Change("agentChange"))

                          .DataSource(source
=>

                          {

                              source.Read(read
=>

                              {

                                  read.Action("GetAgentAndServer", "DropdownMenus", new { area = "Shared" })

                                      .Data("filterServers");

                              })

                                 
.ServerFiltering(true);

                          })

                          .AutoBind(false)

                          .Enable(false)

                          )

                    <input type="hidden" name="serverUsersCache" id="serverUsersCache"  />

                </span>

function onServerChange(e) {

 

        var lineMultiSelect = $('#AgentID').data('kendoMultiSelect');

        lineMultiSelect.enable(true);

        lineMultiSelect.dataSource.read();

    };

function filterServers() {

        return {

            Servers: $("#ServerID").val()

        };

    }
Kiril Nikolov
Telerik team
 answered on 25 May 2015
3 answers
457 views

Hi

I have multiple tree views named role, responsibility, function using local data binding as in the below attached screen shot.  Below is the html view . I need to reload automatically the RoleListView if any changes made on responsibility tree view. i.e if i drag a function and drop it on Responsibility tree view then rolelist should be reloaded with modified responsibilities data automatically. How can i do this. pls assist .

@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<ResponsibilityListView>
 
@(Html.Kendo().TreeView()
            .Name("ResponsibilityList")
        .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<ResponsibilityListView>
            (binding => binding.ItemDataBound((item, response) =>
            {
                item.Id = response.InternalResponsibilityId.ToString();
                item.Text = response.Description;
                item.SpriteCssClasses = "iconResponsibility";
            })
            .Children(res => res.Functions));
            mappings.For<FunctionListView>(binding => binding.ItemDataBound((item, function) =>
            {
                item.Id = function.InternalFunctionId.ToString();
                item.Text = function.Description;
                item.SpriteCssClasses = "iconFunction";
            }));
        })
        .DragAndDrop(true)
        .Events(events => events.DragStart("OnResponsibilityDragStart")
        .Drop("OnResponsibilityDrop"))
)

@using Kendo.Mvc.UI;
@using Msc.UAM.Presentation.ViewModel;
@model List<FunctionListView>
 
@(Html.Kendo().TreeView()
        .Name("FunctionList")
        .BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<FunctionListView>
            (binding => binding.ItemDataBound((item, function) =>
            {
                item.Id = function.InternalFunctionId.ToString();
                item.Text = function.Description;
                item.SpriteCssClasses = "iconFunction";               
            }));
        })
        .DragAndDrop(true)
        .Events(events => events.Drop("OnFunctionDrop"))
)
@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<RoleListView>
 
@(Html.Kendo().TreeView()
            .Name("RoleList")           
            .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<RoleListView>
                (binding => binding.ItemDataBound((item, role) =>
                {
                    item.Id = role.InternalRoleId.ToString();
                    item.Text = role.Description;
                    item.SpriteCssClasses = "iconRole";                   
                })
                .Children(role => role.Responsibilities));
                mappings.For<ResponsibilityListView>(binding => binding.ItemDataBound((item, responsibility) =>
                {
                    item.Id = responsibility.InternalResponsibilityId.ToString();
                    item.Text = responsibility.Description;
                    item.SpriteCssClasses = "iconResponsibility";
                }).Children(res => res.Functions));
                mappings.For<FunctionListView>(binding => binding.ItemDataBound((item, function) =>
                {
                    item.Id = function.InternalFunctionId.ToString();
                    item.Text = function.Description;
                    item.SpriteCssClasses = "iconFunction";
                }));
            })
            .DragAndDrop(true)
            .Events(events => events.DragStart("OnRoleDragStart")
                                    .Drop("OnRoleDrop")
                                    .DragEnd("OnDragEnd")
                                    .Expand("OnRoleExpand"))
)

Alexander Popov
Telerik team
 answered on 25 May 2015
2 answers
283 views

HI,

 I am displaying 80 records on a bar chart and when the renders on the screen, all the labels on the category axis are squashed together. 

Is there a way of only displaying the 5th label?

The code i have tried is:

@(Html.Kendo().Chart()
         .Name("string-battery-chart")
         .Title("BATTERY VOLTAGES")
         .Theme("moonlight")
         .Legend(legend => legend.Visible(false))
         .ChartArea(ch => ch.Height(300).Background("transparent"))
         .DataSource(ds => ds.Read(read => read.Action("BatteryVoltageChartData", "STRING")))
         .Series(series =>
         {
             series.Column("Value").CategoryField("BatteryNumber").Name("Volts [V]").Color("#0099ff");
             series.Line("Value").CategoryField("BatteryNumber");
         })
         .CategoryAxis(axis => axis.Title("Battery Number").MajorTicks(ticks => ticks.Skip(4).Step(5)))
         .ValueAxis(axis => axis.Numeric("Value").Title("Volts").Labels(lab => lab.Format("{0}V")))
         .Tooltip(t => t.Visible(true).Template("Battery ${category}: ${value} V"))
         .Transitions(false)
         .Events(e => e.Zoom("onZoom"))
         .Events(e => e.Drag("onDrag"))
         .Events(e => e.DragEnd("onDragEnd"))
         )

Can anyone help please?

Thanks

Scott

Scott
Top achievements
Rank 1
 answered on 24 May 2015
7 answers
1.3K+ views
is it possible to have the pagination on top and bottom of the grid?  today it always sits at the bottom but on our case where the list is big, it would be nice to have it on top so use don't have to navigate to the bottom for pagination.  Thanks.
Laurie
Top achievements
Rank 2
 answered on 22 May 2015
4 answers
2.3K+ views

Hi Guys,

I have a custom button in a nested grid. I want when the user clicks the button to download a file  saved in my database and save it to the local disk.

Whats the best approach? And could you provide a sample of how to call the controller action for download, how to pass ASSIGNMENT_DOCUMENT_ID, and after returning the file from the controller to ask the user where to save it? Not sure how to do post and get or do I need to do a get with the custom button..

Here is my nested grid:

@using PartnerLink.Models
@using Telerik.OpenAccess.SPI
@model Tuple<TBL_ASSIGNMENT, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<TBL_ASSIGNMENT_INCOME_VALUE>, IQueryable<TBL_ASSIGNMENT_VEHICLE>>
 
<div style="height:500px">
    @(Html.Kendo().Grid<AssignmentDocTypesExt>()
        .Name("gridCaseDocuments")
        .Columns(columns =>
        {
            columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);
            columns.Bound(p => p.CREDITOR_ID).Hidden(true);
            columns.Bound(p => p.numOfUploadedFiles).Hidden(true);
            columns.Bound(p => p.documentDescription).Title("Document").Width(350);
            columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);
            columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);          
            columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<input type='checkbox' #= COMPLETE_FLAG ? checked='checked' :'' # disabled />").Width(90);
            columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<input type='checkbox' #= autoCompleteOnUpload ? checked='checked' :'' # disabled />").Hidden(true);      
            columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);
        })
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Close("onCloseClientDocumentUpload"))))
        .Sortable()
        .Scrollable()
        .ClientDetailTemplateId("gridCaseDocumentsDetails")
        .Pageable(pager => pager.Refresh(true))
        .Resizable(resize => resize.Columns(true))
        .HtmlAttributes(new { style = "height:500px;" })
        .Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))             
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handlerCaseDocuments"))
            .Model(model => model.Id(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID))
            .Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
            .Update(update => update.Action("CaseDocuments_Update", "Home"))           
            )
                       
    )
</div>
 
<script id="gridCaseDocumentsDetails" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ClientDocumentsExt>()
            .Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")
            .Columns(columns =>
            {
                columns.Bound(m=>m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);
                columns.Bound(m => m.FILE_NAME).Title("File Name");
                columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);
                columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);
                columns.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).Width(110);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Model(model => model.Id(m => m.ASSIGNMENT_DOCUMENT_ID))
                .Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))
 
            )
            .Pageable(pager => pager.Refresh(true))
            .Sortable()
            .Scrollable()
            .ToClientTemplate()
    )
</script>
 
<script type="text/javascript">
    function error_handlerCaseDocuments(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
 
    $("#gridCaseDocuments").find(".k-grid-content").height(421);
    function onClickDownloadClientDoc(e)
    {
        alert(e.ASSIGNMENT_DOCUMENT_ID);
    }
 
    function onRowDataBoundgridCaseDocuments(e) {
 
        var grid = $("#gridCaseDocuments").data("kendoGrid");
        var gridData = grid.dataSource.view();
        
        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].COMPLETE_FLAG) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "rgb(164,198,57)");
            } else if (gridData[i].numOfUploadedFiles > 0)
            {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "rgb(255,191,0)");
            }
        }
    }
    function onCloseClientDocumentUpload()
    {
        alert("onCloseClientDocumentUpload");
    }
</script>

Derek
Top achievements
Rank 1
 answered on 22 May 2015
3 answers
143 views

Hello,

 

What I am trying to achieve is add a placeholder in a dropdownlist that will display the binded model's property. When trying to use DisplayTextFor in the OptionLabel, I get "undefined" first option in the DropDownList. Is there a way to achieve this? I don't want to hardcode the OptionLabel.

 

Thanks

Georgi Krustev
Telerik team
 answered on 22 May 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?