Clear selection and display popup on the grid scenarios

[walker1234Participant]

Creating a new thread for Yavor to look at to address some additional questions. The questions are a followup- questions from the last JSFiddle shared by Yavor in this thread (https://www.jqwidgets.com/community/topic/deciding-the-value-based-on-the-flag-3/). For some reason, after pasting same question on that thread, when I edited my post, it is not showing my question anymore there. However, on the forum, it does shows the freshness of thread by me 7 minutes as of right now.

Hi Yavor,

Thanks for your answer in other thread. Looking good, however, I noticed few things and have few more follow-up questions based on this slightly modified fiddle :
https://jsfiddle.net/walker123/jzsuntx3/23/

Case 1:
If I checkmark, the button becomes active which makes sense.After selecting few items and pressing Get rows button, the $('#jqxgrid').jqxGrid('clearselection'); doesn’t seem to be working.I still see the grid with checkmarks selected.

Case 2:

Since user has selected few rows in case 1, let’s say after selection few rows, the user doesn’t want to hit the Get rows button and uncheck the last selected items manually. So now the grid doesn’t have anything selected.
However, the Get rows button remains active. Is it possible to disable the Get rows button on the fly if the user decides to uncheck the rows manually?

Case 3:
I noticed you have commented out following lines in your last fiddle:

`if (yearEligibleValue == “N”) {
// editor.jqxDropDownList({selectedIndex: null, disabled: true, placeHolder:”N/A” });
}
else {
// editor.jqxDropDownList({ disabled: false});
}`

Is it necessary to comment it out to make other requirements work? Commenting it out actually started allowing users to select a date from the cell where we have “N/A’ displayed.

Case 4:
4.1. If I select Start Year value greater than End Year value, it shows up like the following without showing the popup.

And the popup only displays when I click somewhere outside of the screen as shown below (Image below shows when I clicked outside the screen).

Question: Is it possible to display the popup without having to click outside somewhere?

4.2. Let’s say after performing steps mentioned in 4.1 above, If I select the correct year range (Stary Year < End Year) for the same row where I selected the wrong years (Stary Year > End Year) before, is it possible to get rid of the previously generated error popup as soon as I select correct years?

Thanks,
Walker1234

[Yavor DashevParticipant]

Hi Walker 1234,

The modified code example according to your requirements: https://jsfiddle.net/bnzk6a4p/

Also I would like to answer your questions in a convenient way:

Case 1: The grid clears the selection of the rows(the changed background color) however the column with checkboxes doesn’t have anything to do with the grid selection that is why its not cleared on the clearselection method.

Case 2: In the jsfiddle you will find the code for this functionality and how it works.

Case 3: You can uncomment this code if the functionality suits you.

Case 4.1: Yes this behavior is normal because the value of the cell is validated after the cell editing has ended(after losing focus on the edited cell), but again in the jsfiddle you will find the code on how to show the validation popup before the cell has lost focus.

Case 4.2: Again the code for this functionality can be found in the jsfiddle.

Let me know if this solution suits you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Thanks Yavor. Few more questions:

1. When I select something where Start Year is greater than End Year, I can see the error message which is good. Once I select End Year value greater than Start Year, I can see the message getting disappear, which is good as well. However, I noticed there is a left over of the message in a downward arrow form in the UI, as shown in the image below. Is it possible to get rid of that?

2. while printing the selectedRows in console, I see some additional unwanted parameters showing up in the console.log as explained below:

I added a console.log in this JSfiddle:

https://jsfiddle.net/walker123/1r83zk0x/3/

` console.log(“Testing additional parameters in console.log”);
console.log(selectedRows);`

And got the following in console.log after selecting a row:

“Testing additional parameters in console.log”

[{
  available: true,
  boundindex: 0,
  endyearValue: "2021",
  firstname: "Yoshi",
  lastname: "Nagase",
  price: 2.5,
  productname: "Caffe Americano",
  quantity: 10,
  startyearValue: "2015",
  total: 25,
  uid: 0,
  uniqueid: "2918-19-30-24-302718",
  visibleindex: 0,
  yeareligible: "Y"
}]

I am wondering what are these additional parameters in above object?

uniqueid: "2918-19-30-24-302718",
  visibleindex: 0,  boundindex: 0,

Is it possible to get rid of these?

Thanks,
Walker1234

[Yavor DashevParticipant]

Hi Walker1234,

1) You can add the following code snippet after the validationPop.remove() line add this ` editor[0].previousSibling.remove();

2) These parameters are generated by the jqxGrid and removing them is not support by the jqxGrid component.

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi Yavor,

Thanks. I will try that but before that I am trying to figure out one issue. The JSFiddle that you shared works fine : https://jsfiddle.net/bnzk6a4p/

By works fine I want to focus on when a user clicks on one check box the button becomes active.

But in my code, I am facing one problem.

I had to click the check box two times and then only the submit button is turning out to be active. In fact, if I don’t select any row and just select a year from the Start Year dropdown, the button is becoming active.This is true with the above fiddle as well.

Do you know what might be happening in my case? I mean why it is taking two checkbox selection to make the submit button active?

The way my application is setup is as follows:

1. As soon as application loads, it goes to index.html page. There is a button on this page and when user clicks on it, I direct it to builder.html page where I have the logic of above JS fiddle.

Please let me know if my issue is not understandable. I will try to create a simple mock example for this.

[Yavor DashevParticipant]

Hi Walker1234,

Yes, I understand your requirements, but for your use case it will be best to set the selectionmode to checkbox if you want to have a properly working row selection of a row on checkbox selection.

I share with an updated jsfiddle with the new selection mode and a few changes too: https://jsfiddle.net/jqtsa6xk/1/

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi Yavor,

The selectionmode: 'checkbox', seems to be adding an additional checkbox column in addition to already one as shown in your JSFiddle – https://jsfiddle.net/jqtsa6xk/1/

Q.1. So is there a way to make it look like what we had before with using selectionmode: 'checkbox', option

Q.2.

Saw the following code in your latest fiddle (share above). Could you elaborate what you were trying to achieve here?

`$(‘#jqxgrid’).on(‘rowunselect’, function (event)
{
setTimeout(() => {
var selectedRows = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);
checkIfThereAreSelectedRows(selectedRows);
}, 10);

});`

Thanks,
Walker1234

[Yavor DashevParticipant]

Hi walker1234,

As I stated in one of my previous replies its normal to have the button to not be disable when the dropdown editor is opened, because the row is selected and also the checkbox in the ‘available’ column is not responsible at all for the grid selection that is why I have suggest to use the checkbox selection mode in order to have proper selection functionality with the checkbox.

I would suggest if it suits you to remove the ‘available’ column and use the checkbox selection of the jqxGrid in order to have a proper checkbox selection functionality.

For your second question the function is quite simple and descriptive – it checks if there are any rows selected and based if there are none or some selected determines the state of the ‘Get Rows’ button.

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi Yavor,

I have quick follow-up questions:

Q1. If I use the checkbox selection mode as you suggested, then how would the following part of the code (Js Fiddle: https://jsfiddle.net/jqtsa6xk/1/) going to be handled since there won’t be any data field kind of thing available to us.

 $('#jqxbutton').click(function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
            
                var selectedRows = rows.filter(x => x.available)

Q2. Withe the checkbox selection mode, would it be possible to have something like Action written on the top post cell instead of a checkbox which basically selects all the checkboxes if I check the topmost one?

Thanks
walker1234

[Author]

Posts