[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

[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

[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

[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?

[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?

[walker1234Participant]

Hi,

I didn’t quite get what you were trying to do. I tried to apply your stuff in my JS Fiddle which looks somewhat like this : https://jsfiddle.net/walker123/peguh5rt/35/

Please take a look.

It looks like you added a separate dropdown for the year.

I am looking for displaying the year dropdown in the grid which is hiding at the moment unless you click on the cell.

[walker1234Participant]

Hi Martin,

Can you take a look at this JS Fiddle?

http://jsfiddle.net/es19w7cx/3/

I modified the one you shared and added a button there. The getrows method is working fine and I can see the array in console.log. However, I am not sure how can I filter it based on the selection of item? Basically, not sure how to filter it by the datafield of the checkbox column. Please take a look.

Thanks

[walker1234Participant]

Thanks Martin.

How do I get the information related to the only selected items from that table when a user hits a Submit button? I was thinking to have a JSON Object of all the selected information. Is there a property in jQXgrid to do this?

[walker1234Participant]

I am already using my server URL and it’s generating empty file. Please read my questions again carefully and answer.

[walker1234Participant]

Hello Hristo,

Thanks. I will look into your solution and will answer your question soon. Before that, I have one more question.

Whatever search is happening in Filtering–>Filter Row section of this demo:

https://www.jqwidgets.com/react/react-grid/index.htm#https://www.jqwidgets.com/react/react-grid/react-grid-filterrow.htm

And whatever search criteria it has like contains,contains(match case), not empty etc, if I want to have a call to webservice when a user selects these options , is it possible to do so? Right now it’s your javascript code which is handling it without any server side calls.

Thanks

[walker1234Participant]

What is the relation with the onSort option (is this the event)?

It’s referring to a function as described below:

onSort={this.gridOnSort}

And gridOnSort function is defined as follows:

private gridOnSort(event: any): void {
        const sortinformation = event.args.sortinformation;
        let sortdirection = sortinformation.sortdirection.ascending ? 'ascending' : 'descending';
        if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
            sortdirection = 'null';
        }
        this.myGrid.current.updatebounddata('sort')
    };

I tried to search updatefilterconditions and createfilterwidget property in the API documentation page you mentioned (https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=grid)

Could you help me find it?

Thanks

[walker1234Participant]

Hi,

I was looking for something like this:

https://www.jqwidgets.com/react/react-grid/index.htm#https://www.jqwidgets.com/react/react-grid/react-grid-filterrow.htm

1) My question is, is it going to work for large records? I mean let’s say if there are 500 records and if the filter criterion gives us 100 records, and we have pageable property set to true with 10 records each page, is it going to show 100 records with 10 different pages?

2) Also, in order for above to work properly, I had to disable OnSort = {this.gridOnSort} property, is there some restriction on this? Where gridOnSort is my custom sorting function.

3) In the type bar, contains is selected by default, what if I want to change it to some other selection?

4) Can I have some text written over there in the search bar saying Please type your search criteria or any text so that as soon as user starts typing it will dissapear and they can go on with their search ?

[walker1234Participant]

Hi Hristo,

Please find answers to your questions below:

If you want to show all records (rows) with “A” value then you could use simple filtering by this value.

Do you have any widget which does this? Please give me an example or link if something like this is available for React. Thanks

On the other side if you want to show a particular column (please, write which widget do you want to use) then you could use own logic.
Please share some widget examples for this as well. I would like to see some examples and then I think would be in a better position to comment what exactly would work best for me.

Thanks

[walker1234Participant]

Hi Histro,

Here are answers to your question:

How you send data to the Client-Side?

It’s the Java webservice which is sending the data. Just like I mentioned in my above previous post. Attaching the screenshot below:

The below screenshot is for the record that I created on Dec 17 and which shows Dec 16 in the widget.

Secondly, I tried changing the celles format to cellsformat: "yyyy-MM-ddTHH:mm:ss-HH:mm", from cellsformat: "MM/dd/yyyy" and I’m still seeing old date as shown below:

The below screenshot is for record that I created on Dec 18 and it shows Dec 17 as shown below in the widget

[walker1234Participant]

Hi Histro,

So I checked the beforeLoadComplete callback to see what data records I get using the following piece of code :

beforeLoadComplete:(records:any):void=> {
        
        console.log("Testing Records inside BeforeLoadComplete");
        console.log(records);
      },

I saw the following in my web browser’s console:

When I expanded the 3rd array, I saw the following:

As you can see above, even though I created the record today, which is Dec17, the createdDate it’s pulling is Mon Dec 16 2019 18:00:00 GMT-0600. (Central Standard Time) which is one day old.

I checked in the database, I’m seeing correct date over there as shown in the screenshot below:

And I have checked the webservice response as well and I’m seeing correct date over there as shown below:

Can you tell me why beforeLoadComplete function is showing one day old date?

[Author]

Posts