is Unique column property avaliable and how? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column, edit, editing, grid, inline, Inline editing, jqxgrid, unique, validate, validation

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 6 months ago.

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

Author

is Unique column property avaliable and how? Posts

May 22, 2014 at 12:21 pm is Unique column property avaliable and how? #54803

Participant

Hi All;
Unfortunately, I cannot find and use column unique property in Jqxgrid. Is it avaliable? is a feature?
How can I do this for inline editing?

May 23, 2014 at 9:18 am is Unique column property avaliable and how? #54827

Dimitar

Participant

Hi ziyahan,

There is no such grid column property but if you share what your requirement is, we may be able to provide you with a workaround.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 27, 2014 at 8:56 pm is Unique column property avaliable and how? #54989

ziyahan

Participant

Dimitar Hi;
Thanks for your reply.
Shortly, We need a property such as this :
We have a table. The table has a some unique column. For example, the column that named “code” is unique. But We cannot control column value before write to database. If you provide a unique column property, we will check this value validate or not before Model/Backend operation.

For example. We have a table like this :

code – value
_________________
a – b
c – d

If I enter “a” value for code column again, Grid should throw an error. “This column should be included unique value”…

May 28, 2014 at 5:32 am is Unique column property avaliable and how? #54992

Dimitar

Participant

Hi ziyahan,

Here is how to achieve this functionality, using the validation callback function (note the first column). The example is based on the demo Default Functionality.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250,
                      validation: function (cell, value) {
                          var validationResult = true;
                          var rows = $('#jqxgrid').jqxGrid('getrows');
                          for (var i = 0; i < rows.length; i++) {
                              if (i == cell.row) {
                                  break;
                              }
                              if (rows[i].ProductName == value) {
                                  validationResult = false;
                                  break;
                              }
                          };
                          if (validationResult == false) {
                              return { result: false, message: "Values in this column must be unique" };
                          }
                          return true;
                      }
                  },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 28, 2014 at 7:25 am is Unique column property avaliable and how? #55000

ziyahan

Participant

Hi Dimitar;
Thanks for this application and your interest.
This is cutely. However, I think, you should add this method as default functionality among to column properties.
I hope, you will add this to your todo list for your next relases..

May 28, 2014 at 12:13 pm is Unique column property avaliable and how? #55024

Dimitar

Participant

Hi ziyahan,

Thank you for your feedback. We will consider implementing this feature.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.