1

I know it is not clear but I show you this image:

Look at here

I want when I select a Data type, to set the DB Data text field according to the following:

Data Type – DB DataType

a. STRING - varchar(100)

b. INTEGER – int

c. LONG - Bigint

For example :

1)When I select STRING from Data Type to be able to set the DB Datatype text field to varchar(100) or

2)When I select INTEGER from Data Type to be able to set the DB Datatype text field to int or

3)When I select LONG from Data Type to be able to set the DB Datatype text field to Bigint.

My code is the following:

$("#DataGrid").jsGrid({
                height: "100%",
                width: "70%",
                filtering: true,
                editing: true,
                inserting: true,
                sorting: true,
                paging: true,
                autoload: true,
                pageSize: 15,
                pageButtonCount: 5,
                datatype: "json",
                deleteConfirm: "Do you really want to delete the row?",
                controller: process_variables,
                fields: [
                    { name: "ID", align: "center", width: 10 },
                    { name: "Name", validate: { message: "Field Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 },
                    { name: "Display Name", validate: { message: "Field Display Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 },
                    { name: "Data Type", validate: { message: "Field Data Type is required", validator: function(value) { return value != ""; } }, align: "center", type: "select", items: process_variables.dataType, valueField: "Name", textField: "Name", width: 45 },
                    { name: "Initial Value", align: "center", type: "text", width: 40 },
                    { name: "Initial State", validate: { message: "Field Initial State is required", validator: function(value) { return value != ""; } }, align: "center", type: "select", items: process_variables.initialState, valueField: "Name", textField: "Name", width: 40 },
                    { name: "Worklist Order", align: "center", type: "number", width: 25 },
                    { name: "DB Datatype", validate: { message: "Field DB Datatype is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 45 },
                    { name: "Allowed values", align: "center", type: "text", width: 100 },
                    { type: "control", width: 25 }
                ]

        });

This is my js-GRID database:

(function() {

    var total_data_ids = 8;
    var process_variables = {

        loadData: function(filter) {
            return $.grep(this.clients, function(client) {
                return (!filter.ID || client.ID.indexOf(filter.ID) > -1)
                    && (!filter.Name || client.Name.indexOf(filter.Name) > -1)
                    && (!filter.Displayed_name || client.Displayed_name.indexOf(filter.Displayed_name) > -1)
                    && (!filter.Data_type || client.Data_type === filter.Data_type)
                    && (!filter.Initial_value || client.Initial_value.indexOf(filter.Initial_value) > -1)
                    && (!filter.Initial_state || client.Initial_state === filter.Initial_state)
                    && (!filter.Worklist_order || client.Worklist_order === filter.Worklist_order)
                    && (!filter.process_variables_datatype || client.process_variables_datatype.indexOf(filter.process_variables_datatype) > -1)
                    && (!filter.Allowed_values || client.Allowed_values.indexOf(filter.Allowed_values) > -1);
            });
        },

        insertItem: function(insertingClient) {
            insertingClient.ID = total_data_ids;
            this.clients.push(insertingClient);
            $("#DataJson").html(JSON.stringify(this.clients));
            total_data_ids++;

        },

        updateItem: function(updatingClient) {
            $("#DataJson").html(JSON.stringify(this.clients));
        },

        deleteItem: function(deletingClient) {
            var clientIndex = $.inArray(deletingClient, this.clients);
            this.clients.splice(clientIndex, 1);
            $("#DataJson").html(JSON.stringify(this.clients));
        }

    };

    process_variables.dataType = [
        { Name: "STRING", Id: 0 },
        { Name: "INTEGER", Id: 1 },
        { Name: "DOUBLE", Id: 2 },
        { Name: "DATE", Id: 3 },
        { Name: "DATETIME", Id: 4 },
        { Name: "BOOLEAN", Id: 5 },
        { Name: "COMMENT", Id: 6 },
        { Name: "FILE", Id: 7 },
        { Name: "EMAIL_ADDRESS", Id: 8 },
        { Name: "AFM", Id: 9 },
        { Name: "ENTITY", Id: 10 },
        { Name: "LONG", Id: 11 }
    ];

    process_variables.initialState = [
        { Name: "HIDE", Id: 0 },
        { Name: "READ ONLY", Id: 1 },
        { Name: "WRITE", Id: 2 },
        { Name: "WRITE REQUIRED", Id: 3 }
    ];

    process_variables.clients = [];

    window.process_variables = process_variables;

}());
  • This might help http://stackoverflow.com/questions/30645088/jqgrid-change-values-of-editable-cell-on-change-of-another-cell-dependent-colum – DMv2 Feb 07 '17 at 14:02

1 Answers1

1

It was quite difficult but I fixed it. This is the final code which works like a charm:

$("#DataGrid").jsGrid({
                height: "100%",
                width: "70%",
                filtering: true,
                editing: true,
                inserting: true,
                sorting: true,
                paging: true,
                autoload: true,
                pageSize: 15,
                pageButtonCount: 5,
                datatype: "json",
                deleteConfirm: "Do you really want to delete the row?",
                controller: process_variables,
                fields: [
                    { name: "ID", align: "center", width: 10 },
                    { name: "Name", validate: { message: "Field Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 },
                    { name: "Display Name", validate: { message: "Field Display Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 100 },
                    { name: "Data Type", insertTemplate: function() {
                    var grid = this._grid;
                    var insertResult = jsGrid.fields.select.prototype.insertTemplate.call(this, arguments);
                    var defaultInsertValue = insertResult.val();
                    //alert("i default timi einai: " + defaultInsertValue);
                    //alert(JSON.stringify(insertResult.val()));

                    insertResult.on("change", function() {
                    var selectedInsertValue = insertResult.val();
                    //alert("i selected timi einai: " + selectedInsertValue);
                    var anotherInsertFieldIndex = 7;
                    if (selectedInsertValue == "STRING") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(100)");
                    else if (selectedInsertValue == "INTEGER") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("int");
                    else if (selectedInsertValue == "DOUBLE") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Real");
                    else if (selectedInsertValue == "DATE") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Datetime");
                    else if (selectedInsertValue == "DATETIME") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Datetime");
                    else if (selectedInsertValue == "BOOLEAN") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(5)");
                    else if (selectedInsertValue == "COMMENT") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("ntext");
                    else if (selectedInsertValue == "FILE") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(250)");
                    else if (selectedInsertValue == "EMAIL_ADDRESS") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(100)");
                    else if (selectedInsertValue == "AFM") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(100)");
                    else if (selectedInsertValue == "ENTITY") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("varchar(2000)");
                    else if (selectedInsertValue == "LONG") grid.option("fields")[anotherInsertFieldIndex].insertControl.val("Bigint");
                    });
                    return insertResult;
                    }, editTemplate: function() {
                    var grid = this._grid;
                    var editResult = jsGrid.fields.select.prototype.editTemplate.call(this, arguments);

                    editResult.on("change", function() {
                    var selectedEditValue = editResult.val();
                    var anotherEditFieldIndex = 7;
                    if (selectedEditValue == "STRING") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(100)");
                    else if (selectedEditValue == "INTEGER") grid.option("fields")[anotherEditFieldIndex].editControl.val("int");
                    else if (selectedEditValue == "DOUBLE") grid.option("fields")[anotherEditFieldIndex].editControl.val("Real");
                    else if (selectedEditValue == "DATE") grid.option("fields")[anotherEditFieldIndex].editControl.val("Datetime");
                    else if (selectedEditValue == "DATETIME") grid.option("fields")[anotherEditFieldIndex].editControl.val("Datetime");
                    else if (selectedEditValue == "BOOLEAN") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(5)");
                    else if (selectedEditValue == "COMMENT") grid.option("fields")[anotherEditFieldIndex].editControl.val("ntext");
                    else if (selectedEditValue == "FILE") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(250)");
                    else if (selectedEditValue == "EMAIL_ADDRESS") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(100)");
                    else if (selectedEditValue == "AFM") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(100)");
                    else if (selectedEditValue == "ENTITY") grid.option("fields")[anotherEditFieldIndex].editControl.val("varchar(2000)");
                    else if (selectedEditValue == "LONG") grid.option("fields")[anotherEditFieldIndex].editControl.val("Bigint");
                    });
                    return editResult;
                    }, validate: { message: "Field Data Type is required", validator: function(value) { return value != "Select"; } }, align: "center", type: "select", items: process_variables.dataType, valueField: "Name", textField: "Name", width: 45 },
                    { name: "Initial Value", align: "center", type: "text", width: 40 },
                    { name: "Initial State", validate: { message: "Field Initial State is required", validator: function(value) { return value != ""; } }, align: "center", type: "select", items: process_variables.initialState, valueField: "Name", textField: "Name", width: 40 },
                    { name: "Worklist Order", align: "center", type: "number", width: 25 },
                    { name: "DB Datatype", validate: { message: "Field DB Datatype is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 45 },
                    { name: "Allowed values", align: "center", type: "text", width: 100 },
                    { type: "control", width: 25 }
                ]

        });