悬停时也打开 kendo 编辑器
Open kendo editor on hover also
我有 Kendo 带有下拉菜单和日期选择器编辑器的网格。它工作正常,除了 dropdown/datepicker 当我单击该块时打开的编辑器。
有没有办法在悬停时也将块转换为编辑器形式(datePicker/dropdown)。
正常状态图片->
当我单击日期字段时,它变为 ->
当我点击下拉菜单时 - >
我希望块在悬停时转换为编辑器,块在模糊时应恢复正常状态。
我的编辑器模板是
function categoryDropDownEditor(container, options) {
$('<input required data-text-field="rsrc_Description" data-value- field="rsrc_cd" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: [{ "rsrc_cd": "EXTRS" , ... }],
});
}
这是时间块选择器的代码 - >
function numericEditorHh (container, options) {
$('<input name="editableBlock" data-bind="value:' + options.field + '" style="width:35px" tag="timeEditor" id="cccc" /> ')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
min: 0,
max: 23,
format: 'n0',
}).attr('maxlength', '2');
$('input[tag=timeEditor]').on('change', timeChange);
};
对于日期时间选择器 - >
function dateTimeEditor(container, options) {
$('<input name="editableBlock" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({ min: btch_strt_dt });
$('input[data-value-field=rsrc_dt]').attr('readonly', 'readonly');
$('input[data-value-field=rsrc_dt]').parent().css('margin-left','-5px');
}
加载网格后调用此方法
$("#gridName").on("mouseover", "td", function () {
var tr = $(this).closest("tr");
if (!$(this).hasClass("k-edit-cell")){
$("#gridName").data("kendoGrid").editCell($(this));
}
});
这适用于整行,但对列进行修改应该不难。同样在你的模糊效果上,你必须确保你正在保存数据。
$("#gridName").on("mouseleave", "td.k-edit-cell", function () {
$("#gridName").data("kendoGrid").saveRow();
});
现在试试这个,应该可以阻止散射,认为它应该有效。
祝你好运
我有 Kendo 带有下拉菜单和日期选择器编辑器的网格。它工作正常,除了 dropdown/datepicker 当我单击该块时打开的编辑器。
有没有办法在悬停时也将块转换为编辑器形式(datePicker/dropdown)。
正常状态图片->
当我单击日期字段时,它变为 ->
当我点击下拉菜单时 - >
我希望块在悬停时转换为编辑器,块在模糊时应恢复正常状态。
我的编辑器模板是
function categoryDropDownEditor(container, options) {
$('<input required data-text-field="rsrc_Description" data-value- field="rsrc_cd" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: [{ "rsrc_cd": "EXTRS" , ... }],
});
}
这是时间块选择器的代码 - >
function numericEditorHh (container, options) {
$('<input name="editableBlock" data-bind="value:' + options.field + '" style="width:35px" tag="timeEditor" id="cccc" /> ')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
min: 0,
max: 23,
format: 'n0',
}).attr('maxlength', '2');
$('input[tag=timeEditor]').on('change', timeChange);
};
对于日期时间选择器 - >
function dateTimeEditor(container, options) {
$('<input name="editableBlock" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({ min: btch_strt_dt });
$('input[data-value-field=rsrc_dt]').attr('readonly', 'readonly');
$('input[data-value-field=rsrc_dt]').parent().css('margin-left','-5px');
}
加载网格后调用此方法
$("#gridName").on("mouseover", "td", function () {
var tr = $(this).closest("tr");
if (!$(this).hasClass("k-edit-cell")){
$("#gridName").data("kendoGrid").editCell($(this));
}
});
这适用于整行,但对列进行修改应该不难。同样在你的模糊效果上,你必须确保你正在保存数据。
$("#gridName").on("mouseleave", "td.k-edit-cell", function () {
$("#gridName").data("kendoGrid").saveRow();
});
现在试试这个,应该可以阻止散射,认为它应该有效。 祝你好运