Forum Replies Created

Viewing 15 posts - 1 through 15 (of 151 total)
  • Author
    Posts
  • in reply to: 3 Levels using jQXTreeGrid 3 Levels using jQXTreeGrid #133433

    walker1234
    Participant

    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?

    • This reply was modified 11 months ago by  walker1234.
    in reply to: 3 Levels using jQXTreeGrid 3 Levels using jQXTreeGrid #133430

    walker1234
    Participant

    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?


    walker1234
    Participant

    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?

    • This reply was modified 11 months ago by  walker1234.

    walker1234
    Participant

    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.


    walker1234
    Participant

    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


    walker1234
    Participant

    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


    walker1234
    Participant

    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.


    walker1234
    Participant

    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


    walker1234
    Participant

    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


    walker1234
    Participant

    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


    walker1234
    Participant

    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

    • This reply was modified 2 years, 9 months ago by  walker1234.
    • This reply was modified 2 years, 9 months ago by  walker1234.

    walker1234
    Participant

    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

    • This reply was modified 2 years, 9 months ago by  walker1234.

    walker1234
    Participant

    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


    walker1234
    Participant

    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


    walker1234
    Participant

    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?

Viewing 15 posts - 1 through 15 (of 151 total)