I have a scrollable Kendo Tree List. The rows of it can be selected. After selecting, the user can scroll away. But if he clicks on ,delete', a confirm dialog asks ,Do you want to delete the selected item'.
What I want is that after clicking delete, the selected row stays at the same position if the user can still see it. Otherwise, the row should be positioned in the middle of the list (scrolling node to middle).
Is there something like element.isCurrentlyShown ?
(Provisionally, I use
this.element.find(".k-grid-content").scrollTop($(selectedRow).position().top)
to ensure that the selectedRow is shown.)
Related
I use material ui select and I noticed that when I select all items, close the select and reopen it again, the position of the scroll is moved to the end, is there any way to keep it at top?
current behavior:
expected behavior:
I looked for all options presented in the api but no one of them helped, my idea is to get the DOM element directly and apply element.scrollTo=0
This issue is that material-ui's autoFocus goes to the last item by default. I couldn't get it to work differently unfornately (it seems torevolves around playing with tabIndex in the Paper element of the list). However what you can do is disable the focus all together:
<Select ... MenuProps={{autoFocus: false}} >
...
</Select>
The pitfall of this approach is that whenever you open the menu, it'll always focus on the 1st item of the list, even though only the last item was selected.
example: https://codesandbox.io/s/material-demo-yv5vg
I am wondering if, when a grid has no items to show, there is a way, when the user right clicks on the grid, to include the context menu in order to show an "Add row" option.
Am working on a data table, that is based on this api http://www.datatables.net/examples/api/multi_filter_select.html
I have done some modification, but the main idea is the same.
At the moment i want to make it possible for the user to click on a row which makes it selected and changes color. If the user clicks on another row the old one gets unselected and color get changed back. But as you can see in the API example you can minimize the visual result by searching or change the amount of entries that should be visible.
The code for selecting and deselecting is below:
unction select(t) {
imei=t;
//console.log("IMEI");
//console.log(imei);
if(selected!=""){
console.log("Selected"+selected);
document.getElementById(selected).style.backgroundColor=savedColor;
}
selected= t;
savedColor=document.getElementById(selected).style.backgroundColor;
document.getElementById(selected).style.backgroundColor='#F7F000';
}
The problem is that when a user selects a row and then make a search which make the selected item invisible and then selects a new row. Then when i want to retrieve the old row by document.getElementById(selected) so i can change the color to the old one, it return null.
It's only when the element is not visible. If the previous is visible when selecting a new one, it works-
After clicking on Delete button in Kendo UI Grid row is disappear, but without clicking save row will not delete.
But with disappeared row users forgets to press save.
Now I want to make it be visible but with opacity.
Added code to .KendoGrid({...:
remove: function(e) {
e.preventDefault();
e.row.show();
e.row.animate({opacity:0.3},800);
}
But prevendDefault in this code acts on save button to, and it doesn't work.
How can I leave row visible after pressing Delete button OR delete row direct on button clicking without save?
I assume your grid's datasource is configured in batch mode; hence, the reason there is a save button? Well, if you want the item to be deleted immediately without the user having to remember to click save, set batch: false on the grid's datasource.
I have a web page that has many divs, containing a number of form fields that the user needs to fill out.
Now within one of the divs, I have a radiogroup option that determines additional DIVs being made available to the user for input using jQuery .show().
My question is, when the user selects the radiogroup option, the new DIV appears below this radiogroup option but what I would like, would be a means to scroll this new DIV to the top of the browser so that the user doesn’t miss it below.
Assuming it's the <body> that get scrolled, you could do this:
var newdiv = $('#div_id');
$('body').animate({scrollTop: newdiv.position().top});
Example: http://jsfiddle.net/V36WL/1/