How to apply JS to diagram ruler to change units

[Simon]

Hi,

I really need to be able to change the units on the rulers. Whatever the default measurement units are, they do not translate into a real world user experience. I have created a quick piece of java script that can convert the ruler labels but need some support in where and how to deploy it in a Blazor WebAssembly scenario whilst still being able to support the zoom and pan functionality built into diagram. 

Here is the JS function, how should I deploy it for good runtime UX?

function updaterulerlabels() {
 var myClasses = document.getElementsByClassName("e-ruler-tick-label");
 for (var i = 0; i < myClasses.length; i++) {
  var oldcontent = myClasses[i].innerHTML;
  if (!isNaN(oldcontent)) {
    myClasses[i].innerHTML = oldcontent / 25 + "ft";
  }
 }
}

[Sivakumar Sekar]

Hi Simon, 

Currently, we don’t have support to change ruler units in our diagram control. We have logged “Support for ruler measurement in meters, inches.” as a feature. We are currently working on diagram native Blazor, so we do not have any immediate plans to start this feature. We will implement this feature in any one of our upcoming releases.    

 You can track the feature status from the below link 

Link:  https://www.syncfusion.com/feedback/13924/support-for-ruler-measurement-in-meters-inches  

Regards, 

Sivakumar 

[Simon]

Yes, I understand that you do not have the feature built in. I am trying to apply a work around using JS to rename the labels after rendering and want to know the best place to apply this code.

I tried in OnAfterRenderAsync which worked most of the time but it was not consistent.

[Sivakumar Sekar]

Hi Simon, 

We can trigger the updaterulerlabels function inside the created event, but whenever the nodes or connectors position gets updated or when the scroll bar changed the ruler's tick gets updated. The ruler tick gets changed whenever we scroll the diagram. We didn`t have any workaround to achieve your requirement. So that only we have logged a feature request for this requirement.  For more information about the created event, please refer to the following documentation https://blazor.syncfusion.com/documentation/diagram/events#created  

Regards, 

Sivakumar.