Questions on Kendo UI for jQuery Forum

4 answers

112 views

[Solved] Set an event to display after every 3 days.

Hello i wanted to know if there is a way to display an event after every 3 days.

http://dojo.telerik.com/EWIBo/3

In the above example i have few events and i wanted to display those events continuously for every 3 days irrespective of date.

Scheduler

answered on 27 Jul 2016

15 answers

1.6K+ views

Spreadsheet issues

Hi there,

First off, I wanted to say that I really like this new component. However, I've been having a couple of issues with it and was wondering if I was doing something wrong or if those features were not implemented yet as the component is still in beta.

I cannot get the component to work at all when importing it using require.js. It loads all the listed dependencies but when I instantiate it, I get an error in the console saying "s is not a function". If I import kendo.all.min.js instead the component works without any issues but greatly increases load time.

Is it possible to localize the component? I've tried looking into kendo.ui.Spreadsheet.prototype.options.messages but unlike many other components, there is no messages object in the options.

Finally, Is it possible to dynamically resize the component? I know you can set the size before you instantiate by setting a width on the div that will become the spreadsheet however any resizing operation done afterwards breaks the layout.

Thank you

Spreadsheet

answered on 27 Jul 2016

1 answer

151 views

Angular Scope Binding Support in Toolbar Template

I would like to use angular bindings in the toolbar template in the Gantt chart which does not seem to work. Please see dojo for example: http://dojo.telerik.com/ILiyu

The particular point of interest is:

$scope.foo = " [foo from scope] ";

$scope.ganttOptions = {
toolbar: [
{
template: "{{ foo }}"
}
]
};

Thanks

Gantt

answered on 27 Jul 2016

2 answers

926 views

Grid Grouping - Null vs Empty String

We noticed that when grouping on columns that sometimes have a null and sometimes have an empty string, it will create two different groupings.

I tried to update the ViewModel in MVC so the property always returns an empty string:

public class SampleViewModel
{
    private string _name;

    [StringLength(50)]
    public string Name
    {
        get { return _name ?? string.Empty; }
        set { _name= value; }
    }
}

That still produces two different groupings.

How can I get the grid to group these the same way?

Grid

answered on 26 Jul 2016

3 answers

431 views

Multiple Kendo Modal Windows causes body to scroll automatically

Hello, I had this issue when you have two kendo windows open and the document has a scrollbar. When closing a modal window while another modal is on the background, the body somehow automatically scrolls up.

Here is a sample code

http://dojo.telerik.com/IHOvI

To replicate:

- Open Window1

- Scroll the body to the middle

- Open Window 2

- Close Window 2

Window

answered on 26 Jul 2016

3 answers

484 views

DropDownList in nested grid

Hi,

I'm looking for advice on how to add a dropdownlist to the following grid structure

Here's the main grid/razor page

@using Intranet.Models.Kendo

<h2>Manage Eliminations</h2>

@(Html.Kendo().Grid<KendoFullElimination>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.Id).Title("Elimination Id");

columns.Bound(c => c.Date).Title("Date To Process");

columns.Command(command =>

{

command.Destroy();

command.Edit();

}).Width(250);

})

.HtmlAttributes(new { style = "height: 550px;" })

.Scrollable()

.Sortable()

.Groupable()

.Filterable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("eliminationTemplate").DisplayDeleteConfirmation(true).Window(w => w.Title("Elimination Details").Name("editWindow").HtmlAttributes(new { @style = "width:700px;" })))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(25)

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

.Model(model =>

{

model.Id(p => p.Id);

model.Field(x => x.Id).Editable(false);

model.Field(x => x.Date).Editable(false);

})

.Create(update => update.Action("Eliminations_Create", "Elimination"))

.Read(read => read.Action("Eliminations_Read", "Elimination"))

.Update(update => update.Action("Eliminations_Update", "Elimination"))

.Destroy(update => update.Action("Eliminations_Delete", "Elimination"))

)

);

<script type="text/javascript">

$(document).ready(function () {

});

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

function filterVarieties() {

return {

fruitId: $("#FruitId").val()

};

}

