Questions on Kendo UI for jQuery Forum

1 answer

216 views

I am struggling to get the image browser to work in php. One thing that always stumps me with the documentation is finding the schema that is expected via json. After viewing a .NET MVC example I came up with the following. It isn't working yet but was hoping for some direction.

Right now with the following code the image browser comes up with the busy animation in the center and nothing happens beyond that.

File: obj.file.php

<?PHP

class FileObj {

public $name = "";

public $type = "";

public $size = "";

}

?>

File: read.php

<?

include_once("obj.file.php");

$path = $_GET["path"];

$serverFilePath = "/home/midmosou/public_html/";

$filter = "*.*";

if(is_dir($serverFilePath . $path))

{

foreach (glob($serverFilePath . $path . $filter) as $filename) {

$file = new FileObj();

if (is_dir($filename))

{

$file->name = basename($filename);

$file->type = "d";

$file->size = "0";

} else {

$file->name = basename($filename);

$file->type = "f";

$file->size = filesize($filename);

}

$data[] = $file;

}

$count = count($data);

echo "{\"data\":" .json_encode($data). ", \"count\":" . json_encode($count) . "}";

}

?>

This returns data similar to:

{"data":[{"name":"FaceBook.png","type":"f","size":1331},{"name":"School_dance.jpg","type":"f","size":13576},{"name":"bbb-logo.jpg_600.jpg","type":"f","size":38843},{"name":"bbb_96.gif","type":"f","size":1320},{"name":"blogger_logo.jpg","type":"f","size":18175},{"name":"fztp020w_1.jpg","type":"f","size":46205},{"name":"live_sound_mo.jpg","type":"f","size":22116},{"name":"live_sound_system_rental_mo.jpg","type":"f","size":10794},{"name":"search-engine-optimization_102.png","type":"f","size":18850},{"name":"sound-main-mid-mo.jpg","type":"f","size":29101},{"name":"sound_man_1.jpg","type":"f","size":11412}], "count":11}

The editor declaration code looks like the following. This has gone through several experimental edits so hopefully it is close.

<textarea id="editor1" id="page_body" name="page_body" style="width: 100%; height: 300px;"><? echo $page_body;?></textarea>

<script>

