I am trying to use the Kendo autocomplete component and I keep getting this grey bar that obscures part of the answer when it is selected.
Does anyone know who to fix this issue?
See my code below:
<link href="~/Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Scripts/Kendo/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/Kendo/js/kendo.ui.core.min.js"></script>
<script src="~/Scripts/Kendo/js/kendo.combobox.min.js"></script>
<div class="k-content">
<input id="siteItem" placeholder="Select site..." style="width:100%" />
$.getJSON("/FormReport/GetSites/" + org + "/" + e.dataItem.Value,
function (data) {
$("#siteItem").kendoComboBox({
autoWidth: true,
dataTextField: "Text",
dataValueField: "Value",
dataSource: data,
filter: "contains",
suggest: true
});
});
The fix to remove the issue was style="min-width=100%". The textbox started off on page load with no data attached to it and therefore wasn't actually using the correct width. When data was added later, it doesn't recompensate to the correct width. Using min-width makes the textbox draw correctly before data gets attached dynamically and therefore removes the phantom grey box (which I believe is the X or clear button).
Related
Using Kendo UI JQuery Editor control, How I can write html document as a template with predefined fields that get data from database ?
For example if user typed Name:[fname] [lname]
It get replaced with first and last name data from database. I use PHP.
The Editor provides reference to the HTML element which represents the editor's content area. You can therefore set the content of the DOM elements in the Editor's content:
<input id="ddl" />
<textarea id="editor" rows="10" cols="30" style="width:100%; height:450px" aria-label="editor">
<div >
<div>Hello <span id="fname" contenteditable="true">___</span>,</div>
</br>
<div>your email is: <span contenteditable="true" id="email">___</span></div>
</div>
</textarea>
<script>
$(document).ready(function () {
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
//make the editor content non-editable and only some elements editable by setting the contenteditable attribute for the desired elements
var editor = $("#editor").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", false)
$("#ddl").kendoDropDownList({
optionLabel:"--Select user--",
dataTextField:"user",
dataValueField:"id",
dataSource:[
{id:1, user: "John", fname:"John",lname:"Doe",email:"john#email.com"},
{id:2, user: "Jane", fname:"Jane",lname:"Smith",email:"jane#email.com"}
],
change:function(e){
var item = e.sender.dataItem();
editorBody.find("#fname").text(item.fname);
editorBody.find("#email").text(item.email);
}
})
});
</script>
Here is an example
I want to display name and id filed in kendo treeview. the below one is not working
$("#trainingtreelist").kendoTreeView({
dataTextField:"name"+"id",
dataSource: data
});
I have prepared a simple dojo for you showing you how to template the items being displayed in the treeview.
https://dojo.telerik.com/IsUZewoX
the important thing to look at here is the config of the treeview:
$("#treeview").kendoTreeView({
template: kendo.template($("#treeview-template").html()),
dataSource: ...remove for brevity
});
then using the template outlined here:
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text # <span style="border:1px solid black; margin:3px;padding:10px; font-weight:bold; "> #:item.id#</span>
# if (!item.items) { #
<a class='k-icon k-i-close-outline' href='\#'></a>
# } #
</script>
we can restyle the items how we like. I have simply taken the demo templating example from: https://demos.telerik.com/kendo-ui/treeview/templates and added the id and styled that so it is noticeable (contained in the bordered box).
I have a kendo ui template with a datepicker control
<script type="text/x-kendo-template" id="tmplStep1">
<form>
Date: <input id="datepicker" maxlength="10"/>
<i>(mm/dd/yyyy)</i><br />
</form>
</script>
I'm using a Windows Popup to display the template in this way
var detailsTemplate = kendo.template($("#tmplStep1").html());
dataItem = this.dataItem(e);
var wnd = $("#winDate")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
width: 100,
appendTo: "form#frm"
}).data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
I know, I need to initialize the datepicker, but I don't know how to do it. I put the below instruction outside of the template, but obviously it is not working, the control displayed is a simple textbox.
<script>
$("#datepicker").kendoDatePicker();
</script>
Does anyone know how to resolve it?
call $("#datepicker").kendoDatePicker(); right after you set template as window content, because before that temlate is not a part of DOM yet:
...
wnd.content(detailsTemplate(dataItem));
$("#datepicker").kendoDatePicker();
wnd.center().open();
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>