Questions on Kendo UI for jQuery Forum

1 answer

76 views

Hello
When I'm looking into kendo demo with bootstrap and e.g. changing page there is focus rectangle showing. This behavour is not occuring without bootstrap. Is there any way to get rid of this behaviour?

Kind Regards
Marcin

Grid

answered on 17 Feb 2014

2 answers

123 views

Empty Editor paragraphs don't render in browser

With a default Editor instance, if you have a paragraph, then press the Enter key twice to create blank space between a later paragraph, the middle "spacer" paragraph does not render in the browser, since it is totally empty.

<p>Test 1</p>

<p></p>

<p>Test 2</p>

But other WYSIWYG HTML editors generate "blank" paragraphs like this:

<p>Test 1</p>

<p> </p>

<p>Test 2</p>

That way, the browser will still render a blank paragraph. Why does the Kendo Editor not do this? Thanks.

Editor

answered on 17 Feb 2014

1 answer

311 views

Kendo UI Web as JSFiddle framework

I enjoy being able to use jsfiddle.net to test out concepts and it works well for sharing concepts with Kendo UI as well.
I have set up a Kendo UI starter template that includes the basic Kendo CSS and JS files, but I thought it would be great if Kendo could be included in the list of built-in frameworks (jsbin already does this).

A few questions:

Are there any licensing issues with this?
JSFiddle states that they currently only support 1 JS file and 1 CSS file. From my experience, it seems like you need 2 CSS files: default and common. Is there a way to get a CDN link that combines necessary CSS files for cases like this?

I created a jsfiddle issue here to request Kendo UI to be added as a framework:
https://github.com/jsfiddle/jsfiddle-issues/issues/481

General Discussions

answered on 17 Feb 2014

1 answer

327 views

Grid - Editing custom editor – undefined when using a primary key field

Greetings,

I have been trying for hours to use a custom editor (kendoDropDownList) with a grid in a situation when the only way to uniquely identify a record is by using a primary key. I have created a simplified working example. I know (based on the example in this web page http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html) that it can be done if you want to store the DayOfWeekName value in the field. What I would like to do in this case is to use the kendoDropDownList in the grid to show the DayOfWeekName (when active), to display the selected DayOfWeekName on the grid when inactive (not undefined as it is doing now) and store the DayOfWeekID on the field named DayOfWeekID. Is this possible? Thank you very much.

Example:

<div id="example" class="k-content">

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

<script type="text/javascript">

var exampleData = [

{ 'RecordID' : 1, 'DayOfWeekID': 2, 'Description': 'Record 1' },

{ 'RecordID' : 2, 'DayOfWeekID': 3, 'Description': 'Record 2' },

{ 'RecordID' : 3, 'DayOfWeekID': 6, 'Description': 'Record 3' }

];

