Questions on Kendo UI for jQuery Forum

1 answer

238 views

Possible to show client side files and folders in TreeView?

I've been searching without success for an example of displaying a user's local files and folders in the Kendo TreeView. Kendo's own TreeView demo fakes it by hard-coding folder and file names, but is there a way to populate it with real folders/files? A number of forum postings have mentioned that a client's file system is typically not accessed in a web application for security reasons, but I have been to plenty of sites that allow uploading of local files, so there must be a way. Does anyone have a jquery example of this? I'm writing an ASP.NET MVC application so we won't be able to access anything client-side from models or controllers, but I'm thinking a script in the view might do the trick. Any help would be appreciated!

TreeView

answered on 14 Feb 2013

3 answers

141 views

Treeview behavior

Hi

Output : Json Data -

[{"id":1,"name":"name","hasData":true},{"id":2,"name":"name123","hasData":false}]

I am seeing two nodes name & name123, but when I click on name node I see another set of name and name123 and this keeps goes as I click. Wondering why the tree nodes are getting created for each click on the node arrow. Am I doing something wrong ?

I have the following View, Controller and Scripts as follows.

Index.chtml

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.common.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.default.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
	<script src="@Url.Content("~/Scripts/kendo/2012.3.1315/jquery.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo/2012.3.1315/kendo.all.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
</link>

@{
    ViewBag.Title = "Data";
}
 
<h2>@ViewBag.Message</h2>
 
<div id="treeview" class="treeview-back"></div>

<script type="text/javascript">    
    $(document).ready(function () {
      buildTree();      
    });
     
    function buildTree() {
        var homogeneous = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "Home/RData",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "id",
                    hasChildren: "hasData"
                }
            }
        });
 
        $("#treeview").kendoTreeView({
            dataSource: homogeneous,
            dataTextField: ["name"]
        });
    }

Controller

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Data";
 
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
 
        [HttpGet]
        public JsonResult RData()
        {
            List<TModel> sites = new List<TModel>();
 
            TModel tModel = new TModel{id = 1, name = "name", hasData = true};
 
            sites.Add(tModel);
 
            tModel = new TModel { id = 2, name = "name123", hasData = false};
 
            sites.Add(tModel);
 
            var resources = from e in sites
                            select new TModel()
                            {
                                id = e.id,
                                name = e.name,
                                hasData = e.hasData
                            };
            return Json(resources, JsonRequestBehavior.AllowGet);      
 
        }
    }
 
    public  class TModel
    {
        public int id;
        public string name;
        public bool hasData;
    }

Output : Json Data -

[{"id":1,"name":"name","hasData":true},{"id":2,"name":"name123","hasData":false}]

I am seeing two nodes name & name123, but when I click on name node I see another set of name and name123 and this goes on as I keep clicking. Wondering why the tree nodes are getting created for each click on the node arrow. Any idea about this behavior ?

TreeView

answered on 14 Feb 2013

3 answers

215 views

change the button background color in IE 8

Hi Guys,

I manage to change the background color button in IE 7 by adding

background-color: #3399FF; in kendo.common.min.css but unfortunately not working in IE 8 or above

* + html .k-button {
line-height: normal;

}

General Discussions

answered on 14 Feb 2013

1 answer

126 views

Combo box in kendo grid column

Hi,

I have put a combo box in one of the cell of kendo grid column. It's working fine in IE but does not work in Google chrome,
in the chrome combo box gets padding while in the IE it does not have any padding.

Please let me know how to resolve this issue in the Google chrome.

Regards,

Poonam

Grid

answered on 14 Feb 2013

2 answers

383 views

[Solved] kendoUI version

Is there any approach to get currently used version of kendoUI?
This could be useful in cases when source code is customized and it's sensitive to some particular version.

General Discussions

answered on 14 Feb 2013

1 answer

104 views

import IMG from DB to a Grid

HI im using ASP.NET MVC and i generated a Grid by the following code the problem is that the images are not working infact the .ClientTemplate() isnt working at all is there something that im missing do i need to do something in my model ?




@(Html.Kendo().Grid(Model).Name("TeachersGrid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Title).Title("    ");
        columns.Bound(m => m.First_name).Title("Име")
        columns.Bound(m => m.Second_name).Title("Презиме");
        columns.Bound(m => m.Family_name).Title("Фамилия");
       columns.Bound(m => m.img).ClientTemplate("<img src='#=img#' />");
    })
    .Groupable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Reorderable(reorder => reorder.Columns(true))
    .Resizable(resize => resize.Columns(true))
)

Grid

answered on 14 Feb 2013

1 answer

121 views

Window with iframe as a content

Hi to all,
I have a window (name: win1, iframe:true, modal:false, url: /controller/action ) within a button for opening a new WINDOW (name win2). That new window (win2) appears included in the first window (win1) and not in the main page of browser.
Can I show win2 in the same content of win1 ??
Thanks in advance
Gaetano

Window

answered on 14 Feb 2013

3 answers

218 views

KendoUI chart in Office 365

We have been asked to produce a page within Office 365 for a client and he really wants a fairly sophisticated chart within the page reporting data from some of his Sharepoint lists. The page will also contain other information as well as including a grid of data all of which we feel we can do with the tools provided. As I understand it's not possible to use AJAX controls in Office 365 can KendoUI be used in this way?

Thanks in advance for any advice you can provide.

Charts

answered on 14 Feb 2013

1 answer

138 views

[Solved] Format legend labels

Hello,

I have a donut chart and legend set up:

legend: {
position: "bottom",
labels: {
template: "#= dataItem.jobType # (#= dataItem.taskPercentage #%)"
}

Is there a way to display the labels in a table or similar structure? at the moment they look messy because their position isn't fixed (it's based on label name length which results in them appearing jagged)

Many thanks,
Mike

Charts

answered on 14 Feb 2013

1 answer

146 views

Displaying linear gauge with each treeview item

I'm trying to clone in Kendo one of our existing graphs made using another tool, see attached image for how the graph should look. Basically, you can think of the first column as containing a hierarchial list of items that we'd like to model using a treeview. The last column is a line visualizing the time period during which the item was active. The other columns are a textual representation of the start time, duration and the end time the item was active.

Any way I can achieve this by attaching a linear guage (configured to look just like a solid bar) to each item in the treeview? Ideally, I'd also like to specify the type of the treeview elements as a record (grid) with custom fields, where a field can hold any type of item including other kendo controls. Is something like this doable?

TreeView

answered on 14 Feb 2013