Telerik Forums
UI for ASP.NET MVC Forum
4 answers
148 views
I'm keen to integrate the Twitter Bootstrap framework in a project, to improve layout etc..

However, this seems to cause a few display issues with some of the Kendo UI controls, especially the pop-up edit window of the grid.

Attached are two screenshots of an edit window, with and without the inclusion of the bootstrap css and js files.

Here are the css/js inclusions in the _Layout.cshtml file:-
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
 
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
 <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script>
          <script src="@Url.Content("~/Scripts/kendo/2013.2.716/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
I'm using the Q2 2013 release (build 716) and the latest bootstrap 3 files, along with the KendoUI bootstrap theme. How can they be made to work together properly?

Thanks
Iliana Dyankova
Telerik team
 answered on 03 Sep 2013
6 answers
1.0K+ views

I have not been able to come across any documentation on how to "PASS" data from Razor View Drop Down Lists to My Controller or ActionLinks.


The Single DDL ( Drop Down List ) has been very successfull
  • Razor
  •   @(Html.Kendo().DropDownList()
                            .OptionLabel("Select Role...")
                            .Name("DDLRoles")
                            .DataTextField("RoleName")
                            .DataValueField("RoleID")
                            .BindTo(ViewBag.DDLRoles)                     
                            .AutoBind(true))
  • Controller [POST]
  • [HttpPost]
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult ChangeRole(UserProfiles userprofiles, FormCollection values)
            {            
                
                string newRoleValue = values["DDLRoles"].Replace(",", "");
              
                string something2 = userprofiles.UserName;
FROM HERE DOWN IS THE CODE FROM CASCADING DROPDOWNLIST THAT ARE NOT WORKING.

What i would like to know is how to do this with ( Passing into [Post Controller] action ) cascading DDL and Possibly how to use this value in an ActionLink.

Here is my code:

  • Controller
  • using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.Entity;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using OG.ModelData;
    using OG.Models;
    using System.IO;
    using Newtonsoft.Json;

    namespace OG.Controllers
    {
        [Authorize(Roles = "PM,Administrator,CLS WebManager")]
        public class AddCCCTRSTController : Controller
        {
            private OilNGasDB db = new OilNGasDB();
               public ActionResult Index()
                {
                    return View();
                }
                public JsonResult GetCascadeClients()
                {
                    var clnts = db.Clients.Select(c => new { ClientID = c.ClientID, ClientName = c.Client }).ToList();
                    ViewBag.DDLclients = clnts;
                    return Json(db.Clients.Select(c => new { ClientID = c.ClientID, ClientName = c.Client }), JsonRequestBehavior.AllowGet);
                }
                public JsonResult GetCascadeCountys(int clients)
                {
                    var Countys = db.Countys.AsQueryable();

                    if (0 != clients)
                    {
                        Countys = Countys.Where(p => p.ClientID == clients);
                    }
                    return Json(Countys.Select(p => new { CountyID = p.CountyID, CountyName = p.County }), JsonRequestBehavior.AllowGet);
                }

                public JsonResult GetCascadeTownships(int countys)
                {
                    var townships = db.TownShips.AsQueryable();

                    if (0 != countys)
                    {
                        townships = townships.Where(o => o.CountyID == countys);
                    }

                    return Json(townships.Select(o => new { TownshipID = o.TownshipID, TownshipName = o.Township }), JsonRequestBehavior.AllowGet);
                }       
            
                [HttpPost] (THIS IS WHERE I'd LIKE TO RETURN DATA TOO FROM THE DDL's )
                [AcceptVerbs(HttpVerbs.Post)]
                public ActionResult Index(FormCollection values)
                {   
                    if (ModelState.IsValid)
                    {                    
                        string more3 = values["clients"];
                        string more4 = values["text"];
                        string more5 = values["DDLtracts"];
                        string more6 = values["tracts"];

  •                 // Return an empty string to signify success
                    return Content(more3 + more4 + more5 + more6);
                }
                else
                {
                    return Content("");
                }
            }


            protected override void Dispose(bool disposing)
            {
                db.Dispose();
                base.Dispose(disposing);
            }

        }
    }
  • RAZOR VIEW

  • <div class="demo-section">
        
        <div>             
                        <label for="clients">Client:</label>
                        @(Html.Kendo().DropDownList()
                              .Name("clients")
                              .HtmlAttributes(new { style = "width:300px"}) //, id = "clients"})
                              .OptionLabel("Select Client...")
                              .DataTextField("ClientName")
                              .DataValueField("ClientID")
                              .DataSource(source => {
                                   source.Read(read => {
                                       read.Action("GetCascadeClients", "AddCCCTRST");
                                   });
                              })
                            .Events(e => e
                                        .Select("dropdownlist_select")
                                        .Change("dropdownlist_change")
                                    )
                        )
                   
        </div>

        <div>            
                        <label for="countys">County:</label>
                        @(Html.Kendo().DropDownList()
                              .Name("countys")
                              .HtmlAttributes(new { style = "width:300px"}) //, id = "countys"})
                              .OptionLabel("Select County...")
                              .DataTextField("CountyName")
                              .DataValueField("CountyID")
                              .DataSource(source => {
                                  source.Read(read =>
                                  {
                                      read.Action("GetCascadeCountys", "AddCCCTRST")
                                          .Data("filterCountys");
                                  })
                                  .ServerFiltering(true);
                              })
                              .Enable(false)
                              .AutoBind(false)
                              .CascadeFrom("clients")
                        )
                        <script>
                            function filterCountys() {
                                return {
                                    clients: $("#clients").val()
                                };
                            }
                        </script>
        </div>
        
          
        <div>  
                       <label for="townships">Township:</label>
                        @(Html.Kendo().DropDownList()
                              .Name("townships")
                              .HtmlAttributes(new { style = "width:300px"}) //, id = "townships"})
                              .OptionLabel("Select Township...")
                              .DataTextField("TownshipName")
                              .DataValueField("TownshipID")
                              .DataSource(source => {
                                  source.Read(read =>
                                  {
                                      read.Action("GetCascadeTownships", "AddCCCTRST")
                                          .Data("filterTownships");
                                  })
                                  .ServerFiltering(true);
                              })
                              .Enable(false)
                              .AutoBind(false)
                              .CascadeFrom("countys")
                        )
                        <script>
                            function filterTownships() {
                                return {
                                    countys: $("#countys").val()
                                };
                            }
                        </script>
        </div>
        
          
        

    <script>
             $(document).ready(function () {
                $("#get").click(function () {

                    alert("$(document).ready(function ()")

                var clients = $("#clients").data("kendoDropDownList"),
                    countys = $("#countys").data("kendoDropDownList"),
                    townShips = $("#townShips").data("kendoDropDownList"),
                            
                    alert("$(''#get'').click(function ()")

                    var clientsInfo = "\nclients: { id: " + clients.value() + ", name: " + clients.text() + " }",
                        countysInfo = "\ncountys: { id: " + countys.value() + ", name: " + countys.text() + " }",
                        townShipsInfo = "\ntownShips: { id: " + townShips.value() + ", name: " + townShips.text() + " }",
                     

                        alert("Select Tract To Upload:\n" + clientsInfo + countysInfo + townShipsInfo);
            });
           });
    </script>


    @using (Html.BeginForm())
    {        
             <p>
  •             <input type="submit" value="ok" id="get" class="k-button"/>
            </p>
    }

     
If you need any more information please let me know thanks.

 


Don
Top achievements
Rank 1
 answered on 03 Sep 2013
1 answer
205 views
Hello,
I am trying to implement a menu that uses Images for the parent level and has a sub menu that contains text links.   The submenu text links are not showing.   My code is below - any help is greatly appreciated.

View
@(Html.Kendo().Menu()
         .Name("menuImagesNoText")
         .BindTo(Model, mappings =>
             {
                 mappings.For<WebConsole.Models.MenuItem>(binding => binding
                                                                         .ItemDataBound((item, category) =>
                                                                             {
                                                                                 item.ActionName = category.Action;
                                                                                 item.ControllerName = category.Controller;
                                                                                 item.ImageUrl = String.IsNullOrEmpty(category.ImageName) ? "": Url.Content(category.ImageName);
                                                                                 item.Selected = category.Selected;
                                                                                 item.ImageHtmlAttributes.Add("class", "sidebarImage");
                                                                             })
                                                                         .Children(category => category.MenuItems));
                 mappings.For<WebConsole.Models.MenuItem>(binding => binding
                                                                         .ItemDataBound((item, childcategory) =>
                                                                             {
                                                                                 item.Text = childcategory.LinkText;
                                                                                 item.ActionName = childcategory.Action;
                                                                                 item.ControllerName = childcategory.Controller;
                                                                             }));
             }).Orientation(MenuOrientation.Vertical).HighlightPath(false)
         )


Controller
public ActionResult Index(int selected)
     {
            var MainMenu = new Menu()
             {
                 MenuItems = new List<MenuItem>()
                         {
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/home_orange.gif",
                                     LinkText = "DASHBOARD",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 1,
                                     Selected = true
                                 },
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/new_white.gif",
                                     LinkText = "NEW WORK ITEM",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 2,
                                     Selected = false,
                                     MenuItems = new List<MenuItem>()
                                         {
                                             new MenuItem()
                                                 {
                                                     LinkText = "NEW INCIDENT",
                                                     Controller = "Home",
                                                     Action = "Index",
                                                     Ordinal = 1,
                                                     Selected = false
                                                 },
                                             new MenuItem()
                                                 {
                                                     LinkText = "NEW CHANGE REQUEST",
                                                     Controller = "Home",
                                                     Action = "Index",
                                                     Ordinal = 2,
                                                     Selected = false
                                                 },
                                             new MenuItem()
                                                 {
                                                     LinkText = "NEW SERVICE REQUEST",
                                                     Controller = "Home",
                                                     Action = "Index",
                                                     Ordinal = 3,
                                                     Selected = false
                                                 }
                                         }
                                 },
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/team_white.gif",
                                     LinkText = "MY TEAM'S WORK ITEMS",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 3,
                                     Selected = false
                                 },
                             new MenuItem()
                                 {
                                     ImageName = "~/Images/my_white.gif",
                                     LinkText = "ALL MY WORK ITEMS",
                                     Controller = "Home",
                                     Action = "Index",
                                     Ordinal = 4,
                                     Selected = false
                                 }
                          };
         
         return PartialView(MainMenu.MenuItems);
     }
