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

Grid with editable Popup make fields readonly

6 Answers 950 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sven
Top achievements
Rank 1
Sven asked on 30 Jul 2015, 02:04 PM

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

6 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 31 Jul 2015, 02:45 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sven
Top achievements
Rank 1
answered on 01 Aug 2015, 02:06 PM

Hi Viktor,

 

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

 

Regards

Sven

 

0
Sven
Top achievements
Rank 1
answered on 01 Aug 2015, 02:11 PM

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

0
Accepted
Boyan Dimitrov
Telerik team
answered on 05 Aug 2015, 07:17 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sven
Top achievements
Rank 1
answered on 16 Sep 2015, 07:14 PM

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>

 


 
0
Sven
Top achievements
Rank 1
answered on 16 Sep 2015, 07:16 PM
Edit: It would be great to hide the DatePicker button from so that it just looks like a TextBox.
Tags
Grid
Asked by
Sven
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Sven
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or