Custom Markers from a Database

[Adrian]

I read this article about custom marker from a datasource:

https://www.telerik.com/support/code-library/custom-markers-with-server-side-data-binding

From what I can tell, it should create a class for each marker by tacking on the field value to the end of "k-marker-<fieldvalue>". It seems that this article is old and it actually creates the class of "k-i-marker-<fieldvalue>", no biggie, I figured that out. I managed to change the color and the marker image and everything. The issue is, the creation of the class seems messed up. It works for some values, but not others and I can't figure out what the issue is. The only thing that I can see is it works for values that are TWO characters long, but anything more it puts the first letter, then a hyphen and the rest of the value.  

Here are three examples it created:

<span class="k-marker k-icon k-i-marker-bp" title="BP 17869" data-role="tooltip" style="z-index: 1000; left: 343px; top: 435px;"></span>

<span class="k-marker k-icon k-i-marker-c-oSTCO" title="Costco Wholesale - TRACY - 0658" data-role="tooltip" style="z-index: 1000; left: 24px; top: 297px;"></span>

<span class="k-marker k-icon k-i-marker-r-aLPHS" title="Ralphs #189" data-role="tooltip" style="z-index: 1000; left: 32px; top: 310px;"></span>

[Peter Milchev]

Hello Adrian,

Thank you for sharing this behavior with us. 

The behavior is due to the function used to create the markers:

$(doc.createElement('span')).addClass('k-marker k-icon k-i-marker-' + kendo.toHyphens(options.shape || 'pin')

where kendo.toHyphens is as follows: 

function toHyphens(str) {
    return str.replace(/([a-z][A-Z])/g, function (g) {
        return g.charAt(0) + '-' + g.charAt(1).toLowerCase();
    });
}

One way to workaround this is to use the lower() function of SQL in the Select command as follows: 

<DataBindings>
    <MarkerBinding DataShapeField="MarkerClass" DataTitleField="Name"
            DataLocationLongitudeField="Longitude" DataLocationLatitudeField="Latitude" />
</DataBindings>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:ListingsDB %>"
    SelectCommand="SELECT *, lower(Type) AS MarkerClass  FROM [ListingsTable]"></asp:SqlDataSource>

Regards,
Peter Milchev
Progress Telerik

[Adrian]

That did it. Good to know.