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

Data Grid displayOnly field not populated in Add Popup

6 Answers 28 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 27 Apr 2020, 04:39 PM

I have a data grid with 5 fields and popup Add and Edits defined - see image001.jpg

One of the fields 'Template Name' is defined as display only (editor : displayOnly) because it has already been selected on the previous dialog

On the Edit popup it is shown - see image005.jpg

On the Add popup it is not shown (there is a small circle) - see image006.jpg

 

The users want it to be shown on both Add and Edit, as it is confusing

 

 

6 Answers, 1 is accepted

Sort by
0
Simon
Top achievements
Rank 1
answered on 27 Apr 2020, 04:57 PM

JS Code

/* View Models to Map against Data Base Models
Author : Simon Close
*/
var smartPropertyId;
var componentId;
var componentTypeId;
var ViewModel = function (
    accessTemplateId
) {
    var accessTemplateValueLogDataSource = new sv.data.DataSource({
        transport: {
            read: {
                url: "/api/accesstemplatevaluelog/GetAccessTemplateValueLogsById",
                contentType: "application/json",
                type: "POST",
                // append the template Id to the grid filter options
                data: function (data) {
                    if (!data.filter) {
                        data.filter = {};
                        data.filter.logic = "and";
                        data.filter.filters = [];
                    }
                    var u = { field: "accessTemplateId", operator: "eq", value: accessTemplateId };
                    data.filter.filters.push(u);
                }
            },
            update: {
                url: function (accesstemplatevaluelog) {
                    return "/api/accesstemplatevaluelog/UpdateAccessTemplateValueLog/" + accesstemplatevaluelog.Id;
                },
                contentType: "application/json",
                type: "PUT"
            },
            destroy: {
                url: function (accesstemplatevaluelog) {
                    return "/api/accesstemplatevaluelog/DeleteAccessTemplateValueLog/" + accesstemplatevaluelog.Id;
                },
                contentType: "application/json",
                type: "DELETE"
            },
            create: {
                url: "/api/accesstemplatevaluelog/InsertAccessTemplateValueLog/",
                contentType: "application/json",
                type: "POST",

                // If there's a better way of passing the new values back to the Controller, I'm yet to find it
                // it doesn't seem possible to pass parameters on a 'create' like we do with 'update' and 'delete'
                data: function (data) {
                    if (!data.filter) {
                        data.filter = {};
                        data.filter.logic = "and";
                        data.filter.filters = [];
                    }
                    var u = { field: "accessTemplateId", operator: "eq", value: accessTemplateId };
                    data.filter.filters.push(u);
                    var v = { field: "componentTypeId", operator: "eq", value: componentTypeId };
                    data.filter.filters.push(v);
                    var w = { field: "componentId", operator: "eq", value: componentId };
                    data.filter.filters.push(w);
                    var x = { field: "smartPropertyId", operator: "eq", value: smartPropertyId };
                    data.filter.filters.push(x);
                    var y = { field: "value", operator: "eq", value: data.Value };
                    data.filter.filters.push(y);
                }
            },
            parameterMap: function (data, operation) {
                if (operation != "read") {
                    if (data.SmartPropertyId) {
                        if (data.SmartPropertyId.Id) {
                            data.SmartPropertyId = data.SmartPropertyId.Id;
                        }
                    }
                }
                return JSON.stringify(data);
            }
        },
        batch: false,
        error: error,
        pageSize: 100,
        requestEnd: accessTemplateValueLogdataSource_requestEnd,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: {},
                    RowVersion: {},
                    Value: {},
                    Notes: {},
                    SmartPropertyId: {},
                    AdditionalPropertySupportDescription: {},
                    AccessTemplatesId: {},
                    AccessTemplateName: {},
                    ComponentTypeId: {},
                    ComponentTypeName: {},
                    ComponentId: {},
                    ComponentName: {}
                }
            }
        }
    });

    var accessTemplateValueLogGrid = $("#accessTemplateValueLogGrid").svGrid({
        dataSource: accessTemplateValueLogDataSource,

        toolbar: [{ name: "create", text: "Add Access Template Value Log" }],
        columns: [
            { field: "Notes", title: "Template Name", editor: displayOnly },
            {
                field: "ComponentTypeId",
                title: "Component Type",
                width: "160px",
                editor: cascadeComponentTypeDropDownEditor,
                template: "#=ComponentTypeName#",
                filterable: {
                    extra: false,
                    field: "ComponentTypeName",
                    operators: {
                        string: {
                            startswith: "Starts with",
                            eq: "Is equal to",
                            neq: "Is not equal to"
                        }
                    }
                }
            },
            {
                field: "ComponentId",
                title: "Component",
                width: "160px",
                editor: cascadeComponentDropDownEditor,
                template: "#=ComponentName#",
                filterable: {
                    extra: false,
                    field: "ComponentName",
                    operators: {
                        string: {
                            startswith: "Starts with",
                            eq: "Is equal to",
                            neq: "Is not equal to"
                        }
                    }
                }
            },
            {
                field: "SmartPropertyId",
                title: "Additional Property",
                width: "160px",
                editor: additionalPropertyDropDownEditor,
                template: "#=AdditionalPropertySupportDescription#",
                filterable: {
                    extra: false,
                    field: "AdditionalPropertySupportDescription",
                    operators: {
                        string: {
                            startswith: "Starts with",
                            eq: "Is equal to",
                            neq: "Is not equal to"
                        }
                    }
                }
            },
            { field: "Value", title: "Value" },
            { command: ["edit", "destroy"], title: " ", width: "172px" }
        ],
        editable: "popup",
        Edit: ("onEdit"),
        Add: ("onAdd")
}).data("svGrid");

    function onEdit(e) {
        $('[name="Notes"]').attr("readonly", true);
    }

    function onAdd(e) {
        $('[name="Notes"]').attr("readonly", true);
    }

    function cascadeComponentTypeDropDownEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .svDropDownList({
                autoBind: false,
                dataTextField: "Name",
                dataValueField: "Id",
                select: onComponentTypeSelect,
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/api/componenttype/getcomponenttypesdropdownlist"
                    }
                }
            });
    }

    var componentDropdownUrl = "/api/Component/GetComponentsDropdownList";
    var additionalPropertyDropDownUrl = "/api/AdditionalProperty/GetAdditionalPropertyDropdownList";

    function onComponentTypeSelect(e) {
        var dataItem = this.dataItem(e.item.index());
        componentTypeId = dataItem.Id;
        additionalPropertyDropDownUrl = "/api/AdditionalProperty/GetAllAdditionalPropertyDropdownByComponentTypeId/" + componentTypeId;
        componentDropdownUrl = "/api/Component/GetComponentsDropdownListByComponentTypeId/" + componentTypeId;

        var compDDL = $("#componentDDL").data("svDropDownList");
        compDDL.dataSource.transport.options.read.url = componentDropdownUrl;
        compDDL.refresh();
        compDDL.dataSource.read();
        compDDL.enable();
        compDDL.text('');
        compDDL.list.css("min-width", "195px");
        compDDL.list.width("auto");

        var parentPropDDL = $("#addionalPropDDL").data("svDropDownList");
        parentPropDDL.dataSource.transport.options.read.url = additionalPropertyDropDownUrl;
        parentPropDDL.refresh();
        parentPropDDL.dataSource.read();
        parentPropDDL.enable();
        parentPropDDL.text('');
        parentPropDDL.list.css("min-width", "195px");
        parentPropDDL.list.width("auto");
    }

    function cascadeComponentDropDownEditor(container, options) {
        $('<input id="componentDDL" disabled data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .svDropDownList({
                autoBind: false,
                optionLabel: "Select component...",
                dataTextField: "Name",
                dataValueField: "Id",
                select: onComponentSelect,
                dataSource: {
                    type: "json",
                    transport: {
                        read: componentDropdownUrl
                    }
                }
            }).data("svDropDownList");
    }

    function onComponentSelect(e) {
        var dataItem = this.dataItem(e.item.index());
        componentId = dataItem.Id;
        if (componentId == "") {
            ShowErrorMessage("You must select a Component");
        }

        additionalPropertyDropDownUrl = "/api/AdditionalProperty/GetAllAdditionalPropertyDropdownByComponentId/" + componentId;
        var parentPropDDL = $("#addionalPropDDL").data("svDropDownList");
        parentPropDDL.dataSource.transport.options.read.url = additionalPropertyDropDownUrl;
        parentPropDDL.refresh();
        parentPropDDL.dataSource.read();
        parentPropDDL.enable();
        parentPropDDL.text('');
        parentPropDDL.list.css("min-width", "195px");
        parentPropDDL.list.width("auto");
    }

    function additionalPropertyDropDownEditor(container, options) {
        $('<input id="addionalPropDDL" disabled  data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .svDropDownList({
                autoBind: false,
                optionLabel: "Select property...",
                dataTextField: "SupportDescription",
                dataValueField: "Id",
                select: onAdditionalPropertySelect,
                dataSource: {
                    type: "json",
                    transport: {
                        read: additionalPropertyDropDownUrl
                    }
                }
            }).data("svDropDownList");
    }

    function onAdditionalPropertySelect(e) {
        var dataItem = this.dataItem(e.item.index());
        smartPropertyId = dataItem.Id;
        if (smartPropertyId == "") {
            ShowErrorMessage("You must select a Property");
        }
    }

    function accessTemplateValueLogdataSource_requestEnd(e) {
        if (e.type != "read") {

            if (e.type == "create") {
                e.sender.read();
                //check for errors in the response
                if (e.response == null || e.response.Errors == null) {
                    ShowSuccessMessage("Access Template Value Log added successfully");
                }
            }
            if (e.type == "update") {
                e.sender.read();
                //check for errors in the response
                if (e.response == null || e.response.Errors == null) {
                    ShowSuccessMessage("Access Template Value Log updated successfully");

                }
            }
        }
    }


}

