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
  • Jump To Answer

  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

• 

  chst8937

  • Post Options:
  • Link
    Copy

  Posted 24 November 2024, 7:48 pm EST - Updated 24 November 2024, 7:59 pm EST

  Hi,

  it works. thank you for helping.

  just follow question,

  Can I use another function in ‘newItemCreator’?
  
  one of my columns uses getCurrencyFormattedData
  
  which is

  	function getCurrencyFormattedData(row) {
  		if (row.dataItem.cDataDTOs!= null) {
  			const symbols = {
  				'USA': '$',
  				'Japan': '￥',
  				'unknown': '$'
  			};
  			let symbol = symbols[row.dataItem.cDataDTOs.countryName] || '';
  			return symbol
  		}
  		else return ""
  	}

  so it makes currency symbol in bDataDTOs.Shipping column.

  Can I use this?

  Thank you.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 25 November 2024, 3:28 am EST

  Hi,

  Yes, you can use another function in ‘newItemCreator’ if needed, however, in your current situation it seems you are using ‘cellTemplate’ on the column to apply currency format, so you will not need to use the formatting function again in newItemCreator as the cellTemplate will automatically apply the formatting on the cell, when a value is entered. You just have to create the exact same structure of the new item using the newItemCreator, as other items in the data source, i.e. use the below code in the newItemCreator -

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

  Here’s an updated sample for your reference - https://stackblitz.com/edit/js-3jrqrd?file=index.js

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

  Regards

• 

  chst8937

  • Post Options:
  • Link
    Copy

  Posted 25 November 2024, 3:47 am EST

  Hi,
  
  It worked well. Thank you so much.