How can I edit a different view of the data from a GET and then persist converted values on POST

mike92117

I have an application where I'm editing a simple table that is comprised of values of temperature, pressure and other values that have measurement units. In this case, the table is storing the values in English units, e.g., temperature in Fahrenheit degrees, pressure in pounds per square inch, etc.

The web application has a setting for whether the user wants to use Metric or English. So temperature could be entered (and edited) as degrees Centigrade. But I'm wondering if there is a way I can hook into the editor API to convert the values on a GET to Metric and then convert from Metric back to English so it gets persisted to the database correctly (in English). I'm working in C# and the API call /hx/hxstatepoints, returns ENGLISH values and on POST needs to persist ENGLISH values.

I would also like to have the labels accurately reflect the current unit system the user has chosen so it shows Temperature, °F or Temperature, °C as a label.

This is my html/javascript

        <table id="dtHXState" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Cold fluid</th>
                    <th>Tc</th>
                    <th>Pc</th>
                    <th>Mc</th>
                    <th>Hot fluid</th>
                    <th>Th</th>
                    <th>Ph</th>
                    <th>Mh</th>
                </tr>
            </thead>
        </table>
 
<script type="text/javascript" class="init">
    var editor;
    var tclbl;
    $(function () {  
        editor = new $.fn.dataTable.Editor({
            ajax: '../HX/HXStatePoints',
            table: "#dtHXState",
            dataType: 'json',
            fields: [{
                label: "Name",
                name: "HXStatePoint.Name"
            }, {
                label: "Cold fluid",
                name: "HXStatePoint.ColdFluidID",
                type: "select",
                placeholder: "Select a fluid"
 
            }, {
                label: "Tc",
                name: "HXStatePoint.Tc"
            }, {
                label: "Pc",
                name: "HXStatePoint.Pc"
            }, {
                label: "Mc",
                name: "HXStatePoint.Mc"
            }, {
                label: "Hot fluid",
                name: "HXStatePoint.HotFluidID",
                type: "select",
                placerholder: "Select a fluid"
            }, {
                label: "Th",
                name: "HXStatePoint.Th"
            }, {
                label: "Ph",
                name: "HXStatePoint.Ph"
            }, {
                label: "Mh",
                name: "HXStatePoint.Mh"
            }
            ]
        });       
        $('#dtHXState').DataTable({
            dom: "Brftip",
            ajax: "../HX/HXStatePoints",
            type: 'POST',
            columns: [
                { data: "HXStatePoint.Name" },
                { data: "ColdFluid.Name" },
                { data: "HXStatePoint.Tc" },
                { data: "HXStatePoint.Pc" },
                { data: "HXStatePoint.Mc" },
                { data: "HotFluid.Name" },
                { data: "HXStatePoint.Th" },
                { data: "HXStatePoint.Ph" },
                { data: "HXStatePoint.Mh" }
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
    });
</script>

allan

dependent() is the method you want here. With that you can hook into the inputs and it can either send an Ajax request to the server with each change, or it can do the calculation locally. With something that doesn't require a database lookup, I'd very much encourage you to just do the conversion in Javascript - it will save a lot of Ajax requests!

One other thing you might be interested in is this example. It also uses dependent(), in this case to show / hide fields. What you could potentially do is have a radio input (or whatever else you are using to let the user switch between Imperial and Metric values) which will control if the Imperial or Metric input options are shown.

Regards,
Allan

mike92117

I'll give this a go. Sounds perfect! Right now, I'm using a cookie value for the current unit system setting.