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

I currently have a dropdown list with Virtualization which shows the dropdowns as follows "First Middle Last (XXX-XX-XXXX)". When typing in the seach box I can successfully search based on name or SSN with dashes. However I would like to be able to search on SSN without dashes. I tried attaching another property to the viewmodel sent from the lookup controller but am unable to figure out how to achieve what I want while still preserving the dashes in the UI. My thought was to catch the filter and apply regex on it serverside that if only number had been entered then to add dashes after 3rd and 5th character which would allow me get my desired output.

Here is the View:

01.@Html.LabelFor(model => model.VisitorID)
02.                    @(Html.Kendo().DropDownList()
03.                      .Name("VisitorID")
04.                      .DataTextField("Value")
05.                      .DataValueField("ID")
06.                      .MinLength(2)
07.                      .HtmlAttributes(new { style = "width:100%" })
08.                      .Height(290)
09.                      .Filter(FilterType.Contains)
10.                      .DataSource(source =>
11.                      {
12.                          source.Custom()
13.                              .ServerFiltering(true)
14.                              .ServerPaging(true)
15.                              .PageSize(80)
16.                              .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
17.                              .Transport(transport =>
18.                              {
19.                                  transport.Read("Virtualization_GetVisitor", "Lookups");
20.                              })
21.                              .Schema(schema =>
22.                              {
23.                                  schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
24.                                        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
25.                              });
26.                      })
27.                      .Virtual(v => v.ItemHeight(26).ValueMapper("VisitorLookups"))
28.                      .NoDataTemplate("<a onclick=\"addNewEntityPartial(\'Visitor\');\">Add a new Visitor</a>")
29.                    )
30.                    @Html.ValidationMessageFor(model => model.VisitorID)

 

The C# For virtualization:

01.#region VisitorLookup
02.            public ActionResult Virtualization_GetVisitor([DataSourceRequest] DataSourceRequest request)
03.            {
04.                return Json(GetVisitor().ToDataSourceResult(request));
05.            }
06.            public ActionResult Visitor(int[] values)
07.            {
08.                var indices = new List<int>();
09. 
10.                if (values != null && values.Any())
11.                {
12.                    var index = 0;
13. 
14.                    foreach (var visitor in GetVisitor())
15.                    {
16.                        if (values.Contains(visitor.ID))
17.                        {
18.                            indices.Add(index);
19.                        }
20. 
21.                        index += 1;
22.                    }
23.                }
24.                return Json(indices, JsonRequestBehavior.AllowGet);
25.            }
26. 
27.            private IQueryable<LookupViewModel> GetVisitor()
28.            {
29.                var ro = User.IsInRole("ReadOnly");
30.            return db.Visitors.Select(visitor => new LookupViewModel
31.            {
32.                ID = visitor.ID,
33.                Value = (visitor.Flag == true ? "FLAGGED " : "") +
34.                        visitor.FirstName + " " +
35.                        visitor.MiddleName + " " +
36.                        visitor.LastName +
37.                        " (" + (ro ? "XXX-XX-XXXX" : visitor.SSN.Replace("-", "")) + ") " +
38.                        (visitor.Flag == true ? "FLAGGED" : ""),
39.                SSN = (ro ? "XXX-XX-XXXX" : visitor.SSN.Replace("-", ""))
40.                });
41.            }
42.            #endregion

 

I feel like I'm very close but am not quite sure how to modify the filter in the request on line 4 (second snippet) to achieve what i want.

Below was the path I was on:

01.public ActionResult Virtualization_GetVisitor([DataSourceRequest] DataSourceRequest request)
02.        {
03.            Regex regex = new Regex(@"[\d]");
04.            foreach (var filter in request.Filters)
05.            {
06.                if (regex.IsMatch(((FilterDescriptor)filter).ConvertedValue.ToString()))
07.                {
08. 
09.                    if (((FilterDescriptor)filter).Value.ToString().Length > 2)
10.                    {
11.                        ((FilterDescriptor)filter).Value.Insert(2, "-");
12.                    }
13.                    if (((FilterDescriptor)filter).Value.ToString().Length > 4)
14.                    {
15.                        ((FilterDescriptor)filter).Value.Insert(4, "-");
16.                    }
17.                }
18.            }
19.            return Json(GetVisitor().ToDataSourceResult(request));
20.        }

But that does not compile since Insert can't be made on a Object.

 

Any help?

Veselin Tsvetanov
Telerik team
 answered on 14 Jul 2017
2 answers
571 views

Hi guy's,

 I've been doing my best to find a solution on the forum and google but can't find what I'm looking for.

I have a grid which uses a toolBar template for the "add" button.

