This is a migrated thread and some comments may be shown as answers.

Kendo Gird Dropdown List Column

3 Answers 163 Views
Map
This is a migrated thread and some comments may be shown as answers.
Harigopal
Top achievements
Rank 1
Harigopal asked on 23 Mar 2017, 08:03 AM

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

Sort by
0
Tsvetina
Telerik team
answered on 24 Mar 2017, 04:59 PM
Hi Harigopal,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Harigopal
Top achievements
Rank 1
answered on 28 Mar 2017, 02:06 AM

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;
        //    }
        //});

    });
});

0
Tsvetina
Telerik team
answered on 29 Mar 2017, 01:15 PM
Hi Harigopal,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Map
Asked by
Harigopal
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Harigopal
Top achievements
Rank 1
Share this question
or