Generated HTML
<ul id="menuImagesNoText" class="k-widget k-reset k-header k-menu k-menu-vertical" data-role="menu" tabindex="0" role="menubar">
     <li class="k-item k-state-selected k-state-default k-first" role="menuitem">
     <a class="k-link" href="/">
         <img class="k-image sidebarImage" src="/Images/home_orange.gif" alt="image">
      </a>
      </li>
    <li class="k-item k-state-default" role="menuitem">
        <a class="k-link" href="/">
           <img class="k-image sidebarImage" src="/Images/new_white.gif" alt="image">
           <span class="k-icon k-i-arrow-e"></span>
           </a>
         <ul class="k-group" role="menu" aria-hidden="true">
              <li class="k-item k-state-default k-first" role="menuitem">
                  <a class="k-link" href="/"></a>
                   </li>
              <li class="k-item k-state-default" role="menuitem">
                  <a class="k-link" href="/"></a>
                     </li>
              <li class="k-item k-state-default k-last" role="menuitem">
                  <a class="k-link" href="/"></a>
                    </li>
             </ul>
       </li>
</ul>
Daniel
Telerik team
 answered on 03 Sep 2013
3 answers
225 views
I have an MVC4 solution where the models are placed inside a different project. Only one project inside the solution uses Kendo UI and with the latest release i I wanted to update the Keno UI from Q2 2012 to the latest Q2 2013. On any page where i use the html helpers (mvc wrapper) i now get the runtime error:

