Grid edited cell value

[Bill McKnightParticipant]

My apologies in advance if this has been answered before.
I am searching the forum.

I’m populating a grid.
7 columns. one through six are not editable. Column 7 is.
grid editmode is ‘click’

when I click on the 7th column the cell enters edit mode, but
when I exit the column the cell value is changing to 314.

The grid is essentially basic (not busy).
I’ve been applying properties one at a time and reviewing effects in browser.

I’m at where I need to invoke the cell editing so I can push the
edited data back to the back end server-side database.

The code is:

%@ Page
Title=”Premium Table Edit” Language=”C#”
MasterPageFile=”~/Apps/SpecBook/SpecBook.master”
AutoEventWireup=”true” EnableTheming=”true” Theme=”Default”
CodeFile=”PremiumTable.aspx.cs” Inherits=”Apps_SpecBook_PremiumTable” %>

<asp:Content ID=”contentPremiumHeader” ContentPlaceHolderID=”cphSpecbookMasterHead” runat=”server”>
<script type=”text/javascript”>
$(document).ready(function () {

// Data Source
var _dataType = “xml”;
var _Async = false;
var _Url = “PremiumTable.aspx/GetPremiumTable”;
var _KeyField = “RowId”;
var _dataAdapter =

//Getting the source data with ajax GET request
source =
{
datatype: _dataType,
datafields: [
{ name: ‘RowId’ },
{ name: ‘MaterialType’ },
{ name: ‘Color’ },
{ name: ‘SheetGauge’ },
{ name: ‘SheetWidthMax’ },
{ name: ‘SheetWidthMin’ },
{ name: ‘Premium’ }
],
async: _Async,
record: ‘Table’,
id: _KeyField,
url: _Url,
};

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

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
theme: ‘darkblue’,
autoheight: true,
sortable: false,
altrows: false,
enabletooltips: true,
editable: true,
clipboard: true,
enablekeyboarddelete: false,
enabletooltips: true,
enablebrowserselection: true,
autosavestate: true,
autoloadstate: true,
pagesize: 10,
pagesizeoptions: [’10’, ’20’, ’30’],
pageable: true,
pagermode : ‘default’,
editmode: ‘click’,
columnsresize : true,
columns: [
{ text: ‘RowId’, dataField: ‘RowId’, cellsalign: ‘right’, cellsformat: ‘n’, editable: false, width: 50 },
{ text: ‘Material Type’, dataField: ‘MaterialType’, cellsalign: ‘left’, editable: false, width: 90 },
{ text: ‘Color’, dataField: ‘Color’, cellsalign: ‘left’, editable: false, width: 90 },
{ text: ‘Sheet Gauge’, dataField: ‘SheetGauge’, cellsalign: ‘left’, editable: false, width: 90 },
{ text: ‘Sheet Width Max’, dataField: ‘SheetWidthMax’, cellsalign: ‘right’, cellsformat: ‘n’, editable: false, width: 90 },
{ text: ‘Sheet Width Min’, dataField: ‘SheetWidthMin’, cellsalign: ‘right’, cellsformat: ‘d2’, editable: false, width: 90 },
{ text: ‘Premium’, dataField: ‘Premium’, cellsalign: ‘right’, cellsformat: ‘d4’, editable: true, width: 90 }
]
});

});
</script>

</asp:Content>

<asp:Content ID=”contentPremium” ContentPlaceHolderID=”cphSpecBookMaster” runat=”Server”>
<div id=”jqxgrid”></div>
</asp:Content>

[DimitarParticipant]

Hello Bill McKnight,

I am not sure if this is the cause to the issue you experience but please note that the column property is named datafield, not dataField. Please fix this and make sure you are using the latest version of jQWidgets (3.7.1).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts