[walker1234Participant]

Thanks. Is there a way I could hide other button(s) on the toolbar if I’m in a particular tab and grid? OR maybe completely make other tabs disappear. Please feel free to modify the following example:

https://stackblitz.com/edit/react-ts-eat5px

I’m going to have 9 grids and it may confuse user if they see all buttons active on the toolbar.

For example, if I’m in US Indexs tab, I would maybe want to keep only Add New US Index button active and may disappear or make inactive other button(s).

Thanks

[walker1234Participant]

Hello Martin,

I tried removing the text and it shows like this:

Whereas, if I don’t remove it, it looks better like shown below:

Since, I don’t need that text part, is it possible to completely get rid of it?

In my code (for some reason I get an error(ReferenceError: “getWidth is not defined”) when I use the getWidth property in the following section and hence I’m using width:{90%}. :

<JqxTabs
        ref={this.myTabs}
        // @ts-ignore
        //width={getWidth("tabs")}
        width={"90%"}

If possible, could you make this editor work here as I tried it to show my issues but the code isn’t rendering there properly:

https://stackblitz.com/edit/react-ts-ddgvet

[walker1234Participant]

Okay.

1) Does jQXGrid has such type of functionality?

2) Suppose if I have react project based code which does the search for me. Is it possible for me to plug-in that piece of code in the jQXgrid and get the results filtered on the jQXgrid?

3) After getting the results in filtered form after search is done, is it possible to download the filtered results only using the exportdata feature?

[walker1234Participant]

Ok. So in order to use it, do I need to use demo.js in my code or just take this function out and use it?

[walker1234Participant]

As mentioned in the demo, I used width: getWidth('Tabs') property and got an error. Is there any additional library I need to include? I am using jqxall.js for my widgets.

[walker1234Participant]

Thanks. I am referring to one of the examples that you mentioned.

1) Can you take a look if I am moving in right direction:

In this JSFiddle, I was able to create the datafields array and get the name of the columns as shown in the console log of the JSFiddle (image below):

Is that correct?

2) While building the source, I am not sure what would be my localdata value? I am guessing I would need to pass the values of each key?I am little confused here.

[walker1234Participant]

Thanks Histro. So, if in future, if I have 40-50 data records (bullet points), it would be possible to have pagination feature after certain number of records?

[walker1234Participant]

Sure. I’ve a JSON response like this :

[
  {
    "desc": "Topic First, details,questions etc",
    "datadesc": [
      "Testing first ",
      "Order first "
      ]
  },
  {
    "desc": "Topic Second, details,questions etc",
    "datadesc": [
      "Testing first",
      " Order second "
     
    ]
  }
]

And I want to display it in the grid like I’ve shown in the image (in my first post). Hence, I was wondering if it’s possible to achieve something like this where I could display a bold heading for the desc key of the JSON and show the datadesc in an unordered list format.

[walker1234Participant]

Great. How can I achieve the tabs with background as shown in this JSFiddle. I mean the one you have shared just shows Grid1 Grid2 with hyperlink and no background

http://jsfiddle.net/walker123/9fLnepgk/1/

Thanks

[walker1234Participant]

Thanks Martin. Actually, I have got it working here in this Example JSFiddle. It has a button as well displaying just below the grid.

One last thing, I was trying to put jQXButton to export the data using the following code but I get an error. Here is the JSFiddle which is modified version of above one where I am trying to replace the <button> logic with jqxButton.

var $button = $("<div id = 'testbutton'></div>").on('click', function (e) {
    alert('button clicked');
  });
 
  
  $("#testbutton").jqxButton({ value: 'Export Grid '});

[walker1234Participant]

Thanks.Could you take a look at the fiddle below. I think I am close to what I want but having issues with few things as explained below:

http://jsfiddle.net/0juytb31/2/

Issue #1:

