打开kendo编辑器也悬停 [英] Open kendo editor on hover also

问题描述

我有Kendo网格与下拉列表，datepicker编辑器。它可以正常工作，除了当我点击块时，下拉菜单/ datepicker编辑器打开。

可以有一种方法，以便将块转换为编辑器窗体（datePicker /

正常状态图像 - >

当我点击日期字段时，它会更改为 - >

当我点击下拉菜单 - >

我希望将块转换为编辑器的悬停本身，块应该得到

我的编辑器模板是

 函数categoryDropDownEditor（container，options）{
 $（'< input required data-text-field =rsrc_Descriptiondata-value-field =rsrc_cddata-bind =value：'+ options.field + '/>'）
 .appendTo（container）
 .kendoDropDownList（{
 autoBind：true，
 dataSource：[{rsrc_cd：EXTRS 。}]，
}）; 
 
} 
  

这是TimeBlock选择器的代码 - >

  function numericEditorHh（container，options）{
 $（'< input name =editableBlockdata-bind =value ：'+ options.field +'style =width：35pxtag =timeEditorid =cccc/>'）
 .appendTo（container）
 .kendoNumericTextBox（{
小数：0，
 min：0，
 max：23，
格式：'n0'，
}）。attr（'maxlength'，'2'）; 
 $（'input [tag = timeEditor]'）。on（'change'，timeChange）; 
}; 
  

对于datetime选择器 - >

  function dateTimeEditor（container，options）{
 $（'< input name =editableBlockdata-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（）; 
}）; 
  

现在尝试一下，这应该会阻止散乱，认为它应该起作用。
祝你好运

I have Kendo grid with dropdowns, datepicker editor. It works fine except for the dropdown/datepicker editor open when i click on the block.

Can there be a way so that the block be converted into editor form(datePicker/dropdown) on Hover also.

Normal state image - >

When i click on the date field , it changes to ->

When i click on dropdown - >

I want to the blocks to be converted into editor on hover itself and blocks should get back to normal state on blur.

My editor template is

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" , ... }],
        });

}

Here is the code for TimeBlock picker - >

 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);
};

For datetime picker - >

 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');
}

解决方案

Call this after loading the grid

  $("#gridName").on("mouseover", "td", function () {
     var tr = $(this).closest("tr");
     if (!$(this).hasClass("k-edit-cell")){
        $("#gridName").data("kendoGrid").editCell($(this));
  }
});

This works for the whole line, but shouldn't be hard to modify for a column. Also on your blur effect you must make sure you are saving the data.

$("#gridName").on("mouseleave", "td.k-edit-cell", function () { 
   $("#gridName").data("kendoGrid").saveRow();
});

Try this now, this should stop the scattering, think it should work. Good luck

这篇关于打开kendo编辑器也悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！