$(document).ready(function () {

var dataSource = new kendo.data.DataSource({

pageSize: 20,

data: exampleData,

autoSync: true,

schema: {

model: {

id: "RecordID",

fields: {

RecordID: { editable: false, type: "number" },

DayOfWeekID: { defaultValue: { DayOfWeekID: 1, DayOfWeekName: "Sunday"} },

Description: { type: "string" }

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

height: 430,

toolbar: ["create"],

columns: [

{ field: "DayOfWeekID", title: "Day of week", width: "160px", editor: categoryDropDownEditor, template: "#=DayOfWeekID.DayOfWeekName#" },

{ field: "Description", title: "Description", width: "120px" },

{ command: "destroy", title: " ", width: "90px"}],

editable: true

});

function categoryDropDownEditor(container, options) {

$('<input required data-text-field="DayOfWeekName" data-value-field="DayOfWeekID" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

dataSource: [

{ 'DayOfWeekName': 'Sunday', 'DayOfWeekID': 1 },

{ 'DayOfWeekName': 'Monday', 'DayOfWeekID': 2 },

{ 'DayOfWeekName': 'Tuesday', 'DayOfWeekID': 3 },

{ 'DayOfWeekName': 'Wednesday', 'DayOfWeekID': 4 },

{ 'DayOfWeekName': 'Thursday', 'DayOfWeekID': 5 },

{ 'DayOfWeekName': 'Friday', 'DayOfWeekID': 6 },

{ 'DayOfWeekName': 'Saturday', 'DayOfWeekID': 7 }

],

dataTextField: "DayOfWeekName",

dataValueField: "DayOfWeekID"

});

}

</script>

</div>

Grid

answered on 17 Feb 2014

2 answers

332 views

Sync Upload Not Receiving Files at Controller

I am using Kendo Upload but without the MVC wrappers. I am unable to get the files at the controller to save.

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Edit([Bind(Include = "fileID,galleryItemID,width,height")] GalleryItemFile galleryFile, IEnumerable<HttpPostedFileBase> uplFile)

{

if (ModelState.IsValid)

{

GalleryItemFile thisGalleryFile = db.GalleryItemFiles.Find(galleryFile.fileID);

if (uplFile != null)

{

foreach (var inputFile in uplFile)

{

//HttpPostedFileBase uploadedFile = Request.Files[inputFile];

if (inputFile != null && inputFile.ContentLength > 0)

{

string filename = galleryFile.galleryItem.imageName + DateTime.Now.ToString("yyyyMMdd-HHmm-ss");

filename = filename.Replace(" ", "-") + "." + Path.GetExtension(inputFile.FileName);

string filepath = Path.Combine(Server.MapPath("~/Areas/Gallery/Content/GalleryFiles"), filename);

inputFile.SaveAs(filepath);

galleryFile.filename = filename;

galleryFile.filepath = Path.Combine("~/Areas/Gallery/Content/GalleryFiles", filename);

}

@model Marketing.Areas.Gallery.Models.GalleryItemFile

@using (Ajax.BeginForm("Edit", new { id = Model.fileID }, new AjaxOptions { UpdateTargetId = "slideoutmenu", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" }, new { enctype = "multipart/form-data" }))

{

@Html.AntiForgeryToken()

@Html.HiddenFor(model => model.galleryItem.galleryItemID)

@Html.HiddenFor(model => model.fileID)

<table class="formtable">

<tr><td colspan="2" class="tableheader">Edit Gallery File Item</td></tr>

<tr>

<td>Upload File:</td>

<td><input type="file" name="uplFile" id="uplFile" /></td>

</tr>

<tr>

<td>Item Name:</td>

<td>@Html.EditorFor(model => model.width)</td>

</tr>

<tr>

<td>Description:</td>

<td>@Html.EditorFor(model => model.height)</td>

</tr>

<tr>

<td colspan="2"><input type="submit" value="Save" class="btn btn-default" /> <input type="submit" value="Cancel" class="btn btn-cancel" onclick="slideOutMenuClose(); $('#slideoutmenu').html('');" /></td>

</tr>

</table>

<script>

$("#uplFile").kendoUpload();

</script>

}

What am I doing wrong. I've tried this multiple ways and nothing seems to get the file.

Upload

answered on 17 Feb 2014

4 answers

433 views

DropDownList and ViewModel change event

I'm having problems getting the current/new value from a Kendo dropdownlist in a change event in kendo viewmodel.

Html code:
<div id="dropdownExample">
<select id="nameDropDown" data-bind="value: name, events: {change: nameChanged}">
<option>James</option>
<option>Bond</option>
</select>
<div id="outputExample"></div>
</div>

Javascript code:
var vModel = kendo.observable({
name: "James",
nameChanged: function(param)
{
var paramDataName = param.data.name;
var vModelGet = this.get("name");

var outPut = "param.data.name = " + paramDataName;
outPut += "<br/>vModelGet = " + vModelGet;

$("#outputExample").html(outPut);
}
});

This code works as expected. Param.data.name give me the new value, the same does viewmodel.get("name").

However if I try to turn that dropdown into a KendoDropDownList with $("#nameDropDown").kendoDropDownList({ }) param.data.name and viewModel.get("name") give me the old value.

Any ideas?

We are currently using Kendo 2012.2.507.

Regards,
Jan Erik

DropDownList

answered on 17 Feb 2014

1 answer

209 views

Load different data for different nodes level.

Hi.

Suppose I have following hierarchy

project1:
-- entity1
-- entity2
-- entity3

project2:
-- entity1
-- entity2
-- entity3

...

Project and "entities" are basically different and I use different url to get them, say /serv/prj for project and /serv/entities for entities.
When page is loaded there are only projects. When I expand project items should be loaded (refreshed) from server. Items for selected project
should be refreshed each time I expand the project.

Now it working ok in a static manner, I have following:

var nodeZ = kendo.data.Node.define({

hasChildren: "Entities",

id: "EntityNamespaceID",

children: "Entities"

});

var dataSource = new kendo.data.HierarchicalDataSource(

{

transport: {

read: {

url: "ns",

dataType: "json"

}

},

schema: { model: nodeZ},

filter: {

logic: "or",

filters: [

{ field: "EntityName", operator: "neq", value: "null" },

{ field: "Namespace", operator: "neq", value: "null" }

]

}

});

and have

dataTextField: ['Namespace', 'EntityName'] for tv.

But it is static. It loads everything one time and if I need to refresh data I have to reload page...

Is it possible to accomplish for within a single HierarchicalDataSource? As I mentioned project and entities are different, and to get
them I use two different urls, because in documentation it is stated for homogeneous data that it supply parent node id for request.
In my case data are heterogeneous.

What I'm currently unsuccessfully tried to do is to load separately projects, and on expansion refrehs items:

expand: function(e)

{ 



      var entityNodeZ = kendo.data.Node.define({

            hasChildren: "Children",

            id: "EntityId",

            children: "Children"



        });

var nodeData = this

.dataItem(e.node); //project node

var entityDataSource = new kendo.data.HierarchicalDataSource(

{

transport: {

read: {

url: "entity",

dataType: "json"

},

parameterMap: function ()

{

return { ns: nodeData.PrjId};

}

},

schema: { model: entityNodeZ},

filter: { field: "EntityName", operator: "neq", value: "null" }

});

entityDataSource.fetch();

var tv= $('#userprjtreeview').data('kendoTreeView');

tv.append(entityDataSource.view().slice(0), nodeData);

}

But on tv.append I get following exception:

Uncaught TypeError: Property 'children' of object [object Object] is not a function.

So please help with any approach.

Thanks in advance.

TreeView

answered on 17 Feb 2014

5 answers

233 views

Recurrence series bug

While using the scheduler without a web service (so with an array/empty datasource) and setting recurrence rules, the component displays the recurrence icon only for the first event in the series and does not ask if we want to edit the occurrence or the series when trying to edit the other entries. Editing such an entry and clicking save then throws that error: Uncaught TypeError: Cannot read property 'dirty' of undefined.

To verify if my code was the culprit I just took one of the samples and removed the dataSource and it did the same thing.

Scheduler

answered on 17 Feb 2014

3 answers

190 views

Kendo UI scheduler: make appointments that occur in the past 'read-only'

Hello,

I would like appointments that occurred in the past to not be movable, resizable or destroyable. But i am not able to find "DragStart" event in this control.

Can you please add this event in this control?

Thanks,
Jayesh Goyani

Scheduler

answered on 17 Feb 2014

4 answers

713 views

stopPropagation cannot stop Hold Event

I believe this does not happen only in ListView.

I tried your demo http://demos.telerik.com/kendo-ui/mobile/listview/editing.html. The original effect is:
- swipe then Delete button appear
- click the item other then Delete button will hide it but will not trigger the Tap event because it has e.event.stopPropagaton() in touchStart event.

Okay, due to some reason I need to use Hold instead of Tap (i.e. Hold only, no Tap, so I am not talking about Tap triggered after Hold event problem)
- swipe then Delete button appear
- click the item other than Delete button. The Delete button goes away, but Hold event triggered!!
You can reproduce it just change Tap to Hold.

This means e.event.stopPropagaton() cannot stop Hold timeout counting. Is there a way I can prevent this pending Hold event??

ListView (Mobile)

answered on 17 Feb 2014