0
Alex Hajigeorgieva
Telerik team
answered on 29 Apr 2020, 03:02 PM

Hello, Simon,

Thank you for a ll the provided resources.

On create the Kendo UI Data Source goes to the schema and creates a new dataItem based on the property types, defaultValues and nullable properties. To show the Notes field in the Create popup window, you should add a defaultValue for it in the data source schema. This is valid for all complex types:

https://docs.telerik.com/kendo-ui/api/javascript/data/model/methods/define

schema: {
            model: {
                id: "Id",
                fields: {
                    Notes: { Name: "Admin", Id: 1 },
                }
            }
        }

You can see a runnable example for this in the Custom Editor Demo and the Category field:

https://demos.telerik.com/kendo-ui/grid/editing-custom

Should you have further questions, please feel free to ask.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Simon
Top achievements
Rank 1
answered on 29 Apr 2020, 06:13 PM

Hi Alex

That works if I just want a hard-coded value to show in the field

e.g.                     Notes: { defaultValue: "Test Template Name" }

 

However what I really want is to show a value of the AccessTemplate Name variable that is selected in the previous dialog and which is the first field in the DataGrid (it will have the same value in all rows because we are loading all rows with that Template Name from a file)

 

I'm thinking this might not be possible because with an add, you are sort of "starting from scatch" but ideally if it could show the value of that field from the first row (or any row because it has the same value in all rows as I explained above) of the DataGrid

