I have a grid with editable cell inside bootstrap modal pop up, all text and dropdown cell works fine except for the number field.
When clicked on the number cell the input opens but value is showing inside, value is updated and reflects back on the grid, applies all the validation but just value is not showing the input field.
I checked everything but could not figure this one out.var _dataSource = new kendo.data.DataSource({
data: localityGridDataSource,
sort: { field: 'nodeLocalitySequence', dir: 'asc' },
autoSync: true,
schema: {
model: {
id: 'localityCode',
fields: {
localityCode: { editable: false },
localityTitle: { editable: false },
nodeLocalitySequence: { type: 'number', validation: { required: true, min: 1, max: 999999 } },
nodeLocalityType: { defaultValue: { nodeLocalityTypeValue: 'I', nodeLocalityTypeName: app.localize('InsideGrid') } },
nodeLocalityExternalNote: { type: 'text' }
}
}
}
});
_LocalitiesGrid.kendoGrid({
dataSource: _dataSource,
editable: true,
noRecords: true,
edit: onGridEditing,
remove: clearLocalitiesAudioMessage,
columns: [
{ field: 'localityTitle', title: app.localize('Locality') },
{ field: 'nodeLocalitySequence', title: app.localize('Order') },
{ field: 'nodeLocalityType', title: app.localize('IncludeType'), editor: nodeLocalityTypeDropDownEditor, template: '#=nodeLocalityType.nodeLocalityTypeName#', width: '250px' },
{ field: 'nodeLocalityExternalNote', title: app.localize('Notes') },
{ command: ["destroy"], width: '125px' }
]
});
Grid :-
.Columns(columns =>
{
columns.Bound(x => x.Role).Title("<b>Project OBS Role</b>").Width("30%").Filterable(true).
HeaderHtmlAttributes(new { style="text-align:center;"}).HeaderHtmlAttributes(new { style = "text-align:center;vertical-align:middle;" });
columns.Bound(x => x.UserId).Title("<b>Approver</b>").Width("40%").EditorTemplateName("GridGroupPeoplePicker").
====> EditorViewData(new { SecurityGroup = "#=SecurityGroup#" }).Filterable(true).HeaderHtmlAttributes(new { style = "text-align:center;vertical- align:middle;" }).HtmlAttributes(new { style = "text-align:left;" });
columns.Bound(x => x.Delay).Title("<b>Delay<b>").Width("20%").Filterable(true).
HeaderHtmlAttributes(new { style = "text-align:center;vertical-align:middle;" }).HtmlAttributes(new { style = "text-align:left;" });
columns.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" ");}).Width("10%").
HtmlAttributes(new { style = "text-align:center;" });
})
Editor Template :-
@model stringHello experts
How do I match the front line? (When I set kendoForm, orientation: 'horizontal')
please Answerã… ã…
link : https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemscolspan
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
FirstName: "John",
LastName: "Doe",
Address: "London",
Postcode: "SW1A 1AA"
},
layout:"grid",
orientation: 'horizontal',
grid: {
cols: 2,
gutter: 20
},
items: [{
type: "group",
label: "Personal Information",
layout: "grid",
colSpan: 2,
grid: {
cols: 2,
gutter: 10
},
items:[{
field: "FirstName",
label: "First Name:",
validation: { required: true },
colSpan: 1
},{
field: "LastName",
label: "Last Name:",
validation: { required: true },
colSpan: 1
},{
field: "Addresss",
label: "Address:",
validation: { required: true },
colSpan: 2
},{
field: "Postcodee",
label: "Postcode:",
validation: { required: true },
colSpan: 2
}]
},{
type: "group",
label: "Shipping Address",
layout: "grid",
colSpan: 2,
grid: {
cols: 4,
gutter: 10
},
items:[{
field: "Address",
label: "Address:",
colSpan: 2,
},{
field: "Postcode",
label: "Postcode:",
colSpan: 2
}]
}]
});
</script>
Per:
https://demos.telerik.com/aspnet-core/grid
can someone provide/post the source for the Editor Templates Names for Country and ClientCategoryEditor?
I'm trying to make an editable grid with a select control in one of the columns (Country), just like the demo... but the source code/markup seems to be incomplete...
I'm looking for the source editor templates behind these:
columns.Bound(p => p.Country.CountryNameLong).Title("Country").EditorTemplateName("Country")
columns.Bound(p => p.Category.CategoryName).EditorTemplateName("ClientCategoryEditor")
fyi these are broken in the edit in teletik repl as well....
maybe if it was a snake it would have bit me...
Thanks
How do I change the TEXT color of the kendo grid edit button for Inline editing?
Thanks
Justin
Currently Kendo grids, like this one, behave like tables in MS Word when selected text is dragged/dropped. I would like my Kendo grid to not have this behavior and instead act more like Excel, where clicking and moving the mouse while over selected text will change the selection.
Is there an option for this in the Kendo jQuery Grid?
Hello,
I'm having a problem updating the model in a Grid Editing with kendo AngularJS.
It looks like the model updates if the field in the schema is set to editable: false but it does not update when is editable: true
here is a DEMO with both inline and popup editing.
When selecting Detroit from the City, the Country should change to USA. It does not do that when the field Country has editable: true, but if you change that to editable: false the page works. The goal here is to have USA selected by default by still give the user the ability to change the Country manually.
https://dojo.telerik.com/usIWIyIS
Is there any way to make this work?
I am working with kendo grids with buttons in each column that display another grid in a modal. The first is using MVC, the modal grid was created dynamically. Each uses kendo dropdownlists to edit cells. The issue occurs like this:
1. A dropdownlist is clicked on in the initial grid,
2. The modal is opened afterward (each row has its own button)
3. A dropdownlist inside the modal's kendo grid is clicked, and nothing happens
Basically, if a dropdown is clicked in grid 1, and then you attempt to click one of the dropdownlists in the modal grid,
this error is thrown:
Uncaught TypeError: m is not a function
at init.editor (kendo.all.min.js:54)
at init.refresh (kendo.all.min.js:54)
at new init (kendo.all.min.js:54)
at HTMLTableCellElement.<anonymous> (kendo.all.min.js:26)
at Function.each (jquery.min.js:2)
at R.fn.init.each (jquery.min.js:2)
at R.fn.init.e.fn.<computed> [as kendoEditable] (kendo.all.min.js:26)
at init.editCell (kendo.all.min.js:59)
at init.tap (kendo.all.min.js:59)
at init.trigger (kendo.all.min.js:25)
This error is vague, and on the surface seems like jQuery scripts may be interfering or out of order. I don't think this is the case
because A) I haven't recieved errors like this before and B) the dropdowns work if the modal is opened without any of the dropdowns in the
other grid being touched. It seems as if when a dropdown is clicked in initial grid, somehow it breaks the dropdown in modal grid. They
do not have the same name.
Any ideas on where this console error comes from?
Here is a snippet of the grid being generated in the modal:
$("#account-tracking-grid").kendoGrid({
columns: [
{
field: "accountName",
title: "Account Name",
editable: function () { return false },
width: "200px",
},
{
field: "accountNumber",
title: "Account Number",
editable: function () { return false },
width: "200px"
},
{
field: "Balance",
title: "Balance",
width: "40px",
template: "<span>#=getIcon(Balance)#</span>",
editor: dropdownlist,
headerTemplate: "<span class='verticalText'>Balance</span>"
}
],
editable: "incell",
edit: function (e) {
var container = e.container;
var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
if (dropDownList) dropDownList.open();
},
dataSource: {
transport: {
read: "/Account/Tracking?uniqueId=" + document.getElementById('unid').value
}
}
});
}
function dropdownlist(container, options) {
$('<input id="account-dropdownlist"/>')
.appendTo(container)
$("#account-dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
change: onChange,
open: onOpen
});
}
Hello. I am using a custom column editor as shown in your example : https://docs.telerik.com/kendo-ui/knowledge-base/custom-editor-autocomplete. Even in the example that you provided, if I type a value that is not in the list, on focus out the field will display "undefined" and will remain this way even if i try to select another value. Is there a fix for this situation? Thank you in advance :)
I attached a screenshot from your working example.