This is a migrated thread and some comments may be shown as answers.

DisplayFor string is empty in EditorTemplate

10 Answers 1163 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 02 Apr 2014, 11:19 AM
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?







10 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 03 Apr 2014, 03:42 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Sindhura
Top achievements
Rank 1
answered on 24 Aug 2015, 11:58 PM

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.

 

0
Vladimir Iliev
Telerik team
answered on 27 Aug 2015, 06:33 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Andrew
Top achievements
Rank 1
answered on 06 Jun 2018, 07:04 AM

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

0
Preslav
Telerik team
answered on 07 Jun 2018, 10:40 AM
Hi Andrew,

To achieve the desired behavior, use the Kendo toString method, and put the desired format as the second parameter:
I hope this helps.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Andrew
Top achievements
Rank 1
answered on 07 Jun 2018, 11:04 AM

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

 

 

 

0
Preslav
Telerik team
answered on 07 Jun 2018, 12:01 PM
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:
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:
I hope this helps.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Andrew
Top achievements
Rank 1
answered on 07 Jun 2018, 12:17 PM

Hi Preslav,

That works perfectly, thank you.

Regards

Andrew

0
Matthew
Top achievements
Rank 1
Veteran
answered on 16 Dec 2018, 06:33 PM
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.
0
Preslav
Telerik team
answered on 18 Dec 2018, 02:09 PM
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.

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:
I hope this helps.


Regards,
Preslav
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Oliver
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Sindhura
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Preslav
Telerik team
Matthew
Top achievements
Rank 1
Veteran
Share this question
or