Questions on Kendo UI for jQuery Forum

2 answers

108 views

Grid doesn't display data after updating model via database first method

Hello,

I am new to MVC and trying out the Kendo UI has given me a lot of help. I have been working with grids, simple one table editable grid and it was working fine. I then planned to move onto to Master-Detail grids but when I updated the models in the MVC solution by right clicking in the models diagram, choosing 'Update Model from database option' and adding extra tables that are in the database (which all seems to work OK) , no data appears in my simple editable grid anymore when I run it.

The outline of the grid appears but no data. The table(Schools) that I was referencing didn't change except for a 1 to many relationship has been added as that is a relationship it has with one of the other tables (SupportTickets) that was added during the Update model from database process. None of the code in the HomeController or View was changed.

Is there some part of the process that I am missing?

Thanks in advance for any advice offered.

Eamonn

Grid

answered on 18 Feb 2014

1 answer

86 views

Scheduler Hours As Columns

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

113 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.7K+ views

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

231 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

80 views

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

155 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

322 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

331 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