.ClientTemplate - Why is this not working?

[Shawn]

Hi,

 

I have a Kendo.Grid being loaded into a Kendo.Window.  The Grid is showing up with the correct data, but the boolean column 'Printed' is displayed as a checkbox (see screenshot), when I want it to be either 'Y' or 'N'.  Ideally, I want to to be a green TICK or nothing, but I'm just trying to get anything to display other than the checkbox. I have found many examples on using the .ClientTemplate and have added this to the 'Printed' column according to the examples from Telerik, but it just is not working.

Below is the Grid definition.

@{ Layout = null; }

@model IEnumerable<CBECloudBO2.ViewModels.LabelTypeForChangesViewModel>
@(Html.Kendo().Grid(Model)
    .Name("plulabelsgrid")
    .HtmlAttributes(new { style = "height: 230px;" })
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden();
        columns.Bound(p => p.ReportTemplate).Hidden();
        columns.Bound(p => p.Description).Title("Label");
        columns.Bound(p => p.LabelsCount).Title("Count").Width(70);
        columns.Bound(p => p.NumberLabelsOnPage).Title("Labels per Page").Width(120);
        columns.Bound(p => p.Printed).Title("Printed").Width(80).ClientTemplate("#= Printed ? 'Y' : 'N' #");
        columns.Command(command => command.Custom("Print").Click("printLabel")).Width(85);
    })
    .Scrollable()
    .DataSource(datasource => datasource
        .Ajax()
         )
)

 

Can anyone spot anything in the above code or offer me suggestions?

Regards,

Shawn

[Shawn]

BTW

I am using Visual Studio 2015 and the Kendo.Mvc version is 2016.3.1028.545

Regards,

Shawn

[Shawn]

BTW

I am developing in Visual Studio 2015 with Kendo.Mvc version 2016.3.1028.545

Regards,

Shawn

[Shawn]

After further digging, I discovered that the ClientTemplate only works with Ajax binding, which I'm not doing for this grid implementation. I changed the column to use .Template and I was able to at least get a green tick mark in the column, but I need to display this based on the 'Printed' value being true.

Here's my change:

columns.Bound(p => p.Printed).Title("Printed").Width(80).Template(@<text><span style="color: green;">✔</span></text>);

 

I could not find any examples on how to use a conditional within the .Template. Is this possible?

Regards,

Shawn

[Kostadin]

Hi Shawn,

Please check out the following code snippet which demonstartes how to use an if-else statement in a server Template.

columns.Bound(p => p.Printed).Template(@<text> @if (item.Printed)
{
  <span style="color: green;">✔</span>
}
else
{
  <span style="color: red;">✔</span>

}</text>);

I hope this information helps.

Regards,
Kostadin
Telerik by Progress

[Shawn]

Kostadin,

Thank you so much.  That works perfect.  I could not for the life of me find an example of this.  Every search came up with examples for the ClientTemplate which uses the #= # syntax.

Kindest Regards,

Shawn

[Shawn]

Kostadin,

Well this was working until I implemented the 'printLabel' function.  Once I added the JavaScript function 'printLabel' to my script section, the green tick mark gets replaced by 'false' (see attached file).  If I remove the printLabel function, the green tick mark appears again. The printLabel function I have defined simply gets a value from the data and displays it in an alert.

function printLabel(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    alert(dataItem.ReportTemplate);
}

 

Seeing that I need the printLabel function available to process the button .Click event for the Custom command, how can I get both working?

Regards,

Shawn

[Kostadin]

Hi Shawn,

Please note that when server binding is used the data is rendered directly to the grid and no data is kept on the client side. That means you cannot access the dataitem by using the approach that you are currently using.
A possible solution is to traverse the row element or use an Ajax binding.

function printLabel(e) {
    e.preventDefault();
    var cells = $(e.currentTarget).closest("tr")[0].cells
    for (var i = 0; i < cells.length; i++) {
        alert(cells[i].innerHTML);
    }
}

I hope this information helps.

Regards,
Kostadin
Telerik by Progress

[Shawn]

Kostadin,

I hear what you are saying about the Server Binding, but the JavaScript function I provided does retrieve the data from the dataItem variable as it is defined in the example above.

My question was more towards why the existence of the JavaScript function 'printLabel' which is assigned to the custom action in the grid initialization would cause a different behavior in the .Template than when the function does not exist in the <script> section. When I added the function, the green tick mark was replaced by the word 'false'.  When I comment out the function from the <script> section, the green tick mark appears again. 

Regards,

Shawn

[Kostadin]

Hello Shawn,

I assumed that the issue was caused by a JavaScript error which should be thrown when dataItem is null. However, I try to replicate the issue on my end but I am afraid I was unable to. Could you please check out the attached sample and let me know how it differs from your real setup? I would appreciate if you replicate the issue either in my sample or in a small runnable one in order to examine it further.

Regards,
Kostadin
Telerik by Progress

[Shawn]

Kostadin,

Thank you for the example.  I compared it with what I was doing and I still had the datasource being defined even though I was not calling a Read function.

.DataSource(datasource => datasource
    .Ajax()
     )

 

Once I removed this, it behaved as you described.  I could no longer read the dataItem object from within the JavaScript function and I needed to get to the values using the [].Cells you had in your example.

It's working as expected now.  Thanks for your help.

Shawn