The call is ambiguous between the following methods or properties:
'Kendo.Mvc.UI.HtmlHelperExtension.Kendo<Pytheas.Domain.Models.mdlSpreekuur>(System.Web.Mvc.HtmlHelper<Pytheas.Domain.Models.mdlSpreekuur>)'
and
'Kendo.Mvc.UI.HtmlHelperExtension.Kendo<Pytheas.Domain.Models.mdlSpreekuur>(System.Web.Mvc.HtmlHelper<Pytheas.Domain.Models.mdlSpreekuur>)'

Where the model name is different for every page. If i remove the control (grid, menu, etc) all is fine and the page loads. If i then add for instance the sample code for the menu wrapper:

@(Html.Kendo().Menu()
    .Name("menu") //The name of the menu is mandatory. It specifies the "id" attribute of the widget.
    .Items(items =>
    {
        items.Add().Text("Item 1"); //Add item with text "Item1")
        items.Add().Text("Item 2"); //Add item with text "Item2")
    })
)


I again get the mentioned error, regardless if the control uses data or not it gives me this error. I have checked all script/css files and ofcourse the referenced assembly both in the project as in the build. Creating a new MVC project and adding Kendo.UI with the wrappers works fine though, it seems to be isolated to my project specificly.

Does anyone have a clue what's going on and how i can fix this?

