Questions on Kendo UI for jQuery Forum

1 answer

79 views

Hello,

I found this example of sheduler on your page: http://demos.telerik.com/aspnet-ajax/scheduler/examples/overview/defaultcs.aspx

It's exactly what i need - a sheduler and allways-open connected datetimepicker next to it. Does something similar exist for non-ASP Kendo UI?

Or can I somehow extract datatime picker of sheduler to another div on page?

Thanks for answer :)

Scheduler

answered on 03 Dec 2015

1 answer

80 views

Copy data to another grid problem with virtual scrolling on

Hi,

The below code works to copy data from one grid to another.
However, it looks like only copies the selected page when virtual scroll is on.

Is there a way to copy the entire datasource from one grid to another when virtual scroll is on?

var sourcegrid = $('#grid').data('kendoGrid'); //SOURCE GRID
var destinationgrid = $('#printableGrid').data('kendoGrid'); // DESTINATION GRID
destinationgrid.setDataSource(sourcegrid.dataSource);
destinationgrid.refresh();
$("#printableGrid").show();

Thanks,

Grid

answered on 03 Dec 2015

6 answers

305 views

IsAllDay Explanation

Hi,

I've got my scheduler working mostly. As I'm working through my use cases I've noticed that when I create an all day event that shows on e.g. 9/29/13, the database gets a matching value for start and end that shows 9/28/2013 7:00:00 PM. I find this to be odd and confusing. Am I missing something here or is this just the way things work with the scheduler?

Also, I'm successfully using the built in dialog to add and edit events. How do I control validation on those dialogs. How do I control what fields are shown on those dialogs. E.g. I'm getting a dropdown list for EventType but not for my employeeId.

Here is the code. Thanks in advance.

@(Html.Kendo().Scheduler<Shiner.ViewModels.CompanyEventVM>()

.Name("scheduler")

.Date(DateTime.Now)

.AllDaySlot(true)

.EventTemplateId("event-template")

.AllDayEventTemplateId("all-day-event-template")

.Events(events => events.DataBound(

"calenderBound"

))

.Editable(e =>

{

e.Create(true);

e.Destroy(false);

e.Update(true);

})

.Height(550)

.Views(views =>

{

views.DayView();

views.WeekView();

views.MonthView(v => v.Selected(true));

views.AgendaView();

})

.Timezone("Etc/UTC")

.Resources(resource =>

{

resource.Add(m => m.EventType)

.Title("EventType")

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.BindTo(new[] {

new { Text = "PTO Request", Value = 1, Color = "#6c58f0" } ,

new { Text = "Birthday", Value = 2, Color = "#3a8bd8" },

new { Text = "Anniversary", Value = 3, Color = "#3ba96a" },

new { Text = "Review", Value = 4, Color = "#c437d3" },

new { Text = "Notation", Value = 5, Color = "#ff9400" },

new { Text = "Absence", Value = 6, Color = "#d2006b" },

new { Text = "Holiday", Value = 7, Color = "#d8f800" },

new { Text = "Acrual", Value = 8, Color = "#035607"},

new { Text = "CompanyEvent", Value = 9, Color = "#0232a3"}

});

})

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.Id);

m.Field(f => f.EventType);

m.Field(f => f.EmployeeId);

m.Field(f => f.Start);

m.Field(f => f.End);

})

.Read("Events_Json", "CompanyEvents")

.Update("UpdateCompanyEvent", "CompanyEvents")

.Create("CreateCompanyEvent", "CompanyEvents")

)

Scheduler

answered on 03 Dec 2015

2 answers

127 views

[Solved] Map should not be hidden when dragging it

Hi,

