DisplayFor string is empty in EditorTemplate

[Oliver]

Hi,

I am using the PopUp mode in the Kendo Grid Widget. I have two Problems.

1. The @Html.DisplayFor command generates no text, when I use @Html.TextBoxFor it works as expected but the Twitter Bootstrap formatting does not work.

@model NursingHomeStock.Models.PlaceTypeViewModel

<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(m => m.Name, new { @class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label"})
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
            <p class="form-control-static">Text: @Html.DisplayFor(m => m.Name)</p>
        </div>
    </div>
    
    <div class="form-group">
        @Html.LabelFor(m => m.ForDate, new { @class = "col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label" })
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            @(Html.Kendo().DateTimePickerFor(m => m.ForDate)
                  .Name("ForDate")
                  .Format("yyyy-MM-dd hh:mm:ss")
                  .Interval(15)
                  )
        </div>
    </div>
    
    <div class="form-group">
        @Html.LabelFor(m => m.Comment, new { @class = "col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label" })
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            @(Html.TextAreaFor(m => m.Comment, new { rows = 6, @class = "form-control" }))
        </div>
    </div>
</div>

2. I have a scrollbar at the bottom of the window, the components should be smaller to fit into the popup, how can I achieve this?

[Vladimir Iliev]

Hi Oliver,

Please find the answers of your questions below:

1) Basically the PopUp editor template is serialized to Html/ JavaScript during Grid initialization using empty instance of the Grid type. Then on the client side the current model is bound to the generated Html. As the DisplayFor generates no editor it's not possible to display the value on the client side. Possible solution is to use the template syntax to render the property as-is:

e.g.:

<p class="form-control-static">Text: ${Name}</p>

2) You can apply custom CSS classes (as you already did) to the widgets / elements inside the editor and specify their width in order to make them fit in the PopUp window.

Kind Regards,
Vladimir Iliev
Telerik

 

 

[Sindhura]

Is there a way I could get the value into a html variable?

Something like this in editor template:

@{

var value = ${Name};

}

 

Or is it possible to access this value using Javascript in editor template? For example:

<script>

var value = ${Name};  //get the value of Name in the model

</script>

 

Thanks in advance.

 

[Vladimir Iliev]

Hello,

You can get the value into a JavaScript variable the same way as you suggested:

var value = ${Name};

Please note however that the JavaScript inside the edit template should have only multi-line comments (all single line should be removed) as the template is minified.

Regards,
Vladimir Iliev
Telerik

[Andrew]

Hi Vladimir,

Say I have a Date Field ${ReportDate} and I want to format it to "yyyy/MM/dd", how would I do that?

Kind Regards

Andrew

[Preslav]

Hi Andrew,

To achieve the desired behavior, use the Kendo toString method, and put the desired format as the second parameter:

• https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/tostring

I hope this helps.


Regards,
Preslav
Progress Telerik

[Andrew]

Hi Preslav,

Sorry but I do not understand this. How will the syntax look like: ${kendo.toString(ReportDate), "yyyy/MM/dd"} OR kendo.toString(${ReportDate}, "yyyy/MM/dd")?

 

This is a small snippet of my code inside the Grids Edit Popup Template

  <div class="row" style="margin-top:3px">
    <div class="col-lg-4">
      @(Html.LabelFor(r => r.Assessor))
    </div>
    <div class="col-lg-8">
      ${Assessor}
    </div>
  </div>
  <div class="row" style="margin-top:3px">
    <div class="col-lg-4">
      @(Html.LabelFor(r => r.ReportDate))
    </div>
    <div class="col-lg-8">
      ${kendo.toString(ReportDate), "yyyy/MM/dd"}
      kendo.toString(${ReportDate}, "yyyy/MM/dd")
    </div>
  </div>
  <div class="row" style="margin-top:3px">
    <div class="col-lg-4">
      @(Html.LabelFor(r => r.WorkingPlace))
    </div>
    <div class="col-lg-8">
      ${WorkingPlace}
    </div>
  </div>

 

The results of your suggestion is as follows:

 

Thu Feb 01 2018 10:12:19 GMT+0200 (South Africa Standard Time)

kendo.toString(Thu Feb 01 2018 10:12:19 GMT+0200 (South Africa Standard Time), "yyyy/MM/dd")

which is not wat I wanted. I want a format like this ('yyyy/DD/mm").

 

Thank you for your reply.

Kind Regards

Andrew

 

 

 

[Preslav]

Hello Andrew,

The format should be the second parameter of the "kendo.toString" function. For example:

${kendo.toString(ReportDate), "yyyy/MM/dd")}

For a runnable example, I used the "Custom popup editor" demo as a base:

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor

Now the code of the "Person.cshtml" looks like:

@model KendoUIMVC5.Models.Person

<h3>Customized Person edit template</h3>
<br />
@Html.HiddenFor(model => model.PersonID)

<div>
    @Html.LabelFor(model => model.Name)
</div>
<div>
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>

<div>
    @Html.LabelFor(model => model.BirthDate)
</div>
<br /><br /><br />
${kendo.toString(BirthDate, "yyyy/MM/dd" )}
<br /><br /><br />
<div>
    @Html.Kendo().DateTimePickerFor(model => model.BirthDate)
    @Html.ValidationMessageFor(model => model.BirthDate)
</div>

And the outcome is:

• https://www.screencast.com/t/XlPsiRWxnb3

I hope this helps.


Regards,
Preslav
Progress Telerik

[Andrew]

Hi Preslav,

That works perfectly, thank you.

Regards

Andrew

[Matthew]

How does one evaluate if ${Name} has a value?

My concern is I have a div to display conditionally depending if the name is null or not.

When I attempt to capture ${Name} either wrapped in @{ var name = ${Name}} or <script>var name = ${Name};</script>
errors are generating at design time.

[Preslav]

Hello Matthew,

The editor template is not evaluated every time, it is evaluated on the server once, and then, sent to the client.

Having said that, implementing the desired logic in the template is not doable. To achieve the desired outcome, I would suggest handling the edit event of the Grid. In the event handler, based on the model, hide/display the desired div with JavaScript.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit
• https://api.jquery.com/hide/

The code could look like:

<div id="condDisplay" style="color: red;">
    ${Name}
</div>

//...
.Events(e=>e.Edit("onEdit"))
//...

<script>
    function onEdit(e) {
        if (e.model.Name !== "John") {
            $("#condDisplay").hide();
        }
    }
</script>

For example, check this video:

• https://www.screencast.com/t/vetd3SYIO

I hope this helps.


Regards,
Preslav
Progress Telerik