Questions on Kendo UI for jQuery Forum

14 answers

213 views

Grid in Cordova Application: All rows in a single Line

Hi,

I try to use a Kendo UI Grid in a Cordova application. If I open the HTML file in browser it looks good. If I open the Cordova application the header and the footer of the Grid looks good too, but the body looks like all the values of the rows and columns are in a single line.

My HTML Code looks like this:

<kendo-grid options="mainGridOptions"></kendo-grid>

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

<tr data-uid="#: uid #">

<td><span>#: FirstName #</span></td>

<td><span>#: LastName #</span></td>

<td><span>#: Country #</span></td>

<td><span>#: City #</span></td>

</tr>

</script>

With regards,

Johann

Grid

answered on 03 Dec 2015

1 answer

81 views

RadSheduler for JS only?

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

82 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

309 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

130 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

368 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

295 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

939 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

239 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

649 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