CODEWITHSUNDEEP
javascripthtmljquerycsskendo-ui
Jill
Jill

Reputation: 35

Kendo sortable preventing focus on input

I am using kendo listview and grid components to show the same information in two different views, a listview of cards is the primary view, the grid view is based on a table, both are integrated with the Kendo Sortable widget. I am trying to allow users to edit one of the inline elements in the grid view, a span view with a current value is clicked and hidden and an input field when takes its place. This functionality works fine in the list view of cards, but if the input field's type is a number type (the input field type (text/num) is based on the data-value-id). If the input type is a number, the default arrows allow one click before the input automatically loses focus. Clicking outside the input field does not cause it to lose focus either, which triggers a blur event save function that again, works fine in the list view. instead the user would have to click on the input field again to regain focus, and then the enter key or simply clicking away will actually allow the desired behavior of the input field to lose focus and trigger the blur.

<span class="single-value">
<input data-bind='value: e.data.Value, visible: Editing, attr: { data-value-id: e.data.ID, type: ValueType }, events: { blur: saveInput, keyDown: valueKeydownHandler }' /></span>        

<span class="data-value-editable" data-bind='click:editSingleValue, invisible: Editing, css: { data-value-editable: Editable }'>

<span data-bind='text: e.data.Value'></span>
</span>

Both components use the same input dataSource and I have found that the data-value-id attribute name does have to be distinctive from the other component but outside of that, they are the same. Why does the input field incrementor/decrementor arrows work properly for the list view but not the grid in Kendo? Ive found issues with the Kendo Sortable component blocking an input field from losing focus before, but resolved that by destroying the component, however this caused issue initially with the kendo grid view as it was not initialized with the Kendo Sortable component and would throw an undefined error when trying to destroy, I was able to circumvent that by initializing the grid with Sort but the arrows cause the input field to lose focus whereas prior to this I had the opposite problem in the list view of Sortable not allowing the input field to lose focus.

Upvotes: 0

Views: 321

Answers (1)

Jill
Jill

Reputation: 35

I wasnt able to resolve this using a grid and I did wind up having to refactor the component to use a Kendo Listview, which required a complete restyling of the UI on my behalf but was worth it in the end based on the time I spent troubleshooting this issue. The Kendo Sortable is a beast of it's own, I also wound up having to apply the sortable to the new list view with disabled functionality in order for both views to correlate, additionally the input field on the new list view has to be focused with its own data-value-id so that when that particular view is clicked, the focus is on its own input field and not the input field from the expanded list view.

Upvotes: 0

Related Questions