How to get header name (colNames) from data base in jqgrid

Question

I have two tables that joined. I get data from this query and show in jqgrid. In normality my grid like this:

enter image description here

I want to show first column (C02/ C01 /C01/ C02 /C01) like header(colNames) and second column (2.2.2.2 / 1.1.1 /1.1.1 / 8.8.8.8. / 6.6.6.6) for value of first column and for other column like second column and sit below header. Indeed i'm gonna change horizontal grid to vertical(I think). My jqGrid code is below:

<script type="text/javascript">
var searchOptions = ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'in', 'ni', 'ew', 'en', 'cn', 'nc'];

$(document).ready(function () {
    $('#list').jqGrid({
        caption: "ObisData",
        //url from wich data should be requested
        url: '@Url.Action("GetObisData", "DataGrid")',
        //EditData
        editurl: '@Url.Action("EditData", "DataGrid")',
        //type of data
        datatype: 'json',
        jsonReader: {
            root: "Rows",
            page: "Page",
            total: "Total",
            records: "Records",
            repeatitems: true,
            id: "ObisDataID",
            cell: "RowCells"
        },
        //url access method type
        mtype: 'POST',
        //columns names
        colNames: [ '', '', '', ''],
        //columns model
        colModel: [
            {
                name: 'ObisDataID', index: 'ObisDataID', align: 'right', width: 100,
                editable: false, hidden: true, key: true

            },
        {
            name: 'ObisInfoTitle', index: 'ObisInfoTitle', align: 'center', width: 100,
            editable: false, hidden: false

        }
        ,

        {
            name: 'ObisData', index: 'ObisData', align: 'center', width: 100,
            editable: false, hidden: false
        }
        ,
        {
            name: 'ObisInfoTranslateT', index: 'ObisInfoTranslateT', align: 'center', width: 170,
            editable: false, hidden: false
        }

        ],
        //pager for grid
        pager: $('#pager'),
        //number of rows per page
        rowNum: 10,
        rowList: [10, 20, 50, 100],
        //initial sorting column
        sortname: 'ObisDataID',
        //initial sorting direction
        sortorder: 'desc',
        //we want to display total records count
        viewrecords: true,
        altRows: true,
        shrinkToFit: false,
        width: '1100',
        height: 'auto',
        hidegrid: false,
        direction: "rtl",
        gridview: true,
        rownumbers: true,
        footerrow: true,
        //userDataOnFooter: true,
        loadComplete: function () {
            //change alternate rows color
            $("tr.jqgrow:odd").css("background", "#E0E0E0");
        },
        loadError: function (xhr, st, err) {
            jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
        }
        //, loadonce: true
    })

Can you add jqgrid code..... – Krishnakumar Subbaiyan May 19 '15 at 07:15 — Krishnakumar Subbaiyan, May 19 '15 at 07:15
@Krishnakumar Subbaiyan yes. I edited my question. – mahdis dezfouli May 19 '15 at 07:27 — mahdis dezfouli, May 19 '15 at 07:27
@KrishnakumarSubbaiyan does need to add controller? – mahdis dezfouli May 19 '15 at 07:36 — mahdis dezfouli, May 19 '15 at 07:36

Krishnakumar Subbaiyan · Answer 1 · 2015-05-19T08:11:27.477

0

Change the direction code. then your grid will align left to right

direction : "ltr"

You don't want row numbers to

rownumbers: false

Header names From DB

First assign DB value in js variable after you will add colNames in jqgrid code.

var firstColName={insert DBvalue data};
var secondColName={insert DBvalue data};
var thirdColName={insert DBvalue data};

 colNames: [ firstColName, secondColName,thirdColName, ......],

edited May 19 '15 at 08:11

answered May 19 '15 at 08:04

Krishnakumar Subbaiyan

751
1
10
32

@Krishnakumr Subbaiyan I mean first column be header an other column be value of header. i want to have vertical grid. in header sit C01 C02 ...... and in first row below header sit 2.2.2.2 1.1.1 ,............ – mahdis dezfouli May 19 '15 at 08:15
but i don,t know how much there is data for header. because I get this with join two tables. – mahdis dezfouli May 19 '15 at 08:23
Thanks for reply. where i use (var firstColName={insert DBvalue data};) and what's DBvalue? – mahdis dezfouli May 19 '15 at 08:27
@mahdisdezfouli Jqgrid you can use column values as column value only, my opinion for your question, You have modify the value in backend. based on column and row for jqgrid. its difficult do for in front end. – Krishnakumar Subbaiyan May 19 '15 at 09:02
@Oleg I'm sorry to disturb you. I have a question. Can i use pivot property for jqgrid? I want to change horizontal grid to vertical . please if possible help me. Thanks you very much – mahdis dezfouli May 26 '15 at 04:34

How to get header name (colNames) from data base in jqgrid

1 Answers1