different row template according to a value

[Nicolas]

Hello,

Is it possible to have a different template per row according to a value of a column in the grid?

Example:

If ForecastType=1

If ForecastType=2

 

If ForecastType=3

 

yellow areas are editable

[Tsvetomir]

Hi, Nicolas,

Indeed, it is possible to have different row templates based on a condition. Please find the REPL example below that displays different rows based on a condition from the data item:

https://netcorerepl.telerik.com/wvbQumaB34zVMb2820

As per the editing, please note that it comes from the data source, or, if you would like to dynamically make a field editable/non-editable, I recommend the following article:

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/how-to/editing/conditionally-editable-columns

I hope you find this helpful.

 

Kind regards,
Tsvetomir
Progress Telerik

[Nicolas]

Hi,

Thank you for your reply.

For display, it works.

 

[Nicolas]

Hi,.

I have another question for the Edit button how do we do it with "ClientRowTemplate"?

[Tsvetomir]

If you would like to add the edit button to the row, you could get the rendered HTML from the demo below:

https://demos.telerik.com/aspnet-core/grid/editing-inline

Adding an anchor tag with the k-grid-edit class should be sufficient for adding the button to the row of the grid:

<a role="button" class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-i-edit"></span>Edit</a>

As per the custom scenario with the order of the TD elements, the row template has no limitation on how exactly the elements have to be structured. You could use a combination of HTML and CSS to achieve the design at hand. Usually, such custom scenarios are created by the developer as the support services focus more on the exposed options and how to utilize them rather than providing end-to-end solutions. 

 

 

 

[Nicolas]

Hi,

It works but my fields are more editable.

I found another solution.

columns.Bound(p => p.B_M0_1).Title($"{DateTime.UtcNow.ToString("MMM yy")}  </br> Billable </br> Consulting")
    .ClientTemplate("<p style = 'background-color : #=colorBaseline(ForecastStatus)#'>#=isnullBaseline(B_M0_1) # </p> <p style = 'background-color : #=colorForecast(ForecastStatus)#'>#= isnullForecast(F_M0_1) # </p>").Width(84).Filterable(false).Editable("productNameEditable");

function isnullBaseline(valeur) {
        return valeur === null ? "Baseline" : valeur;       
    }
	
function colorBaseline(status) {
    return status === 28 ? "yellow" : "white";       

}

Thank you for your reply

[Tsvetomir]

Hi Nicolas, indeed, this is the cleanest and most recommended for dynamically enabling the editing for a specific field. However, this requires for setting up both - the column in the Columns declaration as well as in the ClientRowTemplate.