when i try to add a new record to my kendo grid. i am getting an error that "Uncaught TypeError: $(...).kendoDropDownList is not a function"
Please find below list of Js file i have refereed
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.2.js"></script>
<script src="~/Scripts/kendo.all.min.js"></script>
<script src="~/Scripts/kendo.dropdownlist.min.js"></script>
<script src="~/Scripts/kendo.aspnetmvc.min.js"></script>
..ETC.
3 Answers, 1 is accepted
You don't need to add the kendo.dropdownlist.min.js file separately. The problem is caused by something else, but I need to see your Grid to provide you with some suggestions. Can you create a Dojo demonstrating the problem or paste your Grid definition, together with any custom code related to editing?
Regards,
Tsvetina
Telerik by Progress
Rank 1
Not sure how to create DOJO demonstration.i will past my grid implementation below.
____________
$(function () {
$(document).ready(function () {
var retainStatevalue = (location.search.match(new RegExp('state' + "=(.*?)($|\&)", "i")) || [])[1];
if (retainStatevalue != "yes") {
//$.cookie("user-list-state", null);
//$.cookie("user-list-state", null, { path: '/' });
}
var schema = {
model: {
id: "UserId",
fields: {
RowId: { type: "number", editable: false },
UserId: { type: "number", editable: false },
UserName: { type: "string" },
FirstName: { type: "string" },
LastName: { type: "string" },
EmailAddress: { type: "string" },
CompanyId: { type: "number" },
BusinessUnitId: { type: "string" },
CompanyName: { type: "string" },
BusinessUnitName: { type: "string" },
IsActive: { type: "bool" }
//'BusinessUnit.BusinessUnitName': { type: "string" },
//'Company.Name': { type: "string" },
}
},
data: "data",
total: "total"
};
//var state = JSON.parse($.cookie("user-list-state"));
var state = JSON.parse($.cookie("user-list-state", { path: '/' }));
if (state) {
reloadControlsFromCookie(state);
}
var dataSource = apiDataSource(10, schema, {});
debugger;
function apiDataSource(pageSize, schema, customFilter) {
debugger;
if (schema === undefined)
schema = { data: "data", total: "total" };
var dataSource = new window.kendo.data.DataSource({
transport: {
read: {
url: urlContent("membership/user/getuser"),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {},
cache: false
},
parameterMap: function (options) {
debugger;
if (customFilter !== undefined)
options.customFilter = customFilter;
return window.kendo.stringify(options);
},
create: function (options) {
debugger;
$.ajax({
type: "POST",
url: urlContent("membership/user/Add"),
dataType: "json",
data: kendo.stringify(options.data),
success:
function (result) {
debugger;
options.success(result);
},
error: function (result) {
debugger;
options.error(result);
}
});
},
update: function (options) {
debugger;
$.ajax({
type: "POST",
url: urlContent("membership/user/edit"),
dataType: "json",
data: options.data, // kendo.stringify(options.data),
success:
function (result) {
debugger;
options.success(result);
},
error: function (result) {
debugger;
options.error(result);
}
});
}
},
schema: schema,
pageSize: pageSize,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
return dataSource;
}
if (state) {
var searchFilter = buildGridFilters();
dataSource.filter(searchFilter);
}
var columns = [
{
field: "UserId", title: "", headerTemplate: '<label></label>', Attributes: { style: "width: 30px" }, hidden: true
},
{
field: "RowId", title: "#", dataType: "Number", readonly: true, filterable: false, sortable: false, width: 30
},
{
field: "UserName", title: "User Name", width: 250, filterable: true
},
{
field: "CompanyName", title: "Company Name", width: 180, filterable: true, sortable: true, attributes: { id: "CompanyName" }
},
{
field: "FirstName", title: "First Name", filterable: true, width: 150,
template: "<a href=" + urlContent('membership/user/detail?userId=${UserId}') + ">${FirstName}</a>"
},
{
field: "LastName", title: "Last Name", width: 150, filterable: true,
template: "<a href=" + urlContent('membership/user/detail?userId=${UserId}') + ">${LastName}</a>"
},
{
field: "BusinessUnitName", title: "Business Unit", width: 230, filterable: true, sortable: true, attributes: { id: "BusinessUnitName" }
},
{
field: "IsActive", title: "Active", filterable: false, sortable: false, width: 75
},
{
field: "", title: "Security", filterable: false, sortable: false, width: 75,
template: "<a href=" + urlContent('administration/company/Edit?companyId=${CompanyId}') + ">Roles</a>"
},
{ title: "Security", command: "edit", width: 220 }
];
function initDropDownLists() {
debugger;
$("#CompanyName").kendoDropDownList({
dataTextField: "CompanyName",
dataValueField: "CompanyId",
optionLabel: "Select Company",
autoBind: false
}).data("kendoDropDownList");
getCompanyList();
$("#BusinessUnitName").kendoDropDownList({
dataTextField: "BusinessUnitName",
dataValueField: "BusinessUnitId",
optionLabel: "Select Business Unit",
autoBind: false
}).data("kendoDropDownList");
getBusinessUnitList();
}
function getCompanyList() {
//var companyddvalue = null;
debugger;
$.ajax({
type: "Post",
url: urlContent("membership/user/GetCompanyList"),
dataType: "json",
success:
function (result) {
debugger;
if (JSON.stringify(result) !== "[]") {
var ddl = $("#CompanyName").data("kendoDropDownList");
ddl.setDataSource(result);
ddl.refresh();
}
//companyddvalue = result;
},
error: function (result) {
debugger;
alert('Error');
}
});
//return companyddvalue;
}
function getBusinessUnitList() {
var businessunitddvalue = null;
debugger;
$.ajax({
type: "Post",
url: urlContent("membership/user/GetPrimaryBusinessUnitList"),
dataType: "json",
success:
//function (result) {
// debugger;
// businessunitddvalue = result;
//},
function (result) {
debugger;
if (JSON.stringify(result) !== "[]") {
var ddl = $("#BusinessUnitName").data("kendoDropDownList");
ddl.setDataSource(result);
ddl.refresh();
}
//companyddvalue = result;
},
error: function (result) {
debugger;
alert('Error');
}
});
return businessunitddvalue;
}
$("#gridUser").kendoGrid({
autoBind: false,
toolbar: [{ name: "create", text: "Add User" }],
dataSource: dataSource,
edit: function (e) {
debugger;
initDropDownLists();
},
editable: "inline",
columns: columns,
pageable: {
previousNext: false
},
filterable: true,
dataBound: function () {
debugger;
$(".k-pager-wrap .k-pager-numbers").addClass("byline");
$(".k-pager-wrap .k-pager-numbers").addClass("list-inline");
//binding no results found
if (dataSource._view.length == 0) {
$("#gridUser").find('.k-grid-content tbody')
.append('<tr class="kendo-data-row"><td colspan=4 style="text-align:center"><b>No records found for this search criteria</b></td></tr>');
$('.k-grid-pager').hide();
}
else {
$('.k-grid-pager').show();
}
var g = this;
g.tbody.find(">tr").each(function () {
var dataItem = grid.dataItem(this);
if (dataItem != null && !dataItem.IsActive) {
$(this).addClass("inactive-row");
}
});
var gridState = window.kendo.stringify({
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
group: dataSource.group(),
filter: dataSource.filter(),
search: $("#user-name").val() + ';' + $('#email-address').val() + ';' + $('#first-last-name').val()
+ ';' + $('#check-active-user').is(':checked') + ';' + $('#company-id').val(),
bu: $('#user-name').val()
});
//$.cookie("user-list-state", gridState);
// $.cookie("user-list-state", gridState, { path: '/' });
},
sortable: true,
resizable: true
});
if (!state) {
$('#check-active-user').prop('checked', 'checked');
var pageLoadFilter = buildGridFilters();
dataSource.filter(pageLoadFilter);
}
var grid = $("#gridUser").data("kendoGrid");
// Table row hover.
$(".k-grid-header table").addClass("datatable");
$(".k-grid-content table").addClass("datatable table-hover");
$(".k-grid-header").attr("style", "");
function editDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
window.location = urlContent("membership/user/edit?userId=" + dataItem.UserId);
}
$("#search-user").on("submit", function (e) {
var filters = buildGridFilters();
grid.dataSource.filter(filters);
e.preventDefault();
});
$("#export-usersdetail-excel").on("click", function () {
var postData = {
};
$.download(urlContent("membership/User/ExportUserDetails"), postData, "POST");
});
//$('#link-bulk-activate-user').click(function () {
// var group = new Array();
// $.each($("input[name='bulk-update']:checked"), function () {
// group.push($(this).val());
// });
// if (group.length > 0) {
// $.ajax({
// type: "POST",
// data: { 'userIds': group },
// url: urlContent("membership/user/BulkActivateUser"),
// traditional: true,
// success: function () {
// alert("Bulk Activation Done successfully.");
// }
// });
// } else {
// alert("Please select the User to do Bulk Activation");
// return false;
// }
//});
$('#company-id').on('change', function () {
var id = $('#company-id option:selected').val();
$('#comp').val(id);
});
//$('#link-bulk-reset-password').click(function () {
// var group = new Array();
// $.each($("input[name='bulk-update']:checked"), function () {
// group.push($(this).val());
// });
// if (group.length > 0) {
// $.ajax({
// type: "POST",
// data: { 'userIds': group },
// url: urlContent("membership/user/BulkResetPassword"),
// traditional: true,
// success: function () {
// alert("Bulk Reset Password done successfully.");
// }
// });
// } else {
// alert("Please select the User to do Bulk Reset");
// return false;
// }
//});
});
});
You can create a Dojo here by copying parts of your code and binding it using mocked data if needed, until the issue is reproduced. You can also open a support ticket and send us your project there.
Based on the provided code, I am not sure why the error occurs. For some reason the Kendo UI scripts aren't loaded at this point. I see that you have a debugger in the initDropDownLists function, where the errors probably occur. When this debugger is hit, try checking the current value of kendo and kendo.ui.DropDownList. If they are undefined, then you need to check your script references again. Confirm that kendo.all.min.js is indeed inside the Scripts folder and not in Scripts\kendo\2017.1.223, for example.
Regards,
Tsvetina
Telerik by Progress