@(Html.Kendo().Grid(Model.WorkingDays)
      .Name("WorkEffortRecordsGrid")
      .DataSource(ds =>
          ds.Ajax()
              .Read(read => read.Action("GetWorkingDay", "WorkRecordEffort").Data("getTimezoneOffset"))
              .Create(create => create.Action("SaveWorkRecordEffort", "WorkRecordEffort").Data("getTimezoneOffset"))
              .Update(update => update.Action("UpdateWorkRecordEffort", "WorkRecordEffort").Data("getTimezoneOffset"))
              .Group(groups => groups.Add(p => p.Activity.Name))
              .Model(model => model.Id(viewModel => viewModel.Id))
      )
      .Columns(columns =>
      {
          columns.Bound(viewmodel => viewmodel.WorkRecord.Name).Title(Strings.WorkRecordId).ClientTemplate("#= (typeof WorkRecord === 'undefined')? '' : WorkRecord == null ? '' : WorkRecord.Name #");
          columns.Bound(viewmodel => viewmodel.Summary);
          columns.Bound(viewModel => viewModel.Task.Name).Title(Strings.TimeTaskName).ClientTemplate("#= (typeof Task === 'undefined')? '' : Task == null ? '' : Task.Name #");
          columns.Bound(viewModel => viewModel.StartTime).ClientTemplate("#= StartTime == null ? '' : kendo.toString(StartTime, \"t\") #");
          columns.Bound(viewModel => viewModel.EndTime).ClientTemplate("#= EndTime == null ? '' : kendo.toString(EndTime, \"t\") #");
          columns.Bound(viewModel => viewModel.Duration);
          columns.Command(commands =>
          {
              commands.Edit().UpdateText(Strings.Save);
          });
      })
      .AutoBind(true)
      .ToolBar(toolBar =>
      {
          //toolBar.Create().Text("default add").HtmlAttributes(new { onclick = "Ps.onCreate()" });
          toolBar.Template("<a class='k-button k-button-icontext' onclick='Ps.onCreate()' href='#'></span>Create</a>");
      })
      .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Width(610)).TemplateName("WorkRecordEffortEditor"))
      .Filterable()
      .Events(events => events.Edit("Ps.onEdit").DataBound("Ps.onDataBound"))
)

 

with a javascript function which has to do some business logic through ajax calls

/**
* When Add is clicked
*/
export function onCreate() {
    // clear the error message if it exists
    $('#errorMessages').html("");
 
    // do ajax call to the server to check if all existing records have end times
    $.ajax({
        type: 'POST',
        url: Urls.checkEndTimes,
        dataType: "JSON",
        success: allHaveEndTimes => {
            // if all records have end times
            if (allHaveEndTimes) {
                // show the editor box
                alert("here - true - show the editor box");
            } else {
                // show the error message
                $.ajax({
                    type: 'POST',
                    url: Urls.showErrorMessage,
                    contentType: 'application/json',
                    dataType: "html",
                    success: response => {
                        $('#errorMessages').html(response);
                    }
                });
            }
        },
        error: function () {
            alert("somethings gone wrong... this is not good...");
        }
    });
}

 

I haven't figured out how to make the editor display when the response comes back as true ("allHaveEndTimes")

Anybody have any ideas?

 

Thanks

Tom

Tom
Top achievements
Rank 1
 answered on 13 Jul 2017
3 answers
1.0K+ views

Hi there,

I’ve a grid with a column that is using a DropDownList as the template. It works as expected but I need to change the width of the dropDownList’s list.
How can I do that?

 

Here's the grid's code

01.@(Html.Kendo().Grid(Model)
02.    .Name("grid")
03.    .Columns(columns =>
04.    {
05.        columns.Command(command =>
06.        {
07.            command.Destroy().Text("Eliminar");
08.        }).Width(100).Title("Comandos");
09.        columns.Bound(c => c.Empleado)
10.            .ClientTemplate("#=Empleado.NumeroExpediente# - #=Empleado.Nombre#"
11.                + " #=Empleado.Apellido1# #=Empleado.Apellido2#")
12.            .Title("Empleado")
13.            .Width(190);
14.    })
15.    .Editable(x => x.Mode(GridEditMode.InCell))
16.    .DataSource(dataSource => dataSource
17.        .Ajax()
18.        .ServerOperation(false)
19.        .Batch(true)
20.        .Destroy("DeleteSubContrato", "Crear")
21.        .Model(model =>
22.        {
23.            model.Id(p => p.ID);
24.            model.Field(p => p.ID).DefaultValue(0);
25.            model.Field(p => p.Empleado).DefaultValue(
26.                ViewData["defaultEmpleado"] as Personal);
27.        })
28.    )
29.    .Scrollable(x => x.Height(300))
30.)

 