I am working on the kendo map (http://demos.telerik.com/kendo-ui/map/geojson) . Is there any way i can make the map not disappear from the browser when a user drags the map? If there is a drag portion limit that we can setup?

Thanks!

Map

answered on 03 Dec 2015

1 answer

361 views

load time grid page

Hi All,

my grid is taking a long time to load using firebug to see what is going on it seems to wait a long time before loading the

http://localhost:64449/Content/kendo/2015.3.930/Bootstrap/sprite.png file.

Any ideas on what I have done wrong and how I can fix it and speed this up.

thanks

Mark.

Grid

answered on 02 Dec 2015

2 answers

291 views

How do I show only some of the category axis values

Hi,

I'm trying to create a chart that shows the performance of a machine.

The datasource is an XML with N records containing a value and the acquisition date ( by minutes ). This XML can contain up to 1440 records ( 24Hours )

When the chart renders I would like to see as category Axis labels, only the hours ( see Result.PNG )

I tried to do so:

categoryAxis: {
field: "end_time",
baseUnit: "minutes",
minorUnit: 60,
labels: {
format: 'hh tt'
}
}

but is not working ( WrongResult.PNG ) Do you have any suggestions?

Thanks

Luca

Charts

answered on 02 Dec 2015

2 answers

936 views

Radio button is not displaying

I have issue with the radio button is not displaying. This is when the I edit the applicant and it is not populated the radio button value from the server. The issue here I think it is at the UI as I am able to see all the values in from the controller.

<div class="radio-group">

<div data-bind="source:applicantTypeItems" data-template="DoctoralLevelId"></div>

<script id="DoctoralLevelId" type="text/x-kendo-template">

<div>

<input type="radio" name="DoctoralLevelId" data-bind="attr:{value:value},

checked:DoctoralLevelId" />

<label data-bind="text:caption"></label>

</div>

</script>

</div>

<script>

$(document).ready(function () {

var applicantVm =kendo.observable($.extend({

updated: false,

PersonId: self.personId,

Id: self.selectedId,

DoctoralLevelId: 1,

name: "DoctoralLevelId",

applicantTypeItems: [

{ caption: "Pre-doc", value: 1},

{ caption: "Post-doc", value: 2 },

],

// call controller and update user input

updateApplicant : function() {

var self = this;

var updateData ={

PersonId: self.personId,

Id: self.selectedId,

DoctoralLevelId: self.DoctoralLevelId,

};

$.ajax({

url: '@Url.Content("~/Applicant/UpdateNewPredoc")',

data: JSON.stringify(updateData),

contentType: "application/json, charset=utf-8",

type: "POST",

datatype: "json",

error: function () {

toastr.error('Update failed!');

},

success: function (value) {

window.console && console.log(self);

window.console && console.log(value);

toastr.success('Update succeed!');

},

complete: function () {

window.console && console.log("completed");

}

});

}

},@(Html.ToJson(Model))));

window.console && console.log(applicantVm);

kendo.bind($("#applicant-info-view"), applicantVm);

})

</script>

ButtonGroup

answered on 02 Dec 2015

3 answers

236 views

setting Grid Row items to DropdownList

Hello There,

I have two lists: 1) Grid 2) DropdownList. I can add new row to the grid from the dropdownlist selection. What I like to accomplish is to edit the dropdownlist, when the row is selected in the Grid. I can see my selection but my code failed to update the dropdownlist. Your help is greatly appreciated

Here are the codes

onSelect : function(e) {

e.preventDefault();

var self = this;

window.console && console.log("MVN what is self here: "+self);

var kendoGrid = $("#facultySupportGrid").data("kendoGrid");

var selectedRow = kendoGrid.select();

var selected = kendoGrid.dataItem(selectedRow);

if (selected !== null) {

self.set("addFacultySupportSectionVisible", true);

self.set("selectedId", selected.id);

alert(selected.facultyFullName)

self.set("selectedFullName", selected.facultyFullName);

// Hide button when fields are expanded

self.set("hideAddFacultyButton", false);

}

},






<h2>Add Faculty Information</h2>
            <label class="control-label">Name*:</label>
            <input id="newFacultyDropDown" name="newFacultyDropDown" data-role="dropdownlist"
                   data-option-label="- select faculty -"
                   data-auto-bind="true"
                   data-text-field="value"
                   data-value-field="key"
                   data-bind="value: selectedFullName,source: fundingFacultiesList" required validatemessage="Name is required" />
            <span class="k-invalid-msg" data-for="newFacultyDropDown"></span>
        </div>

DropDownList

answered on 02 Dec 2015

1 answer

637 views

Custom Toolbar with Integrated Command Buttons

I have a grid that I'm using the default popup editing for. I also am using a custom toolbar template. What I'd like to do is use the "create" command that can usually be used in the toolbar, within my custom toolbar template. Is this possible? Below is my code and any help would be greatly appreciated!

<script type="text/x-kendo-template" id="template">

<div class="toolbar">

<span class="grid-heading">All Users</span>

<span name="create" class="btn btn-link pull-right" id="createUser"><i class="fa fa-user-plus"></i> Add New</span>

</div>

</script>

