jQWidgets Forums

jQuery UI Widgets Forums DataTable checkbox as column

This topic contains 7 replies, has 2 voices, and was last updated by  Peter Stoev 11 years ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • checkbox as column #57489

    jahnvi25
    Participant

    how can i display checkbox as one of the columns in datatable?

    checkbox as column #57494

    Peter Stoev
    Keymaster

    Hi jahnvi25,

    There is no such column in the DataTable. Please, look at the supported features: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    checkbox as column #57560

    jahnvi25
    Participant

    i tried adding checkbox as cellrenderer..and its working on normal browser.. but does not work on mobile browser.. any reason why ?
    below is the code

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=no” name=”viewport”/>
    <meta name=”msapplication-tap-highlight” content=”no” />
    <title id=’Description’>JavaScript DataTable – Mobile Example
    </title>
    <!–<link rel=”stylesheet” href=”../styles/demo.css” type=”text/css” /> –>
    <link type=”text/css” href=”js/libs/jqwidgets/styles/jqx.base.css” rel=”stylesheet”>
    <link type=”text/css” href=”js/libs/jqwidgets/styles/custom.css” rel=”stylesheet”>
    <!–
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.windowsphone.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.blackberry.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.mobile.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.android.css” type=”text/css” /> –>
    <script type=”text/javascript” src=”js/libs/jquery/jquery.js”></script>

    <script type=”text/javascript” src=”js/libs/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”js/libs/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”js/libs/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”js/libs/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”js/libs/jqwidgets/jqxdatatable.js”></script>
    <!–<script type=”text/javascript” src=”../simulator.js”></script> –>
    <script type=”text/javascript” src=”js/libs/jqwidgets/generatedata.js”></script>
    <script type=”text/javascript” src=”js/libs/jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepares the simulator.
    //var theme = prepareSimulator(“dataTable”);

    var data = generatedata(50);

    var source =
    {
    localData: data,
    dataType: “array”,
    dataFields:
    [
    { name: ‘name’, type: ‘string’ },
    { name: ‘firstname’, type: ‘string’ },
    { name: ‘lastname’, type: ‘string’ },
    { name: ‘productname’, type: ‘string’ },
    { name: ‘available’, type: ‘bool’ },
    { name: ‘quantity’, type: ‘number’ },
    { name: ‘price’, type: ‘number’ },
    { name: ‘total’, type: ‘number’ },
    { name: ‘date’, type: ‘date’ }
    ]
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#dataTable”).jqxDataTable(
    {
    width: 320,
    height: 500,
    source: dataAdapter,
    touchmode:true,
    editable: true,
    selectionmode: ‘singlerow’,
    altrows:true,
    columnsresize: false,
    theme: ‘custom’,
    pageable:false,
    sortable: false,
    showheader:false,
    enablehover: false,
    editSettings: {
    saveOnPageChange: true,
    saveOnBlur: true,
    saveOnSelectionChange: false,
    cancelOnEsc: true,
    saveOnEnter: true,
    editOnDoubleClick: false,
    editOnF2: false
    },
    columns: [
    { text: ‘Name’, dataField: ‘name’, editable:true,cellsrenderer:function (row, column, value, rowData) {
    return ‘<input type=”checkbox” style=width:25px;height:25px;>’;
    }
    },
    { text: ‘Product’, dataField: ‘productname’, width: ‘40%’ },
    { text: ‘Quantity’, dataField: ‘quantity’, width: ‘10%’, align: ‘right’, cellsAlign: ‘right’ },
    { text: ‘Unit Price’, dataField: ‘price’, width: ‘10%’, cellsAlign: ‘right’, align: ‘right’, cellsFormat: ‘c2′ }
    ]
    });
    //initSimulator(“dataTable”);
    });
    </script>
    </head>
    <body class=’default’ style=”width:100%;height:100%;”>
    <div id=”demoContainer” class=”device-mobile”>
    <div id=”container” class=”device-mobile-container”>
    <div style=”border: none;” id=’dataTable’>
    </div>
    </div>
    </div>
    </body>
    </html>

    checkbox as column #57576

    Peter Stoev
    Keymaster

    Hi jahnvi25,

    1. We do not have Checkbox column in this widget and do not support it.
    2. The HTML which you return in the cellsRenderer is incorrect, too. There are syntax errors. The input tag is not closed, the style attribute value is not in quotes, your column does not have any width.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    checkbox as column #57620

    jahnvi25
    Participant

    but same code is working in normal browser..i even corrected syntax.. but still not working on mobile browser.. why is that ?
    i even tried columnType:’template’ and provide initEditor(..) and instead of jqxInput i used jqxCheckBox.. but still same result.. user can not select checkBox.. is this bug ?

    checkbox as column #57626

    Peter Stoev
    Keymaster

    Hi jahnvi25,

    How something which is not supported by us and which is related to your custom code could be a bug on our side? initEditor, etc are for Editors, not for something which you want to be always displayed. I do not know why your custom Cells renderer HTML does not work in your safari browser.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    checkbox as column #57663

    jahnvi25
    Participant

    but same code is working on desktop browsers.. only on mobile browsers its not working.. why is that ? it does show checkBox on mobile browsers.. just readonly.. user cant check that checkBox.. but on desktop browsers..user can select/check the checkBox ?

    checkbox as column #57664

    Peter Stoev
    Keymaster

    Hi jahnvi25,

    I cannot know why your custom code does not work on mobile browsers. I already wrote you that Checkbox column is not supported by this widget. The supported features are demonstrated on the Demo page. Writing a custom example and testing it in various browsers is not part of our Forum support.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.