function filterBlocks() {

return {

growerId: $("#GrowerId").val()

};

}

function filterBlocks() {

return {

growerId: $("#GrowerId").val()

};

}

</script>

Here's the secondary grid, which as you can see is a template that's loaded in a popup when insert/updating the main grid

@using Intranet.Models.Kendo

@model Intranet.Models.Kendo.KendoFullElimination

<div id="eliminationsEditForm">

<h3>Elimination Edit Form</h3>

<div>

@Html.LabelFor(model => model.Date)

@(Html.Kendo().DatePicker()

.Name("Date")

.HtmlAttributes(new { style = "width: 100%" })

)

</div>

<label for="FieldForemanId">Select the Field Foreman</label>

@(Html.Kendo().DropDownList()

.Name("FieldForemanId") //The name of the DropDownList is mandatory. It specifies the "id" attribute of the widget.

.DataTextField("DisplayName") //Specify which property of the Product to be used by the DropDownList as a text.

.DataValueField("Id") //Specify which property of the Product to be used by the DropDownList as a value.

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetFieldForemanDropdown", "Elimination"); //Set the Action and Controller names.

})

.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.

}) //Pass the list of Products to the DropDownList.

)

<label for="GrowerId">Select the Grower</label>

@(Html.Kendo().DropDownList()

.Name("GrowerId") //The name of the DropDownList is mandatory. It specifies the "id" attribute of the widget.

.DataTextField("DisplayName") //Specify which property of the Product to be used by the DropDownList as a text.

.DataValueField("Id") //Specify which property of the Product to be used by the DropDownList as a value.

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetGrowerDropdown", "Elimination"); //Set the Action and Controller names.

})

.ServerFiltering(false); //If true, the DataSource will not filter the data on the client.

}) //Pass the list of Products to the DropDownList.

)

<label for="BlockId">Select the Block</label>

@(Html.Kendo().DropDownList()

.Name("BlockId")

.DataTextField("DisplayName")

.DataValueField("Id")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetBlockDropdown", "Elimination")

.Data("filterBlocks");

})

.ServerFiltering(false);

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("GrowerId")

.Value("")

.HtmlAttributes(new { style = "width: 100%" })

)

<label for="Fruit">Select the Fruit</label>

@(Html.Kendo().DropDownList()

.Name("FruitId") //The name of the DropDownList is mandatory. It specifies the "id" attribute of the widget.

.DataTextField("DisplayName") //Specify which property of the Product to be used by the DropDownList as a text.

.DataValueField("Id") //Specify which property of the Product to be used by the DropDownList as a value.

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetFruitDropdown", "Elimination"); //Set the Action and Controller names.

})

.ServerFiltering(false); //If true, the DataSource will not filter the data on the client.

}) //Pass the list of Products to the DropDownList.

)

<label for="FruitId">Select the Variety</label>

@(Html.Kendo().DropDownList()

.Name("VarietyId")

.DataTextField("DisplayName")

.DataValueField("Id")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetVarietyDropdown", "Elimination")

.Data("filterVarieties");

})

.ServerFiltering(true);

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("FruitId")

.HtmlAttributes(new { style = "width: 100%" })

)

<div>

@Html.LabelFor(model => model.HasChlorineApplied)

@Html.CheckBoxFor(model => model.HasChlorineApplied)

</div>

<div>

@Html.LabelFor(model => model.HasPolyWaxApplied)

@Html.CheckBoxFor(model => model.HasPolyWaxApplied)

</div>

<div>

@Html.LabelFor(model => model.HasExportWaxApplied)

@Html.CheckBoxFor(model => model.HasExportWaxApplied)

</div>

<div>

@Html.LabelFor(model => model.HasFruitCleanerApplied)

@Html.CheckBoxFor(model => model.HasFruitCleanerApplied)

</div>

<div>

@Html.LabelFor(model => model.IsPresureWashed)

@Html.CheckBoxFor(model => model.IsPresureWashed)

</div>

<div>

@Html.LabelFor(model => model.IsSmudgeOff)

