Datagridview scrollbar in visibles rows - exception

I'm new in c# desktop.
I want to filtering a dataGridView with textbox changed , i have the solution to hidding the row like this :
foreach (DataGridViewRow row in dataGridView1.Rows)
{
if (row.Cells["column1"].Value.ToString().Trim().Contains(textbox.Text.Trim()))
{
row.Visible = true;
}
else
{
row.Visible = false;
}
}
My problem is :
and i have this Exception :
enter image description here
and i cant use datagridview.datasource=dt;
So please what is the solution to make the scrollbar and the mousewheel scrolling in my datagridview
Thanks;

Related

ion-slides bound [pager] will not reappear when switching from false to true based on condition

Following is the html part for ion-slides :
<ion-slides [pager]="showPager" [options]="slideOpts" #slides>
component js file variables initially assigned like this :
pages: number = 1;
showPager: boolean = false;
and conditionally assigned like this:
if(this.pages > 1) {
this.showPager = true;
} else {
this.showPager = false;
}
So, when I change the value of var "pages" , it does not update the pager attribute , can anybody guide me in this.. Thank you so much in advance

What’s wrong with my website search function? It is a Bootstrap website with no CMS

The website is https://thestripclubhookup.com
When I click on the search and try to type in a two word city, it automatically closes the search box.
What is going on with it? I have tried to figure it out but I have no clue what it could be.
It does this on both mobile and desktop.
Thanks in advance for the help.
Here is the JS snippet for the search function:
function goCity() {
var category = document.getElementById("categories").value;
if (category == "clubs") {
var city = document.getElementById("cities").value;
//console.log(city);
if(city != "Location") {
window.location.href = city;
}
else {
document.getElementById("error").classList.add("city-error-style");
document.getElementById("error").innerHTML = "Please Choose Location";
}
}
}
For anyone who has this problem where when they press the space bar in their search and the drop down menu closes, I fixed it by doing the following:
Changing the following line in jquery.nice-select.min.js:
if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?l.trigger("click"):s.trigger("click"),!1
to
if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1

Why is button not getting disabled using jQuery?

Let me clear first that I checked other answers. They're either too old or not working for me...
I am trying to dynamically disable and enable two navigation buttons using a function:
function arrowDisplayConfig() {
if (modeInSight == 1) {
$("#rightArrow").prop("disabled",false);
$("#leftArrow").prop("disabled",true);
}
if (modeInSight === maxModes) {
$("#rightArrow").prop("disabled",true);
$("#leftArrow").prop("disabled",false);
}
else {
$("#rightArrow").prop("disabled",false);
$("#leftArrow").prop("disabled",false);
}
}
Basically disabling left arrow when its the first item in carousel and right one when its the last item, while keeping both enabled when in-between.
The problem is that this works perfectly for all cases except the first one. Don't know why.
P.S
I increase and decrease the modeInSight integer value in other functions and call this function after it.

Smoothly loading messages Angular 8

I'm writing sort of a chat application using Angular 8 and here's what I want to achieve:
My dialogue component that represents a chat between two users gets one page of last messages that consists of 10 messages after initiating. The div that contains these messages scrolls down to the very last message. When a user scrolls up and reaches a certain point the next page loads. The two arrays join and the user sees now 20 messages. Here's what I have so far:
HTML:
<div>
<div #scrollMe [scrollTop]="scrollMe.scrollHeight" (scroll)="onScroll($event)" style="overflow-y: scroll; height: 400px;">
<ul>
<li *ngFor="let message of messages?.reverse()">
</ul>
</div>
</div>
Typescipt:
loadMessages(page: number, itemsPerPage?: number) {
this.messageService.getMessageThread(page, itemsPerPage || 10)
.subscribe((res: PaginatedResult<MessageThread>) => {
if (this.messages == null) {
this.messages = res.result.messages;
} else {
this.messages = this.messages.concat(res.result.messages);
}
});
}
onScroll(event) {
if (event.target.scrollTop < 100) {
if (this.pagination.currentPage >= this.pagination.totalPages) {
return;
}
this.loadMessages(++this.pagination.currentPage);
}
}
It works, but the problem is that when I join these two arrays, my scrollbar jumps very ugly and since I hold the scrollbar it stays at the same position and keeps loading next pages. I am very new to Angular and front-end in general so I have a feeling that I'm missing something. I tried to find any ready-to-go solutions but could not. Any help would be appreciated.
Please note that I don't want to use JQuery.
Several things:
First, we need a loading flag:
loading = false;
Then we make loadMessages return an observable instead of handle the result:
loadMessages(page: number, itemsPerPage?: number) {
this.loading = true;
return this.messageService.getMessageThread(page, itemsPerPage || 10);
}
A separate method handleResponse handles the response by setting loading to false and concatenating the messages.
Then we can account for the request delay in the scroll handler and use the loading flag to prevent multiple requests:
onScroll(event) {
// get the scroll height before adding new messages
const startingScrollHeight = event.target.scrollHeight;
if (event.target.scrollTop < 100) {
if (this.pagination.currentPage >= this.pagination.totalPages) {
return;
}
else if (!this.loading) {
this.loadMessages(this.pagination.currentPage).subscribe((res) => {
this.handleResponse(res);
// using setTimeout lets the app "wait a beat" so it can measure
// new scroll height *after* messages are added
setTimeout(() => {
const newScrollHeight = this.scrollDiv.nativeElement.scrollHeight;
// set the scroll height from the difference of the new and starting scroll height
this.scrollDiv.nativeElement.scrollTo(0, newScrollHeight - startingScrollHeight);
});
});
}
}
}
Stackblitz (updated)

Can't add new object to KendoUI grid if filter is applied to any column

I use KendoUI grid with popup edit mode. After applying filter to any column it is not possible to add new object correctly. Pressing Add button many times does not show edit popup. But after clearing the filter empty objects are shown in the grid.
Is there any workaround?
I found a workaround. Instead of standard Add button use toolbar template in which add link "Add" with custom handler triggering grid add. In that handler check if filtering is used on grid and if so store current filtering to a var and remove filtering. Also bind to grid "save" and "cancel" events handlers which will apply previous filtering after adding new object (or cancelling).
<kendo:grid-toolbarTemplate>
<div>
<a class="k-button k-button-icontext" onclick="addItemHandler()">Add</a>
...
var gridFilter;
function addItemHandler() {
var table = $("#myGrid").data("kendoGrid");
gridFilter = table.dataSource.filter();
if (gridFilter) {
table.dataSource.filter(null);
}
table.addRow();
}
function gridSavedHandler(e) {
restoreFilter(e.sender);
}
function gridEditCanceledHandler(e) {
e.preventDefault();
e.sender.cancelChanges();
restoreFilter(e.sender);
}
function restoreFilter(table) {
if (gridFilter) {
table.dataSource.filter(gridFilter);
gridFilter = null;
}
}
$(document).ready(pageInitHandler);
function pageInitHandler() {
var table = $("#myGrid").data("kendoGrid");
table.bind("save", gridSavedHandler);
table.bind("cancel", gridEditCanceledHandler);
}
Workaround is complicated one but really works.