Questions on Kendo UI for jQuery Forum

3 answers

104 views

TreeView Javascript Exception 0x800a138f - Unable to get value of the property 'uid'

I am implementing a TreeView within a modal window. The window works fine the first time it is initialized within its containing razor view. But whenever the containing razor view is reloaded due to user navigation, I get the attached JavaScript exception within the _attachUids function shown below when the TreeView attempts its ajax call (LoadContentFrom) to my partial view. Any insight is appreciated as I am still fairly new to the TreeView.

_attachUids:function(t,n){var i,r=this,o=u.attr("uid");t=t||r.root,n=n||r.dataSource,i=n.view(),t.children("li").each(function(t,n){n=e(n).attr(o,i[t].uid),n.attr("role","treeitem"),r._attachUids(n.children("ul"),i[t].children)})}

n=e(n).attr(o,i[t].uid) is the statement that faults with:

t = 0
i[t] = undefined
o = "data-uid"

My Partial View Is:

<script type="text/javascript">

function onWSBrowseOK() {

$("#WSBrowseWindow").data("kendoWindow").close();

}

function onWSBrowseCancel() {

$("#WSBrowseWindow").data("kendoWindow").close();

}

function getParentWorkspace() {

var parentId = 0;

var treeView = $("#WSBrowseTreeView").data("kendoTreeView");

if (treeView != null) {

var selNode = treeView.select();

if (selNode != null) {

var dataItem = treeView.dataItem(selNode);

if (dataItem != null) {

parentId = dataItem.id;

}

return { workspace_id: parentId };

}

function onWSBrowseChange(e) {

var treeView = $("#WSBrowseTreeView").data("kendoTreeView");

var selNode = treeView.select();

var fileView = $("#WSBrowseFileTreeView").data("kendoTreeView");

fileView.dataSource.read();

e.preventDefault();

}

</script>

<style>

#WSBrowseButtons {

text-align: center;

}

#WSBrowseButtons button {

margin-top: 10px;

margin-bottom: 10px;

margin-right: 20px;

}

</style>

@(Html.Kendo().Splitter()

.Name("WorkspaceBrowser")

.Orientation(SplitterOrientation.Horizontal)

.Panes(vPanes =>

{

vPanes.Add()

.HtmlAttributes(new { id = "WSBrowsePane" })

.Scrollable(false)

.Collapsible(false)

.Resizable(true)

.Size("50%")

.Content(

Html.Kendo().TreeView()

.Name("WSBrowseTreeView")

.HtmlAttributes(new { style = "height: 100%; width: 100%;" })

.Events(events => events

.Change("onWSBrowseChange")

)

.DataSource(ds => ds

.Read(read => read.Action("GetWorkspaces", "Workspace"))

)

.ToHtmlString()

);

vPanes.Add()

.HtmlAttributes(new { id = "WSFilePane" })

.Scrollable(false)

.Collapsible(false)

.Content(

Html.Kendo().TreeView()

.Name("WSBrowseFileTreeView")

.HtmlAttributes(new { style = "height: 100%; width: 100%;" })

.DataSource(ds => ds

.Read(read => read.Action("WorkspaceFiles", "Workspace").Data("getParentWorkspace"))

)

.ToHtmlString()

);

})

)

<div id="WSBrowseButtons">

<button id="WSBrowseOK" onclick="onWSBrowseOK();">OK</button>

<button id="WSBrowseCancel" onclick="onWSBrowseCancel();">Cancel</button>

</div>

The modal window container is defined as follows:

@(Html.Kendo().Window()

.Name("WSBrowseWindow")

.Title("Browse Workspaces")

.LoadContentFrom("BrowseWorkspaces", "Workspace")

.Width(600)

.Resizable()

.Draggable()

.Modal(true)

.Visible(false))

Controller Action Is As Follows. The query could return zero rows, so I add at least one element to the result.

public JsonResult WorkspaceFiles(string id, string workspace_id)

{

if (id == null)

id = workspace_id;

ISession session = NHibernateHelper.GetCurrentSession();

List<WorkspaceModels.WorkspaceFilesModel> files = (List<WorkspaceModels.WorkspaceFilesModel>)session.GetNamedQuery("Workspace_GetFiles")

.SetParameter("pPARENT_ID", id)

.SetResultTransformer(Transformers.AliasToBean(typeof(WorkspaceModels.WorkspaceFilesModel)))

.List<WorkspaceModels.WorkspaceFilesModel>();

NHibernateHelper.CloseSession();

if (files.Count() == 0)

{

WorkspaceModels.WorkspaceFilesModel defaultNode = new WorkspaceModels.WorkspaceFilesModel();

defaultNode.DOCXID = AppConstants.NULL_GUID;

defaultNode.DOCXNAME = "No Data";

defaultNode.HASCHILDREN = 0;

defaultNode.DOCXPARENTID = null;

files.Add(defaultNode);

}

var fileItems = from e in files

where (string.IsNullOrEmpty(id) == false ? e.DOCXPARENTID == id : e.DOCXPARENTID == null)

select new

{

id = e.DOCXID,

text = e.DOCXNAME,

hasChildren = Convert.ToBoolean(e.HASCHILDREN)

};

return Json(fileItems, JsonRequestBehavior.AllowGet);

}

TreeView

answered on 17 Jun 2013

2 answers

691 views

DatePicker does not honour the readonly attribute

If I create a read only input field that uses a KendoUI date picker element, It still appears to be possible to change the date...

for example

<input id="startDate" type="date" name="startDate" value="1 Sep 2011" readonly="readonly" data-role="datepicker" data-format="d MMM yyyy" />

