Deciding the value based on the flag

[walker1234Participant]

Please take a look at my JSFiddle. I have a YearEligible column with Y and N values in the cell for each record. Based on this I want to decide what values does the Year column sends upon clicking Get rows button.

Explanation in detail regarding my requirement:

Let’s say If I have checked the very first row ( as shown in the image below):

When I click on the Get rows button, I can see the following in console.log which looks good:

[{
  available: true,
  boundindex: 0,
  firstname: "Mayumi",
  lastname: "Nagase",
  price: 3.25,
  productname: "Espresso con Panna",
  quantity: 6,
  total: 19.5,
  uid: 0,
  uniqueid: "2128-24-28-17-311629",
  visibleindex: 0,
  yeareligible: "Y",
  yearValue: "2011"
}]

However, let’s say if I select a record where the Year Eligible column has a value of N and click on the Get rows button, I see the following in console.log:

[{
  available: true,
  boundindex: 1,
  firstname: "Regina",
  lastname: "Davolio",
  price: 3.3,
  productname: "Doubleshot Espresso",
  quantity: 8,
  total: 26.4,
  uid: 1,
  uniqueid: "2917-25-23-18-212828",
  visibleindex: 1,
  yeareligible: "N"
}]

My observation:

The above console.log is not returning anything for yearValue, which makes sense since I didn’t select anything.

My Questions:

1. In above scenario, is it possible to return a default value of yearValue as -1? Basically, I want to include yearValueas -1 when a user selects a record with Year Eligible value set to N.

2. Display N/A on the cell under Year column for which the Year Eligible column has a value of N?

[Yavor DashevParticipant]

Hi walker1234,

Based on the code example that you have shared there is quick and easy JavaScript solution for your scenario.

This is the modified method from your code example:

  $('#jqxbutton').click(function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
            
                var selectedRows = rows.filter(x => x.available)
                
                for(let i = 0; i < selectedRows.length; i++) {
                    
                    if(selectedRows[i].yeareligible === "N" && selectedRows[i].yearValue === undefined) {
                        selectedRows[i].yearValue = 'N/A';
                    }
                    else if (selectedRows[i].yeareligible === "N" && selectedRows[i].yearValue !== undefined || null ) {
                        selectedRows[i].yearValue = -1;
                    }

                }
               console.log(selectedRows)
            
            });

Let me know if that works for 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]

Hi Yavor,

The following code did what I was looking for as far as my question 1 is concerned from my original post. :

for(let i = 0; i < selectedRows.length; i++) {
        
     if(selectedRows[i].yeareligible === "N" && selectedRows[i].yearValue === undefined) {
          selectedRows[i].yearValue = '-1';
      }
                  

  }

As far as my second question is concerned:

Display N/A on the cell under Year column for which the Year Eligible column has a value of N?

I want to display N/A on the grid if the Year Eligible column has a value of N. Any idea, how can I achieve this?

[Yavor DashevParticipant]

Hi walker1234,

You can use the setcellvalue method in order to set the value in the cell according to certain statement.

I have modified the code snippet so that it showcases how to implement the setcellvalue method:

            $('#jqxbutton').click(function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
            
                var selectedRows = rows.filter(x => x.available)
                
                for(let i = 0; i < selectedRows.length; i++) {
                    
                    if(selectedRows[i].yeareligible === "N" && selectedRows[i].yearValue === undefined) {
                        selectedRows[i].yearValue = 'N/A';

                        //Using setcellvalue method 
                        $("#jqxgrid").jqxGrid('setcellvalue', selectedRows[i].boundindex, "yeareligible", "N/A");
                        
                    }
                    else if (selectedRows[i].yeareligible === "N" && selectedRows[i].yearValue !== undefined || null ) {
                        selectedRows[i].yearValue = -1;
                    }

                }
            });

Let me know if that works for 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]

Hi Yavor,

Thanks. Your approach works fine when I click on the Get rows button and I can see it working in this JSFiddle and it shows like this:

However, I would like to clarify my requirement. Sorry if I wasn’t clear enough in my earlier posts.

1. I want to display N/A when the jqxgrid loads and not when I click on Get rows button. So, basically, just like it is displaying in the image above, I want to display exactly the same when the grid loads for the first time. I tried moving the logic outside $('#jqxbutton').click(function () { function but it didn’t work. I am wondering if something needs to happen inside createeditor function?

2. For cell values where we have yearEligible = N, can we just disable the jqxDropdownlist completely and display N/A as explained in point #1 above as soon as the grid loads/initializes?

[Yavor DashevParticipant]

Hi walker1234,

Thank you for the additional information!

Now I guess I completely understand you use case and I have modified the code so that it may suit your needs according to your requirements.

For your first requirement its best to use cellsrenderer callback property of the column and for the second one we can use initeditor callback to disable the jqxDropDownList according to the year value.

Your modified fiddle from your last post: https://jsfiddle.net/13q6bcud/1/
The modified code:

  {
                    text: 'Year',width: 120,datafield:'yearValue' , columntype: 'dropdownlist', editable: true,
                    cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                        var yearEligibleValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "yeareligible");
                            if(yearEligibleValue == "N") {
                                return "N/A";
                            }
                            else {
                                return '' + value + '';
                            }
                    },   
                    createeditor: function (row, column, editor) {
                                var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
                                editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
                    },
                    initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
                        var yearEligibleValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "yeareligible");
                        
                        if (yearEligibleValue == "N") {
                            editor.jqxDropDownList({selectedIndex: null, disabled: true, placeHolder:"N/A" });
                        }
                        else {
                            editor.jqxDropDownList({  selectedIndex: 0, disabled: false});

                        }
                    }
                }

