Custom widget ever present row with custom widget column

[Desai VatsalParticipant]

Hi,

I have a grid which have custom widget editable column with combo box as widget. So wen I click on that cell I can see combo and I can change combo value and save it back. This works fine. Now I have added everpresentrow on top with custome widget in it. this is also fine but when I select value from everpresentrow and add it, It won’t effect in new added row in grid.

I am using jqwidgets with angular js and here is my code:

// Grid
<div jqx-grid
                         jqx-instance="gridBreakdown"
                         jqx-width="'100%'"
                         jqx-sortable="true"
                         jqx-theme="theme"
                         jqx-editable="true"
                         jqx-autoheight="false"
                         jqx-selectionmode="'multiplecellsadvanced'"
                         jqx-source="GridSource"
                         jqx-columns="BreakdownColumns"
                         jqx-columngroups="BreakdownGroupColumns"
                         jqx-editmode="'click'"
                         jqx-columnsresize="true"
                         jqx-showeverpresentrow= "true"
                         jqx-everpresentrowposition= "'top'"
                         jqx-everpresentrowactions= "'addBottom reset'"></div>

// combo box custom widget column with custom widget ever present row

$scope.BreakdownColumns = [{
           text: 'Machine', datafield: 'MachineId', displayfield: 'MachineName', width: 150, sortable: false, columntype: 'combobox',
           createeditor: function (row, cellvalue, editor, celltext, pressedChar) {
               var data = this.owner.getrowdata(row);
               editor.jqxComboBox({ theme: $scope.theme, autoComplete: true, dropDownHeight: 250, source: allMachineData, displayMember: 'MachineName', valueMember: 'MachineId', searchMode: 'containsignorecase' });
               editor.jqxComboBox('val', celltext);
           },
           cellvaluechanging: function (rowindex, datafield, columntype, oldvalue, newvalue) {

               if (oldvalue == newvalue.value)
                   return;

               var data = this.owner.getrowdata(rowindex);
               data.SubAssemblyId = 0;
               data.SubAssemblyName = '';
           },
           createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
               var inputTag = $("<div style='border: none;'></div>").appendTo(htmlElement);
               //var lineId = $scope.ddlLine.val();
               //inputTag.jqxDropDownList({ popupZIndex: 99999999, placeHolder: "Enter Product: ", source: getSourceAdapter("productname"), displayMember: 'productname', width: '100%', height: 30 });
               inputTag.jqxComboBox({ theme: $scope.theme, autoComplete: true, dropDownHeight: 250, source: allMachineData, displayMember: 'MachineName', valueMember: 'MachineId', searchMode: 'containsignorecase', width: '100%', height: 30 });
               $(document).on('keydown.MachineId', function (event) {
                   if (event.keyCode == 13) {
                       if (event.target === inputTag[0]) {
                           addCallback();
                       }
                       else if ($(event.target).ischildof(inputTag)) {
                           addCallback();
                       }
                   }
               });
               return inputTag;
           },
           getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
               var selectedItem = htmlElement.jqxDropDownList('getSelectedItem');
               if (!selectedItem)
                   return "";
               var value = selectedItem.label;
               return value;
           },
           resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
               htmlElement.jqxDropDownList('clearSelection');
           }
       }]

Let me know if you need more detail.

Thanks

[HristoParticipant]

Hello Desai Vatsal,

The right way is to use <jqx-grid/> instead of “<div jqx-grid/>”.
Except this, your code looks fine. I would like to ask you is there any error message in the console?
Also, do you implement addrow callback to the dataAdapter’s source?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Desai VatsalParticipant]

Hi,

First, thanks for pointing right way to use jqx-grid. I changed it every where in my project and it’s working fine.

Now regarding the issue and the question you asked for “Addrow” callback,
Yes! “Addrow”… I got it and able to resolve my problem. Now I can see selected value in new added row. Thanks for your help.

Now I have another problem regarding ever present row. As soon as I rebind my grid, the ever present custom widgets stops working. I can’t select/unselect checkbox, I cant select date from date picker and also I cant select anything from dropdown in ever present row.

I am using $scope.GridSource.data = { siteId: siteId, plantId: plantId, lineId: lineId} to rebind grid again. But as I mention above, after rebind, custom widgets in ever present rows are not working. I observed that it’s not working in Chrome and Edge while in IE it’s working good even after rebinding grid.

Is there anything else I am missing here to implement grid with ever present row?

Please help.

Thanks!
Vatsal

[Author]

Posts