jQWidgets Forums

Tagged: jquery grid

This topic contains 6 replies, has 3 voices, and was last updated by Narendra 12 years, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

I want to align the content of jqxgridcell to center Posts

March 23, 2013 at 8:56 am I want to align the content of jqxgridcell to center #17818

Narendra

Participant

Hi,

I want to set alignment for the particular column of jqxgrid to center including header and the column data also.

How can i achieve it?

Please help me..

Thanks in advance!

March 23, 2013 at 10:17 am I want to align the content of jqxgridcell to center #17824

Syai

Participant

Hi Naresh,

You can use below code
{text: ‘ColumnName’, datafield: ‘DatFieldt’, align: ‘center’, cellsalign: ‘right’, width: 80}

Here “cellsalign” will align the data in the cells and
“align” will align the header of the column.

Regards,
Syai

March 23, 2013 at 10:42 am I want to align the content of jqxgridcell to center #17825

Narendra

Participant

That’s not working…….!

Any other suggetions?

March 23, 2013 at 11:36 am I want to align the content of jqxgridcell to center #17826

Peter Stoev

Keymaster

Hi narendra.pvnb,

Syai’s suggestion works unless you do not have custom cells or column headers rendering via the column’s renderer or cellsrenderer callback function. If you have defined such, you will have to return HTML with the required left and top margin.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 23, 2013 at 1:01 pm I want to align the content of jqxgridcell to center #17835

Narendra

Participant

Thanks for your reply..!

I couldn’t understand..

Please provide some sample code to achieve it..!

Thanks in advance!

March 23, 2013 at 1:13 pm I want to align the content of jqxgridcell to center #17836

Syai

Participant

Hi Narendra.pvnb

Below is the solution that explains you about aligning cells and headers. Please go through the code. If it doesn’t work could you please provide your code and let us know if you miss anything.

<h2>
    TestPageJQGrid</h2>
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example demostrates how we can manipulate data at client
        side. The Grid plugin provides you callback functions when you add, remove or update
        a row. </title>
    
    <script type="text/javascript">
        $(document).ready(function () {
            var theme ='office';
            // prepare the data            
            var data = {};
            var firstNames =
["Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate"
, "Cheryl", "Michael", "Guylene"];
            var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson",
"Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
            var productNames =
 [
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino",
"Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
            var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
            //var dateValues = ["12/31/2012", "12/31/2012", "02/20/2012", "12/31/2012", "01/12/2012", "02/20/2012", "01/12/2012", "10/12/2012", "02/20/2012"]
            var dateValues = ["31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012"] 
            var generaterow = function (i) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["Date"] = dateValues[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                return row;
            }
            for (var i = 0; i < 10; i++) {
                var row = generaterow(i);
                data[i] = row;
            }
            var source =
{
    localdata: data,
    datatype: "local",
    datafields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' },
{ name: 'Date', type: 'date', format: 'dd/MM/yyyy'  }
],
    addrow: function (rowid, rowdata, position, commit) {
        // synchronize with the server - send insert command                    
        // call commit with parameter true if the synchronization with the server is successful                     
        //and with parameter false if the synchronization failed.                    
        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.                    
        commit(true);
    },
    deleterow: function (rowid, commit) {
        // synchronize with the server - send delete command                    
        // call commit with parameter true if the synchronization with the server is successful                     
        //and with parameter false if the synchronization failed.                    
        commit(true);
    },
    updaterow: function (rowid, newdata, commit) {
        // synchronize with the server - send update command                    
        // call commit with parameter true if the synchronization with the server is successful                     
        // and with parameter false if the synchronization failed.                    
        commit(true);
    }
};
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid            
            $("#jqxgrid").jqxGrid(
 {
     width: 500,
     height: 350,
     pageable: true,
     source: dataAdapter,
     autoheight: true,
     theme: theme,
     editable: true,
     columns: [{
         text: 'First Name', datafield: 'firstname', width: 100
     },
 { text: 'Last Name', datafield: 'lastname', width: 100 },
 { text: 'Date', datafield: 'Date', width: 100, columntype: 'datetimeinput', width: 90, align: 'center', cellsalign: 'right', cellsformat: "dd/MM/yyyy",
     createeditor: function (row, cellvalue, editor) {
         editor.jqxDateTimeInput({ culture: 'fr-FR' });
     }
 }, 
 { text: 'Product', datafield: 'productname', align: 'center',cellsalign: 'center', width: 180 },
 { text: 'Quantity', datafield: 'quantity', width: 80, align: 'center', cellsalign: 'right' },
 { text: 'Unit Price', datafield: 'price', width: 90, align: 'center', cellsalign: 'right', cellsformat: 'c2' },
 { text: 'Total', datafield: 'total', width: 100, align: 'center', cellsalign: 'right', cellsformat: 'c2' }
 ]
 });
            $("#addrowbutton").jqxButton({ theme: theme });
            $("#addmultiplerowsbutton").jqxButton({ theme: theme });
            $("#deleterowbutton").jqxButton({ theme: theme });
            $("#updaterowbutton").jqxButton({ theme: theme });
            // update row.            
            $("#updaterowbutton").on('click', function () {
                var datarow = generaterow();
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                    $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
                }
            });
            // create new row.            
            $("#addrowbutton").on('click', function () {
                var datarow = generaterow();
                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow, 'top');
                $('#jqxgrid').jqxGrid('gotopage', -1);
            });
            // create new rows.            
            $("#addmultiplerowsbutton").on('click', function () {
               // $("#jqxgrid").jqxGrid('beginupdate');
                for (var i = 0; i < 10; i++) {
                    var datarow = generaterow();
                    var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                    
                }
               // $("#jqxgrid").jqxGrid('endupdate');
            });            // delete row.            
            $("#deleterowbutton").on('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                }
            });
        });   
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid">
        </div>
        <div style="margin-left: 10px; float: left;">
            <div>
                <input id="addrowbutton" type="button" value="Add New Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />
            </div>
            <div style="margin-top: 10px;">
                <input id="deleterowbutton" type="button" value="Delete Selected Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="updaterowbutton" type="button" value="Update Selected Row" />
            </div>
        </div>
    </div>
</body>
</html>

Regards,
Syai

March 23, 2013 at 1:27 pm I want to align the content of jqxgridcell to center #17837

Narendra

Participant

Thanks

Its working…..!

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.