Edit:  If i dont use the wrapper then i can use the controls without a problem.
Roel Abspoel
Top achievements
Rank 1
 answered on 03 Sep 2013
1 answer
146 views
When you run the sample project, you will notice that even though I have item with Id="1" checked, it does not render checked in the UI.

In the View I have:
.CheckChildren(true) // If change to CheckChildren(false) the issue goes away

In the controller I have:
            model.CheckedNodes = new List<TreeViewItemModel>()
                {
                    new TreeViewItemModel()
                    {
                        HasChildren = true,
                        Checked = true, // SUPPORT: This is checked here, but because it has children it does not render CHECKED in UI
                        Id="1",
                        Text = "A - this does not obey Checked attribute",
                        Items = new List<TreeViewItemModel>(){new TreeViewItemModel(){Id = "2",Text = "B"}}
                    },                    new TreeViewItemModel()
                    {
                        HasChildren = false,
                        Checked = true,
                        Id="3",
                        Text = "C",
                    },
                };

Create a new Kendo UI MVC project named "SampleKendoUITreeViewIssue" and drop the attached directories in the root of the project. 
Daniel
Telerik team
 answered on 03 Sep 2013
1 answer
131 views
Hello,
I've got a grid, at the cell change I need to call a store procedure based on the cell changed.... since the grid sends the whole row, is there a way server side to understand which cell has fired the event?
Thanks
@(Html.Kendo()
    .Grid<DO.Admin.Utente>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.IDDipendente).Visible(false);
        columns.Bound(x => x.IDUtente);
        columns.Bound(x => x.Nominativo);
        columns.Bound(x => x.Societa);
        columns.Bound(x => x.Filiale);
        columns.Bound(x => x.Ruolo);
        columns.ForeignKey(x => x.IDProfilo, (System.Collections.IEnumerable)ViewData["ListaProfili"], "ID", "Descr").Title("Profilo");//.EditorTemplateName("StatoTemplate");
        columns.ForeignKey(x => x.IDFunzione, (System.Collections.IEnumerable)ViewData["ListaFunzioni"], "ID", "Descr").Title("Funzioni");//.EditorTemplateName("StatoTemplate");
        columns.ForeignKey(x => x.IDStato, (System.Collections.IEnumerable)ViewData["ListaStati"], "ID", "Descr").Title("Stato");//.EditorTemplateName("StatoTemplate");
        columns.Bound(x => x.AccessoEureka).ClientTemplate("<input class'k-checkbox' type='checkbox' name='cb#= IDDipendente#' #= AccessoEureka ? 'checked' : '' #  /> ");
 
    })
    .Selectable( selectable =>
        {
            selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row);
        })
    .ToolBar(toolBar =>
    {
        toolBar.Save();
    })
    .Pageable()
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Sortable()
    .Filterable()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Events(events =>
        {
            events.Change("onRowChange");
            //events.Edit("testEdit");
            events.Save("testSave");
            //events.SaveChanges("testSaveChanges");
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(x => x.IDDipendente);
            model.Field(x => x.IDUtente).Editable(false);
            model.Field(x => x.Nominativo).Editable(false);
            model.Field(x => x.Societa).Editable(false);
            model.Field(x => x.Filiale).Editable(false);
            //model.Field(x => x.Ruolo);
            //model.Field(x => x.Profilo);
            //model.Field(x => x.Funzioni);
            //model.Field(x => x.Stato);
            //model.Field(x => x.AccessoEureka);
        })
        .Read(read => read.Action("GetListaUtenti", "GestioneUtenti"))
        .Update( "UpdateStato", "GestioneUtenti")
        .Events(events => events.Error("error_handler"))
    )
)
Controller
public ActionResult UpdateStato([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<IDEA20.DO.Admin.Utente> utenti)
        {
            if (utenti != null && ModelState.IsValid)
            {
                //foreach (var utente in utenti)
                //{
                //    //product.Category = GetCategory(product.CategoryID);
                //    //SessionClientProductRepository.Update(product);                   
                //}
            }
 
            return Json(utenti.ToDataSourceResult(request, ModelState));
}
Thanks
Petur Subev
Telerik team
 answered on 03 Sep 2013
1 answer
1.4K+ views
I have a view, use editor:
@using (Html.BeginForm("Index", "Home"))
{
    @Html.Kendo().EditorFor(m=> m.MyHtml).Encode(true)

    <input type="submit" value="Save" />
}

and in controller:
public ActionResult Index()
        {           
            var viewModel = new ViewModel { MyHtml = "test <strong>html</strong>" };
            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Index(ViewModel model)
        {
            model.MyHtml = Server.HtmlDecode(model.MyHtml);
            //model.MyHtml == "test <strong>html</strong>" at here
            return View(model);
        }

the view in Get request is correct. Without any editing, click Save and after Post request, the view is showed html tags.

Does it is bug or not? How to show correct html after postback without Encode(fase) + [AllowHtml] in model?
Dimo
Telerik team
 answered on 02 Sep 2013
1 answer
165 views
Hi, 

I use asp.net mvc helper to define combo boxes. I have 3 of them and the are all cascading. What I need is a way to disable them after their datasources are  loaded (this is some edit functionality). 
I try to use databound event handler but enable is not working, even more, it seems that control is automatically enabled after databound event is fired. 
Can you please suggest some workaround?

Regards,
Vladica
Alexander Popov
Telerik team
 answered on 30 Aug 2013
3 answers
172 views
EditorTemplate:

<
div class="k-widget">
    @Html.HiddenFor(model => model.Id)
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
    </div>
    <dl>
        <dt>
            @Html.LabelFor(model => model.SharedWith)
        </dt>
        <dd>
            @(Html.Kendo().MultiSelectFor(model => model.SharedWith)
                .DataValueField("Id")
                .DataTextField("Name")
                .Placeholder("Type user's name...")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("Users", "User");
                    });
                })
                .TagTemplate("<div class=""tag-image""><img src=""#: Picture #"" height=""32"" /></div>")
                .ItemTemplate("<div class=""item-image""><img src=""#: Picture #"" height=""32"" /></div>"))
        </dd>
    </dl>
