jQWidgets Forums

Forum Replies Created

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

Author

Posts

June 19, 2015 at 11:24 pm in reply to: how add row to jqxgrid with checkbox with value set from a form 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

June 18, 2015 at 10:28 pm in reply to: how add row to jqxgrid with checkbox with value set from a form 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 5, 2015 at 11:36 pm in reply to: my jqxGrid doesnt not show my jqxGrid doesnt not show #72106

peterfes

Participant

Hello Dimitar thanks for your reply, finally I can resolved it and shared this solution :

fist step : modify register on SO win , on the path PC\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.css
second step: change the value of Content Type to text/css
And buala, . It´s working

I hope this is useful for all of you

Thanks Dimitar

June 2, 2015 at 2:47 pm in reply to: my jqxGrid doesnt not show my jqxGrid doesnt not show #71922

peterfes

Participant

Hi Dimitar, thanks for your reply, regarding your question I ran the example from the link and see it but when running locally doesnt showed, what could be happening?, by the way, I forgot to mention to you that in the console of IE thrown this message: “Se omitió CSS debido a un error de coincidencia de tipo MIME” ,thanks again

thanks in advance

June 1, 2015 at 8:29 pm in reply to: my jqxGrid doesnt not show my jqxGrid doesnt not show #71862

peterfes

Participant

Hi Dimitar, I downloaded the examples like the above mentioned and doesnt thrown any error, I hope you can help me, My version de IE is 11 SO win 7 Professional
Thanks in advance

Author

Posts

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