var grid = $("#UserListGrid").kendoGrid({

dataSource: viewModel.get("userDataSource"),

sortable: true,

pageable: true,

scrollable: false,

filterable: {

extra: false

},

toolbar: kendo.template($("#template").html()),

columns: [

{

field: "DisplayName", title: "Display Name", template: "#:DisplayName#"

},

{

field: "Email", template: "#:Email#"

},

{

field: "PhoneNumber", title: "Phone Number", template: "#:PhoneNumber#"

},

{

command: [

{ name: "edit", text: "Edit", className: 'small btn btn-link editUser', imageClass: 'fa fa-pencil' },

{ name: "destroy", text: "Delete", className: 'small btn btn-link danger', imageClass: 'fa fa-trash' }],

width: "160px"

}

],

editable: {

mode: "popup",

template: kendo.template($("#userEditor").html()),

"confirmation": "Are you sure you want to delete this user?"

},

edit: function (e) {

var editWindow = this.editable.element.data("kendoWindow");

editWindow.wrapper.css({ width: 450 });

e.container.find("#roleUpdate").kendoComboBox({

dataTextField: "Name",

dataValueField: "Id",

placeholder: "--Select Value--",

dataSource: new kendo.data.DataSource({

schema: {

model: {

id: "RoleId"

}

},

transport: {

read: {

url: "/User/GetAllRoles",

dataType: "json"

}

})

});

}

}).data("kendoGrid");

Grid

answered on 02 Dec 2015

4 answers

110 views

Foreign Key Question part 2

Hi guys

I've tried to follow the following post on how to use Foreign Key from a datasource - something that seems not to be possible out of the box: http://d585tldpucybw.cloudfront.net/forums/foreign-key-question

When getValues is called the console.log show that it is actually populating the array: OrganisationArray - maybe this is not before loaded when the grid is created? Please give me an advice in what direction to turn :-)

Here is my code:

<!DOCTYPE html>
<html>
<head>
<style> html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } </style>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.silver.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>

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

function getValues(data, valueField, textField) {
var values = [];
for (var i = 0; i < data.length; i++) {
values.push({ text: data[i][textField], value: data[i][valueField] });
}
return values;
}

var OrganisationArray = [];

var dsOrganisation = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: { url: "http://localhost:8080/DataEntryService/Organisation" }
},
change: function () {
OrganisationArray = getValues(this.data(), "OrganisationMDXMember", "Organisationen");
//console.log(this.data().length);
console.log(OrganisationArray.length);
console.log(OrganisationArray[0]["value"]);
console.log(OrganisationArray[0]["text"]);
console.log(OrganisationArray[1]["value"]);
console.log(OrganisationArray[1]["text"]);

},
});

function organisationDropDownEditor(container, options) {
$('<input required data-text-field="Organisationen" data-value-field="OrganisationMDXMember" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "Organisationen",
dataValueField: "OrganisationMDXMember",
minLength: 1,
filter: "contains",
suggest: true,
placeholder: "Vælg organisationsenhed...",
autoBind: false,
dataSource: dsOrganisation
});
}

$(document).ready(function () {
dsOrganisation.read();
$("#grid").kendoGrid({
columns: [
{ field: "SkeyDefault", title: "Id", width: 20 },
{ field: "Userid", title: "Userid", width: 50 },
{ field: "Parameter", width: 50 },
{
field: "MDXParametervaerdi", width: 150,
editor: organisationDropDownEditor,
values: OrganisationArray
},
{ command: ["destroy"], title: " ", width: 70 }
],

pageable: { refresh: true, pageSizes: true, buttonCount: 5 },
sortable: true,
filterable: true,
groupable: false,
editable: true,

toolbar: ["create", "save", "cancel"], // "save", "cancel", "excel", "pdf"

dataSource: {
type: "odata-v4",
transport: {
read: /* GET */ { url: "http://localhost:8080/DataEntryService/ReportingServicesUserDefault" },
update: /* PUT */ { url: function (data) { return 'http://localhost:8080/DataEntryService/ReportingServicesUserDefault(' + data.SkeyDefault + ')'; } },
destroy: /* DELETE */ { url: function (data) { return 'http://localhost:8080/DataEntryService/ReportingServicesUserDefault(' + data.SkeyDefault + ')'; } },
create: /* POST */ { url: "http://localhost:8080/DataEntryService/ReportingServicesUserDefault" }
},
pageSize: 20,
schema: {
model: {
id: "SkeyDefault",
fields: {
SkeyDefault: { editable: false, type: "number" },
Userid: { editable: true, type: "string", required: true },
Parameter: { editable: false, type: "string", required: true, defaultValue: "Organisation" },
// Parametervaerdi: { editable: true, type: "string" },
MDXParametervaerdi: { editable: true, type: "string", required: true }
}
}
},
error: function (e) {
console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
}
}
});
});

</script>
</div>

</body>
</html>

Grid

answered on 02 Dec 2015