@Html.CheckBoxFor(model => model.IsSmudgeOff)

</div>

<div>

@Html.LabelFor(model => model.HasSopp2Applied)

@Html.CheckBoxFor(model => model.HasSopp2Applied)

</div>

<div>

@Html.LabelFor(model => model.Comments)

</div>

<div>

<label for="ticketNumbers">Select the ticket numbers related to this elimination</label>

@(Html.Kendo().MultiSelect()

.Name("ticketNumbers") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.

.DataTextField("DisplayName") //Specify which property of the Product to be used by the MultiSelect as a text.

.DataValueField("ID") //Specify which property of the Product to be used by the MultiSelect as a value.

.Filter(FilterType.Contains)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetTicketsMultiSelect", "Elimination"); //Set the Action and Controller names.

})

.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.

})

)

</div>

<div>

<label for="RecordedCaretakingIssues">Caretaking Issues</label>

@(Html.Kendo().Grid<KendoRecordedCaretakingIssue>()

.Name("recordedCaretakingIssuesGrid")

.Columns(columns =>

{

columns.Bound(c => c.IssueCaretaking).Title("Caretaking Issue").Width(150);

columns.Bound(c => c.Percentage).Title("Percentage").Width(150);

columns.Command(command =>

{

command.Destroy();

command.Edit();

}).Width(250);

})

.DataSource(ds => ds.Ajax()

.Read(r => r.Action("GetRecordedCareTakingIssuesForElimination", "Elimination", new { eliminationId = "#=Id#" }))

.Create(c => c.Action("CreateRecordedCareTakingIssuesForElimination", "Elimination"))

.Update(u => u.Action("ChangeRecordedCareTakingIssuesForElimination", "Elimination"))

.Destroy(d => d.Action("DeleteRecordedCareTakingIssuesForElimination", "Elimination"))

.Model(m => {

m.Id(l => l.IssueCaretaking.Id);

})

)

.ToolBar(tb => tb.Create())

.Scrollable()

.Sortable()

.Editable()

.ToClientTemplate()

)

</div>

<div>

@Html.LabelFor(model => model.Comments)

@Html.TextAreaFor(model => model.Comments, new {style = "width: 700px; height:200px;"})

</div>

Here's the template I was hoping would load

@(Html.Kendo().DropDownListFor(x => x)

.Name("IssueCaretaking")

.DataTextField("DisplayName")

.DataValueField("Id")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCaretakingIssueDropdown", "Elimination"); //Set the Action and Controller names.

})

.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.

})

.SelectedIndex(0)

)

