I am using Kendo UI v2018.1.221 in my page, whenever I click the dropdown to open it just opens and showing options and closes suddently before I make a selection. It uses serverfiltering as well.
I googled this a lot, but not finding any solutions for this.
sample code:
<table>
<TR>
<TD ALIGN="left" >Company:</TD>
<TD ALIGN="left" >
<select class="form-control" style="width: 80%" name="teamID" id="company">
</select>
</TD>
</TR>
<script>
var dropdown = $("#company").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
filter: 'contains',
optionLabel: 'Select a Company',
enable: true,
scrollable: {
virtual: true
},
virtual: {
itemHeight: 26
},
dataSource: {
type: "odata",
transport: {
read: {
dataType: "json",
url: "#url#"
}
},
batch: true,
pageSize: 80,
serverPaging: true,
serverFiltering: true,
schema: {
data: "data",
total: 'recordsTotal',
model: {
id: 'teamid',
fields: {
id: {
type: 'number'
},
name: {
type: 'string'
}
}
}
}
}
}).data("kendoDropDownList");
</script>
You need to take the focus away from the modal. You could do this on the open event.
open: function(e) {
$(document).off('focusin.bs.modal');
}
This seems to be a problem with the filter. Removing the filter fixed the problem for me.
var dropdown = $("#company").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
// filter: 'contains',
optionLabel: 'Select a Company',
enable: true,
...
Related
I am using KTDatatable. it works like a charm in desktop view. but when I view the table on the mobile screen, only first two-column is being shown. Code:
<div class="kt-datatable"></div>
<script>
function listing(){
$('.kt-datatable').KTDatatable({
translate: {
records: {
processing: '{{"Please wait"|__}}...',
noRecords: '{{"No records found"|__}}'
},
toolbar: {
pagination: {
items: {
default: {
first: '{{"First"|__}}',
prev: '{{"Previous"|__}}',
next: '{{"Next"|__}}',
last: '{{"Last"|__}}',
more: '{{"More pages"|__}}',
input: '{{"Page number"|__}}',
select: '{{"Select page size"|__}}'
},
info: "{{"Displaying"|__}} {{ '{{' }}start{{ '}}' }} - {{ '{{' }}end{{ '}}' }} {{"of"|__}} {{total}} {{"records"|__}}"
}
}
}
},
// layout definition
layout: {
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
search: {
input: $('#generalSearch'),
delay: 400,
},
data: {
type: 'remote',
source: {
read: {
url: '{{url("api/dashboardpayments")}}'
},
},
pageSize: 10, // display 20 records per page
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
// columns definition
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100
},
{
field: "amount",
title: "{{'Amount'|__}}",
sortable: false,
width: 'auto',
},
{
field: "trxId",
title: "{{'trxId'|__}}",
sortable: false,
width: 'auto'
},
{
field: "for",
title: "{{'Service'|__}}",
sortable: false,
width: 'auto'
},
{
field: "created_at_date",
title: "{{'Date'|__}}",
sortable: false,
width: 'auto',
},
{
field: "Actions",
width: 100,
title: "{{'Actions'|__}}",
sortable: false,
overflow: 'visible',
template: function (data) {
var output = '' +
'<div class="btn-group btn-group">'+
'<a href="javascript:;" data-id='+data.id+' class="btn btn-brand btn-sm btn-icon confirmPayment" data-skin="dark" data-toggle="kt-tooltip" data-placement="top" title="{{"OK"|__}}"><i class="fa fa-check"></i></button>';
'</div>';
return output;
},
}
]
});
$('body').tooltip({selector: '[data-toggle="kt-tooltip"]'});
}
</script>
I am trying a lot of possible ways of custom CSS. But no luck. Any idea?
To make this work you can add the following:
rows: {
autoHide: false
},
AND
// layout definition
layout: {
scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
header: true,
},
I just put autoHide:false in a column definition. i.e:
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100,
autoHide: false
}
]
Has anyone add the kendoUpload control with in the kendo grid? I would like to add it so I dont have to build an extra panel to store the controls?
Would I add it as a template?
if (!kendoGrid) {
$("#kgridDocuments").kendoGrid({
scrollable: false,
toolbar: ["search", "create","save", "cancel"],
],
noRecords: {
template: "No Result Found."
},
});
}
var kendoUpload = $("#uploadMeetingDocument").data("kendoUpload");
if (!kendoUpload) {
$("#uploadMeetingDocument").kendoUpload();
}
Uploaded code
var uploadInput = '<form method="post" action="#"><div><input name="upload" type="file" /></div></form>';
if (!kendoGrid) {
$("#kgridDocuments").kendoGrid({
scrollable: false,
toolbar: ["search", "create", "save", "cancel"],
dataBound: function (e) {
$("input[type='file']").kendoUpload();
},
columns: [
{
template: "#= uploadInput #",
title: "File Upload"
},
{
field: "FileType",
title: "File Type"
}
],
noRecords: {
template: "No Result Found."
},
});
}
Yes, you can add an upload component inside the grid. Use the column template to create the input tag and the dataBound function to initialize the kendoUpload component. Here is an example may help you.
<table id="grid" style="width: 100%"></table>
<script type="text/javascript">
var uploadInput = '<form method="post" action="#"><div><input name="upload" type="file" /></div></form>';
$("#grid").kendoGrid({
dataSource: yourDataSource,
dataBound: function(e) {
$("input[type='file']").kendoUpload();
},
columns: [
{
field: "Id",
title: "Id",
filterable: false
},
{
field: "StatusText",
title: "StatusText"
},
{
title: "Upload",
filterable: false,
sortable: false,
template: "#= uploadInput #"
}
]
});
</script>
I am having problem getting the Kendo Grid to work correctly. I am using ASP.NET WebAPI to fetch data from SQL Server and display it in the grid. Use the Kendo Grid to do Updates and Deletes.
POST: While debugging I noticed that a NULL object in IE but Chrome gets a valid data.
which I am passing to update the DB.
IE versions 10 and 11. There are no JS errors but the object is NULL on the WEB API.
WEBAPI - GET Works (IE and Chrome),
POST/DELETE does not work in IE (Works in Chrome)
#model dynamic
#{
ViewBag.Title = "FunctionalGroup";
}
<div class=".col-xs-12 .col-sm-6 .col-lg-8">
<div class="well well-sm">
<h2>Functional Groups - Management</h2>
<p>Create, Update and Delete Functional Groups</p>
</div>
<div class="row">
<div class="well well-sm">
<div style="overflow-x: auto" id="FunctionalGroupGrid"></div>
<div id="window"></div>
</div>
</div>
<div>
<button data-role="button" data-icon="cancel"></button>
</div>
</div>
#section Scripts{
<script type="text/x-kendo-template" id="windowTemplate">
<p>Delete <strong>#= FunctionalGroupName #</strong> ? </p>
<p>#= FunctionalGroupDescription # </p>
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script>
var windowTemplate = kendo.template($("#windowTemplate").html());
var window = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
modal: true,
resizable: false,
width: "400px",
height: "200px",
}).data("kendoWindow");
var LookupFunctionalGroupType = new kendo.data.DataSource({
transport: {
read: "/api/FunctionalGroupType",
datatype : "json"
}
});
function getfunctionalGroupType(functionalGroupTypeID) {
for (var idx = 0, length = LookupFunctionalGroupType.length; idx < length; idx++) {
if (LookupFunctionalGroupType[idx].FunctionalGroupTypeID === functionalGroupTypeID) {
return LookupFunctionalGroupType[idx].FunctionalGroupTypeName;
}
}
}
function functionalGroupTypeDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "FunctionalGroupTypeName",
dataValueField: "FunctionalGroupTypeID",
dataSource: LookupFunctionalGroupType
}).appendTo(container);
}
$(function () {
var baseUrl = "/api/FunctionalGroup";
var datatype = "json";
var contentType = "application/json";
var datasourceFG = new kendo.data.DataSource({
serverPaging: true,
pageSize: 10,
autoSync: false,
batch: true,
transport: {
read: {
url: baseUrl,
dataType: datatype,
contentType: contentType
},
create: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "POST"
},
update: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "PUT"
},
destroy: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "DELETE"
}
, parameterMap: function (data, operation) {
if (operation !== "read" && data.models) {
return kendo.stringify(data.models);
}
else {
return {
take: data.take,
skip: data.skip,
pageSize: data.pageSize,
page:data.page
}
}
},
},
schema: {
data: "Data.$values",
total: "RecordCount",
model: {
id: "FunctionalGroupID",
fields: {
FunctionalGroupID: { editable: false, type: "number" },
FunctionalGroupName: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupDescription: { editable: true, nullable: false, validation: { required: true } },
FunctionalGroupTypeID: { field: "FunctionalGroupTypeID", type: "number", defaultValue: 101 },
IsActive: { editable: true, nullable: false, type: "boolean" },
CreatedBy: { editable: false, nullable: false, validation: { required: true } },
CreatedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" },
ModifiedBy: { editable: false},
ModifiedDateTime: { editable: false, type: "date", format: "{0:MM/dd/yyyy HH:mm:ss}" }
}
},
}
});
$("#FunctionalGroupGrid").kendoGrid({
dataSource: datasourceFG,
navigatable: true,
autoBind: false,
pageable: true,
resizable: true,
reorderable: true,
editable: kendo.support.mobileOS ? "popup":true,
groupable: true,
filterable: true,
sortable:true,
columnMenu: true,
selectable: "row",
mobile: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "FunctionalGroupID", width: 50, title: "ID", hidden: true },
{ field: "FunctionalGroupName", width: 150, title: "Functional Group" },
{ field: "FunctionalGroupDescription", width: 200, title: "Description" },
{
field: "FunctionalGroupTypeID", width: 180, title: "Functional Group Type"
, template: '#=getfunctionalGroupType(FunctionalGroupTypeID)#'
, editor: functionalGroupTypeDropDownEditor, filterable:false
},
{
field: "IsActive", width: 80, title: "Is Active",
template: '<input type="checkbox" #= IsActive ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "CreatedBy", width: 100, title: "Created By", hidden: true },
{ field: "CreatedDateTime", width: 100, title: "Created DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{ field: "ModifiedBy", width: 100, title: "ModifiedBy", hidden: true },
{ field: "ModifiedDateTime", width: 100, title: "Modified DateTime", format: "{0:MM/dd/yyyy}", hidden: true },
{
title: "Actions",
command: [
{
name: "destroy",
text: "Delete",
click: function (e) { //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.open().center();
$("#yesButton").click(function () {
grid.dataSource.remove(data) //prepare a "destroy" request
//grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function () {
window.close();
})
}
}
]
}
]
});
LookupFunctionalGroupType.fetch(function () {
LookupFunctionalGroupType = this.data(); //First fetch the Lookup data
datasourceFG.read(); // This will bind to the grid.
});
});
</script>
Which versoin of IE are you running? Are you seeing JS error in IE?
I see in your secript
},
}
You might want to remove "," if there are no elements following it in the list
I need to populate Kendo drop-down box automatically from the following JSON:
var products=
[
{
id: 1,
title: "Item-1",
active: true
},
{
id: 2,
title: "Item-2",
active: false
}
];
So I use the following code to do this, which works fine:
$("#productList").kendoDropDownList({
dataSource: products,
dataTextField: "title",
dataValueField: "id"
});
The problem is, I want to see only items for which 'active' is true.
How to implement that with Kendo?
Sample Jsfiddle
For Filter, can only be filter on dataSoruce that why creating kendo.data.DataSource and apply filter in filter section.
filter:{fieled:"active",operator:"eq",value:true}
HTML
<div>
<input id="productList" style="width:250px"/>
</div>
Javascript
var products=
[
{
id: 1,
title: "Item-1",
active: true
},
{
id: 2,
title: "Item-2",
active: undefined
},
{
id:3,
title:"Item-3",
active:false
},
{
id:3,
title:"Item-4",
active:undefined
}
];
var dataSource=new kendo.data.DataSource({
data:products,
filter:{
logic:'or',
filters:[
{field:"active",operator:"eq",value:true},
{field:"active",operator:"eq",value:undefined}
]}
});
$("#productList").kendoDropDownList({
dataSource: dataSource,
dataTextField: "title",
dataValueField: "id"
});
I tried use the Kendo Grid and i found some problems.
The button action "edit" and "remove " do nothing when i click, but if i put the "create" command into the transport, the grid send lots of POSTS for the create URL command when i click in delete or click in edit > cancel (the update button do nothing too).
What I doing wrong?
My code:
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<input type="number" min="0" id="item-id" maxlength="10" />
<input type="text" id="name" class="k-textbox" placeholder="..." />
<button style="width: 100px" id="btn-grid-filtrar" class="k-button" >Filter</button>
</div>
</script>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource(
{
schema:
{
data: "data",
total: "total",
model:
{
id: "data",
fields:
{
id: { editable: false, nullable: false },
nome: { type: "string", validation: { required: true} },
ativo: { type: "boolean" }
}
}
},
transport:
{
read:
{
url: "page",
dataType: "json",
type: "POST",
data: additionalData
},
update: {
url: "update",
dataType: "jsonp"
},
destroy: {
url: "delete",
dataType: "jsonp"
}
/*,
create: {
url: "add",
dataType: "jsonp"
}
*/
},
pageSize: 5,
serverSorting: true,
serverPaging: true,
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
pageable: {
input: true,
numeric: false
},
batch: true,
columns: [
{ field: "id", title: "#", width: "60px" },
{ field: "nome", title: "Nome" },
{ field: "ativo", title: "Ativo", width: "60px", template: "#= ativo ? 'Sim' : 'Não' #" },
{ command: ["edit", "destroy"], title: "Ações", width: "200px" }
],
editable: "inline",
toolbar: kendo.template($("#template").html()),
});
kendo.bind($(".toolbar"));
$("#id").kendoNumericTextBox({
format: "##########",
placeholder: "..."
});
$("#btn-grid-filtrar").click(function() {
grid.data("kendoGrid").dataSource.read();
});
});
function additionalData() {
return {
filtro_id: $("#item-id").val(),
filtro_nome: $("#name").val()
};
}
</script>
First of all, I'm assuming that you server is serving a JSON with the following format:
{
"total": 2,
"data" : [
{
"data" : 23,
"id" : 1,
"ativo": true,
"nome" : "stock-1"
},
{
"data" : 34,
"id" : 2,
"ativo": false,
"nome" : "stock-2"
}
]
}
Correct?
So the first thing is changing the "data" on each row data to something not called data. It turns out that data is a kind-of reserved word in KendoUI commonly used in code structures as:
with (data) {
// Expanded code coming from a grid row data
}
Where this data is a variable referencing a row in your grid. So, in this context data is both the row itself and and a field in that row and then JavaScript cannot correctly solve it.
So you can define your schema as:
schema : {
data : "data",
total: "total",
model: {
id : "_data",
fields: {
id : { editable: false, nullable: false },
nome : { type: "string", validation: { required: true} },
ativo: { type: "boolean" }
}
}
},
NOTE: I've replace data by _data.
Transmitted data is:
{
"total": 2,
"data" : [
{
"_data" : 23,
"id" : 1,
"ativo": true,
"nome" : "stock-1"
},
{
"_data" : 34,
"id" : 2,
"ativo": false,
"nome" : "stock-2"
}
]
}
Just with this small change your Edit button will start working.
You are not supposed to define transport level for local datasources, if understand correctly your code, you are not posting anywhere - you are not binding any remote data, I can't see any url ? Follow this example http://demos.kendoui.com/web/datasource/index.html.