Telerik Forums
Kendo UI for jQuery Forum
8 answers
303 views

Hello gents,

I saw that you offer support for ESRI with the map widget, can someone provide me an example on how that works, i mean there are example for 3 other types but not for this one, or i seemed to missed it. 

Much appreciated.

Best.

T. Tsonev
Telerik team
 answered on 21 Mar 2016
4 answers
443 views

I'm working on a simple prototype for using hierarchical grids and have used this as my baseline in the dojo and modified the dataSources to use locally defined data (instead of getting data back from the service).  I'm able to get the parent rows to load fine, however, none of the child records are loading (detailInit appears to fire as the first row's dropdown icon points down and a space appears between the first and second row as shown in the attached screenshot).

I'm sure the issue is somewhat simple, although I've been unable to locate an example that would indicate what I'm doing wrong.

Here's the code I'm attempting to run:

01.<!DOCTYPE html>
02.<html>
03.<head>
05.    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
06.    <title></title>
07.    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />
08.    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />
09. 
10.    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
11.    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
12.</head>
13.<body>
14. 
15.        <div id="example">
16.            <div id="grid"></div>
17. 
18.            <script>
19.              $(document).ready(function() {
20.                var attachments = new kendo.data.DataSource({
21.                  data: [
22.                      { attachmentId: 1321, Name: "Product Roadmap.pptx", Versions: "3", Title:""},
23.                      { attachmentId: 1322, Name: "Release Timeline.xls", Versions: "1", Title:""},
24.                      { attachmentId: 1324, Name: "Requirements Analysis.docx", Versions: "2", Title:""}
25.                    ],
26.                    schema: {
27.                      model: {
28.                        id: "id",
29.                        expanded: true
30.                      }
31.                    }
32.                  });
33. 
34.                var versions = new kendo.data.DataSource({
35.                  data: [
36.                    { versionId: 1325, attachmentId: 1321, Status: "1321", VersionNumber: "1", Comment: "", Size:"1.23 MB", CreatedBy:"Landry, Kristi", CreationDate:""},
37.                    { versionId: 1326, attachmentId: 1321, Status: "1321", VersionNumber: "2", Comment: "", Size:"1.87 MB", CreatedBy:"Landry, Kristi", CreationDate:""},
38.                    { versionId: 1327, attachmentId: 1321, Status: "1321", VersionNumber: "3", Comment: "", Size:"1.91 MB", CreatedBy:"Smith, Michelle", CreationDate:""},
39.                    { versionId: 1328, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"7.41 KB", CreatedBy:"Peters, Stacy", CreationDate:""},
40.                    { versionId: 1329, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"4.43 MB", CreatedBy:"Franklin, Marshall", CreationDate:""},
41.                    { versionId: 1330, attachmentId: 1322, Status: "1322", VersionNumber: "2", Comment: "", Size:"4.71 MB", CreatedBy:"Peters, Stacy", CreationDate:""}
42.                  ]
43.                });
44.                 
45.                var element = $("#grid").kendoGrid({
46.                      dataBound: function() {
47.                        this.expandRow(this.tbody.find("tr.k-master-row").first());                     
48.                      },
49.                      dataSource: attachments,
50.                      height: 600,
51.                      sortable: true,
52.                      pageable: true,
53.                      detailInit: detailInit,
54.                      columns: [
55.                        {field: "attachmentId", title: "Attachment Id"},
56.                        {field: "Name", title: "Name"},
57.                        {field: "Versions", title: "Versions"},
58.                        {field: "Title"}
59.                      ]
60.                    });
61.              });
62. 
63.              function detailInit(e) {
64.                $("<div/>").appendTo(e.detailCell).kendoGrid({
65.                  dataSource: {
66.                    versions,
67.                    filter: { field: "attachmentId", operator: "eq", value: e.data.attachmentId }
68.                  },
69.                  columns: [
70.                    { field: "versionId", title: "Version Id"},
71.                    { field: "Status"},
72.                    { field: "VersionNumber", title:"Version Number"},
73.                    { field: "Comment"},
74.                    { field: "Size"},
75.                    { field: "CreatedBy", title: "Created By"},
76.                    { field: "CreationDate", title: "Creation Date"}
77.                  ]
78.                });
79.              }
80.          </script>
81.  </div>
82. 
83.  </body>
84.</html>

I've tried playing around with the filter on line 67 (including adding it to the versions datasource), but nothing seems to do the trick.

What am I missing?

Dimiter Madjarov
Telerik team
 answered on 21 Mar 2016
6 answers
229 views
Hello!

My Chart uses a rest API as datasource, here is sample response:
[{"us":5602,"them":6050,"Date":"2013-05-01T00:00:00"},
{"us":7192,"them":7120,"Date":"2013-04-01T00:00:00"},
{"us":6722,"them":7058,"Date":"2013-03-01T00:00:00"}]

I'm declaring lines chart with 
      categoryAxis: {
                        field: "Date",
                        type: "Date" ,
                        baseUnit: "month"
                        }                    
and I  get empty chart.
If I comment out 
      categoryAxis: {
                        field: "Date"
                       /*,
                        type: "Date" ,
                        baseUnit: "month" */
                       }   
then chart data is plotted (yaay!) but category axis looks really silly with lables like "2013-03-01T00:00:00"

What I'm missing here?
I've put sample here: http://jsbin.com/iqiqat/1/edit 

Thanks a lot!

KendoUI ver: 2013.1.319
AppsWiz
Top achievements
Rank 1
 answered on 21 Mar 2016
3 answers
353 views

I'm converting a jquery mobile app, a few pages at a time, and one page that is a kendo mobile ui page with 3 views:

1. tasklistfilterview is a view with an mvvm form that provides filtering info and then navigates to views 2 or 3 when they press the Go button.

2. tasklistgridview - shows results from view 1 in a grid

3. tasklistlistview - shows results from view 1 in a list

The user can then click a list item or grid item href with data-rel="external" that takes them to a detail view of the item.

My problem is when the user presses the back button, the grid or list views are shown as empty views with data-role="scollapsible".  I'd like to show the filterview.  

I've tried:  kendo.mobile.application.navigate("tasklistfilterview") in the jquery ready event.

 

Jim
Top achievements
Rank 1
 answered on 20 Mar 2016
2 answers
578 views

Hello,

I use last version of kendo ui library with angularjs and asp.net mvc 5 on server.

If I use remote data binding kendo.all.js return Maximum call stack size exceeded error.

Whats wrong?

Thanks

controller:

public class TestController : Controller
{
 
  [HttpGet, Route("category-tree")]
  public ActionResult TreeListCategories([DataSourceRequest] DataSourceRequest request)
  {
    var allCategories = new List<CategoryModel> {
      new CategoryModel {Id = 1, Name = "First", ParentCategoryId = null},
      new CategoryModel {Id = 2, Name = "Second", ParentCategoryId = 1},
      new CategoryModel {Id = 3, Name = "Third", ParentCategoryId = 2},
      new CategoryModel {Id = 4, Name = "Fourth", ParentCategoryId = 3},
    };
 
    var result = allCategories.ToTreeDataSourceResult(request);
    return Json(result, JsonRequestBehavior.AllowGet);
 
  }
 
  public class CategoryModel
  {
    public int? Id { get; set; }
    public string Name { get; set; }
    public int? ParentCategoryId { get; set; }
  }
 
}

 

html code :

<kendo-tree-list k-options="treelistOptions"></kendo-tree-list>

angular js code :

 

$scope.treelistOptions = {
       dataSource: {
         type: "aspnetmvc-ajax",
         transport: {
           read: {
             type:'GET',
             url: 'category-tree',
           }
         },
         schema: {
           model: {

             Id: "categoryId",

             ParentId:"parentCategoryId",
             fields: {
               categoryId: { field: "categoryId", type: "number", nullable: false },
               parentCategoryId: { field: "parentCategoryId", nullable: true },
               name: { field: "name" },}
           }
         }
       },
       columns: [
        { field: "Name" },
       ],
     };

 

David
Top achievements
Rank 1
 answered on 18 Mar 2016
3 answers
197 views

Hi

I'm having a problem where some shapes are blurred which reduces the visible appeal of my page. Again, I can't seem to be able to create a snippet with Dojo. I just get an error message saying "Can't create snippet. Retry"

In the example I posted below, you will see the line underlying the names show perfectly for some nodes and blurred for others.

The problem seems to occur when the number of levels is 3 or more.

Please help!

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.moonlight.min.css" />
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="example">
    <div id="diagram"></div>
    <script>
        var data = [{
            firstName: "Antonio",
            lastName: "Moreno",
            image: "antonio.jpg",
            title: "Team Lead",
            colorScheme: "#FFF",
            items: [{
                firstName: "Elizabeth",
                image: "elizabeth.jpg",
                lastName: "Brown",
                title: "Design Lead",
                colorScheme: "#ef6944",
                items: [{
                    firstName: "Ann",
                    lastName: "Devon",
                    image: "ann.jpg",
                    title: "UI Designer",
                    colorScheme: "#ef6944"
                }]
            }, {
                firstName: "Diego",
                lastName: "Roel",
                image: "diego.jpg",
                title: "QA Engineer",
                colorScheme: "#ee587b",
                items: [{
                    firstName: "Fran",
                    lastName: "Wilson",
                    image: "fran.jpg",
                    title: "QA Intern",
                    colorScheme: "#ee587b"
                }]
            }, {
                firstName: "Felipe",
                lastName: "Izquiedro",
                image: "felipe.jpg",
                title: "Senior Developer",
                colorScheme: "#75be16",
                items: [{
                firstName: "Elizabeth",
                image: "elizabeth.jpg",
                lastName: "Brown",
                title: "Design Lead",
                colorScheme: "#ef6944",
                items: [{
                    firstName: "Ann",
                    lastName: "Devon",
                    image: "ann.jpg",
                    title: "UI Designer",
                    colorScheme: "#ef6944"
                }]
            }, {
                firstName: "Diego",
                lastName: "Roel",
                image: "diego.jpg",
                title: "QA Engineer",
                colorScheme: "#ee587b",
                items: [{
                    firstName: "Fran",
                    lastName: "Wilson",
                    image: "fran.jpg",
                    title: "QA Intern",
                    colorScheme: "#ee587b"
                }]
            }, {
                firstName: "Felipe",
                lastName: "Izquiedro",
                image: "felipe.jpg",
                title: "Senior Developer",
                colorScheme: "#75be16",
                items: [{
                    firstName: "Daniel",
                    lastName: "Tonini",
                    image: "daniel.jpg",
                    title: "Developer",
                    colorScheme: "#75be16"
                }]
            }]
            }]
        }];
 
        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;
 
            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: "linear",
                        stops: [{
                            color: "#293540",
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: "#293540",
                            offset: 1,
                            opacity: 0.6
                        }]
                    }
                }
            }));
          g.append(new dataviz.diagram.Rectangle({
                    width: 110,
                    height: 1,
                    x: 80,
                    y: 60,
                    stroke: {  
                        width: 0,
                        color: "#293540"
                    },
                    fill: {
                        gradient: {
                            type: "linear",
                            stops: [{
                                color: "#FFF",
                                offset: 0,
                                opacity: 0.1
                            }, {
                                color: "#FFF",
                                offset: 1,
                                opacity: 1
                            }]
                        }
                    }
                }));
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.firstName + " " + dataItem.lastName,
                x: 85,
                y: 20,
                fill: "#fff"
            }));
 
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.title,
                x: 85,
                y: 40,
                fill: "#fff"
            }));
 
            g.append(new dataviz.diagram.Image({
                source: "../content/dataviz/diagram/people/" + dataItem.image,
                x: 3,
                y: 3,
                width: 68,
                height: 68
            }));
 
            return g;
        }
 
        function createDiagram() {
            $("#diagram").kendoDiagram({
                dataSource: new kendo.data.HierarchicalDataSource({
                    data: data,
                    schema: {
                        model: {
                            children: "items"
                        }
                    }
                }),
                layout: {
                    type: "layered"
                },
                shapeDefaults: {
                    visual: visualTemplate
                },
                connectionDefaults: {
                    stroke: {
                        color: "#979797",
                        width: 2
                    }
                }
            });
 
            var diagram = $("#diagram").getKendoDiagram();
            diagram.bringIntoView(diagram.shapes);
        }
 
        $(document).ready(createDiagram);
    </script>
