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
Rank 1
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");
}
}
}
}
}
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
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
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"
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
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
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;
}
}
}
},
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
Our thoughts here at Progress are with those affected by the outbreak.