Open kendo editor on hover also

Question

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

Provide your code which you are using to open editor including selector and event. — AsgarAli, Apr 28 '16 at 09:52
@AliKhanusiya I have edited my question, I have shown the editor i am using. — Rajdeep, May 02 '16 at 05:18

Mario Garcia · Accepted Answer · 2016-05-02T12:48:19.057

2

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

edited May 02 '16 at 12:48

answered Apr 28 '16 at 15:08

Mario Garcia

623
5
17

Btw, most of the times you select a value from your DropDown, it will directly save, since the mouse will already be out of the row, and the "save" event will be called. Dunno if that's an issue for you :P – Mario Garcia Apr 28 '16 at 15:10
Your code works but it is only making the dropdown editable on row hover, not the date picker or time block. Can you help with that please. Also, please give some idea of making specific column editable – Rajdeep May 02 '16 at 05:19
For single column, you would have to attach the even to a single cell, instead of the full row, so maybe try changing 'tr' with 'td' – Mario Garcia May 02 '16 at 06:18
hey when i apply your code the html changes abrubtly,it just scatters, the new look is like this one [4]: http://i.stack.imgur.com/j8cRK.png do you have any working code or link – Rajdeep May 02 '16 at 11:05
hey, you code works great now, but there is one problem, i cant select any thing from the dropdown, it may be because while going to select an option I change the 'td' so a new event gets fired. But, i can select the option from dropdown using key-up-down – Rajdeep May 02 '16 at 13:08
In the mouseleave event, add a condition, so that if the dropdown is open, dont fire the .saveRow(); I think that might do the trick – Mario Garcia May 02 '16 at 13:11
yes, i removed the mouse leave event completely, data will get selected when clicked on datepicker or dropdown. Text blocks doesn't get saved when i remove mouse from them after editing. But, i will handle that. Thanks – Rajdeep May 02 '16 at 13:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110838/discussion-between-mario-garcia-and-spark). – Mario Garcia May 02 '16 at 13:15
A completly different but related question : is there any way to find the row number where I am changing the dropdown value ? – Rajdeep Jul 12 '16 at 11:13

Open kendo editor on hover also

1 Answers1

Linked