How do I stop kendo editable from generating an empty textbox -- can i destroy on mouse leave?

[Stephanie]

Hello,

 

I have a kendo editable grid with one column only.  this column adds a textbox  rowwhen a button named 'Add' is pressed.  If no text is put into the box and the user leaves the textbox an empty row is created.

We had allowed 'required' model validation to trigger the kendo inbuilt validation tooltip however it is not compliant with our UX standards. 

I therefore would like to destroy the textbox on the mouse leave if the textbox is empty. 

 

I have tried and failed to find and trigger the mouse leave event.

 

Here is my grid.

 @(Html.Kendo().Grid(Model.MyModelProps)
                    .Name("myeditabletable")
                    .ToolBar(tools => tools.Create().IconClass("fas fa-plus").Text("Add").HtmlAttributes( new { @class = "btn btn-primary whiteText" }))
                    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
                                                                         "<input type='hidden' name='MyModelProps[#= index(data)#].Id' value='#= Id #' />"
                            );

                        columns.Bound(p => p.MyModelProp).Title("<b>Synonym</b>").Editable("myeditabletable").ClientTemplate("#= Name #" +
                                                                                                                                  "<input type='hidden' name='MyModelProps[#= index(data)#].Name' value='#= Name #' />"
                            );

                        columns.Command(command => command.Destroy().Text(" ")
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                        })
                        .ServerOperation(false)
                    )
                    )

 

 

 

[Ivan Danchev]

Hello Stephanie,

You can attach a mouseleave event handler to the textbox in the Grid's Edit event handler:

function onEdit(e) {
  $(".k-edit-cell input").blur(function() {
    if($(this).val() == "") {
    	$(this).remove();
    }
  })
}

The Edit event fires when an existing record is edited or when a new one is being added.

I've shown this with the blur event, since to me it appears more intuitive to remove the textbox once the user clicks outside of it, rather than do that on mouseleave, as a mouseleave might be accidental. But if you want you can replace blur with mouseleave. Then the logic in the handler checks the value of the textbox, and if it is empty - removes it.

Have in mind that the Grid will create another textbox, if you click within that cell to edit the record once again.

Regards,
Ivan Danchev
Progress Telerik