[walker1234Participant]

OK, so you are saying that I could just use editing example you mentioned here : https://jsfiddle.net/jqwidgets/tzHXR/ to edit any cell. And I could have a button in a separate column which when clicked, I could use var data = $(‘#jqxGrid’).jqxGrid(‘getrowdata’, 0); to use the updated values as you mentioned in Example: https://jsfiddle.net/jqwidgets/7pdyg/ correct?

In this way there is no need to display a popup with existing values , edit something there and hit save button of popul to make an update .

[walker1234Participant]

Thanks. Is there an example showing an edit button with popup dialog? This looks like cells are getting edited on click.

Is there an example showing how values can be retrieved from the cell or row if I want to proceed with and update related Ajax call after retrieving the updated information? I’m using JavaScript/jQuery so you shared the right fiddle last time even though I forgot to mention about it.

[walker1234Participant]

At some point, if the records become too many, there could be some performance issues

1. What would be that number?

2. Is there a way I can randomly generate a record and test it? OR Do you have an example where I can adjust the data and test it?

[walker1234Participant]

Ok,

1. Can I introduce search in the hierarchy?

2. Is using expanded just ensures that the hierarchy is expanded as soon as grid loads?

3. is there a limit on number of records which will start affecting the performance of the tree grid if I have too many records in the hierarchy showing?

[walker1234Participant]

I will add more of what I’m looking. Let’s say I have three arrays:

var array1 = [{"EmployeeID": 2,"FirstName": "Andrew", "LastName": "Fuller", "City": "Tacoma"}];		

var array2 = [ { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan","City": "Seattle"},  { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio","City": "Seattle"},
}];

var array3 = [{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama","City": "London" },  { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "City": "London" }];

How can I build the data format compatible with the grid such that my first array contains "expanded": "true" and then children below it as a second array(array2). Similarly for displaying array2 below array 3 and displaying children:[ wherever needed such that the final output looks like following:

var employees = [
            {
                "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "City": "Tacoma",  "expanded": "true",
                children: [
                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan","City": "Seattle"},
                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio","City": "Seattle"},
               
                {
                    "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "expanded": "true",
                    children: [
                           { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama","City": "London" },
                           { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "City": "London" }
                          
                    ]
                }
                ]
            }
        ];

Is the above format achievable with 3 arrays or is there something else I need to use here?

[walker1234Participant]

I saw that and included the link for the same post in my example but the question, your var employees top level data contains children elements. So if I have 3 array, then how should I go about it?

In your example:

1. One array has data with "EmployeeID": 2, in it, this seems like parent employee.
2. Second array has data containing "EmployeeID": 8,1,3,4 and 5 which is the child of first array.
3. Third array containing EmployeeID": 6,7 and 9 which is the child of second array.

If I have 3 arrays (array 1 contains parent elements, array 2 contains child of array 2 and array 3 is child of array 2), I am wondering if I can combine it in such a way, such that I could generate data in the format shown below:

var employees = [
            {
                "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
                children: [
                { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
                { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
                { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
                { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
                {
                    "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
                    children: [
                           { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                           { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                           { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
                    ]
                }
                ]
            }
        ];

The thing that is PUZZLING me is how to add children: <my array2 here> and children: <my array3 here> as shown in the above format.

[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

[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

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

[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

[walker1234Participant]

Thanks Yavor. JSFiddle looks good : https://jsfiddle.net/ptdm4qza/2/

Few more quick questions:

1. Is it possible to disable the Get Rows button until user selects at least one row? And as soon as they checkmark at least one row, it should be enabled.

2. After user hits Get Rows button, what method can be used to clear the existing selection? For example, if a user has selected two rows and then hits the Get Rows button, then if. auser accidently hits the same button again , they will submit same selected rows again. So I don’t want this to happen and clear the selection after they hit the Get Rows button.

Thanks,
Walker1234

[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

[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

[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

[Author]

Posts