In Chrone, the field appears to be read only, and you can't click in the field and manually edit it with the keyboard.
However, you can click on the Kendo UI Calendar icon, which pops up a calendar. Using the calendar, you can choose a new date like normal, which updates the text in the field.

Is there something I should be doing to prevent this? Is it a bug?

DatePicker

answered on 17 Jun 2013

1 answer

126 views

Navigating to Views with params not working as expected

Navigating to Views with params not working in icenium

for eg I am passing value like the following in item click
onclick="itemclick(#=data.ID#,'#=data.Name#')"
app.navigate("nextpage.html");

In nextpage.html i am accessing the value by window.ID and and all these things work only if I comment out the line
var app = new kendo.mobile.Application($(document).body,{ platform:'ios'});
and if i comment out the line my jquery events doesnt work..

any solutions..??

General Discussions

answered on 17 Jun 2013

1 answer

187 views

Does DataSource Support OData v4.0 Response specs? Or just OData Verbose?

I am building OData service and its response format is new OData v4.0 format.
http://docs.oasis-open.org/odata/odata-json-format/v4.0/csprd01/odata-json-format-v4.0-csprd01.html

However, Kendo's data source seems only support previous OData version.

For example, take a look at these two formats:
{
"d" : {
      "results": [
      {
          "__metadata": {
              "uri": "http://demos/Orders(10248)",
              "type": "SampleModel.Order"
          },
          "ProductId": 10248,
          "Name": "Vgnon"
      }
      ],
      "__count": "1"
  }
}

------------------------------------------------------
OData v4.0
{
  "odata.metadata":"http://localhost:43111/api/$metadata#Products",
  "odata.count":"1",
  "value":
  [
      {
          "ProductId":2,
          "CreatedDate":"2013-06-10T23:53:26",
          "CreatedBy":0,"Name":"Camera"
      }
  ]
}

Can I tell the data source to expect new response format?

Data Source

answered on 17 Jun 2013

1 answer

90 views

touchScroller documentation

I dont see addition information about the touchScroller method. How does it work ? Any examples ?

Hector

General Discussions

answered on 17 Jun 2013

1 answer

175 views

Empty editor by jquery

I am using json for comment on post where i use kendo ui editor for summary. on success json i am trying to clear editor value by jquery like $('#editor').val(' ');
its not working.If i remove kendo editor its working fine. please help.

Editor

answered on 17 Jun 2013

7 answers

274 views

Kendo Grid cell wih dropdownlist with multicolored ( html formatted) text

Hi I am trying to add a kendo dropdown list to a grid cell, but I am not sure how can I display the text in different color formats. So for instance we need to show values likes in a dropdownlist with the kendo cell grid.

Red X
Black X
Red numbers
Black Numbers

I have stored these values in a separate table and am linking them in the grid via Foreign Key Template. But I am not sure how can these values be html formatted.

One other approach was to link to editor to the cell but unfortunately going this route does not allow batch editing/saving. In this case I was not using a dropdownlist rather an editor and kept the cell free form.

Please suggest.

Grid

answered on 17 Jun 2013

3 answers

1.8K+ views

Contents of previous windows are displayed on opening window for second time

I have a kendo window and button in my asp.net mvc 3 application view.

@(Html.Kendo().Window()

.Name("TestWindow")

.Width(420)

.Height(70)

.Draggable()

.Modal(true)

.HtmlAttributes(new { @class = "TestWindow" })

.Resizable()

.Title("Window1 ")

.Content(@<text>@Html.Partial("_PartialWindow", Model.Prop1) </text>)

)

on click of a button I am opening the above declared window using below javascript code.

var windowobj = window.data("kendoWindow");

windowobj.open();

windowobj.center();

hen in the window i enter value in the textbox. the opened window has Ok button, on click of that button, we use java-script code.

windowobj.close();

Now again clicking on parent button I open the window and expect that the text box in window will have no values. but it retains those values. Is there a function like refresh which will clear the previous contents.

Thanks,
Santosh

Window

answered on 17 Jun 2013

1 answer

399 views

Drag from TreeView with Custom Hint

I would like to show a custom html hint when dragging items from a treeview, but I cannot figure out how to get it to work. Is there a way to use kendoDraggable with treeview to make this happen?

TreeView

answered on 17 Jun 2013

8 answers

1.9K+ views

Too many options in multiselect

In one of my forms, I have 6 MultiSelect widgets of which all will eventually contain up to 5000 different options (30.000 in total per page), all loaded from a remote datasource.

I noticed that when the MultiSelect is first loaded, it loads all possible options, whether or not you have set a pagesize and set server filtering to true.

With only a few options, this is fine, but with as many as I have, you start to notice a performance issue in the browser (especially on older PC's). I've tried making changes to the server side, limiting the number of results, but then when I try to add options through javascript code, which are not in the current resultset, they will not be added.

For example:

a total of 20 results exist on the server
at any given time, only 10 results are provided to the client, filtered based on the users' input
on initialization, only the first 10 results are loaded
assume you have entered a letter 'x' into the multiselect, this returns 6 results which you can select
now you add a value through the multiselect.value() method, which has an id that is not in the list which contains an x; this will not work as the id does not exist in the current result set, even though it does exist on the server

I've attempted sending the selected values using the parameterMap() method and including those in the returned result set, which works to some extent. But then when I use the multiselect.value() method to add another selection, the change event is not triggered and thus I cannot retrieve the new result set from the server.

Is there another way to achieve what I am trying to do? Or is it possible to manually trigger the updating of the resultset? I've tried using .trigger('change') but that doesn't reload the resultset.

Hoping someone can help!

MultiSelect

answered on 17 Jun 2013