jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by peterfes 9 years, 9 months ago.

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

Author

how add row to jqxgrid with checkbox with value set from a form Posts

June 16, 2015 at 8:16 pm how add row to jqxgrid with checkbox with value set from a form #72599

Participant

Hello everyone, Im trying add a row ,where an column has type checkbox but does not work, someone knows why does not work, My code is this:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>With jqxGrid, you can export your data to Excel, XML, CSV, TSV, JSON, PDF and HTML.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.export.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> 
    
    <script type="text/javascript">
        $(document).ready(function () {
// prepare the data
datos = [{
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "370",
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "440",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "450",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "name": "White Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "420",
 "totalfat": "16g",
 "protein": "12g"
}, {
 "name": "Caffe Americano",
 "type": "Espresso Beverage",
 "calories": "15",
 "totalfat": "0g",
 "protein": "1g"
}, {
 "name": "Caffe Latte",
 "type": "Espresso Beverage",
 "calories": "190",
 "totalfat": "7g",
 "protein": "12g"
}, {
 "name": "Caffe Mocha",
 "type": "Espresso Beverage",
 "calories": "330",
 "totalfat": "15g",
 "protein": "13g"
}, {
 "name": "Cappuccino",
 "type": "Espresso Beverage",
 "calories": "120",
 "totalfat": "4g",
 "protein": "8g"
}, {
 "name": "Caramel Brulee Latte",
 "type": "Espresso Beverage",
 "calories": "420",
 "totalfat": "9g",
 "protein": "8g"
}, {
 "name": "Caramel Macchiato",
 "type": "Espresso Beverage",
 "calories": "240",
 "totalfat": "11g",
 "protein": "10g"
}, {
 "name": "Peppermint Hot Chocolate",
 "type": "Espresso Beverage",
 "calories": "440",
 "totalfat": "10g",
 "protein": "13g"
}, {
 "name": "Cinnamon Dolce Latte",
 "type": "Espresso Beverage",
 "calories": "260",
 "totalfat": "6g",
 "protein": "10g"
}, {
 "name": "Eggnog Latte",
 "type": "Espresso Beverage",
 "calories": "460",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "name": "Espresso",
 "type": "Espresso Beverage",
 "calories": "5",
 "totalfat": "1g",
 "protein": "1g"
}, {
 "name": "Espresso Con Panna",
 "type": "Espresso Beverage",
 "calories": "30",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "name": "Espresso Macchiato",
 "type": "Espresso Beverage",
 "calories": "100",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "name": "Flavored Latte",
 "type": "Espresso Beverage",
 "calories": "250",
 "totalfat": "6g",
 "protein": "12g"
}, {
 "name": "Gingerbread Latte",
 "type": "Espresso Beverage",
 "calories": "320",
 "totalfat": "13g",
 "protein": "12g"
}]

           var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'bool' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                localdata: datos,
				 pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }

            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columnsresize: true,
				pageable: true,
				pagermode: 'default',
				sortable: true,
                columns: [
                    { text: 'Company Name', datafield: 'name', width: 250 },
                    { text: 'Contact Name', datafield: 'type', width: 150 },
                    { text: 'Contact Title', datafield: 'calories',columntype: 'checkbox', width: 180, 
					
					renderer: function () {
                          return '<div id=\'jqxcheckbox\'> </div>';
                      },
					
					
					
					},
                    { text: 'City', datafield: 'totalfat', width: 120 },
                    { text: 'Country', datafield: 'protein'}
                ]
            });
			
			$("#jqxgrid").on("pagechanged", function (event) {
                $("#eventslog").css('display', 'block');
                if ($("#events").find('.logged').length >= 5) {
                    $("#events").jqxPanel('clearcontent');
                }

                var args = event.args;
                var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
                //$('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');

                // get page information.
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
            });

            $("#jqxgrid").on("pagesizechanged", function (event) {
                $("#eventslog").css('display', 'block');
                //$("#events").jqxPanel('clearcontent');

                var args = event.args;
                var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
               // $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');

                // get page information.          
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
            });
			
			 $("#save").on('click', function () {
			    var id=$("#txtdialog").val();
				var desc = $("#target2").val();
				var estatus=$('#status').prop('checked');
				alert(estatus);
                        var datarow = generaterow(id,desc,estatus);
                        var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                    });
			
			$("#delete").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);
                        }
                    });
			
					
			    var generaterow = function (id,descripcion,estatus) {
                var row = {};
                
                row["name"] = id;
                row["type"] = descripcion;
                row["calories"] = $('#jqxcheckbox').jqxCheckBox({ checked: estatus }); // here is the value
                row["totalfat"] = estatus;
                row["protein"] = 'none';
                
                return row;
            }

   
});

    </script>
</head>
<body class='default'>

<div>
<label>Accion Id:</label>

<input type="text" name="txtdialog" id="txtdialog"   />

<label></label>
<input type="text" name="target" id="target" size="100" />

 <input type="checkbox" name="status" id="status" value="1"> Activo<br>

 <br>
 <label>Descripcion:</label>
