How to pass the current label value of the linear gauge to a template function

1 Answer 192 Views
Gauge
will
Top achievements
Rank 1
will asked on 09 Jun 2021, 04:11 PM | edited on 15 Jun 2021, 11:52 AM

 

Hello, 

I am:

- using the linear gauge

- have a method "FormatLongNumber" that formats the label value

- * need a way to access the current label value so that i can pass the data to the formatting function. the highlighted line below shows the call to the function. however i do not know how to pass the actual value

- the text that is highlighted in red is where i need to access the value of the current label

Thanks!

Bill

 

 

Html.Kendo().LinearGauge()
                       .Name("faultcount_#=FaultCount#")
                        .HtmlAttributes(new { data_bind = "value: FaultCount" })

                       .Scale(scale => scale
                         .Ranges(ranges =>
                         {
                             ranges.Add().From(27500).To(35000).Color("red");
                         }
                             ).Labels(label =>
                             label.Visible(true).Color("white").Template("#=FormatLongNumber(value)#")).Line(line => line.Visible(true))
                       .Vertical(false)
                           .Min(0) // Set the min value of the LinearGauge.
                           .Max(35000) // Set the min value of the LinearGauge.
                           .MajorTicks(ticks=> ticks.Color("white"))
                           .MinorTicks(mticks=> mticks.Color("white"))
                       )
                       
                       .Pointer(pointer => pointer


                           .Shape(GaugeLinearPointerShape.BarIndicator)
                           .Color("white")
                       )

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 11 Jun 2021, 10:37 AM | edited on 16 Jun 2021, 06:39 AM

Hello Will,

You can achieve the desired result using .TemplateId() and passing an external template instead of .Template() and passing a string template. The reason for this is that both in ASP.NET Core environment, as well as when using jQuery, when using the inline template option inside of a template the component receives the event data as a parameter, but not the instance object. Currently, I see this is related to the MVVM binding, so that the editors are bound to the event data. When using data-template MVVM binding there is a known limitation where the data-template attributes cannot contain inline template definitions, but only ID's of external templates and the behavior observed is related to the cited limitation. We have an item logged on the behavior, to research the possibility to use the inline data-template configuration in such scenarios and you can vote on it here.

With the following configuration: 

@(Html.Kendo().Grid<FaultWatchList>()
            .Name("messagesGrid")
            .Columns(columns =>
            {
                columns.Bound(t => t.FaultCount)
                    .Title("Total Occurences")
                    .Width("125px")
                    .ClientTemplate(Html.Kendo().LinearGauge()
                         .Name("faultcount_#=FaultCount#")
                         .Scale(scale => scale
                         .Ranges(ranges =>
                             {
                                 ranges.Add().From(27500).To(35000).Color("red");
                             }
                         )
                         .Labels(label =>
                             label.Visible(true).Color("white").TemplateId("myTemplate"))
                         .Line(line => line.Visible(true))
                         .Vertical(false)
                         .Min(0) // Set the min value of the LinearGauge.
                         .Max(35000) // Set the min value of the LinearGauge.
                         .MajorTicks(ticks => ticks.Color("white"))
                         .MinorTicks(mticks => mticks.Color("white"))
                       )
                       .Pointer(pointer => pointer
                           .Shape(GaugeLinearPointerShape.BarIndicator)
                           .Color("white")
                       )
                       .ToClientTemplate().Value
            );
            })
...
)

<script id="myTemplate" type="text/x-kendo-template">
    #=kendo.toString(value / 1000, "\\#\\#") + "k" # 
</script>
the Linear Gauges are displayed in the Grid with the labels formatted:

I suggest reviewing the section on number formatting for further details:

https://docs.telerik.com/kendo-ui/globalization/intl/numberformatting

I hope this helps.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

will
Top achievements
Rank 1
commented on 11 Jun 2021, 12:01 PM

Thank you for the response. I copied your code into my solution and received the same error. If i hard code a value in place of the "value" property that i am passing the code will work. The value property is not available in the context. It is undefined. The stack trace is below.

There is one detail that i left out. I am embedding the gauge in a grid. Not sure if that makes a difference?

Telerik version is 2020.1.114

Thank You,
Bill