So on the previous dialog the user would select e.g. "Template 1", the data grid would show all rows from a table where the TemplateName is "Template 1" and the display only field in the Add popup would also show "Template 1"


 

0
Alex Hajigeorgieva
Telerik team
answered on 01 May 2020, 11:14 AM

Hi, Simon,

The default value could be added dynamically by providing it in the edit event handler:

    edit: function(e) {
        if (e.model.isNew()) {    
          var selectedTemplate = // get the needed value       
           // set the new value
           e.model.set("Notes",  selectedTemplate );
        }
    }

Alternatively, you can provide a function for the default value and get it as part of the model definition. A runnable example is available in this how-to article where the filter is considered, in your case, replace it with the value of the AccessTemplateName variable:

https://docs.telerik.com/kendo-ui/knowledge-base/use-filtering-with-dynamic-default-values

Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Simon
Top achievements
Rank 1
answered on 07 May 2020, 03:25 PM

Not quite sure what I'm doing wrong but I've tried your second suggestion (using a function for default value) and it actually displays all the code rather than a value

see attached screenshot.

below is the code

    Notes: { defaultValue: function(df) {
                            if (typeofthis.accessTemplateID === "function") {
                                var grid = $("accessTemplateValueLogGrid").data("svGrid");
                                var ds = grid.dataSource;
                                var filter = ds.filter();
                                if (filter && filter.filters[0].field === "accessTemplateID") {
                                    return filter.filters[0].value;
                                } else {
                                    return 1;
                                }
                            }
                        }
                    },

 

 

 

 

0
Alex Hajigeorgieva
Telerik team
answered on 11 May 2020, 01:33 PM

Hi, Simon,

For your specific needs, isn't returning the value of notes sufficient:

note:{ 
    type: "string", 
    defaultValue: function(){        
       // return your value     
	return $("#default").val();
    }
}

Here is a simple test for your referemce:

https://dojo.telerik.com/@bubblemaster/eLOkIjin

Give this a try and let me know in case you need further assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Simon
Top achievements
Rank 1
Answers by
Simon
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or