$(document).ready(function() {

$("#editor1").kendoEditor({

encoded: false,

imageBrowser: {

transport: {

read: "/includes/kendoui/service/imagebrowser/read.php",

destroy: {

url: "/includes/kendoui/service/imagebrowser/destroy.php",

type: "POST"

},

create: {

url: "/includes/kendoui/service/imagebrowser/createDirectory.php",

type: "POST"

}, imageUrl: "/Company_Images/{0}"

},

path: "Company_Images/"

}

});

</script>

File: read.php

Editor

answered on 29 Jan 2013

1 answer

82 views

Setting MajorUnit = 0 causes an infinite loop

I found a bug where you set the "majorUnit" in an axis to 0, which causes an endless loop in the internals of the kendoChart() which will eventually end in a memory exception while creating an infinite number of labels.

To recreate it, I've attached the object that I passed into kendoChart() to make it happen, but it is yAxis[0].majorUnit = 0 that causes the issue.

The workaround is to not use zero as a "majorUnit". Does anyone have a better solution, or is there a fix coming?

{"theme":"default","title":{"text":"","visible":true},"chartArea":{"height":150,"width":600},"legend":{"position":"bottom","visible":true},"series":[{"type":"scatterLine","stack":false,"name":"","data":[]}],"tooltip":{"visible":true,"format":"{0:N0}m: {1:N2}"},"xAxis":[{"title":{"text":"Time (minutes)","visible":true},"labels":{"format":"{0}m"},"visible":true}],"yAxis":[{"title":{"text":"Solution","visible":true},"majorUnit":0,"visible":true}]}

Bill Wagner
Bill.wagner@srtsolutions.com

Charts

answered on 29 Jan 2013

1 answer

463 views

Treeview model binding to MVC Controller

Good day,

I currently have the following

@Html.Kendo().TreeView()
                            .Name("treeview")
                            .DragAndDrop(true)
                            .DataTextField("Name")
                            .Events(events => events
                                .DragEnd("Change")
                                .Select("Selected")
                                .Expand("OnExpand")
                                )
                            .DataSource(dataSource => dataSource
                                .Read(read => read
                                    .Action("GetTreeViewData", "Home"))
                        );

public JsonResult GetTreeViewData(int? id, string Type) /* how can I get my type property here? */
        {
            //data is returned from db - excluded for brevity
            return Json(data, JsonRequestBehavior.AllowGet);
        }

The question I have is I want, either in my MVC wrapper or through the js widgets to pass through a property called Type from my treeview back to the controller when I expand a Node. How would I go about getting this property to the server when expanding a node?
I explicitally need to know what method to call on the datasource object as I can't find a way to get this property from the client to the server, it's needed as I'm working with data with a composite key...

treeview.dataItem(e.node).Type (with Type being a property in my Json for the Node)

TreeView

answered on 29 Jan 2013

0 answers

101 views

Column re-sizing in grid with hidden column

Removed.
Not accurate description

Please see this post instead:
http://www.kendoui.com/forums/ui/grid/grid-column-re-sizing-issue-when-using-remote-virtualization.aspx

Grid

asked on 28 Jan 2013

2 answers

79 views

[Solved] Window does not animate in Safari 5.1.7 (PC, Mac or iPad)

The Window does not appear unless I turn off Animation (you can see it but it's just a few pixels wide and high). Will this be fixed soon?

Window

answered on 28 Jan 2013

1 answer

183 views

kendo dropdownlist cannot display in front of iframe

Hi there,

I ran into this bizarre issue and has wasted me at least one day.
Basically I have a kendodropdownlist, below it there's a iframe wrapped in a div.
when I click on the dropdownlist, i'm expecting it to show in front of the iframe.
I've tried the below and it still failed to work:

set position:absolute and z-index: -1000 for iframe and its div
set style for #ddlTest_list - no use at all
set style for #ddlTest_listbox - works with font color but setting z-index still has no effect

As you can see in my attached code the <select> works perfectly fine.

Please advise how I can get dropdownlist to work.

Many thanks!

DropDownList

answered on 28 Jan 2013

2 answers

639 views

[Solved] moving the right-most menu all the way to the right or ...

Hello,

I need to shoehorn the kendo menu into an existing design. The design has a top level menu selection (the last one, going from left to right) pushed all the way to the right of the screen.

Example: If there where four (4) top level menu items, it would look like this:

page edge ->| Item One | Item Two | Item Three| | Item Four |<-page edge

If this is not possible, I've also tried to just get anything on the same level as the menu and getting it all the way to the right (with the styling intact - ie, the background needs to like the menu is spaning the entire width of the page. You know, the default look)

I've been pulling my hair out, so any help would be appreciated.

L. Lee Saunders

Menu

answered on 28 Jan 2013

7 answers

150 views

[Solved] Kendo Grid and Complex entitlement

Recently we are trying to use Kendo Grid for our new project, but the problem is the entitlement is very complicated. Not sure if Kendo Grid can support that complex requirement. The requirements is like we need check some filed in row. For example we have a client table in database. In Front End we have a editable Grid to display those information, but we need disabled the some row conditionally. Is it possible to do that? If we can how to customize it, if there are any demo code will be great.

Thank you.

Grid

answered on 28 Jan 2013

2 answers

226 views

Grid & ie9 Problem

Hi,
need some help, this code works fine* with Chrome and Firefox, but i doesn't work with ie9.

e.errorThrown = No Transport
e.xhr.responseText = undefined.

* I can add and update items but i can't remove them.

Here is the code.

<div id="grid"></div>

$(document).ready(function () {

var crudServiceBaseUrl = "http://localhost:11028/IntexService.svc/Zonas",

crudServiceOptions = "",

dataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: {

url: crudServiceBaseUrl + crudServiceOptions,

dataType: "json"

},

update: {

url: function (data) {

return crudServiceBaseUrl + "(" + data.ZonaId + "L)";

}

},

create: {

url: crudServiceBaseUrl

},

destroy: {

url: function (data) {

return crudServiceBaseUrl + "(" + data.ZonaId + "L)";

}

},

batch: false,

pageSize: 10,

serverPaging: true,

serverFiltering: true,

schema: {

model: {

id: "ZonaId",

fields: {

ZonaId: { editable: false, nullable: true },

Nombre: { validation: { required: true} }

}

},

errors: "Errors"

},

error: function (e) {

alert("La operación ha fallado: \n" + e.errorThrown + ": " + e.xhr.responseText);

this.cancelChanges();

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

filterable: true,

pageable: true,

height: 410,

toolbar: ["create"],

columns: [

{ field: "Nombre", width: "150px" },

{ command: ["edit", "destroy"], title: " ", width: "110px"}],

editable: "popup"

});

Any idea?
Thanks.

Data Source

answered on 28 Jan 2013

2 answers

400 views

[Solved] Grid does not render correctly in WPF WebBrowser control

I have noticed an error with the rendering of the Kendo grid in WPF web browser controls if remote virtualization is enabled.
The issue is that the columns are not rendered with the same width as the column headers (see screenshot).
This behavior is not observed in normal web browsers (IE 8/9, Chrome, Firefox), just when the web browser control is hosted in a WPF application. It seems to be tied to grids with remote virtualization enabled.

I am seeing this in my own application, but for demonstration purposes I've created a simple WPF example app.

I have attached the sample wpf application (pointed the browser to your remote virtualization online demo), as well as a screenshot of your demo page when hosted inside the sample application.

It appears to have something to do with the presence of the IE specific meta tags inside the page head element:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Tor

Grid

answered on 28 Jan 2013