</div>
 
 
</body>
</html>

Niko
Telerik team
 answered on 18 Mar 2016
8 answers
160 views

For example:

<input id="myinput"
   data-role="autocomplete"
   data-delay = "100"
   data-min-length = "3"
   data-text-field = "value"
   data-source="WHAT GOES HERE???" />

I can define a DataSource in my js and then specify the variable name in the markup, and that works, but I want to be able to define the datasource in the html.

Is it possible? If so, any examples? The demos and docs don't seem to show how to do this.

Here's my dataSource for reference:

billingEdit.dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    // the remote service url
                    url: baseAreaUrl + "Lookup/CustomerKendo"
                }
            },
            serverFiltering: true,
            schema: {
               data: "Data"
            }
        });

I tried to copy the javascript object that I am passing to the datasource into the data-source and no go.

 

Bob
Top achievements
Rank 1
 answered on 18 Mar 2016
4 answers
299 views
Hello,
I know some people have asked this. Please see this below:

http://www.telerik.com/forums/show-all-events-for-day-in-month-view
http://www.telerik.com/forums/how-can-i-specify-the-height-of-a-row-in-the-monthview-

I think they and I are talking about the same thing. We need to show all events in the day cell of the month view. 
I don't want to  extend the MonthView as it can lead to unexpected behavior and is out of scope of support service. 

