JSGrid Editing Details

by alexbelij

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>

<div id="dialog-form" title="Details">
    <form id="categoryForm">
        <p><label>code_cat: <input id="code_cat" /></label></p>
        <p><label>descr_fra: <input id="descr_fra" /></label></p>
        <p><label>descr_eng: <input id="descr_eng" /></label></p>
        <p><label>descr_deu: <input id="descr_deu" /></label></p>
    </form>
</div>

CSS

.ui-widget {
    font-size: 12px;
}

JavaScript

var data = [
    { code_cat: "code1", descr_fra: "Oui1", descr_eng: "Yes1", descr_deu: "Ja1" },
    { code_cat: "code2", descr_fra: "Oui2", descr_eng: "Yes2", descr_deu: "Ja2" },
    { code_cat: "code3", descr_fra: "Oui3", descr_eng: "Yes3", descr_deu: "Ja3" }
];

var dialog = $("#dialog-form").dialog({
    autoOpen: false,
    width: 200,
    modal: true,
    closeOnEscape: true,
    buttons: {
        Save: function() {
            $("#categoryForm").submit();
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        dialog.find("form")[0].reset();
    }
});

var submitHandler;

dialog.find("form").submit(function(e) {
    e.preventDefault();
    submitHandler();
});

var showDetailsDialog = function(dialogType, category) {
    submitHandler = function(event) {
        //if($("#categoryForm").valid()) {
        saveClient(category, dialogType === "Add");
        //}
    };
    
    $("#code_cat").val(category.code_cat);
    $("#descr_fra").val(category.descr_fra);
    $("#descr_eng").val(category.descr_eng);
    $("#descr_deu").val(category.descr_deu);

    dialog.dialog("option", "title", dialogType + " category").dialog("open");
};

var saveClient = function(category, isNew) {
    $.extend(category, {
        code_cat: $("#code_cat").val(),
        descr_fra: $("#descr_fra").val(),
        descr_eng: $("#descr_eng").val(),
        descr_deu: $("#descr_deu").val()
    });
    console.dir(category);
    $("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", category);

    dialog.dialog("close");
};

$("#jsGrid").jsGrid({
    height: 300,
    width: "100%",
    editing: true,
    autoload: true,
    paging: true,
    rowClick: function(args) {
        showDetailsDialog("Edit", args.item);
    },
    controller: {
        loadData: function() {
            return data;
        }
    },
    fields: [
        { name: "code_cat", type: "text", width: 150 },
        { name: "descr_fra", type:...