I'm using a kendoDropDownList in a kendoGrid inline editor:
matTypeDropDownEditor: (container, options) => {
const model = options.model;
$('<input id="materialType" required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "MaterialTypeName",
dataValueField: "MaterialTypeID",
//dataSource: materialTypeData,
dataSource: {
transport: {
read: {
url: '/materials/materialtypes/' + model.OrganisationID,
}
}
},
If the datasource is an array materialTypeData = [] pre-populated on page load, when editing the row the dropdownlist doesn't scroll to the current value. The correct item is selected but it isn't visible until clicking on the dropdown.
If, as in the example above, I change the datasource to pull the items from the server it works correctly but obviously would require a round trip to the server every time a row is edited.
Ok resolved it. When the data is local setting autoBind: true as per the docs will correctly display the selected item.
matTypeDropDownEditor: (container, options) => {
const model = options.model;
$('<input id="materialType" required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "MaterialTypeName",
dataValueField: "MaterialTypeID",
dataSource: { data: materialTypeData },
Related
When adding a new item to a Kendo Grid using inline editing, the ContractID datasource is filtered by the selected OrgID. Once a row has been added, the OrgID column is no longer editable (set using isOrgEditable()) but the ContractID is. Unfortunately the cascade doesn't then work for editing and the datasource for ContractID is unfiltered.
To resolve that issue I subscribe to the edit event (data-edit="setContractsDataSource") and filter the data source manually. That works but then the Update button doesn't do anything and the edit is lost.
<div id="grid">
<div class="k-content wide">
<div>
<div data-role="grid"
data-editable="inline"
data-edit="setContractsDataSource"
data-toolbar="[{ name: 'create', text: 'Add Item' }]"
data-columns='[
{ field: "OrgID", title: "Company", editable: isOrgEditable, editor: orgDropDownEditor, template: "#: lookupForOrg(organisationID) #" },
{ field: "ContractID", title: "Contract", editor: contractsDropDownEditor, template: "#: lookupForContract(ContractID) #" },
{ command: ["edit", "destroy"], width: "220px" }
]'
data-sortable="true"
data-pageable="true"
data-filterable="true"
data-bind="source: items"></div>
</div>
</div>
</div>
As is often the case, I resolved the issue while writing the question. For future reference, the reason it wasn't being updated was due to not returning true from the event handler:
function setContractsDataSource(e) {
let orgID = e.model ? e.model.OrgID : this.dataItem().OrgID;
if (orgID) {
$("#contracts").data("kendoDropDownList").setDataSource(contractsData.filter(elt => elt.ContractorID == orgID));
}
return true; // fixed it
}
Subsequently established that the column would only update if it already contained a value, i.e. the new value wouldn't save if previously it had been empty. This telerik forum post helped to resolve it. The editor for the Contracts column needed valuePrimitive: true.
function contractsDropDownEditor(container, options) {
$('<input id="contracts" name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "ContractNo",
dataValueField: "ContractID",
dataSource: contractsData,
optionLabel: "Select contract...",
valuePrimitive: true
});
}
Have the jqGrid as below, problem is that getting the input html on save, due to not focusing out of the jqgrid (may be).
$(mygridId).jqGrid({
url: url,
datatype: "json",
mtype: 'GET',
colNames: ['ID', 'Name', 'Description'],
colModel: [
{
name: 'Id',
index: 'Id',
hidden: true
},
{
name: 'Name',
index: 'Name',
width: 25,
editable: true
},
{
name: 'Description',
index: 'Description',
width: 25,
search: false,
editable: true
}
],
cellEdit: true,
rownumWidth: 40,
gridview: true,
sortname: "Id",
autoencode: false,
cellsubmit: 'clientArray',
onCellSelect: function (rowId, iCol) {
theRow = rowId;
theColumn = iCol;
},
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
theColumn = iCol;
theRow = rowid;
},
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
theColumn = iCol;
theRow = rowid;
},
jsonReader: {
repeatitems: false,
userdata: "rows",
page: "page",
total: "total",
records: "records"
}
});
$(mygridid).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
When i add multiple rows, and click save button, focus won't be lost from the textbox, Hence, the saved value of the textbox will be
<input type="text" id="1_Description" name="Description" role="textbox" style="width: 98%;">
Any idea how to fix these?
Thanks in advace!
This is from same issue I answered elsewhere (see comments)...
This happens (sometimes) when inline (row or cell) editing is used in jqGrid. The implementation I used is https://github.com/free-jqgrid/jqGrid.
What happens is that the editor control is not cleared inside the "td" tag of the cell in the underlying "table" used by jqGrid. The cell will still show the entered/edited value once, but when the cell is entered again (clicked, tabbed, arrow keys, etc.), the text in the newly injected editor control will be the content (innerHTML?) of the "td" tag - which is the previous editor control HTML. This is what I see when this happens in both the grid and the HTML:
Note that this HTML is the TOP 2nd cell shown in the image, with the "ghost" editor in the cell.
<td role="gridcell" style="text-align: center; color: black; background-color: white;" aria-describedby="Grid_Col2" class="editable-cell" title="" tabindex="0">
<input type="text" autocomplete="off" maxlength="9" id="93_Col2" name="Col2" role="textbox" style="width: 100%; box-sizing: border-box;">
</td>
I cannot confirm "why", but I was able to resolve this by using setTimeout(). I know, I know... :-( It seems to have something to do with the "navigation" div element (header element) of the grid snapping focus back to it - I guess if the currently selected control doesn't have the "edited" CSS (and the header cannot be edited...), it won't/can't fully remove the input control?
The setTimeout() was put in the "afterEditCell" override (see code block below).
I also gained stability by having empty implementations of the most of the cell editing override functions:
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
let rawInput = $("#" + this.id + " tbody>tr:eq(" + iRow + ")>td:eq(" + iCol + ") input, select, textarea");
rawInput.select();
rawInput.focus();
setTimeout(() => {
//TODO: I hate this, but not able to determine why focus goes back to the keyboard
// navigation DIV instead of the cell being edited. So, we have to force it. :(
// This may have something to do with the "trick" to process keydown on non-input
// elements: https://github.com/free-jqgrid/jqGrid/blob/master/js/grid.celledit.js line 530
rawInput.focus();
}, 100);
},
afterRestoreCell: function (rowid, value, iRow, iCol) {
console.log("afterRestoreCell: (" + iRow + ", " + iCol + ") " + value);
},
afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
//console.log("afterSaveCell: (" + iRow + ", " + iCol + ") " + value);
},
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
//console.log("beforeEditCell: (" + iRow + ", " + iCol + ") " + value);
},
beforeSaveCell: function (rowid, cellname, value, iRow, iCol) {
//console.log("beforeSaveCell: (" + iRow + ", " + iCol + ") " + value);
return value; // note that this is required here!
},
beforeSubmitCell: function (rowid, cellname, value, iRow, iCol) {
//console.log("saving cell with value:" + value);
}
I have a datepicker in my kendo grid. This datepicker has been set so that user can be able to select only today's date as minimum. But suppose I selected
07/04/2016 (mm/dd/yyyy) as today's date and saved it. I check this record tomorrow
for editing, It does not shows up this date, when grid is in edit mode as
this date is now old than today.
How can I set past date to datepicker for only viewing and not selecting
the previous date than today. there have been a question that has already been asked. The problem is same but my datepicker is in grid. How can I will be able to achieve this.
Grid field:
columns: [ { field: "ExpDate", title: "Expiry Date", width: 300, filterable: false, editor: dateTimeEditor, format: "{0:MM/dd/yyyy}" },
],
//Java script function
function dateTimeEditor(container, options) {
$('<input onkeydown="return false" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({
value: new Date(options.model.ExpDate)
,min: new Date()
});
}
Please try with the below code snippet.
function dateTimeEditor(container, options) {
var expdatepic = $('<input onkeydown="return false" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
value: new Date(options.model.ExpDate)
});
var datepicker = $(expdatepic).data("kendoDatePicker");
datepicker.min(new Date());
}
Let me know if any concern.
I'm having trouble configuring a `Kendo UI' grid to use a DropDownList as an editor. I have a JS Bin example to reproduce my behavior. The goal is to populate the BinNumber, PartNumber and StockNumber fields once a selection is made from the dropdown. Currently I can't even get the DropDown to bind to the recordset properly. If I make a selection and move to another field, I get [object Object] in the BinNumber field. If I go back in and make another selection, the BinNumber then sticks. I have read the documentation thoroughly but I am still thoroughly confused by it.
For the [object object] mess have a look at this post, there is an attribute introduced back in late 2013 dealing with this issue data-value-primitive="true". In the past I just used to re-map the selection back to ds manually, but the attribute does it all for you, I tested in you jsBin and works fine.
binDropdownEditor: function (container, options) {
$('<input data-text-field="BinNumber" data-value-field="BinNumber" data-value-primitive="true" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: viewModel.binDropDownDataSource
});
}
On change binding (please paste into your JSBin javascript tab):
var bins =["BinNumber:12121"];
var gridDS = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(bins);
}
},
schema: {
model: {
id:"Row",
fields: {
Row:{type:"string"},
BinNumber: {type:"string"},
PartNumber: {type:"string"},
StockNumber:{type:"string"}
}
}
},
pageSize: 50
});
var binDropDownDataSource = [
{ BinNumber: "12345",PartNumber:"P-2929",StockNumber:"S-06565" },
{ BinNumber: "23456",PartNumber:"P-2323",StockNumber:"S-956565" },
{ BinNumber: "34567",PartNumber:"P-4344",StockNumber:"S-67676" } ];
function appendEditor (container, options) {
$('<input data-text-field="BinNumber" data-value-primitive="true" data-value-field="BinNumber" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: binDropDownDataSource,
change:function(e){
var ddldataitem = this.dataItem();
var griditem = gridDS.at(0); // you might need to tweak this line
griditem.set("PartNumber",ddldataitem.PartNumber);
griditem.set("StockNumber",ddldataitem.StockNumber);
}
});
}
var grid= $("#bins").kendoGrid({
dataSource: gridDS,
scrollable: false,
autoBind:false,
batch:true,
editable : true,
navigatable: true,
toolbar: [ {name: 'custom-create', text: "Add New Line Item"}],
columns: [ {"field":"Row", title: "Row", width: "20px"},
{"field": "BinNumber","title":"Bin", editor: appendEditor},
{"field": "PartNumber", title: "Part ", width: "200px",editable: false },
{"field": "StockNumber", title: "Stock ", width: "200px",editable: false }
]
}).data("kendoGrid");
$(".k-grid-custom-create").on("click", function (e) {
gridDS.add({ Row:"1"});
});
The observable you had plugged in is not really necessary the underling data source is already observable, I have removed it. Please consider improving following line the index won't be always 0 var griditem = gridDS.at(0);
Here's how my DropDown is setup. This is a boolean field, so you will have to adjust it accordingly to your field
columns.Bound(m => m.IsInForecast).Title("Is Forecasted").ClientTemplate(
"# if (IsInForecast == true) { #" +
"<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
"<option id='yes' selected value='1'>Yes</option>" +
"<option id='no' value='0'>No</option>" +
"</select>" +
"# } else { #" +
"<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
"<option id='yes' value='1'>Yes</option>" +
"<option id='no' selected value='0'>No</option>" +
"# } #"
);
I have a kendo grid where a column has an comobobox and an input. The On click event for the input works in IE and Firefox but doesn't work in Chrome. OnaBai helped create the following jsFiddle and I modified it with the way I have it. http://jsfiddle.net/ehnSq/17/.
Notice if you click on the image in chrome, it just closes the cell. Where as in IE or Firefox you can click the button and get the alert.
Here is my editor for the column.
$('<input data-text-field="CustomerName" data-value-field="CustomerId" style="width:175px" data-bind="value:' + options.field + '" class="k-combobox"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
filter: "contains",
dataSource: customerData,
placeholder: strings.EmptyDropDownMessage,
dataTextField: "CustomerName",
dataValueField: "CustomerId"
});
$('<input type="image" class="k-icon-addcustomer" src="../Images/Add2.png" title="' + strings.AddCustomerToolTipText + '" />')
.appendTo(container);
$(".k-icon-addcustomer").on("click", function (evt) {
evt.preventDefault();
alert("Code Needs to Go Here");
});
This will work in IE and Firefox and I am a loss why the click event is not fired in chrome.