Can't input data in added row

Can't input data in added row

Posted by: chst8937 on 21 November 2024, 10:38 pm EST

• 

  chst8937

  • Post Options:
  • Link
    Copy

  Posted 21 November 2024, 10:38 pm EST - Updated 21 November 2024, 10:43 pm EST

  Hi,

  I tried to add row after I get data to flexgrid, but it isn’t letting me input…
  
  Have you seen something like this?

  

• 

  chst8937

  • Post Options:
  • Link
    Copy

  Posted 21 November 2024, 10:54 pm EST

  my source is here.

  var tabData = [
  	{
  		tabIndex: 0,
  		name: 'ABC',
  		itemsSource: new wijmo.collections.CollectionView(),
  		columns: [
  			{ binding: 'aDataDTOs.id', header: 'ID' },
  			{ binding: 'cDataDTOs.countryName', header: 'Country', 
  				{
  					binding: 'bDataDTOs.Shipping', header: 'ShippingCost',
  						cellTemplate: (ctx) => {
  						if (ctx.row.dataItem !== null) {
  							let res = getCurrencyFormattedData(ctx.row);
  							return `${res} ${ctx.text}`
  						}
  				}
  			}
  		]
  	},
  	{
  		tabIndex: 1,
  		name: 'DEF',
  		itemsSource: new wijmo.collections.CollectionView(),
  		columns: [
  			{ binding: 'aDataDTOs.ab', header: 'No.' },
  			{ binding: 'bDataDTOs.country', header: 'Country' },
  			{ binding: 'cDataDTOs.price', header: 'Price' },
  		]
  	}
  ];
  
  // made Tab and initialize grids
  var theTabPanel = new wijmo.nav.TabPanel("#theTabPanel");
  var flexGrids = [];
  window.onload = function () {
  	theTabPanel.tabs.deferUpdate(function () {
  		tabData.forEach(function (tab, index) {
  			var elHeader = document.createElement("a");
  			elHeader.textContent = tab.name;
  			var elPane = document.createElement("div");
  			var elGrid = document.createElement("div");
  
  			flexGrids[index] = new wjGrid.FlexGrid(elGrid, {
  				autoRowHeights: true,
  				autoSizedColumn: true,
  				autoGenerateColumns: false,
  				allowDelete: true,
  				keyActionEnter: 'Cycle',
  				keyActionTab: 'Cycle',
  				itemsSource: tab.itemsSource,
  				columns: tab.columns
  			});
  			elPane.appendChild(elGrid);
  
  			document.getElementById("print").addEventListener("click", function () {
  				loadingGrid(tab, flexGrids[index]);
  				flexGrids[index].autoSizeColumns();
  			});
  			theTabPanel.tabs.push(new wjNav.Tab(elHeader, elPane));
  		});
  	});
  	theTabPanel.selectedIndex = 0;
  }
  
  // go get data through ajax, and add data to grid.
  function loadingGrid(tab, grid) {
  	$.ajax({
  		url: "/Data/GetGridData",
  		type: "POST",
  		data: { selectNo: selectNo},
  		dataType: 'json',
  		success: function (response) {
  			var dataLen = response.data.length;
  			if (dataLen == 0 || response.message != "OK") {
  				tab.itemsSource.sourceCollection = [];
  			}
  			else {
  				tab.itemsSource.sourceCollection = response.data;
  			}
  		},
  		error: function (request, status, error) {
  			console.log(request.responseText, status, error);
  		},
  		complete: function () {
  			let selector = new wijmo.grid.selector.Selector(grid);
  
  			grid.autoSizeColumns();
  			grid.allowAddNew = true;
  			grid.itemsSource.trackChanges = true;
  		}
  	});
  }
  

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2024, 8:07 am EST

  Hi,

  It seems the column binding used in the column are not the exact properties, but are in a hierarchical form, which is causing this issue. In such case, we have to set a ‘newItemCreator’ function for the grid’s collectionView and initialize the required properties as null, so that the new added item has the same structure as required.

  Please refer to the following code snippet -

  flexGrids[index].collectionView.newItemCreator = () => {
        return {
          ['aDataDTOs.id']: null,
          ['bDataDTOs.Shipping']: null,
          ['cDataDTOs.countryName']: null,
          ['aDataDTOs.ab']: null,
          ['bDataDTOs.country']: null,
          ['cDataDTOs.price']: null,
        };
      };

  Here’s a sample for your reference - https://stackblitz.com/edit/js-bvulzq?file=index.js

  You can also refer to the following API link for more information about the ‘newItemCreator’, if needed - https://developer.mescius.com/wijmo/api/classes/wijmo.collectionview.html#newitemcreator

  In case, you face any issues, please let us know.

  Regards