Questions on Kendo UI for jQuery Forum

1 answer

96 views

Hello,

I am creating a monitoring application and need to display hours as columns per image below.

Is this possible with the scheduler?

jb

Scheduler

answered on 18 Feb 2014

7 answers

1.8K+ views

Virtual Scroll Paging

Is it possible to have virtual paging that automatically fetches the next page for when paging is enabled? This way the user doesn't have to worry about the actual paging?

Grid

answered on 18 Feb 2014

2 answers

119 views

Kendo Grid Odata JsonLight

Why is not working/ data not showing in drop down list ? //Sample Ref : http://demos.telerik.com/kendo-ui/web/grid/virtualization-remote-data.html

$("#dropDownList").kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserGroupId",
dataSource: {
type: "odata",
transport: {
read: "/odata/UserGroup?$select=UserGroupId,Name",
dataType: "json",
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data["odata.count"];
}
},
model: {
id: "UserGroupId",
fields: {
UserGroupId: { type: "string", editable: false },
Name: { type: "string", editable: false },
}
}
}
});

Odata Result :
{
"odata.metadata":"http://localhost:47959/odata/$metadata#Roles","value":[
{
"Id":"07b8e680-ab36-4825-b709-0d2dbd90a7f2","Area":"1","Controller":"2","Action":"3","Title":"Administrator","Name":"123","Description":"Administrator","Bookmark":true
},{
"Id":"500093a6-79d8-45e0-9c68-8407269824c1","Area":"2","Controller":"2","Action":"2","Title":"2","Name":"222","Description":"2","Bookmark":false
},{

thank you.

Grid

answered on 18 Feb 2014

4 answers

2.8K+ views

[Solved] InLine Editing on Grid DateTime Column. Where is DateTimePicker?

Hi,

i'm trying to do some inPlace editing in Kendo Grid.

When i click on a DateTime Column, i'm expecting a DateTimePicker to appear, but i only shows the Error: "XXX is not valid date" ==> have a look at the attached image.

@(Html.Kendo().Grid<Roche.LabData.Web.Models.MappingRuleViewModel>()

.Name("Grid")

.Columns(columns => {

columns.Bound(m => m.SalesOrganization);

columns.Bound(m => m.CustomerNumber);

columns.Bound(m => m.DeviceName);

columns.Bound(m => m.EntityName);

columns.Bound(m => m.OldValue);

columns.Bound(m => m.NewValue);

columns.Bound(m => m.StartDate).Format("{0:d}");

columns.Bound(m => m.EndDate).Format("{0:d}");

columns.Command(command => command.Custom("Deactivate").Click("clickDeactivate"));

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Read(read => read.Action("MappingRules_Read", "MappingRules"))

.Update(read => read.Action("MappingRules_Update", "MappingRules"))

.Events(events => events.Error("error_handler"))

.Model(model => {

model.Id(m => m.MappingRuleId);

model.Field(p => p.SalesOrganization).Editable(false);

model.Field(p => p.CustomerNumber).Editable(false);

model.Field(p => p.DeviceName).Editable(false);

model.Field(p => p.EntityName).Editable(false);

model.Field(p => p.OldValue).Editable(false);

model.Field(p => p.NewValue).Editable(false);

model.Field(p => p.StartDate).Editable(false);

// This column should be "InPlace editable"

model.Field(p => p.EndDate).Editable(true);

})

)

My ViewModel looks like this:

public class MappingRuleViewModel

{

public Guid MappingRuleId { get; set; }

public string SalesOrganization { get; set; }

public string CustomerNumber { get; set; }

public string DeviceName { get; set; }

public string EntityName { get; set; }

public string OldValue { get; set; }

public string NewValue { get; set; }

public DateTime StartDate { get; set; }

public DateTime EndDate { get; set; }

public bool IsActive { get; set; }

public string CreatedBy { get; set; }

public DateTime ModifiedDate { get; set; }

}

I'm using Kendo 2013.1.514

Any help is appreciated.

Grid

answered on 17 Feb 2014

1 answer

246 views

Kendo mobile Scrollview - Set scrollview height to page height

Hello,

By default, Kendo Scrollview height is according to its content. Is there any way we can set its height to whole page to increase scrollable area?

Regards.

ScrollView (Mobile)

answered on 17 Feb 2014

1 answer

89 views

[Solved] Kendo + bootstrap focus rectangle

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

171 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

340 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

348 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

359 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