Hi
I have this annoying blue border around the Kendo TabStrip whenever it is selected.
Please see attached image.
Does anyone know how to use it please?
Thanks.
I just upgraded my kendoUI code to the latest release, and now my markers don't show up on the map. I copied the old kendoUI code back in and they show up just fine. Anybody else experiencing this? The tooltips still work fine when I mouse over a spot where the marker should be.
Here's my code
var
markerUrlFormat =
"GetMarkerData.aspx?lat={0}&lng={1}"
;
resultsMap = $(
"#resultsMap"
).kendoMap({
center: [44.367966, -100.336378],
zoom: 7,
layers: [
{
type:
"bing"
,
imagerySet:
"road"
,
key: bingMapsKey
},
{
type:
"marker"
,
dataSource: agMapResultsDataSource,
locationField:
"LocationArray"
,
tooltip: {
iframe:
true
,
content: {
url:
"GetMarkerData.aspx?lat=0&lng=0"
},
requestStart:
function
(e) {
e.options.url =
kendo.format(markerUrlFormat, e.sender.marker.dataItem.Latitude, e.sender.marker.dataItem.Longitude);
},
autoHide:
false
,
width: 350,
height: 300
},
titleField:
"StreetAddress"
}
]
}).data(
"kendoMap"
);
I get this error in my Core 2 project using the KendoUICore package version 2018.1.117. I'm using webpack to compile and bundle my javascript and css. I make sure to define a var for jquery and then import the required kendo files
var $ = require("jquery");
//js files
require('./site');
import 'kendo-ui-core';
import '@progress/kendo-ui/js/kendo.all.js'
import '@progress/kendo-ui/js/kendo.aspnetmvc.js'
//css & less
require('kendo-ui-core/css/web/kendo.common.core.less');
require('kendo-ui-core/css/web/kendo.material.less');
import '../css/site.css';
@(Html.Kendo().Upload()
.Name("files")
.HtmlAttributes(new { aria_label = "files" })
)
Interestingly enough, the jqx date picker widgets that rely on jQuery have no problem and are rendered correctly. However the Upload control does not.
When I remove the jquery variable and kendo imports and statically reference jquery FIRST and then kendo js as shown below, the Upload control displays as expected with no error, although the styling is off
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
@* Place Kendo UI scripts after jQuery *@
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
What gives? Can I not use webpack to bundle kendo and jquery?
Hi,
I have a meeting with two attendees (or more).
Moving this meeting on the timeline of one of the two attendees, also the second one is moved. This works correct, but ........ Moving this meeting from the first attendee to another, new attendee, makes the second one disappear. This happens also in the demo delivered by Kendo.
The move event (also the edit event) only gives the meetingID and the newAttendeeID. To solves this problem I also needs the originalAttendeeID to know which one is moved.
Did anyone experience this? Did you find a solution?
Please share.
Thanks,
André
Hello, i have a Kendo drop down on my form which i anticipate will need to handle large volumes of data and so i am trying to configure virtualisation, however i am struggling to understand how to configure correctly. I am new to Kendo so please excuse if this is a silly question.
My drop down will display remote data however, at the point of creating the drop down the data will have been retrieved earlier and stored in a variable. here is my drop down:
$("#newDropDown").kendoDropDownList({
filter: "contains",
dataTextField: "Value",
dataValueField: "ID",
dataSource: items,
select: onDropDownSelect,
noDataTemplate: $("#noDataTemplate").html(),
optionLabel: "Please select ..",
pageSize: 80,
serverPaging: true,
serverFiltering: true,
virtual: {
itemHeight: 26,
valueMapper: function (options) {
options.success([options.value || 0]);
}
},
});
I think where i am going wrong is my value mapper and my misunderstanding of how to configure it for my requirements. i have read the documentation and examples from https://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization, but remain unclear.
I have configured the no data template on my drop down to allow adding a new item if it does not exist on search. This is presented as a modal pop and on close of the modal window the item is created, drop down refreshed and the selected item set to the newly created data item. The line of code i have dynamically setting the selected item is:
$("#newDropDown").data("kendoDropDownList").value(NEW_ITEM_ID)
this works successfully before i added in virtual configuration. Could someone explain how my value mapper should be configured in such scenario or point me towards documentation that might help explain it better? any examples ive loked at so far the valueMapper makes a remote call- is it required to callfor data again?
Many thanks
Hi,
I have column grid call description and it has sometimes a lot of text.
I want to see only 5 rows and 3 dots.
how can I do that?
thanks
picture is attached
this is my code.
@(Html.Kendo().Grid<TaskManagementUI.Models.TaskViewModel>()
.Name("GridTasks")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
columns.Bound(c => c.Name).Title("Name");
columns.Bound(c => c.DevelopersDataSource).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers")
.Filterable(f => f.UI("developersMultiFilter").Extra(false).Messages(m => m.Info("Show items contain these developers"))).Sortable(false);
columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate(" <div style='width:94px; height:94px;'><canvas id='taskChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>").EditorTemplateName("PercentCompletedEditor");
columns.Bound(c => c.Description).Title("Description");
columns.Command(command => command.Custom("endTask").Click("endTask").Text("End Task"));
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
})
.Scrollable()
.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("TaskEdit"))
.Groupable(g => g.Enabled(false))
.Filterable()
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar" style="float:left">
<a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
<span class="k-icon k-i-add"></span> ADD TASK
</a>
<a class="k-button k-grid-excel k-button-icontext" href="#">
<span class="k-icon k-i-excel"></span>Export to Excel
</a>
</div>
</text>);
})
.Excel(excel => excel
.AllPages(true)
.FileName("Tasks.xlsx")
.Filterable(true)
.ForceProxy(true)
.ProxyURL(Url.Action("FileExportSave", "Home")))
.Pageable(pager => pager
.Refresh(true)
.PageSizes(true)
.PageSizes(new int[] { 6, 15, 20 })
.ButtonCount(5))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn)
.Enabled(true);
})
.Events(events => events.FilterMenuOpen("onFilterMenuOpen").FilterMenuInit("filterMenuInitTask").DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation").Edit("onTaskEdit").Save("onTaskSave").ExcelExport("exportTasks"))
.DataSource(dataSource => dataSource
.Ajax()
.Group(group => group.Add(p => p.ProjectName))
.PageSize(20)
.Events(events => events.Error("errorHandlerTask"))
.Read(read => read.Action("GetSavedTasks", "Task").Data("additionalData"))
.Update(update => update.Action("UpdateTask", "Task").Data("serialize"))
.Destroy(update => update.Action("DeleteTask", "Task").Data("serialize"))
.Model(model => model.Id(item => item.ID))))
The last column of my grid contains some custom buttons. The grid itself is built using a row template. When I export to PDF, I need to hide the last column. I followed the instruction on how to use the PdfExport event to hide the column and then re-display it on the promise.done, but couldn't get it to hide the column on the PDF. To see where I was going wrong, I added the code snippet below to the Basic usage example for the Grid and it worked as expected. However, when I modified the Row template example for the Grid, it didn't hide the column on the PDF.
toolbar: ["pdf"],
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
scale: 0.8
},
pdfExport: function(e) {
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(0);
e.promise.done(function() {
grid.showColumn(0);
});
},
I was wondering if this functionality (i.e. hide column on Pdf Export) is not supported with row templates, or if I'm just doing something stupid (more than likely the case)?
Thanks, Gregg