@(Html.Kendo().Grid<FaultWatchList>()
.Name("messagesGrid")
.Events(events => events.DataBound("onDataBound"))
.Columns(columns =>
{
columns.Bound(t => t.FaultCode).Title("Fault Code").Width("50px");
columns.Bound(t => t.FaultName).Title("Description").Width("75px");
columns.Bound(t => t.Type).Title("Type").Width("20px");
columns.Bound(t => t.FaultCount).Title("Total Occurences").Width("125px").ClientTemplate(Html.Kendo().LinearGauge()
.Name("faultcount_#=FaultCount#")
.Scale(scale => scale
.Ranges(ranges =>
{
ranges.Add().From(27500).To(35000).Color("red");
}
).Labels(label =>
label.Visible(true).Color("white").Template("#=FormatLongNumber(value)#")).Line(line => line.Visible(true))
.Vertical(false)
.Min(0) // Set the min value of the LinearGauge.
.Max(35000) // Set the min value of the LinearGauge.
.MajorTicks(ticks => ticks.Color("white"))
.MinorTicks(mticks => mticks.Color("white"))
)
.Pointer(pointer => pointer
.Shape(GaugeLinearPointerShape.BarIndicator)
.Color("white")
)

.ToClientTemplate().Value
);
columns.Bound(t => t.FaultCount).Title("Actions").Width("60px").ClientTemplate(Html.Kendo().DropDownList()
.Name("ddl_#=FaultCount#")
.DataTextField("Text")
.DataValueField("Value")

.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Remove",
Value = "1"
},
new SelectListItem() {
Text = "Link",
Value = "2"
}

})
.Value("1")
.HtmlAttributes(new { style = "margin:3px;height:25px;font-size:9pt;width:95px" })
.ToClientTemplate().Value
);

})
.Sortable()
.Filterable()

.Scrollable(s => s.Height(330))

.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetWatchList_Read", "Home"))
)
.HtmlAttributes(new { style = "width:850px;height:469px;margin-top:3px;font-size:9pt" })
)



STACK TRACE
VM467:3 Uncaught ReferenceError: value is not defined
at eval (eval at compile (kendo.all.min.js:sourcemap:25), <anonymous>:3:1650)
at init._rowsHtml (kendo.all.min.js:sourcemap:61)
at init._renderContent (kendo.all.min.js:sourcemap:61)
at init.refresh (kendo.all.min.js:sourcemap:61)
at init.d (jquery.min.js:2)
at init.trigger (kendo.all.min.js:sourcemap:25)
at init._process (kendo.all.min.js:sourcemap:28)
at init.success (kendo.all.min.js:sourcemap:28)
at success (kendo.all.min.js:sourcemap:28)
at Object.n.success (kendo.all.min.js:sourcemap:27)
eval @ VM467:3
_rowsHtml @ kendo.all.min.js:sourcemap:61
_renderContent @ kendo.all.min.js:sourcemap:61
refresh @ kendo.all.min.js:sourcemap:61
d @ jquery.min.js:2
trigger @ kendo.all.min.js:sourcemap:25
_process @ kendo.all.min.js:sourcemap:28
success @ kendo.all.min.js:sourcemap:28
success @ kendo.all.min.js:sourcemap:28
n.success @ kendo.all.min.js:sourcemap:27
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
y @ jquery.min.js:4
c @ jquery.min.js:4
XMLHttpRequest.send (async)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
read @ kendo.all.min.js:sourcemap:27
read @ kendo.aspnetmvc.js:250
(anonymous) @ kendo.all.min.js:sourcemap:28
_queueRequest @ kendo.all.min.js:sourcemap:28
read @ kendo.all.min.js:sourcemap:28
query @ kendo.all.min.js:sourcemap:28
_query @ kendo.all.min.js:sourcemap:28
fetch @ kendo.all.min.js:sourcemap:28
init @ kendo.all.min.js:sourcemap:57
(anonymous) @ kendo.all.min.js:sourcemap:26
each @ jquery.min.js:2
each @ jquery.min.js:2
e.fn.<computed> @ kendo.all.min.js:sourcemap:26
(anonymous) @ (index):110
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2
Aleksandar
Telerik team
commented on 16 Jun 2021, 06:40 AM

Will, I have updated the initial answer to reflect the Gauge is embedder in the a column template of a Grid.
Tags
Gauge
Asked by
will
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or