jquerydrop-down-menukendo-uikendo-gridkendo-editor

Open kendo editor on hover also

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 - >

enter image description here

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

enter image description here

When i click on dropdown - >

enter image description here

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

  • 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