</div>
The list view display mode works fine, but as soon as I click edit, and it switches to the EditorTemplate, I get an error saying that Picture is undefined, even though the model that is being passed into the ListView constructor definitely has a fully populated SharedWith model.
Daniel
Telerik team
 answered on 30 Aug 2013
2 answers
144 views
Hello,
I've a kendo UI grid that has a column with editortemplate....
He're the grid

@(Html.Kendo()
    .Grid<DO.Admin.Utente>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.IDDipendente).Visible(false);
        columns.Bound(x => x.IDUtente);
        columns.Bound(x => x.Nominativo);
        columns.Bound(x => x.Societa);
        columns.Bound(x => x.Filiale);
        columns.Bound(x => x.Ruolo);
        columns.Bound(x => x.Profilo);
        columns.Bound(x => x.Funzioni);
        columns.Bound(x => x.Stato).EditorTemplateName("StatoTemplate");//ClientTemplate("#=stati.statiName#");
        columns.Bound(x => x.AccessoEureka);
 
    })
    .Pageable()
    .Scrollable()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(x => x.IDDipendente);
            model.Field(x => x.IDUtente).Editable(false);
            model.Field(x => x.Nominativo).Editable(false);
            model.Field(x => x.Societa).Editable(false);
            model.Field(x => x.Filiale);
            model.Field(x => x.Ruolo);
            model.Field(x => x.Profilo);
            model.Field(x => x.Funzioni);
            model.Field(x => x.Stato);
            model.Field(x => x.AccessoEureka);
                 
        })
        .Read(read => read.Action("GetListaUtenti", "GestioneUtenti"))
    )
)

And here's the editor template
@{
    Layout = null;
}
 
@(Html.Kendo().DropDownList()
          .Name("Stato")
          .HtmlAttributes(new { style = "width: 250px" })
          .DataTextField("Descr")
          .DataValueField("ID")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetListaStati", "Common", new { Area = string.Empty });
              }).ServerFiltering(false);
          })
    )

Consider the List of Stato items
as

0 | Active
1 | Disactive

when I show the grid in read I've my columns that shows Active/Disactive based on a field called Stato that's string....
After I change the dropdown I got 0/1 instead.... how do I fix this?

Second question, in my model I also have a IdStato that's 0/1 and its used when updating the model.... should I put this as an Hidden column? how do I update that field as well?
Thank in advance
Paolo
Michele
Top achievements
Rank 2
 answered on 30 Aug 2013
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
Security
Wizard
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?