But...the grid loads okay (I haven't tested update and getting the ID from the elimination object yet). When I attempt to add a KendoRecordedCaretakingIssue, the percentage loads but the dropdown does not.

Here's the model, not sure if it matters or not

using System;

using System.Collections.Generic;

using System.ComponentModel;

namespace Intranet.Models.Kendo

{

public class KendoFullElimination

{

public int Id { get; set; }

[DisplayName("Elimination Recording Date")]

public DateTime Date { get; set; }

[DisplayName("Has Chlorine Been Applied?")]

public bool HasChlorineApplied { get; set; }

[DisplayName("Has Poly Wax Been Applied?")]

public bool HasPolyWaxApplied { get; set; }

[DisplayName("Has Export Wax Been Applied?")]

public bool HasExportWaxApplied { get; set; }

[DisplayName("Has Fruit Cleaner Been Applied?")]

public bool HasFruitCleanerApplied { get; set; }

[DisplayName("Is This Pressure Washed?")]

public bool IsPresureWashed { get; set; }

[DisplayName("Is This Treated with Smudge Off?")]

public bool IsSmudgeOff { get; set; }

[DisplayName("Has Sopp2 Been Applied?")]

public bool HasSopp2Applied { get; set; }

[DisplayName("Please leave any comments")]

public string Comments { get; set; }

[DisplayName("Field Foreman")]

public int FieldForemanId { get; set; }

[DisplayName("Grower")]

public int GrowerId { get; set; }

[DisplayName("Block")]

public int BlockId { get; set; }

[DisplayName("Fruit")]

public int FruitId { get; set; }

[DisplayName("Variety")]

public int VarietyId { get; set; }

[DisplayName("Tickets")]

public IEnumerable<int> TicketNumbers { get; set; }

public IEnumerable<KendoRecordedCaretakingIssue> RecordedCaretakingIssues { get; set; }

}

using System.ComponentModel.DataAnnotations;

namespace Intranet.Models.Kendo

{

public class KendoRecordedCaretakingIssue

{

[UIHint("IssueCaretaking")]

public KendoIssueCaretaking IssueCaretaking { get; set; }

public int Percentage { get; set; }

}

DropDownList

answered on 26 Jul 2016

16 answers

1.3K+ views

Min/Max bindings for DatePicker and TimePicker

Is it possible to bind the Min & max settings for a time and date picker from a model? So if I have a StartDate and EndDate property I can make sure that startdate is always before the enddate and vise versa?

MVVM

answered on 26 Jul 2016

1 answer

110 views

Group not returning data

Thank you in advance for any feedback!

I got a table with a template binding, and I am using this table as a grid.

I would like to be able to group the data, but when dragging column to group no data is being returned.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />

<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />

<link rel="stylesheet" href="css/FHFAFlexApp.css" />

<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>

<script type="text/javascript" src="__vti_fhfa/environment.js"></script>
<script type="text/javascript" src="scripts/FHFA/FHFAGlobals.js"></script>
<script type="text/javascript" src="scripts/FHFA/fhfa.vm.js"></script>
<script type="text/javascript" src="scripts/auditObjects.js"></script>
<script type="text/javascript" src="scripts/VM/auditVM.js"></script>
<script type="text/javascript" src="scripts/FHFA/fhfa.object.js"></script>

<script type="text/javascript" src="scripts/Elements/splitterObj.js"></script>
<script type="text/javascript" src="scripts/Elements/DragObj.js"></script>
<script type="text/javascript" src="scripts/webServiceCalls.js"></script>
<script type="text/javascript" src="scripts/workflowGlobals.js"></script>
<script type="text/javascript" src="scripts/default.js"></script>
</head>
<body>
<div id="app-main">
<div id="vertical">
<div>
<header>
Audit Logs
<div class="app-version">v. <span data-bind="text: appVersion"></span></div>
</header>
</div>
<div id="middlePane" style="width: 100%">
<div id="horizontal" style="height: 100%; width: 100%">
<div>
<div id="left-pane">
<p>
Inner splitter :: left pane
</p>
</div>
</div>
<div>
<div class="vertical" style="height: 100%; width: 100%">
<div id="center-top">
<div class="pane-content">
<div>
<table id="grid" class="app-list" cellpadding="0" cellspacing="0" style="width:100%">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr id="columns">
<th class="nowrap, column" ><a id="col1" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditTypeID">Type</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDate">Date</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="applicationName">Application</a></th>
<th class="nowrap, column" ><a id="col4" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditUser">User</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="iPAddress">IP Address</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDescription">Description</a></th>
</tr>
</thead>
<tbody data-bind="source: audit.items" data-template="loglist-row-template"></tbody>
</table>
<div data-bind="visible: audit.hasNone" class="app-noitems">There are no items to display.</div>
<script id="loglist-row-template" type="text/x-kendo-template">
<tr class="app-list-row app-list-hoverEnabled">
<td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
<td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
<td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
<td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
<td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
<td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
</tr>
</script>
</div>
</div>
</div>
<div id="center-bottom">
<div class="pane-content">
<table style="width: 100%">
<tr>
<th class="vHeading">AuditID:</th>
<td class="app-list-cell"><span data-bind="text: auditID"></span></td>
</tr>
<tr>
<th class="vHeading">Type:</th>
<td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
</tr>
<tr>
<th class="vHeading">Date:</th>
<td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
</tr>
<tr>
<th class="vHeading">Application:</th>
<td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
</tr>
<tr>
<th class="vHeading">User:</th>
<td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
</tr>
<tr>
<th class="vHeading">IP Address:</th>
<td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
</tr>
<tr>
<th class="vHeading">Description:</th>
<td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
</tr>
<tr>
<th class="vHeading">AdditionalInfo:</th>
<td class="app-list-cell"><span data-bind="text: auditID"></span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<p>
Outer splitter : bottom pane (non-resizable, non-collapsible)
</p>
</div>
</div>

<script>
$(document).ready(function() {

splitterObj(); // split Web Page in sections

$("#grid").kendoGrid({
groupable: true,
reorderable: true,
sortable: true,
columns: [{
field: "auditTypeID",
title: "Type"
},
{
field: "auditDate",
title: "Date",
},
{
field: "applicationName",
title: "Application",

},
{
field: "auditUser",
title: "User"
},
{
field: "iPAddress",
title: "IP Address"
},
{
field: "auditDescription",
title: "Description"
}]
});

//var cols = document.querySelectorAll('#columns .column');
//[].forEach.call(cols, function (col) {
// col.addEventListener('dragstart', handleDragStart, false);
// col.addEventListener('dragenter', handleDragEnter, false);
// col.addEventListener('dragover', handleDragOver, false);
// col.addEventListener('dragleave', handleDragLeave, false);
// col.addEventListener('drop', handleDrop, false);
// col.addEventListener('dragend', handleDragEnd, false);
//});

//var dropTg = document.querySelectorAll('.group');

//dropAreaFn(dropTg);

});
</script>

<style>
#vertical {
height: 100%;
margin: 0 auto;
}

#middle-pane {
background-color: rgba(60, 70, 80, 0.10);
}

#bottom-pane {
background-color: rgba(60, 70, 80, 0.15);
}