and here's the DropDownList template

1.@(Html.Kendo().DropDownListFor(m => m)
2.    .DataValueField("ID")
3.    .DataTextField("NumeroExpediente")
4.    .ValueTemplate("<span> #:data.NumeroExpediente# - #:data.Nombre# #:data.Apellido1# #:data.Apellido2#</span>")
5.    .Template("<span> #:data.NumeroExpediente# - #:data.Nombre# #:data.Apellido1# #:data.Apellido2#</span>")
6.    .BindTo((System.Collections.IEnumerable)ViewData["empleados"])
7.    .Filter(FilterType.StartsWith)
8.)

 

Here's a screenshot with the dropdownlist

https://www.dropbox.com/s/wddlfekt28ss8zg/dropDownList.png?dl=0

 

Thank you.

Viktor Tachev
Telerik team
 answered on 13 Jul 2017
1 answer
501 views

We want to add a new item locally to a virtual DropDownList. 

@(Html.Kendo().DropDownListFor(model => model.SiSpaceDetailId)
        .DataTextField("SiSpaceId")
        .DataValueField("Id").Filter("contains")
        .Events(e => e.Change("onSiSpaceSelect").DataBound("onDatabound"))
        .DataSource(dataSource => dataSource.Custom()
            .ServerFiltering(true)
            .ServerPaging(true)
            .PageSize(80)
            .Type("aspnetmvc-ajax")
            .Transport(tr => tr.Read(read => read.Action("GetSiSpaceIds", "Controller")
            )))
        .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
        .HtmlAttributes(new { Id = "siSpaceId", IsSingleSelection = true })
        .Template("<span>#: data.SiSpaceId #</span> <a style=\"float: right\" href='javascript:deleteSiSpaceDialog(\"#: data.Id #\")'> Delete </a>")
        )

The add is all standard: 

<script id="noDataTemplate" type="text/x-kendo-tmpl">
    <div id="addNew" style="padding: 10px;">
        <div>
            Add - '#: data.filterInput.val() #' ?
        </div>
        <br />
        <button class="k-primary" onclick="addNew('#: data.element[0].id #', '#: data.filterInput.val() #')">Add</button>
    </div>
</script>

And the JS looks like this: 

onDatabound: function() {
    var data = $("#siSpaceId").data("kendoDropDownList");
    data.listView.content.find("#addNew").remove();
    if (data.dataSource.view().length === 0) {
        var template = kendo.template($("#noDataTemplate").html());
        data.listView.content.append(template(data));
        $("#addNew").parent().css("height", "auto"); //height is set to 0 for some reason, this is a workaround
    }
},
addNew: function(widgetId, value) {
    var widget = $("#" + widgetId).getKendoDropDownList();
    var dataSource = widget.dataSource;
 
    if (confirm(alert.areYouSure)) {
        dataSource.add({
            Id: emptyGuid,
            SiSpaceId: value
        });
                 
        dataSource.one("sync",
            function() {
                widget.select(dataSource.view().length - 1);
            });
 
        dataSource.sync();
    }
}

 

If the Id is an empty Guid, we are adding it on submit. Since adding the virtualization for better performance the add stopped working. 

Can you post any working example?

Nencho
Telerik team
 answered on 13 Jul 2017
1 answer
576 views

Is there any way to determine if a dropdown is enabled or not?

 

I've tried:

