Kendo Gird Dropdown List Column

4 posts, 0 answers
  1. Harigopal
    Harigopal avatar
    5 posts
    Member since:
    Nov 2012

    Posted 23 Mar 2017 Link to this post

    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.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 24 Mar 2017 Link to this post

    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.
  3. Harigopal
    Harigopal avatar
    5 posts
    Member since:
    Nov 2012

    Posted 27 Mar 2017 in reply to Tsvetina Link to this post

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

        });
    });

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 29 Mar 2017 Link to this post

    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.
Back to Top