You said in the thread:
that:
1) As the "dayView" renders all available events in given cell (next to each other) by default it's not clear for us what is the exact behavior that you are trying to achieve - could you please clarify?

So let me clarify it clearly.
Because in many time, we need to create more than one task started in the same day(for example, we said event A and event B), both the event lasted for 3 days. It's a wonderfull function that we could drag the event on the MonthView to change the start date, or the end date, so we could make a task which lasted for more than one day quickly.

Now  you limited only one event showed in the same day cell of the MonthView, more events will be hided and just show a "more button". But when we click the "more button", we will enter into the DayView. So we COULD NOT change the second event's start date or end date just by drag on the MonthView.

That's reason 1 why need to show all events in the save day cell of the MonthView.

Reason 2, is when we have more than one employees, for example, you are a manager, you have 3 employees, just like your online demo.
You need to see the team's whole tasks arrangement in the month, not each person at each time, just see all their tasks, so you could know which day is free and which day is in a heave workload.  The working scenario is see workload in a Month Calendar, not see a detail job in a DayView. So we want to show all events in the save day cell of the MonthView.


yours,
Ivan










Kyle
Top achievements
Rank 1
 answered on 18 Mar 2016
4 answers
652 views
I am trying to prevent a user from resizing a column too small:

In the demo, if you sort, then resize the sorted column, you can't see the sort arrow or the title