var dropDown = $("#selectionList).data("kendoDropDownList");

 

 

if (dropDown.attr("aria-disabled"))

if (dropDown.prop("disabled")

if (dropDown.is(":disabled"))

 

nothing is supported.

 

thank you.

Ivan Danchev
Telerik team
 answered on 13 Jul 2017
1 answer
336 views

I have a tabstrip that contains several tabs, each of which contains a grid. When the page loads and I go to the Messages tab, the grid displays the data correctly. But there is no scrollbar, even though there are many pages of data (see Initial.png).

Once I click on any page number, the scrollbar appears (see AfterPaging.png). After that, it works just fine. But I cannot get the scrollbar to appear at the beginning.

My tab strip looks like this:

<div id="TabsContainer">
    <div class="k-content" style="margin-top: 10px;">
        @(
            Html.Kendo().TabStrip()
                .Name("Tabstrip")
                .Animation(animation => animation.Enable(false))
                .HtmlAttributes(new { @class = "TabStripContents MinerTabStripContents" })
                .Items(tabstrip =>
                {
                    tabstrip.Add().Text("Accounts (0)")
                        .LinkHtmlAttributes(new { id = "SummaryTab" })
                        .Content(@Html.Partial("_SummaryTable").ToHtmlString())
                        .Selected(true);
 
                    tabstrip.Add().Text("Errors (0)")
                        .LinkHtmlAttributes(new { id = "ErrorsTab" })
                        .Content(@Html.Partial("_ErrorsTable").ToHtmlString());
 
                    tabstrip.Add().Text("Parameters (0)")
                        .LinkHtmlAttributes(new { id = "ParametersTab" })
                        .Content(@Html.Partial("_ParametersTable").ToHtmlString());
 
                    tabstrip.Add().Text("Messages (0)")
                        .LinkHtmlAttributes(new { id = "MessagesTab" })
                        .Content(@Html.Partial("_MessagesTable").ToHtmlString());
 
                    tabstrip.Add().Text("Logs (0)")
                        .LinkHtmlAttributes(new { id = "LogsTab" })
                        .Content(@Html.Partial("_LogsTable").ToHtmlString());
                })
        )
    </div>
</div>

 

The Messages tab strip is this:

@(
    Html.Kendo().Grid<MinerDatabase.GetMinerProcessMessages_Result>()
        .TableHtmlAttributes(new { @class = "grid-with-padding", style = "width: 100%; border: solid 1px gray;" })
        .Name("MessagesGrid")
        .Columns(columns =>
        {
            columns.Bound(a => a.MessageDate).Width(150).Title("Date").Format("{0:MM/dd/yyyy hh:mm tt}");
            columns.Bound(a => a.AccountID).Width(100).Title("Account ID");
            columns.Bound(a => a.Step).Width(300);
            columns.Bound(a => a.ResultMessage).Width(300).Title("Text");
        })
        .Sortable()
        .Pageable()
        .Scrollable(scroll => scroll.Virtual(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ReadMessages", "Miner").Data("GetMinerProcessDataAndSendAntiForgery"))
            .PageSize(20)
       )
        .Events(ev => ev.DataBound("OnMessagesDataBound"))
        .HtmlAttributes(new { @class = "TabContents MinerTabContents" })
        .NoRecords("There are no messages for this miner process")
)

 

The OnMessageDataBound function is empty, but the problem still happens.

I set the height of the MessagesGrid in  $(document).ready(), but the problem happens even if I comment that out.

Any  ideas on what I can do to make the scroll bar appear?

Thanks.

Georgi
Telerik team
 answered on 12 Jul 2017
7 answers
911 views

I need to sort the values in a multiple select filter. I found the following http://dojo.telerik.com/IsOTA

But it is not working for me. I only need to sort one filter. It fails on the container.empty() line because filterMultiCheck is null. I can NOT understand why it is null. I've inspected the objects in the DOM and everything seems to be there.

ProjectRequests.filterMenuInit = function (e) {
    if (e.field === "Position") {
    var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
    filterMultiCheck.container.empty();
    filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
         filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
         filterMultiCheck.createCheckBoxes();
 }
}

 

My code is slightly different from the example. The grid is created on a cshtml page and the FilterMenuInit is call as so:

.Events(events => events.FilterMenuInit("ProjectRequests.filterMenuInit"))

 

The page is rendered before the FilterMenuInit is called so I just don't get it.

Any help is appreciated.

Stefan
Telerik team
 answered on 12 Jul 2017
1 answer
2.2K+ views

This is probably an easy answer but even after searching through documentation i haven't figured it out yet. I have a column in a Kendo Grid that i would like to convert from an integer to a string for filtering purposes. Basically on my ID column, if the user types in 3 it will filter the records for 3, 13, 23 33, ect. Right now what it does in the filter after i type in 3 and hit enter, it converts it to 33.00 Below is the Column

 

columns.Bound(c => c.ID).Title("Ticket No.")

.ClientTemplate(@Html.ActionLink("#=ID#", "View", new { ID = "#=ID#" }).ToHtmlString())

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

// Something here like .ToString()

Viktor Tachev
Telerik team
 answered on 12 Jul 2017
1 answer
262 views

I Am not sure if this can even be done, but from what I have read it should be.  Since the Grid is not a form control, I should be able to use templates to generate the controls and have MVC generate the proper HTML when rendered.  I started off using Dave Glick's "how to post data in a KendoUI grid in MVC https://daveaglick.com/posts/how-to-post-data-in-a-kendoui-grid  I also used the Telerik Example at GitHub https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/post-grid-with-form  both were very helpful with getting a "first level" Grid to post data, however not for the Second Level.  

 

So I am not even sure if this is possible, but I have what I think *should work) if I can get the data into the template and then on to the Grid.  The first problem I am having is that I can't get any of the Grid Values in the Template for the 2nd level to "insert" I CAN get the  #=WOID# to show but none of the others

#=GRIDID#
#=MAPNAME#
#=PAGENUMBER#
#=SCALE# 

I am getting a JS error saying that    GIDID is not defined.  But WOID works and it's not defined..  what am I missing?   Also when I just use the WOID and post data the posted data is not a collection, it is one record (only the WOID) 

 

@using (Html.BeginForm("REREQUEST", "GridPrint"))
{
 
@(Html.Kendo().Grid(new List<GRIDPRINTWO>())   //<GISPortal.GRIDPRINTWO>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.WOID).Width(40).Title("WO#");
            columns.Bound(e => e.REQUESTDATE).Width(150).Format("{0:G}").Title("Date");
            columns.Bound(e => e.REQUESTER).Width(100).Title("Requester#");
            columns.Bound(e => e.NOTIFICATIONTYPE).Width(110).Title("Notification");
            columns.Bound(e => e.COMPLETED).Width(110).Title("Completed?");
            columns.Bound(e => e.ERRORS).Title("Errors?");
 
        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
         
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sort => sort.Add("REQUESTDATE").Descending()) // <-- initial sort expression
        .PageSize(20)
             // .Read(read => read.Action("GRIDPRINTWO_Read", "Grid"))
                    .Read(read => read.Action("GRIDPRINTWO_Read", "GridPrint", new { woid = ViewBag.woid, requester = ViewBag.requester }))
        )
        .Events(events => events.DataBound("dataBound"))
         
         
)
 
 
    <script>
          var counter = 1;
 
 
        function gridIndex(data) {
         return counter++;
                                  }
    </script>
 
    <script>
 
    function index(dataItem) {
        var data = $("#Products").data("kendoGrid").dataSource.data();
 
        return data.indexOf(dataItem);
    }
 
    </script>
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid(new List<GRIDPRINTS>())  //<GISPortal.GRIDPRINTS>()
            .Name("grid_#=WOID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.MAPNAME).Width(110).Title("Name");
                columns.Bound(o => o.GRIDID).Width(110).Title("GridID");
                columns.Bound(o => o.SCALE).Width(110).Title("Scale");
                columns.Bound(o => o.PAGENUMBER).Title("PageNum");    
                columns.Bound(o => o.STATUS).Width(200).Title("Status");
                columns.Bound(o => o.ERRORS).Width(300).Title("Errors?");
                 
                 
                 
                // shout out to daveaglick.com/posts/how-to-post-data-in-a-kendoui-grid
               //  HERE IS WHERE I AM HAVING ISSUES
                 
                columns.Bound(m => m.GRIDID).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEGRIDID[#=gridIndex(data)#].GRIDID' "
                  + "value='#=GRIDID#' />");
                  // ALSO TRIED THIS  + "value='@item.GRIDID' />");
                 
                 columns.Bound(m => m.MAPNAME).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEMAPNAME[#=gridIndex(data)#].MAPNAME' "
                  + "value='#=MAPNAME#' />");              
                 
                columns.Bound(m => m.PAGENUMBER).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THEPAGENUMBER[#=gridIndex(data)#].PAGENUMBER' "
                  + "value='#=PAGENUMBER#' />");
                 
                columns.Bound(m => m.SCALE).Hidden()
                  .ClientTemplate("<input type='hidden' "
                  + "name='THESCALE[#=gridIndex(data)#].SCALE' "
                  + "value='#=SCALE#' />");
                                 
            
               // JUST PLAYING HERE BUT THE WOID DOES WORK    
                columns.Bound(o => o.MAPNAME).Width(110).Title("Re-Send")
                     .ClientTemplate("<input type='checkbox' "
                     + "name='CHECKED[#= WOID #].MAPNAME' "
                     + "value='true' "
                     + "#if (WOID) { #checked='checked'# } #/>"
                     + "<input type='hidden' value='false' "
                     + "name='themapname[#= WOID #].MAPNAME' />");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("GRIDPRINTS_Read", "GridPrint", new { woid = "#=WOID#" }))
                .ServerOperation(false)
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
       // this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
 
 
 
 
    <input type="submit" value="SUBMIT" />
 
 
}
Boyan Dimitrov
Telerik team
 answered on 12 Jul 2017
1 answer
1.3K+ views
Is it possible to have this on Kendo Grid like the following attached image? As far as I have searched on the forums, didn't found one. Can somebody help me on this?
Georgi
Telerik team
 answered on 11 Jul 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
Window
ListView
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
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
AICodingAssistant
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
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
Bronze
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?