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

1 Answer 13 Views
Grid TextBox
Stephanie
Top achievements
Rank 1
Stephanie asked on 09 Nov 2021, 02:12 PM

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

 

 

 

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 12 Nov 2021, 01:55 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid TextBox
Asked by
Stephanie
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or