http://demos.kendoui.com/web/grid/column-resizing.html

Is there a way to dynamically set the columnWidth?

I have tried to connect to the columnResize event and check if the newWidth is less than x then set it to y.
However, the setting of the $el.column.width does not actually redraw it.

Any suggestions?  Maybe I need to do a refresh after I reset it?  I'd prefer them to not be able to drag past a minimum.

I also tried setting min-width on all sorts of css:
.k-grid-header, .k-header, .k-header > a

-me-
Telerik
Top achievements
Rank 1
 answered on 18 Mar 2016
4 answers
2.1K+ views
Hi

Is there a way to specify the width of each column and not have it auto expand to match the grid width?

I've included a sample file.

 In the first grid, all columns have a specific width set, however, the combined width is less than the grid width.

This causes the column widths not being adhered to and expand to meet the grid width.

Should the column width remain the fixed regardless?

 The second grid has the “Title” column without a width set.  This makes all the other columns adhere to their widths.

Since I don’t have a column without a width, this is notfeasible.

For the third grid, I put a dummy column as the last one, so it behaves the same way as the second grid.

There’s an issue that exists with this method. When there’sno data, resizing any columns will cause the last column to “disappear”.

However, by hovering the mouse near where it was supposed to exist, the mouse cursor changes to the column resize cursor, indicating that it is still actually there.

The fourth grid is the same as the third grid only it has data.

Resizing any of the columns creates a  horizontal scroll bar.  The “dummy” column keeps its width and does not resize with the other grids.

This is not desired behavior as the “dummy” column shrink to match.  Even setting the column width to be 100% and null didn’t work.

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
     
</head>
<body>
        <div id="example" class="k-content">
 
            <div id="grid" style="height: 200px"></div>
            <br>
            <div id="grid2" style="height: 200px"></div>
            <br>
            <div id="grid3" style="height: 200px"></div>
            <br>
            <div id="grid4" style="height: 200px"></div>
 
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        width: "100%",
                        resizable: true,
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                                width: 100,
                                field: "Title"
                            } , {
                                width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                        ]
                    });
                     
                    $("#grid2").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        resizable: true,
                        width: "100%",
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                                field: "Title"
                            } , {
                                width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                        ]
                    });
                    $("#grid3").kendoGrid({
                        dataSource: {
                            data: [],
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        resizable: true,
                        width: "100%",
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                            width: 100,
                                field: "Title"
                            } , {
                            width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                            , {                            
                                title: "Dummy"
                            }
                        ]
                    });
                     
                                        $("#grid4").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        resizable: true,
                        width: "100%",
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                            width: 100,
                                field: "Title"
                            } , {
                            width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                            , {                
                                title: "Dummy"
                            }
                        ]
                    });
                });
                 
 
                 
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
 
function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            age = now.getFullYear() - birthDate.getFullYear();
 
        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            Age: age
        });
    }
    return data;
}
 
function generatePeople(itemCount, callback) {
    var data = [],
        delay = 25,
        interval = 500,
        starttime;
 
    var now = new Date();
    setTimeout(function() {
        starttime = +new Date();
        do {
            var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                city = cities[Math.floor(Math.random() * cities.length)],
                title = titles[Math.floor(Math.random() * titles.length)],
                birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                age = now.getFullYear() - birthDate.getFullYear();
 
            data.push({
                Id: data.length + 1,
                FirstName: firstName,
                LastName: lastName,
                City: city,
                Title: title,
                BirthDate: birthDate,
                Age: age
            });
        } while(data.length < itemCount && +new Date() - starttime < interval);
 
        if (data.length < itemCount) {
            setTimeout(arguments.callee, delay);
        } else {
            callback(data);
        }
    }, delay);
}
 
             
             
             
            </script>
        </div>
 
</body>
</html>

Telerik
Top achievements
Rank 1
 answered on 18 Mar 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?