<input type="text" name="target2" id="target2" size="100" />
<br>
<br>
<button name="guardar" id="save" >Guardar </button>
<button name="borrar" id="delete" >Eliminar </button>
<div>
<br>
<br>
</div>

    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
		
		<div id="eventslog" style="display: none; margin-top: 30px;">
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
            <div style="float: left;">
                Paging Details:
                <div id="paginginfo">
                </div>
            </div>
        </div>

    </div>
</body>

</html>

My english es low
thanks in advance

June 17, 2015 at 6:07 am how add row to jqxgrid with checkbox with value set from a form #72613

ivailo

Participant

Hi peterfes,

Your code seems to add rows normally, but on default at the last position(last position at the last page). So in your case you only can see the changes about row count. With less rows it will be better visible.
Also you calculate the value of the checkbox, but when you have to set the value of the row’s it’s not used.

Here is an example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

June 18, 2015 at 10:28 pm how add row to jqxgrid with checkbox with value set from a form #72708

peterfes

Participant

Hello Ivalio, thanks for your reply, I was trying it but is weird does not work, copy the example, downloading the libraries, here is again my code:
by the way checkbox was added in the header on the column I dont know why, thanks in advance


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>With jqxGrid, you can export your data to Excel, XML, CSV, TSV, JSON, PDF and HTML.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery.min.js"></script>
 
	<script type="text/javascript" src="scripts/jqx-all.js"></script> 
    
    <script type="text/javascript">
 $(document).ready(function () {            
           datos = [{
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": false,
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": true,
 "totalfat": "16g",
 "protein": "13g"
}, {
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": false,
 "totalfat": "16g",
 "protein": "13g"
}]

           var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'bool' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                localdata: datos,
				 pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }

            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 700,
                source: dataAdapter,
                columnsresize: true,
				pageable: true,
				pagermode: 'default',
				sortable: true,
                columns: [
                    { text: 'Company Name', datafield: 'name', width: 250 },
                    { text: 'Contact Name', datafield: 'type', width: 150 },
                    { text: 'Contact Title', datafield: 'calories',columntype: 'checkbox', width: 50, 
					
					renderer: function () {
                          return '<div id=\'jqxcheckbox\'> </div>';
                      },
					
					
					
					},
                    { text: 'City', datafield: 'totalfat', width: 120 },
                    { text: 'Country', datafield: 'protein'}
                ]
            });
			
			$("#jqxgrid").on("pagechanged", function (event) {
                $("#eventslog").css('display', 'block');
                if ($("#events").find('.logged').length >= 5) {
                    $("#events").jqxPanel('clearcontent');
                }

                var args = event.args;
                var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
                //$('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');

                // get page information.
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
            });

            $("#jqxgrid").on("pagesizechanged", function (event) {
                $("#eventslog").css('display', 'block');
                //$("#events").jqxPanel('clearcontent');

                var args = event.args;
                var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
               // $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');

                // get page information.          
                var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
            });
			
			 $("#save").on('click', function () {
			    var id=$("#txtdialog").val();
				var desc = $("#target2").val();
				var estatus=$('#status').prop('checked');
				alert(estatus);
                        var datarow = generaterow(id,desc,estatus);
                        var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                    });
			
			$("#delete").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);
                        }
                    });
			
					
			    var generaterow = function (id,descripcion,estatus) {
                var row = {};
                
                row["name"] = id;
                row["type"] = descripcion;
                row["calories"] = $('#jqxcheckbox').jqxCheckBox({ checked: estatus }); // here is the value
                row["totalfat"] = estatus;
                row["protein"] = 'none';
                
                return row;
            }

        });

    </script>
</head>
	<BODY>
	   <div>
        <label>Accion Id:</label>
        
        <input type="text" name="txtdialog" id="txtdialog"   />
        
        <label></label>
        <input type="text" name="target" id="target" size="100" />
        
         <input type="checkbox" name="status" id="status" value="1"> Activo<br>
        
         <br>
         <label>Descripcion:</label>
        <input type="text" name="target2" id="target2" size="100" />
        <br>
        <br>
        <button name="guardar" id="save" >Guardar </button>
        <button name="borrar" id="delete" >Eliminar </button>
        <div>
        <br>
        <br>
        </div>
        
            <div id='jqxWidget'>
                <div id="jqxgrid"></div>
        		
        		<div id="eventslog" style="display: none; margin-top: 30px;">
                    <div style="float: left;">
                        Event Log:
                        <div style="border: none;" id="events">
                        </div>
                    </div>
                    <div style="float: left;">
                        Paging Details:
                        <div id="paginginfo">
                        </div>
                    </div>
                </div>
        
            </div>

	</BODY>

</html>

June 19, 2015 at 8:42 am how add row to jqxgrid with checkbox with value set from a form #72727

ivailo

Participant

Hi peterfes,

If you want to change the checkbox values set editable: true.
If you want to add the value from your form checkbox set row["calories"] = estatus;.
Here is the js demo with some changes.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

June 19, 2015 at 11:24 pm how add row to jqxgrid with checkbox with value set from a form #72776

peterfes

Participant

Hello ivalio, thanks again, I dont know why does not work, what I am doing wrong, I use your example with the same libraries but nothing, thanks again

Author

Posts

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

You must be logged in to reply to this topic.