Grid with editable Popup make fields readonly

[Sven]

Hi,

I'm very new to Kendo UI for ASP.NET MVC and I'm facing the first issue.

I have a Grid with editable Popup Editor (Template). Now I want to have a field (let's say CreatedAt timestamp) to show in the popup but only readonly. I've been searching the web for hours for a possible solution and only found the following:

<span data-bind="text:CreatedAt"></span>

That means the field is shown in client side only. How do I change the date format?

If I use default HtmlHelpers like  DisplayFor or ValueFor then nothing is displayed.

Is this the only possibility to display readonly fields in the editable popup?

 

Thanks

Sven

[Viktor Tachev]

Hi Sven,

In order to implement the functionality you can use the following approach. Handle the Edit event of the grid widget and set the editor textbox as readonly.

@(Html.Kendo().Grid(Model)
      .Name("Grid")
      .Pageable()
      .Filterable()
      .Columns(columns =>
      {
          columns.Bound(p => p.ID);
          columns.Bound(p => p.Name);
          columns.Bound(p => p.Description);
          columns.Bound(p => p.SomeDate);
          columns.Command(command => { command.Edit(); });
      })
      .Editable(editable => editable.Mode(GridEditMode.PopUp))
      .DataSource(dataSource => dataSource
          .Server()
          .Model(model => model.Id(p => p.ID))
          .Update(update => update.Action("EditingPopup_Update", "Grid"))
          )
      .Events(e => e.Edit("onEdit"))
)

<script type="text/javascript">

    function onEdit(e) {
        $('[name="ID"]').attr("readonly", true);
    }

</script>

Regards,
Viktor Tachev
Telerik

 

 

[Sven]

Hi Viktor,

 

thanks for your support, it's working now. But how can I format the date in such a field?

 

Regards

Sven

 

[Sven]

Edit: I've tried DateTime formatting with:

@Html.Kendo().TextBoxFor(m => m.CreatedAt).Format("dd.MM.yyyy HH:mm:ss")

 

But it's not working - the output remains the same:

Fri Jul 31 2015 12:07:31 GMT+0200 (Mitteleuropäische Sommerzeit)

 

Thanks

Sven

[Boyan Dimitrov]

Hello Sven,

 

Usually Kendo DatePicker for ASP.NET MVC is used as editor for DateTime fields. It allows user to define the desired format  how the Date values to be displayed. 

 

Is there any specific reason to use TextBox in order to display the date value? 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Sven]

Hi Boyan,

 

sorry for late reply. I'd like to use the TextBox to just display the DateTime in readonly mode. There is no need to display a DatePicker in readonly mode. Currently I got it working using a DatePicker.

Sample Code:

 

<div class="editor-field">
    @Html.Kendo().DatePickerFor(m => m.CreatedAt).Format("{0:G}").Enable(false)
</div>

 

 

[Sven]

Edit: It would be great to hide the DatePicker button from so that it just looks like a TextBox.