jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 31 through 45 (of 47 total)

Author

Posts

March 25, 2013 at 9:48 am in reply to: Combobox in Grid Combobox in Grid #17888

Syai

Participant

Hi Peter,

Thanks for the reply. Can you please help me regarding how to send the selected row data to server so that I can filter the combobox data with the date while getting from database itself. I’m not much aware of sending the selected row data as parameter to server.

Regards,
Syai

March 23, 2013 at 1:13 pm in reply to: I want to align the content of jqxgridcell to center 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 10:17 am in reply to: I want to align the content of jqxgridcell to center 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 22, 2013 at 2:13 pm in reply to: Dynamic currency symbols Dynamic currency symbols #17769

Syai

Participant

Hi Mariya,
This link is useful. But I need to show multiple currency symbols in a single grid. Does is possible to apply localization for particular cell/rows?

Regards,
Syai

March 22, 2013 at 1:55 pm in reply to: Problem with Datetime format Problem with Datetime format #17765

Syai

Participant

Hi Mariya,
This worked fine. Let me confirm, if we cannot give format as “dd/MM/yyyy”, will it take “MM/dd/yyyy” as default format?

Regards,
Syai

March 22, 2013 at 1:35 pm in reply to: Problem with Datetime format Problem with Datetime format #17759

Syai

Participant

Hi Mariya,
I’ve given the date format in the source as “MM/dd/yyyy”, then it is working fine. Is it necessary to give the date format as “MM/dd/yyyy” ?

Regards,
Syai

March 22, 2013 at 1:25 pm in reply to: Problem with Datetime format Problem with Datetime format #17756

Syai

Participant

Hi Mariya,
This didn’t resolve my problem. If you observe the image I’ve attached, here the date is parsed wrongly. The dates I’m giving input as “31/12/2012” (31st December 2012). But it is converting it as “12/07/2012” (12th July 2012) which is wrong conversion.

Issue with Date format

Regards,
Syai

March 22, 2013 at 12:43 pm in reply to: Problem with Datetime format Problem with Datetime format #17746

Syai

Participant

Hi Mariya,
Below is the code I’m using. I’ve added the required js file references to the page. Could you please verify and let me know if I 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 = ["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' }
],
    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: 'd', formatString: "dd/MM/yyyy",
     createeditor: function (row, cellvalue, editor) {
         editor.jqxDateTimeInput({ culture: 'fr-FR' });
     } 
 },
 { text: 'Product', datafield: 'productname', width: 180 },
 { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
 { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
 { text: 'Total', datafield: 'total', width: 100, 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>

If you observe the above code, I’m passing the array of “dateValues” to the grid and I’ve declared the type as date in the source.

Regards,
Syai

March 22, 2013 at 9:59 am in reply to: Combobox Items width in Grid column Combobox Items width in Grid column #17719

Syai

Participant

Awesome. This is working perfect to me. Thank you Dimitar.

Regards,
Syai

March 22, 2013 at 8:54 am in reply to: Combobox Items width in Grid column Combobox Items width in Grid column #17708

Syai

Participant

Hi Dimitar,

Need one more clarification. Does it possible to apply tooltips for the items of the combobox items like tooltips for cells of the grid.

Regards,
Syai

March 22, 2013 at 7:43 am in reply to: Combobox Items width in Grid column Combobox Items width in Grid column #17697

Syai

Participant

Hi Dimitar,

Thanks for the reply. I have another doubt. Is there any possibility to get the auto width of the dropdown depending on the items in it, instead of hardcoding it. So that the horizontal dropdown cannot be shown at all.

Regards,
Syai

March 21, 2013 at 12:26 pm in reply to: Problem loading Combobox in Grid in server environment Problem loading Combobox in Grid in server environment #17634

Syai

Participant

Hi Peter,
I’ve modified the code accordingly. Still didn’t get it to work in the server environment. Does the same name for root in source causes conflict to bind data to combobox?

root: ‘Rows’,

Regards,
Syai

March 20, 2013 at 7:34 am in reply to: Goto Page in JQGrid Goto Page in JQGrid #17526

Syai

Participant

Hi Peter,
Thanks for the reply. It is working like charm when we pass “0” as param.
Regards,
Syai

March 15, 2013 at 1:57 pm in reply to: Insert row at particular position Insert row at particular position #17180

Syai

Participant

Hi Dimitar,
Thanks for the reply and the solution provided. Is there any possibility of adding the feature of “AddRow” at particular position in the next versions?

Regards,
Syai

March 15, 2013 at 11:42 am in reply to: Insert row at particular position Insert row at particular position #17152

Syai

Participant

Hi Dimitar,
I’ve tried the code by passing the position as ‘top’ but it isn’t happening. I tried to add row from 2nd page of the grid. A blank row got shown at the first row of the 2nd page. Could you please elaborate the process to get to particular position of the grid i.e. 1st row of 1st page.

Regards,
Syai

Author

Posts

Viewing 15 posts - 31 through 45 (of 47 total)

← 1 2 3 4 →