DDL - invisible value when edit button is clicked

4 posts, 0 answers
  1. Clint
    Clint avatar
    2 posts
    Member since:
    Dec 2016

    Posted 22 Dec 2016 Link to this post

    I am an intern programmer working on an already existing and expansive model. This is my first experience with Kendo UI. What I can say is that, the current model (coded by a previous programmer), seems to be in working order (and has been long before my arrival). I have been assigned to try to correct one minor aesthetic flaw...

    Here is the scenario - When the grid appears, there is a ddl, date field, edit btn, and delete btn. The grid is editable "inline". The grid is rendering as it should (i.e. all selections and fields have specified data). Also, comms on the back end are working properly.

    Here is the issue - However, when I click the edit btn, the value displayed within the ddl temporarily disappears. The value then reappears when the "update" or "cancel" btns are clicked.

    My question - Is this temporary disappearance a bug in the code, or (more specifically) is the kendo grid designed to clear the ddl display when the edit btn is clicked?

     

    Thank you in advance!

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 27 Dec 2016 Link to this post

    Hello Clint,

    As far as I can understand, you have a Grid, which has a DropDownList as custom editor of one of its columns. In this case, when you start editing an entry, the DropDownList is being bound to its DataSource and if configured appropriately, it should display the selected item from its list.

    Regards,
    Veselin Tsvetanov
    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. Clint
    Clint avatar
    2 posts
    Member since:
    Dec 2016

    Posted 28 Dec 2016 in reply to Veselin Tsvetanov Link to this post

    Hi Veselin,

    Thank you for your quick response.

    According to your response, I am assuming that there might be an issue with the data binding.

    Below is a copy of the code I am working with. Again, this was written by a previous developer, and it doesn't appear to follow the same conventions of any examples that I have seen. The structure contains five grids; however, I am only including one. This is ALL of the kendo code for "student status". The code is in 'chunks' throughout the file. I've separated each method with "******".

    Could you take a look at this please, and let me know if you could offer any guidance with this?

    Thanks in advance!

     

    var dataSources = {

        statusDataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl + "/ReadStatus"
                },
                update: {
                    url: crudServiceBaseUrl + "/UpdateStatus",
                    contentType: "application/json",
                    type: "POST"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/DestroyStatus",
                },
                create: {
                    url: crudServiceBaseUrl + "/CreateStatus",
                    contentType: "application/json",
                    type: "POST"
                },
                parameterMap: function (options, operation) {
                    if (operation === "create" && options.models) {
                        options.models[0].StudentID = $("#sid").val();
                        options.models[0].SetDate = moment(options.models[0].SetDate).startOf('day');
                        return kendo.stringify(options.models[0]);
                    }
                    else if (operation === "read") {
                        return { studentId: $("#sid").val() };
                    }
                    else if (operation === "update" && options.models) {
                        return kendo.stringify(options.models[0]);
                    }
                    else if (operation === "destroy" && options.models) {
                        return { id: options.models[0].ID };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        HistoryStatusID: { type: "number", defaultValue: 7 },
                        SetDate: { type: "date" }
                    }
                }
            },
            requestEnd: function (e) {
                if (e.type !== "read") {
                    refreshDemographics();
                }
            },
            error: function (e) {
                showAlertWindow("Changes Not Saved", e.errorThrown);
            }
        }),
    <method cont>.......
    *********************
    *********************
    *********************
    *********************
    var translaters = {

        translateHistoryStatus: function (historyStatusId) {
            if (dataSources.historyStatusDataSource.total() == 0) {
                dataSources.historyStatusDataSource.fetch();
            }

            dataSources.historyStatusDataSource.filter({
                field: "Value", operator: "eq", value: historyStatusId
            });

            var translatedHistoryStatus = dataSources.historyStatusDataSource.view()[0].Text;

            dataSources.historyStatusDataSource.filter(null);

            return translatedHistoryStatus;
        },
    <method cont>.......
    *********************
    *********************
    *********************
    *********************
    var dropDownListEditors = {

        historyStatusDropDownEditor: function (container, options) {
            $('<input data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: dataSources.historyStatusDataSource
                });
        },
    <method cont>.......
    *********************
    *********************
    *********************
    *********************
    function initGrids() {

        statusGrid = $("#statusGrid").kendoGrid({
            dataSource: dataSources.statusDataSource,
            pageable: false,
            toolbar: getAllowedGridToolbarItems(),
            columns: [
                { field: "HistoryStatusID", title: "Status", width: "120px", editor: dropDownListEditors.historyStatusDropDownEditor, template: "#= translaters.translateHistoryStatus(HistoryStatusID) #" },
                { field: "SetDate", title: "Date Set", width: "120px", template: "#= formatJsonDate(SetDate) #" },
                { command: getAllowedGridCommandOptions(), title: "&nbsp;", width: "250px" }],
            editable: "inline"
        }).data("kendoGrid");
    <method cont>.......
    *********************
    *********************
    *********************
    *********************
    function currentUserCanEdit() {
        return $("#currentUserCanEdit").val() === "true";
    };
    *********************
    *********************
    *********************
    *********************
    function getAllowedGridToolbarItems() {
        if (currentUserCanEdit()) {
            return ["create"];
        }
        else {
            return null;
        }
    };
    *********************
    *********************
    *********************
    *********************
    function getAllowedGridCommandOptions() {
        if (currentUserCanEdit()) {
            return ["edit", "destroy"];
        }
        else {
            return [];
        }
    };
    *********************
    *********************
    *********************
    *********************
    function initWindows() {

    statusWindow = $("#statusWindow").kendoWindow({
            visible: false,
            resizable: false,
            minWidth: "540px",
            maxWidth: "540px",
            modal: true,
            activate: function () {
                $("#statusClose").one("click", function () {
                    statusWindow.close();
                })
            }
        }).data("kendoWindow");
    <method cont>.......
    *********************
    *********************
    *********************
    *********************
    function initEventHandlers() {

        $(".detailItem.status").on("click", function () {
            statusWindow.center();
            statusWindow.open();
        });
    <method cont>.......

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 30 Dec 2016 Link to this post

    Hello Clint,

    I am afraid, that I was not able to run and test the code snippet sent, because of the external dependencies, that are present in it.

    What I would suggest you is to modify our Custom editor Grid demo, so it reproduces the problem observed at your end, and send that back to us. This way we will be able to troubleshoot that issue locally and to provide you with the most appropriate assistance for your case.

    Regards,
    Veselin Tsvetanov
    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