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

DDL - invisible value when edit button is clicked

3 Answers 58 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Clint
Top achievements
Rank 1
Clint asked on 22 Dec 2016, 02:06 PM

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!

3 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 27 Dec 2016, 09:33 AM
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.
0
Clint
Top achievements
Rank 1
answered on 28 Dec 2016, 02:26 PM

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>.......

0
Veselin Tsvetanov
Telerik team
answered on 30 Dec 2016, 01:16 PM
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.
Tags
DropDownList
Asked by
Clint
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Clint
Top achievements
Rank 1
Share this question
or