Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
230
How to remove by default placeholder in iggrid insertion
posted

<!DOCTYPE html>
<html>
<head>


    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.lob.js"></script>
    <style>
        .ui-widget-header {
            background: rgba(185, 150, 101, 1);
        }

        .ui-iggrid .ui-iggrid-addrow td, .ui-iggrid .ui-iggrid-addrow th, .ui-iggrid .ui-iggrid-footer .ui-state-default, .ui-iggrid .ui-iggrid-footer .ui-state-hover, .ui-iggrid .ui-iggrid-toolbar .ui-state-default {
            background-color: rgba(222, 204, 157, 1);
        }

        .ui-iggrid .ui-iggrid-footer, .ui-iggrid .ui-iggrid-toolbar {
            background-color: rgba(222, 204, 157, 1);
        }

        .ui-iggrid th, .ui-iggrid th.ui-state-active, .ui-iggrid th.ui-state-default, .ui-iggrid th.ui-state-hover {
            text-align: center;
        }
    </style>
</head>

<body class="samplePage">



    <br /><br />

    <table id="grid2"></table>


    <script type="text/javascript">
        var northwind = {
            "results": [
                {


                    "Name": "Tom",
                    "Month": "January",

                }, {


                    "Name": "Robin",
                    "Month": "December",

                }, {


                    "Name": "John",
                    "Month": "October",

                }, {


                    "Name": "Smith",
                    "Month": "March",

                },
                {


                    "Name": "James",
                    "Month": "June",

                }
            ]
        }




        $(function () {
            /*----------------- Instantiation -------------------------*/
            $("#grid2").igGrid({

                width: "100%",
                autoCommit: true,
                dataSource: northwind,
                dataSourceType: "json",
                responseDataKey: "results",
                caption: "Employee Details",
                autoGenerateColumns: false,
                autofitLastColumn: false,
                primaryKey: "Name",
                columns: [


                    { key: "Name", headerText: "Customer Name", dataType: "string", width: "50%" },
                    { key: "Month", headerText: "Birthday Month", dataType: "string", width: "50%" },

                ],
                features: [
                    {
                        name: "Paging",
                        pageSize: 10,
                        pageSizeDropDownLocation: "inpager",
                        type: "local"


                    },
                    {
                        name: "Updating",
						columnSettings: 
						[
							{
								columnKey : "Name",
								readOnly: true
							
							}
						],
                        editMode: "dialog",
                        rowEditDialogOptions: {
                            height: "350px",
                            width: "390px",
                            containment: "window",
                            showDoneCancelButtons: true
                        }
                    }
                ]


            });
        });
    </script>
</body>
</html>

Hi Infragistics Team, 

In this grid, we have add, edit and delete functionality. And as per our data, there are two columns – “Customer Name” & “Birthday Month” and out of which column “Customer Name” is primary key as string type.

But in grid, when we click on “Add new row”, dialog box opens with Customer Name value as “6” by default. As Customer Name is string, it should not display any predefined numeric value. Here, we are stuck.

Is there a way by which we can avoid predefined values appearing in the field?

I have attached code and snapshot as well for better understanding.

 

 

  • 300
    Offline posted

    Hello Tapas,

    Thank you for posting in our community.

    This is an expected behavior when setting a column for a primary key.

    To change the behavior you can handle the generatePrimaryKeyValue event and modify the emitted value:

     features : [
    	{
    	    name: "Updating",
    		generatePrimaryKeyValue: function (evt, ui) {
    			ui.value = ""
    		}
    	}
    ]