Change a style for a programmatically created button

1922
7
Jump to solution
11-22-2016 04:30 AM
ZdeněkSoldán
Occasional Contributor

Hello,

In my widget I have some buttons that are made in html and some buttons that are made programmatically in JS. And after that I have an inconsistent look. So I want to change theme for programmatically made buttons from claro to tundra.

In my css I imported the tundra.css like @import url("http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/tundra/tundra.css"); and in an empty div in html where buttons are made I put <div class="tundra" id="dropDownButtonContainer"></div> but the buttons look still different -in claro theme.
So how can I change the theme of these buttons?

Thanks for any answers

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Zdeněk,

   The gray buttons do not denote tundra they are just standard html dom elements and not Dojo dijits. You are missing some of the core fundamentals of widget development that is why you are not able to use the data-attach-point. You need to be using lang.hitch in your querytask result function that way you can use this."your data-attach-point name".

If you attach your widget code I can point some things out to help you.

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Emeritus

Zdeněk,

   It appears that the issue is that you are just adding a standard html button and not an actual dojo form button. I would have to see you code though.

0 Kudos
ZdeněkSoldán
Occasional Contributor

Hello Robert,

I think you have right. This is my code for two buttons that are made in html. One is for chose a file from local pc and one is for handle this file. The first is standart HTML for sure the second one is dojo button I think. But they both look the same.

<div class="attr" data-dojo-attach-point = "loadFile"> 
              <input class="load" type="file"  id="files" name="files[]" multiple data-dojo-attach-point = "files" data-dojo-attach-event="onchange:hadleFileSelect"/>
              <button class = "loadbutt" id=loadAddAtt data-dojo-type = "dijit/form/Button" type = "button" data-dojo-attach-event="onclick:_onPublishClick" > Nahrát doplňující přílohu </button>
</div>‍‍‍‍

And here is a code for my programmatically made button:

 <div class="tundra" id="dropDownButtonContainer"></div>

menu = new DropDownMenu({ style: "display: none;"});
var button = new DropDownButton({
          label: "Dostupné stavy",
          name: "programmatic",
          dropDown: menu,
          id: "progButton"
          })
          button.startup();
dom.byId("dropDownButtonContainer").appendChild(button.domNode);
},

and this one look like this

But in my css I have only imported tundra css. I dont know if I need to do something more in this file...

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Zdeněk,

So are you wanting the blue or the gray?

0 Kudos
ZdeněkSoldán
Occasional Contributor

Robert,

I want to all my buttons look the same. It doesn't even matter which style should it be. Maybe I would prefer the gray one.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Zdeněk,

   I am surprised you are not getting an error for this:

<button class = "loadbutt" id=loadAddAtt data-dojo-type = "dijit/form/Button" type = "button" data-dojo-attach-event="onclick:_onPublishClick" > Nahrát doplňující přílohu </button>

You have id without quotes around the value. Actually if that html code is in your Widget.html then you need to remove id attribute all together and use data-attach-point.

ZdeněkSoldán
Occasional Contributor

Robert,

Thank you for your answer. But when I use data-dojo-attach-point instead of id I have a problem to connect to this div in Widget.js. I need to work with this div in a function inside a function. For example..

<div class="tundra" id="dropDownAutom"></div>

onReceiveData: function(name, source, params) {
   //some code
   resul=queryTask.execute(query,function(results){
      //some code
      button2 = new DropDownButton({
              label: "Výběr šablony",
              name: "programmatic2",
              dropDown: menuZpracAut,
              })
      button2.startup();
      dom.byId("dropDownAutom").appendChild(button2.domNode);
   });
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 This way it works. When I have data-dojo-attach-point in my Widget.html and in Widget.js I use this.dropDownAutom.appendChild.... outside of the inner function it also works. But it didn't solve my problem. The button is still in the blue theme (claro) instead of gray (tundra).
And when I want to use data-dojo-attach-point in my Widget.html and this.dropDownAutom.appendChild inside the inner function it doesn't work. Because in the inner function "this" isn't an object of div but some kind of "window". So how can I connect this div with data-dojo-attach-point inside the inner function?
And how to solve my first problem if data-dojo-attach-point didn't help?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Zdeněk,

   The gray buttons do not denote tundra they are just standard html dom elements and not Dojo dijits. You are missing some of the core fundamentals of widget development that is why you are not able to use the data-attach-point. You need to be using lang.hitch in your querytask result function that way you can use this."your data-attach-point name".

If you attach your widget code I can point some things out to help you.