Questions on Kendo UI for jQuery Forum

1 answer

209 views

I am using the persistent state example given in the demo. The problem is if resizable is true then the kendo grid is no more responsive on the width.

Consider the following http://dojo.telerik.com/eVuTI , if you change the width of a column then try to resize the splitter on the left the grid is no more responsive. Is there a way around this ?

Grid

answered on 25 Sep 2015

3 answers

222 views

LIne chart and custom JSON

I have this JSON:

[{ Name: "A", Data: [1, 2, 3]}, { Name: "B", Data: [3, 4, 1]}]

Is there a way to tell the Line Chart that the name field is "Name" and field is "Data"? I have tried Series.Field and Series.CategoryField and it doesn't work.

If you try the dojo JS page from the demo and just change "name" to "Name" and "data" to "Data", it will break. Setting the field value in the seriesDefault will not work. Is the lowercase value hard coded for line charts because for others like pie charts, it works just fine.

Thanks.

Charts

answered on 25 Sep 2015

1 answer

978 views

Jquery Conflict with Kendo Script

This issue highly critical and important. Please provide the solution immediately. Jquery conflict with kendo script.

My mvc layout.cshtml code

-------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

@*@Scripts.Render("~/bundles/jquery")*@
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Kendo view code

-------------------------------

@{
ViewBag.Title = "KendoTabstrip";
}

<html>
<head>
<title></title>
<link href="~/Content/Kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/Kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-header">
<div id="tabstrip">
<ul>
<li class="k-state-active">
Paris
</li>
<li>
New York
</li>
<li>
London
</li>
<li>
Moscow
</li>
</ul>
<div>
<span class="rainy"> </span>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
</div>
<div>
<span class="cloudy"> </span>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
</div>
</div>
</div>
<style>
.sunny, .cloudy, .rainy {
display: block;
margin: 30px auto 10px;
width: 128px;
height: 128px;
background: url('../content/web/tabstrip/weather.png') transparent no-repeat 0 0;
}

.cloudy {
background-position: -128px 0;
}

.rainy {
background-position: -256px 0;
}

.weather {
margin: 0 auto 30px;
text-align: center;
}

#tabstrip h2 {
font-weight: lighter;
font-size: 5em;
line-height: 1;
padding: 0 0 0 30px;
margin: 0;
}

#tabstrip h2 span {
background: none;
padding-left: 5px;
font-size: .3em;
vertical-align: top;
}

#tabstrip p {
margin: 0;
padding: 0;
}
</style>
<script>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
});
</script>
</div>

</body>

</html>

Finally am getting this error "Uncaught TypeError: $(...).kendoTabStrip is not a function". Kindly provide the solution immediately. This is highly important and critical. Since whenver use with asp.net mvc we are getting this error. Please help me out.

General Discussions

answered on 25 Sep 2015

6 answers

1.3K+ views

Custom css class are removed on td element when an action is done on kendo grid

I've added some personal css class on some data cell of my kendo table and when an action append on the grid (paging, sort, filter, grouping, etc.) all css class on td element disapear.

I cannot use a sub html element in the td: I must use the class on the td element.
Is there a way to maintain my css class on td?

Grid

answered on 25 Sep 2015

7 answers

1.1K+ views

How to drag and drop multiple items from kendo ui grid to treeview?

I am using kendo ui grid and treeview in a cshtml page and want to drag and drop multiple rows from the grid to the treeview.

I am able to drag and drop a single row from the grid to the tree, but for multiple items, same approach does not work.

Here are my code segments:

$("#grid").kendoGrid({



    selectable:

"row"

,

    sortable:

true,

pageable: true,

columns: .......

$("#treeview").kendoTreeView({

dragAndDrop: true

});

And my kendoDraggable and kendoDropTarget events:

$("#grid").kendoDraggable({

filter: "tr",

hint: function () {

var

g = $("#grid").data("kendoGrid")

return g.select().clone()

}

});

$("#treeview").kendoDropTarget({

drop: droptargetOnDrop

});

The above code segment works for dragging a single row from grid to the tree.

But if I change the grid definition for multiple row selection, the kendoDropTarget drop event no longer gets triggered.

$("#grid").kendoGrid({

selectable: "multiple",

sortable: true,

pageable: true,

columns: .......

Please let me know if I am doing anything wrong and any possible solution to this.

Drag and Drop

answered on 25 Sep 2015

1 answer

235 views

Tree List With hierarchical data

Can we create kendo tree list view with hirechical data where we have to group the data based on date?
If yes please share example.

[
{
"date": "11/11/2015",
"childdata": [
{
"item1": "item1"
},
{
"item2": "item2"
},
{
"item3": "item3"
}
]
},
{
"date": "11/12/2014",
"childdata": [
{
"item1": "item1"
},
{
"item2": "item2"
},
{
"item3": "item3"
}
]
}
]

TreeList

answered on 25 Sep 2015

1 answer

965 views

TreeView with Lazy Loading

Hi,

We are using the Kendo tree view to display no of clients in the left panel of the page. These is the master client list and each client may have 2-3 levels of sub clients to display in the tree view. Now the Tree view displays all the Master clients and its child clients from the Database at a time. We don’t want to display all the clients from the first. Sometimes the record count will be in thousands, so firstly we will be displaying some number of clients, say first 50 master clients with their sub clients. And then we have load remaining clients details if the user wants to check the remaining clients as well. We have to display the remaining clients in the lazy loading format as i.e., as the user scrolls the mouse the clients have to populate into the tree view. This functionality is similar to the Grid lazy loading. Is it possible to load tree view like this scenario?

We will be using MVC format as well to display the Tree view.

CSHTML code:
   @(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new { @class = "demo-section" })
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
                    .Action("TreeViewDemo", "AutoMVC")
        )
    )
    .LoadOnDemand(true)
        )

Controller Code:

public JsonResult TreeViewDemo(int? id)
{
       if (id == null)
            {
                var clientsdata = from e in cllist      //Here cllist comes from DataBase
                              select new
                              {
                                  id = e.clientId,
                                  Name = e.clientName,
                                  hasChildren = e.hasSubClients
                              };

                return Json(clientsdata, JsonRequestBehavior.AllowGet);
            }
            else
            {
                List<Clients> newcl = ChildEmps(id);
                var subc= from e in newcl
                          select new
                          {
                              id = e.clientId,
                              Name = e.clientName,
                              hasChildren = e.hasSubClients
                          };

                return Json(subc, JsonRequestBehavior.AllowGet);
            }
}

public List<Clients> ChildEmps(int? id)
        {
//here cllist is the client list from DataBase
var clientsdata = (from e in cllist
                              where e.ReportsTo == id
                              select e);

           return clientsdata.ToList();
}

Client Class:
public class Clients
    {
        public Clients(int x,string str, bool hs,int rt)
        {
            clientId = x;
            clientName = str;
            hasSubClients = hs;
            ReportsTo = rt;
            //childrenNodes = cl;
        }
        public int clientId { get; set; }
        public string clientName { get; set; }

        public bool hasSubClients { get; set; }
        public int ReportsTo { get; set; }

       // public Clients childrenNodes { get; set; }
    }

Can you please provide examples for Treeview lazy loading.

TreeView

answered on 25 Sep 2015

1 answer

208 views

Tile View in Kendo UI

Kindly provide samples for Tile View in Kendo UI.

General Discussions

answered on 25 Sep 2015

1 answer

139 views

Different editor for scheduler

My scheduler has two types of jobs. One is internal and another is external job. When double click on internal job, default editor should be opened and for external job a custom editor should be opened. How can I do that?

Thanks in advance.

Scheduler

answered on 25 Sep 2015

1 answer

163 views

mvvm custom event template

Hello,

I am trying to bind a custom event template to the scheduler. The way i assume to do it is described below. However, none of the events seem to be displaying in this format. Please advise.

<div id="scheduler"

data-role="scheduler"

data-eventTemplate= "$('#event-template').html()"></div>

<script id="event-template" type="text/x-kendo-template">

<div class="event">

<div class="contain">

<span class="name">#= name #</span><br/>

<span class="number">#= phone #</span>

</div>

</script>

Scheduler