When I click on (say for example) first row, I could see the text (click me to display jQXGrid!) and when I click on the text, I could see the jQXgrid over there. But I don’t want the text thing to appear and instead, I want just a grid to show. And upon clicking the latest grid, I want to see new grid, so on and so forth. Same thing is happening now but it’s making use of the text click me to display jQXGrid!.

Can you tell me how can I display the grid instead of the text so that I won’t have to click on the text thing to display the grid. I am not sure how to include the grid in this line pf the code and get rid of text thing. :

var newEl = $("<div/>",{class:"clickable",id :"grid"+id,style: "margin:100px 10px 20px 460px ",text: 'click me to display jQXGrid!'});

Issue #2:

When I click on second or any other row after clicking ,say for example first row, how can I make sure that the new grid isn’t added after the latest one? I mean it should start just below the original grid. I remember you mentioned destroy method but when I tried to do the following :

if($(".clickable").length != 0){
                    //$(".clickable").remove();

                    $(".clickable").jqxGrid("destroy");
                }

The original grid disappeared which make sense because I am destroying the grid with the class = clickable.

Let me know if I can answer more questions.

Thanks

P.S: Please note that the above approach is inspired by this approach (JSFiddle here ) and it’s based on the fact that we should not change the class name with newly generated ID.
The approach you mentioned in your example in this thread sounded good when I want to generate multiple grid by clicking different rows of the original grid (fixed grid). However, I couldn’t see it fitting well in my above approach (unless I am wrong) and hence I used the approach inspired by the above fiddle.

[walker1234Participant]

Thanks Martin for the JSFiddle.

I am trying to accomplish somewhat different requirement. I created a JSFiddle based on your logic to explain my situation :

https://jsfiddle.net/qtuse9ao/1/

1) My first grid is fixed, when a user clicks on any row, a new grid is generated.Let’s call it second grid for discussion.

2) This second grid has an id staticgrid as shown in the JSFiddle above. When I click on this grid, a third grid is generated with Export Grid 1 Button.

Now, I am wondering if it’s possible to automate this process. By automating, I mean, when I click on this third grid which has Export Grid 1 button, a new grid (fourth) should be generated (maybe with Export Grid 2 button), similarly if I click on this fourth grid, a fifth grid should be generated (maybe with Export Grid 3 button) and so on and
so forth. I drew a diagram to explain this situation better.

[walker1234Participant]

Thanks Martin for the example.

1) I couldn’t get how to use the destroy method of the grid. I used the following approach around line #54 and it worked. Is it a correct approach or should I consider using destroy method? I had to add an element ID here though. Please let me know if this looks correct or not.

` $(‘#commonWindow’).remove();
var elem = document.createElement(‘div’);
elem.id = ‘commonWindow’; `

2) For adding export or download button on the grid , could you tell me if there’s an example? I haven’t seen any jqxgrid which contained the button in itself. I mean if a grid is destroyed the button goes away with it as well.

Thanks

[walker1234Participant]

Sure please find more clarifications for “same number of columns“. Say for example, I have the 5 tabs as shown in the screenshot below.

Instead of printing Content1, say for example, I have the following jQXGrid with 4 columns as shown in the screenshot below.

Suppose, if I want to click on Tab 2 and have similar jQXgrid but with different number of columns (maybe 2 or 7 etc). Similarly, if I could have different number of columns when I click on other tabs as well? So, this was my questions. Please let me know if more clarifications are needed.

Thanks

[walker1234Participant]

Thanks Histro. I have few more questions:

1) So, you mean to say that I can’t have something like this (https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtabs/jquery-tabs-getting-started.htm?search=) ?

2) Also, when I click on any tab (say for example, I have 4 TABS), is it like I need to maintain same number of columns for each of the tabs or can they be different in numbers?

By Java, I mean, it’s a RESTFul web service, using Spring. I am not using JSP. Basically, when I make an Ajax call, I get a JSON response and I use that to display data in the jQXGrid. Not sure if I would be using jQXGrid in my case

[Author]

Posts