Add new Row and Edit JqxGrid

[vishnu216Participant]

Hi , i have been trying the following piece of code to create a new row and on edit of the created row to save the data. But whenever i double click on the particular row , the edit event fires and goes off . I cant edit the cells to get the proper value. I am using an html file input control and render it to upload the file with in the grid.

 
 dropSrc = {

                datatype: "xml",
                datafields: [

                  { name: 'titleId' },
                  { name: 'titleName' }

                ],
                async: false,
                record: 'Table',
                url: 'helpSettings.aspx/getDropControls'
            };
            var dropAdapter = new $.jqx.dataAdapter(dropSrc, { contentType: 'application/json; charset=utf-8' }, { autobind: true, async: false });
            var key;
            var index;
            var fileDataMod; // var to hold the form data
            var testKeyObj;

            //Source for table 
            source = {
                datatype: "xml",
                datafields: [
                { name: 'itemId' },
                { name: 'itemName' },
                { name: 'itemDesc' },
                { name: 'titleName', value: 'titleId', values: { source: dropAdapter, value: 'titleId', name: 'titleName' } },
                { name: 'pagePath' },
                ],
                async: false,
                record: 'Table',
                url: 'helpSettings.aspx/getControls',
            };

            var dataAdapter = new $.jqx.dataAdapter(source,
               { contentType: 'application/json; charset=utf-8' }
           );

$("#jqxgrid").jqxGrid({
                width: '100%',
                source: dataAdapter,
                theme: 'classic',
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                editmode: 'selectedrow',
                selectionmode:'multiplecellsadvanced',
                handlekeyboardnavigation: function (event) {
                    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                    if (key == 27||key == 13) {
                        var rwCount = $("#jqxgrid").jqxGrid("getselectedrowindex");
                        $("#jqxgrid").jqxGrid("endrowedit", rwCount, true);
                        $("#updateData").css("display", "none");
                        $("#cancel").css("display", "none");
                        $("#addRow").css("display", "inline");
                        $("#jqxgrid").jqxGrid("updatebounddata", "cells");
                        return true;
                    };
                },
                columns: [
                     {
                         text: 'S.No', sortable: false, filterable: false, editable: false,
                         groupable: false, draggable: false, resizable: false,
                         datafield: 'itemId', columntype: 'number', width: 50,
                         cellsrenderer: function (row, column, value) {
                             return "<div style='margin:4px;'>" + (value + 1) + "</div>";
                         }
                     },
                    
                    {
                        text: 'Item Name', dataField: 'itemName'
                    },
                    {
                        text: 'Item Description', dataField: 'itemDesc'
                    },
                     {
                         text: 'Html Page', columntype: 'custom', datafield: 'pagePath',
                         cellsrenderer: function (row, cellvalue,value, editor, cellText, width, height)
                         {
                             if (value == "")
                             {
                                 return "Select File";
                             }
                         },
                         createeditor: function (row, cellvalue, editor, cellText, width, height) {
                             // construct the editor. 
                             editor.html('<input id="fileInput' + row + '" type="file" name ="file[]" />');
                         },
                         initeditor:function(row, cellvalue, editor, cellText, width, height)
                         {
                             editor.html('<input id="fileInput' + row + '" type="file" name ="file[]" />');
                         },
                         geteditorvalue: function (row, cellvalue, editor) {
                             // return the editor's value.
                             var value = $("#fileInput" + row).val();
                             return value.substring(value.lastIndexOf("\\") + 1, value.length);
                         },
                     },
                    
                       { text: 'Title Name', datafield: 'titleId', displayfield: 'titleName', columntype: 'dropdownlist',
                        initeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: dropAdapter, displayMember: 'titleName', valueMember: 'titleId' });
                        }
                    },
                    
                ]
            });

  $('#addRow').on('click', function (event) {
                $("#jqxgrid").jqxGrid('sortby', 'controlId', 'asc');
                $("#jqxgrid").jqxGrid('addrow', null, {}, 9); //adds the row at the last index of the first page
                $("#updateData").css("display", "inline");
                $("#addRow").css("display", "none");
                $("#cancel").css("display", "inline");
                
            });
 

 $("#jqxgrid").on('cellbeginedit', function (event) {
                var args = event.args;
                $("#updateData").css("display", "inline");
                $("#cancel").css("display", "inline");
                $("#setData").css("display", "none");
                $("#addRow").css("display", "none");
                key = $('#jqxgrid').jqxGrid('getrowdata', args.rowindex);
                index = args.rowindex;

            });
           

            $("#updateData").click(function (e) {

                alert(key.itemName + " " + key.itemDesc);
                if (key) {
                   
                    e.preventDefault();
                    $("#jqxgrid").jqxGrid('endrowedit', index, false);
                    if (key.itemName == "" || key.itemDesc == "" || key.titleId == "undefined") {
                        $("#jqxgrid").jqxGrid('showvalidationpopup', index, "itemId", "All Fields are Required");
                    }
                    else {
                        alert("Else ");
                        formData = new FormData();
                        formData.append("itemId", key.itemId);
                        alert("fileInput" + index);
                        formData.append("file", $("#fileInput" + index)[0].files[0]);
                        formData.append("itemDesc", key.itemDesc);
                        formData.append("titleId", key.titleId);
                        formData.append("itemName", key.itemName);
                        var itemMap = new XMLHttpRequest();
                        itemMap.open("POST", "fileHandler.ashx", true);

                        itemMap.onload = function () {
                            if (itemMap.status >= 200 && itemMap.status < 400) {
                                $("#jqxgrid").jqxGrid("updatebounddata", "cells");
                                $("#updateData").css("display", "none");
                                $("#cancel").css("display", "none");
                                $("#addRow").css("display", "block");
                            }

                            else alert('Error');
                        };

                        itemMap.onerror = function (e) {

                            alert('Error' + e.error + " " + e.errorMsg);
                        };

                        itemMap.send(formData);
                    }

                }
            });

[ChristopherParticipant]

Hi vishnu216,

Please provide the HTML code as well and some sample data so we can test your code and see what’s failing. It might be easier for you to just create a JsFiddle and post the link here so we can review the full code.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[vishnu216Participant]

Hi Christopher,

I am extremely sorry. I cant provide the code due to security concerns. Thank you for the reply. I am using cellsrenderer to render a file input control. Whenever i begin the cellbeginedit event it automatically closes after firing, if the particular grid has an html file input control rendered.I have set the selection mode to a single row. Any reply will be of very much help.

[ChristopherParticipant]

Hi vishnu216,

I used your jqxGrid settings and made an example with my data. Here’s what I was able to test:
https://www.jseditor.io/?key=xb-jqxgrid-test

I noiced that you have editmode set to “selectedrow” and then you bind to the cellbeginedit. This will cause the event to be fired multiple times for every cell present in that row. That might be the root of your problem. Change the editmode to selectedcell and the event will be fired properly.
If the problem persists, check the console if your code throws any errors. If it does, post the console log here so I can see what they are.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[NitinBhargavaParticipant]

[Author]

Posts