Grip popup editor change order of fields

[Dan]

I have a page where I have to display some data in a grid. The order of columns is dynamic based on the language of the page. The data has to be able to edit it and add new data. I have used the popup editor of the grid. And the editor has to have the same order as the columns in grid (default order).

Also the server will have validation so I used as reference the project https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/popup-editing-server-validation

I tried to find a way to influence the order without using a custom editor and could not. Is there a way to influence the order of the fields that appear in the popup editor?

I have tried also using a custom editor however when I used 

<span class="field-validation-valid" data-for="Field" data-valmsg-replace="true" data-valmsg-for="Field"></span>

for validation on the page it got converted to this  

<div class="k-widget k-tooltip k-tooltip-validation field-validation-error" id="Field_validationMessage" role="alert" style="margin: 0.5em;" data-valmsg-for="Field" data-for="Field"><span class="k-icon k-i-warning"> </span>The Field is required<div class="k-callout k-callout-n"></div></div>

and I can no longer use the server validation code from the above project.

Is there a way to influence the validation not to change the span?

I do not want to create a custom validation because the server validation has to communicate with the database.

[Preslav]

Hi Dan,

Generally speaking, the fields in the pop-up editor are ordered based on the current columns order. Having said that, please check this demo:

• https://dojo.telerik.com/ikabiDEg

In the above demo, reorder any column and click the "Edit" button. After that, reorder the columns again, and click the "Edit" button. Notice how the inputs change their order.

Having said that, could you please share a project that demonstrates the behavior on your side? I will use this project to understand what is causing the inputs to not order based on the columns. This will help me to eventually find a workaround.

I look forward to hearing from you.


Regards,
Preslav
Progress Telerik

[Dan]

Hi Preslav,

The forum where I placed the question is ASP.NET Core Forum so please assume that I am using the Telerik for ASP.NET Core. Yes your code works but have you looked at the javascript generated by telerik for ASP.Net Core? It is not the same. The javascript generated places a "template" in the configuration so I would assume that might be the problem.

As for the shared project Please make the demo code for popup edit for asp.net core have the columns reordable

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

and you will easily reproduce my problem.

[Preslav]

Hello Dan,

Please excuse me for not noticing that this post is part of the ASP.NET Core forums.

You are correct, this behavior comes from the fact that there is a template generated on the server, and used for the editor popup. Having said that, to achieve the desired behavior, in the dataBound event handler of the Grid remove the reference to this template. By doing this, every time the user clicks the edit button, the popup will be generated based on the columns. For example, the code could look like:

//...
.Events(e=>e.DataBound("onDataBound"))
//...
<script>
    function onDataBound(e) {
        e.sender.options.editable.template = null;
    }
</script>

I hope this helps.


Regards,
Preslav
Progress Telerik