Using ID of item inside grid toolbar as selector?

[realtekParticipant]

Hi,

I have a toolbar on a jqxGrid which has html inside the toolbar, of which contains some input fields and buttons which all have ID’s.

I would like to use these ID’s as a selector so I can bind .on etc to them.

However jqwidgets – since updating seems to report an error that it is an invalid selector.

How can I bind to these ID’s (as they won’t exist until either Initialization or bindingcomplete – Also, Please confirm which order)

Example:

   rendertoolbar: function (toolbar) {
                var me = this;
                var container = $("<div style='margin: 5px;'></div>");
                var input = $("<div style='width:100%'><div id='buttonWrapper' style='float:left;width:300px'><img id='btnExport' src='assets/images/application_next.png' style='height:25px;cursor:pointer'/>&nbsp;&nbsp;&nbsp;<img id='btnGridSettings' src='assets/images/options.png' style='height:25px;cursor:pointer''/>&nbsp;&nbsp;&nbsp;<img id='btnGridRefresh' src='assets/images/refresh.png' style='height:25px;cursor:pointer;'/></div><div id='openClosedButtons' style='float:left;display: inline-block; margin:0 auto;'><button style='padding:4px 16px;' id='Left'>Open</button><button style='padding:4px 16px;' id='Center'>Closed</button><button style='padding:4px 16px;' id='Right'>Both</button></div><div ID='container' style='float:right;display:flex'><div style='margin-top: 5px; margin-bottom: 5px; font-size:11px'>Refresh Interval&nbsp;</div><div id='dropdownRefreshInterval' />&nbsp;<div style='margin-top: 5px; margin-bottom: 5px; font-size:11px'>seconds</div><div id='selectModule' style='margin: 0 0 0 20px;'/></div></div>");
                toolbar.append(container);
                container.append(input);
                $("#btnExport").click(function () {
                    refreshPage = false;
                    $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
                });

In this example, selectModule is the ID I would like to use.

It did work fine before upgrading, I am aware you improved the code to display an error but functionality wise worked even though this may have been an invalid markup.

Thanks

[ivailoParticipant]

Hi realtek,

You have to create separate object about every element in your structure. Then bind the events to the objects.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Thank you ivailo, that makes sense. I will give it a go.

I spent hours on this moving code around and eventually broke it all. I will revert to a previous version and try as you mentioned.

Thanks

[realtekParticipant]

Hi ivailo,

One final question, now I have duplicate images, what would be the best way to hide one set?

Thanks

[ivailoParticipant]

Hi realtek,

Please send a fiddle with your code for analyze.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Hi ivailo,

What other code do you need? this is the code I have for the toolbar:

  rendertoolbar: function (toolbar) {
                var me = this;
                var container = $("<div style='margin: 5px;'></div>");
                var input = $("<div style='width:100%'><div id='buttonWrapper' style='float:left;width:300px'><img id='btnExport' src='assets/images/application_next.png' style='height:25px;cursor:pointer'/>&nbsp;&nbsp;&nbsp;<img id='btnGridSettings' src='assets/images/options.png' style='height:25px;cursor:pointer''/>&nbsp;&nbsp;&nbsp;<img id='btnGridRefresh' src='assets/images/refresh.png' style='height:25px;cursor:pointer;'/></div><div id='openClosedButtons' style='float:left;display: inline-block; margin:0 auto;'><button style='padding:4px 16px;' id='Left'>Open</button><button style='padding:4px 16px;' id='Center'>Closed</button><button style='padding:4px 16px;' id='Right'>Both</button></div><div ID='container' style='float:right;display:flex'><div style='margin-top: 5px; margin-bottom: 5px; font-size:11px'>Refresh Interval&nbsp;</div><div id='dropdownRefreshInterval' />&nbsp;<div style='margin-top: 5px; margin-bottom: 5px; font-size:11px'>seconds</div><div id='selectModule' style='margin: 0 0 0 20px;'/></div></div>");
                toolbar.append(container);
                container.append(input);
                $("#btnExport").click(function () {
                    refreshPage = false;
                    $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
                });

If I understood your post above correctly, I needed to also specify the same fields in the HTML side of the code? But doing that resolves the issue but gives me duplicate objects on the page.

[ivailoParticipant]

Hi realtek,

You don’t have to see duplicate elements.
Assign every element to different variable and then append the variables to your container.
This don’t have to produce duplicated code.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Hi ivailo,

In that case isn’t the code I provide above correct?

The only way I can solve my original error seems to be by creating the same elements on the HTML side.

Using only the above code I provided produces invalid selector errors.

Regards

[ivailoParticipant]

Hi realtek,

Another solution to solve your problem is to be used .find() method.
Here is the code:

rendertoolbar: function (toolbar) {
             var me = this;
                var container = $("<div style='margin: 5px;'></div>");
                var input = $("<div style='width:100%'><div id='buttonWrapper' style='float:left;width:300px'><img id='btnExport' src='assets/images/application_next.png' style='height:25px;cursor:pointer'/>&nbsp;&nbsp;&nbsp;<img id='btnGridSettings' src='assets/images/options.png' style='height:25px;cursor:pointer''/>&nbsp;&nbsp;&nbsp;<img id='btnGridRefresh' src='assets/images/refresh.png' style='height:25px;cursor:pointer;'/></div><div id='openClosedButtons' style='float:left;display: inline-block; margin:0 auto;'><button style='padding:4px 16px;' id='Left'>Open</button><button style='padding:4px 16px;' id='Center'>Closed</button><button style='padding:4px 16px;' id='Right'>Both</button></div><div ID='container' style='float:right;display:flex'><div style='margin-top: 5px; margin-bottom: 5px; font-size:11px'>Refresh Interval&nbsp;</div><div id='dropdownRefreshInterval' />&nbsp;<div style='margin-top: 5px; margin-bottom: 5px; font-size:11px'>seconds</div><div id='selectModule' style='margin: 0 0 0 20px;'/></div></div>");
                toolbar.append(container);
                container.append(input);
               $(input).find("#btnExport").click(function () {
                    refreshPage = false;
                    $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
          		});
          }

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Thanks Ivailo

I just went through my code and realised it was not in that bit of code causing the problem.

It was further down I was initialising all those buttons, but outside of the render toolbar section 🙂

I moved all these initialisations up to the same place and it resolved the issue!

Thanks for your help

[realtekParticipant]

Having said that, this is really odd. I have removed the elements on the HTML page and I still have duplicates!

I am not sure what could be causing them, they are only referenced one.

[ivailoParticipant]

Hi realtek,

Here is the demo about toolbar customizinig.
Please try to analyze it. Probably the problem is in the rest of your code.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts