Telerik control

Question

User2131862557 posted

hello to every one ,I m new here,

can any one tell me ho to use telerik control with mvc 5 , I do not  want to buy it or download whole ,just want to use script files as necessary files for below purpose

1. grid
2. textboxes
3. drop down
4. chart
5. label
6. etc etc

still I did not find as start up link ,for integration with mvc 5 and vs 2013

Answer 1

User-474980206 posted
Try their docs.

https://docs.telerik.com/aspnet-mvc/introduction

Answer 2

User2131862557 posted

how much space will it occupied ??

Answer 3

User1400794712 posted

Hi dua,

If you just want to use JavaScript for Telerik, you can refer to kendo-ui( https://demos.telerik.com/kendo-ui/ ). There are many demos in it, I also make a demo about Grid in MVC, you can take it as a reference.

Controller:

public class Contact
{
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string CompanyName { get; set; }
    public string Country { get; set; }
}
public ActionResult KendoDemo()
{
    return View();
}
public ActionResult KendoData()
{
    var list = new List<Contact>
    {
        new Contact{CompanyName="A",ContactName="aa",ContactTitle="aaaaaaa",Country="AA"},
        new Contact{CompanyName="B",ContactName="bb",ContactTitle="bbbbbbb",Country="BB"},
        new Contact{CompanyName="C",ContactName="cc",ContactTitle="ccccccc",Country="CC"},
        new Contact{CompanyName="D",ContactName="dd",ContactTitle="ddddddd",Country="DD"},
        new Contact{CompanyName="E",ContactName="ee",ContactTitle="eeeeeee",Country="EE"},
        new Contact{CompanyName="F",ContactName="ff",ContactTitle="fffffff",Country="FF"},
    };
    return Json(list,JsonRequestBehavior.AllowGet);
}

View:

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.blueopal.min.css" />
<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background- center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>

<div id="example">
    <div id="grid"></div>
</div>
@section scripts{
    <script src="http://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: '@Url.Action("KendoData")'
                        },
                        pageSize: 20
                    },
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [{
                        template: "<div class='customer-photo'" +
                        "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                        "<div class='customer-name'>#: ContactName #</div>",
                        field: "ContactName",
                        title: "Contact Name",
                        width: 240
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                        width: 150
                    }]
                });
            });
    </script>
}

How it works:

Best Regards,

Daisy

Answer 4

User2131862557 posted

thanks daisy for ur reply , but please also mention that only mentioned js and script files required for all like drop down ,lable etc etc .

Answer 5

User2131862557 posted

also I  find that in ur link that u suggested <textarea is present ,what if I need only textbox and label .?I did no find over there

Answer 6

User1400794712 posted

Hi dua,

Other tags just use the same js files. 

also I  find that in ur link that u suggested <textarea is present ,what if I need only textbox and label .?I did no find over there

What do you mean for textarea? Please mention where you find it. And what do you need with textbox and label? Please post more details here and then I can understand your problem better.

Best Regards,

Daisy

Answer 7

User2131862557 posted

for example if  I have form where label and textbox

Enter student name for label

input box for inputting student name

Answer 8

User-1768369891 posted

dua

for example if  I have form where label and textbox

Enter student name for label

input box for inputting student name

Everything about kendo control you can get from its website.  

Check out some url related to Asp.Net MVC implementation 

https://demos.telerik.com/aspnet-mvc/grid

https://demos.telerik.com/aspnet-mvc/maskedtextbox

below url for make input box for taking input as student name(Set your watermark on text box) 

https://www.telerik.com/forums/how-to-set-the-empty-text

http://bforms.veritech.io/Demo/Login?mode=register

Remember before use telerik control first read its license terms, as i know you can't use it on own business just you can use it in personal website, because its third party control. 

Instead of telerik many other component you can use JQuery UI. 

https://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx/

https://www.codeproject.com/Tips/895928/How-to-use-jQuery-Grid-with-ASP-NET-MVC

same thing you can used with other control.  

 

Answer 9

User1400794712 posted

Hi dua,

In the following links, there are many functions for textbox and label, I'm not sure what function do you need with textbox and label, so please refer these links to check if they can meet your need.

https://demos.telerik.com/kendo-ui/numerictextbox/api 

https://demos.telerik.com/kendo-ui/numerictextbox/index 

https://demos.telerik.com/kendo-ui/mvvm/elements 

https://demos.telerik.com/kendo-ui/progressbar/customlabel 

Best Regards,

Daisy

Answer 10

User-1768369891 posted

you can read full document for installation 

https://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5

https://www.codeproject.com/Articles/829162/Kendo-UI-in-ASP-NET-MVC-Part

http://www.c-sharpcorner.com/article/bundling-using-kendo-ui-in-Asp-Net-mvc5-part-18/

https://ricardocovo.com/2012/03/26/three-ways-to-get-started-with-kendoui-grids-on-asp-net-mvc/

https://github.com/telerik/kendo-examples-asp-net-mvc   (All Example in mvc)