Split lines fourth

[Nicolas]

Hello,

Is it possible to divide a line into four and these four fields can be edited, like this?

Regard,

[Mihaela]

Hi Nicolas,

In general, each column in the Grid is associated with a single property from the Model that the Grid is bound to. Thus, there can be only a single editor in a cell out of the box. That editor will modify the relevant property bound to it. Having more than one editor in a cell would break the Single Responsibility Principle since a cell will edit multiple fields in the Model.

If such functionality is necessary, you could use a custom editor template that contains the four editors and manually handle their binding to the respective fields. 

Regards, Mihaela Progress Telerik

[Nicolas]

Hello,

Taking the example you provided, I tried to separate the line into four. 

But I didn't get the desired result.

I put RowsExample in the Shared/EditorTemplate folder.

I attach my code to you to see if I was wrong somewhere?

Regard,

[Mihaela]

Thank you for the provided files. I examined them and would recommend the following:

• Since the Model property "BillableConsulting" has nested properties, you need to pass any of these properties to the column ClientTemplate. Otherwise, the column value will be displayed as [object Object].

@(Html.Kendo().Grid<PsGetProjectsByForecast>()
  .Name("ForecastGrid")
  .Columns( columns =>
  {
    ...
    columns.Bound(p => p.BillableConsulting).ClientTemplate("#=BillableConsulting.B_M0_1#").Width(180);
  })
  ...
)

•  Update the type of the input elements to "number" and remove the "name" attribute:

@model Ps.Data.Standard.Models.BillableConsultingModel;

<input type="number" asp-for="B_M0_1" /><br />
<input type="number" asp-for="T_M0_1" /><br />
<input type="number" asp-for="G_M0_1" /><br />
<input type="number" asp-for="R_M0_1" /><br />

I hope that helps.

[Nicolas]

Thank you

It works

[Nicolas]

Hello,

I tried transform input into label, 

<label>@Model?.T_M0_1</label>

<label asp-for="T_M0_1"></label>

@Html.Label("T_M0_1") or @Html.LabelFor(m => m.T_M0_1) but it displays T_M0_1 mode editable

[Mihaela]

You could define the label as per the example below:

<label asp-for="T_M0_1">Enter the text of the label here</label>
 
//OR

@Html.LabelFor(m => m.T_M0_1, "Enter the text of the label here")

[Nicolas]

Hello,

I tried both of your methods but in editing I don't have the value that is contained in "T_M0_1", its poster T_M0_1

<label asp-for="T_M0_1">@Model?.T_M0_1</label>

@Html.LabelFor(m => m.T_M0_1, @Model?.T_M0_1)

[Nicolas]

Hello,

I have another question how we can retrieve the index of active rows with a custom editor template.

Regard,

[Mihaela]

Hello Nicolas,

By design, the label matches the name of the Model property.

For example, you could use the DisplayAttribute.Name property to define a value that will be used for display in the UI:

using System.ComponentModel.DataAnnotations;    

public class BillableConsultingModel
{
        [Display(Name = "Email Address")]
        public decimal? B_M0_1 { get; set; }
}

Then bind the B_M0_1 property to a label:

<label asp-for="B_M0_1"></label>

which will generate the following HTML:

<label for="B_M0_1">Email Address</label>

As a result, the value of the generated "for" attribute matches the name of the Model property, while the content of the label matches the "Name" from the Display attribute of the "B_M0_1" property.

The EditorTemplate is evaluated during the Grid's initialization, hence the Model values are not available at this stage. Having this in mind, you can store the required labels in ViewData and access them in the EditorTemplate.

Regarding your query about the row index, would you please elaborate further on it? It would be of great help if you could share an example code snippet.

[Nicolas]

Hello,

Please find in the link below a zip project that contains some sample code (access link is limited to a few days):

https://files.castsoftware.com/public/file/62bNcKmLgkiDeWgCZckKHA/Telerik5_sample.zip

My sample has two rows:

On the first row, when status equals 28

• I want to edit "value1" when status equals 28. This part works fine.
• But I want also to view "value2" and "value3". This part does not work: it shows the  displayName instead of the value

On the second row, when status equals 29

• I want to edit "value4" when status equals 29. This does not work: the "value1" is editable.
  because I don't know how to retrieve the status of the second row.
  I don't know how to identify that the second row is edited. And use this as an index in RowsExample.cshtml
  (var status = grid.dataSource._data[index].ForecastStatus;)
• I have the same issue than on the first row with "Value2" and "Value3": it displays the DisplayName instead of the Value.

 

Are you able to open my project and reproduce the behavior above?
Could you advise how to :

* retrieve the status of the second row when I edit second row

* show the value of my fields instead of the display name in edit mode 

 

Thanks again for your support

[Aleksandar]

Hello Nicolas,

The edit template is evaluated against an empty model. Therefore you will have to use MVVM binding to show the values:

@model BillableConsulting;
@{
    
    <div style="padding:10px">
        <input type="number" asp-for="Value1" size="100" />
    </div>
    <div style="padding:10px">
       <label asp-for="Value2"><span data-bind="text: BillableConsulting.Value2"></span></label>
    </div>
    <div style="padding:10px">
        <label asp-for="Value3"><span data-bind="text: BillableConsulting.Value3"></span></label>
    </div>
    <div style="padding:10px">
        <input type="number" asp-for="Value4" disabled="disabled" size="100" />
    </div>


}

 

In addition, you can render the final input as disabled and add an edit event handler to the Grid. If the model has a ForecastStatus == 29 enable the input:

 

.Events(ev=>ev.Edit("onEdit"))

<script type="text/javascript">
    function onEdit(e){
        if(e.model.ForecastStatus == 29){
        $('#BillableConsulting_Value4').attr("disabled", false);
        }
    }
</script>

 

[Nicolas]

Thank you

It works