Let me know if that works for 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]

Hi Yavor,

Excellent. That works. One quick question – Do you think I can force user to select the dates if they haven’t for the cells where we have jqxDropdownlist available?

Like when they click on Get Rows button, I want to validate whether they have selected a year from the dropdown list or not and if they haven’t , then I should not allow them to click Get rows button, maybe.

Thanks

[Yavor DashevParticipant]

Hi walker1234,

Yes, this functionality can be achieved using the validation property of the column.

Again, I have modified the jsFiddle so that it may suit your needs: https://jsfiddle.net/wojnxz1p/2/

The added code as well:

                    validation: function (cell, value) {
                        var yearEligibleValue = $('#jqxgrid').jqxGrid('getcellvalue', cell.row, "yeareligible");

                        if (yearEligibleValue != "N"){

                            if (value === null || value.length == 0) {

                                document.getElementById('jqxbutton').disabled =true;
                                return { result: false, message: "You must select a year!" };
                            }
                            else {

                                document.getElementById('jqxbutton').disabled =false;
                                return true;
                            }
                        }
                    }

Let me know if that works for 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]

Hi Yavor,

I tried putting your validation code in the JSFiddle, and for some reason, it doesn’t seem to be working (button is not hidden and upon clicking the button it’s not doing any validation). Here is the modified JSFiddle with your code: https://jsfiddle.net/rk9085pt/

Please let me know if I am missing anything here?

Thanks,
walker1234

[Yavor DashevParticipant]

Hi walker1234,

I have modified again the js fiddle so that it may suit your needs.

When you click the ‘Get Rows’ button it will validate the cells in the year column and it will display a popup message and after you change the cells value it will remove the popup.

Link to the modified fiddle: https://jsfiddle.net/hme3wnts/

Let me know if that works for 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,

Quick questions after looking at your JS Fiddle – https://jsfiddle.net/hme3wnts/:

1. I can see that clicking Get rows method is showing Invalid Value if date is not selected. Do you think that it’s possible to show this only for checked rows and not for all other rows with Year Eligible as Y? I mean right now, it is showing Invalid Value for those rows as well for which I didn’t select the check box.

2. Is it possible to show some different customized message instead of Invalid Value ? Like – Please select a year for your selected row

Thanks,
Walker1234

[Yavor DashevParticipant]

Hi walker1234,

I have modified the code example that I have shared with you the last time so that it may suit your needs.

Modified jsfiddle: https://jsfiddle.net/2zq0ykt9/

Also if you want to change the message of the validation pop up you can change the last parameter of the ‘showvalidationpopup’ method according to your needs like so:
$("#jqxgrid").jqxGrid('showvalidationpopup', rowindex, "datafield", "Another validation message");

Let me know if that works for 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]

Hi Yavor,

Thanks for your inputs.

I have modified JSFiddle to include two date column Start Year and End Year. I am wondering if there is any JQXDropdownlist way of making sure that before user hits the Get Rows button, if it is possible to make sure that the Start Year is always less than End Year ? For example, I want to display an error message if user selects Start Year as 2020 and End Year as 2012 and doesn’t want user to click Get Rows button in that case.

My updated JSFiddle is below:

https://jsfiddle.net/walker123/pxb3jLvw/93/

Brief Update on my requirements:
My requirements changed a little bit so I am no longer validating if user doesn’t select anything for the dates column but I am sending default date values if a user check marks a row with year Eligible column as Y . I am sending 2015 as default start year and 2021 as default end year. Also, in addition to adding two dates colums I have removed the last name column for brevity.

Thanks,
walker1234

[Yavor DashevParticipant]

Hi walker1234,

Thank you for the update!

I have created a quick code snippet for you to add so that it populates the cells with the year values according to your needs using again the ‘setcellvalue’ method.

The modified code from your jsfiddle:

 $('#jqxbutton').click(function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
            
                var selectedRows = rows.filter(x => x.available)
                
              
                for(let i = 0; i < selectedRows.length; i++) {
                    
                    
                    if (selectedRows[i].yeareligible === "N" && selectedRows[i].startyearValue === null && selectedRows[i].endyearValue ===  null ) {
                        selectedRows[i].startyearValue = -1;
                        selectedRows[i].endyearValue = -1;
                    
                    }
                    else if (selectedRows[i].yeareligible === "Y" && selectedRows[i].startyearValue === null && selectedRows[i].endyearValue === null ) {
                        selectedRows[i].startyearValue = '2015';
                        selectedRows[i].endyearValue = '2021';

                        $("#jqxgrid").jqxGrid('setcellvalue', selectedRows[i].boundindex, "startyearValue", "2015");
                        $("#jqxgrid").jqxGrid('setcellvalue', selectedRows[i].boundindex, "endyearValue", "2021");
                    }

                }
                console.log(selectedRows)

            });

Let me know if that works for 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]

Hi Yavor,

Thanks, I think there was some confusion while answering my last question. My main question is regarding the dates. Please find my question below:

I am wondering if we can make sure that before user hits the Get Rows button, if it is possible to make sure that the Start Year is always less than End Year ? For example, I want to display an error message if the user selects Start Year as 2020 and End Year as 2012 and doesn’t want user to click Get Rows button in that case.

https://jsfiddle.net/walker123/pxb3jLvw/93/

Please take a look.

Thanks,
Walker1234

[Author]

Posts