#left-pane, #center-pane, #right-pane {
background-color: rgba(60, 70, 80, 0.05);
}

.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>

</html>

Grid

answered on 26 Jul 2016

2 answers

586 views

angularjs treeview how to expand all nodes after tree has loaded?

Hello,

I have an angularjs treeview loaded from pre-set data. I need to expand the complete tree once it has finished loaded. For that I put in my controller a function

OnDatabound which gets executed just after the tree has been loaded; I am trying to get a reference to the treeview as shown below but I get an error:

in Html ...

<div kendo-tree-view="treeview" k-options="treeOptions"

in controller ....

$scope.OnDatabound = function(args){

var treeview = args.sender;

treeview.data("kendoTreeView").expand('.k-item'); /* expand all nodes */ <<<<<< error: TypeError : treeview.data is not a function
};

$scope.treeOptions = {

dataTextField: "Name",
dataSource : $scope.FormatAndLoadMyData(theData, "Id", "parentId", 0) ,
dataBound: $scope.OnDatabound
};

How do I get a reference to the treeview ? .. or .. how can I expand all nodes?

Thanks.

TreeView

answered on 26 Jul 2016

2 answers

97 views

Auto navigate the side root

Hi there,

I've tailored the splitview demo on the Kendo UI demo site.

Prior to the splitview view displaying, I have an initial view asking for some information including what default category the user is interested in.

I'm looking for a solution where I can automatically navigate the user to their selected category. I.e. #side-inbox?CategoryID=15

This is effectively mimicking the user navigating to the split view and clicking on category 15. I will still give them a facility to go "back" so they can look at the contents of other categories.

I've done the easy bit of navigating to the splitview using app.navigate("#splitview"); but I'm struggling to fire the default category.

See extract of categories view on left side of the splitview:

<div data-role="view" data-title="Categories" id="side-root" data-use-native-scrolling="true">
<ul data-role="listview" data-style="inset" data-source="splitViewCategories" data-template="categoriesTemplate">
</ul>
</div>

<script id="categoriesTemplate" type="text/x-kendo-template">
<a href="\#side-inbox?CategoryID=#: CategoryID#" data-icon="mostviewed"><span class="daysfont">#: CategoryName #</span></a>
</script>

Appreciate any help,

Thanks

SplitView

answered on 26 Jul 2016