[DeeCanMember]

Hi Dimitar,

I have a follow-up question – what is the difference between the following two classes in the CSS file ? Am I right in assuming that jqx-grid-cell applies to the rendered cell and the jqx-grid-content to the editor ? Please let me know.

Thanks
Deepak

/*applied to a grid cell*/
.jqx-grid-cell {
    border-style: solid;
    border-width: 0px 1px 1px 0px;
    margin-right: 1px;
    margin-bottom: 1px;
    border-color: transparent;  
    background: #fff;
    white-space: normal;
    font-weight: normal; 
    font-size: inherit;
    overflow-y: auto; 
    position: absolute !important; 
    height: 100%; 
 }
 /*applied to the grid cells area.*/
.jqx-grid-content {
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: black;
    white-space:  normal;
    overflow-y: auto;
    width: 100%;
 }

[DeeCanMember]

Thank you very much !

[DeeCanMember]

Thanks a lot for your suggestion, Peter. I got it to behave as desired using an extra variable.

            var MenuFlag = new Boolean(false);
            //CELL BEGIN EDIT:
            $("#jqxgrid").on('cellbeginedit', function (event) {
                var columnname = args.datafield;
                alert("Enter cell edit: " + columnname);
				
                if (columnname == "ABC") {
                    MenuFlag = true; }
					
                alert("MenuFlag : " + MenuFlag);
            });
            //CELL END EDIT
            $("#jqxgrid").on('cellendedit', function (event) {
                var columnname = args.datafield;
                MenuFlag = false;
                alert("End cell edit: " + columnname);
                alert("MenuFlag : " + MenuFlag);
            });
			
			
	   //DEFINE MENU
            $("#jqxMenu").jqxMenu({ width: '120px', height: '140px',
                autoOpenPopup: false, mode: 'popup', disabled: 'true'
            });
            $("#jqxWidget").on('mousedown', function (event, Menuflag) {
                var rightClick = isRightClick(event);
                if (rightClick && MenuFlag) {
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    $("#jqxMenu").jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                    return false;
                }
            });
            function isRightClick(event) {
                var rightclick;
                if (!event) var event = window.event;
                if (event.which) rightclick = (event.which == 3);
                else if (event.button) rightclick = (event.button == 2);
                return rightclick;
            }
			
			// disable the default browser's context menu.
            $("#jqxgrid").on('contextmenu', function (e) {
                return false;
            });

[DeeCanMember]

Hi Peter,

I got my ajax call to work, thanks to your link and a related article below :

http://encosia.com/using-complex-types-to-make-calling-services-less-complex/

Regards,
Deepak

[DeeCanMember]

Hi Peter,

I built my code based off on jqwidget examples and documentation. I am able to ‘get’ data from DB and show it in UI, but unable to edit into DB. More specifically, I am able to capture the updated values and stringify them in the script side, but unable to pass them to server side. The server update function works fine – I tested the method by setting the webservice as the start page and passing the json (from script side) as argument. What is the link between script and server code that I am missing ?

Any help will be greatly appreciated.

Regards
DeeCan

Script side :

updaterow: function (rowid, rowdata, commit) {
//process row data
var data = {
CustomerID: rowdata.CustomerID,
CompanyName: rowdata.CompanyName,
ContactName: rowdata.ContactName,
ContactTitle: rowdata.ContactTitle,
City: rowdata.City,
Country: rowdata.Country,
Address: rowdata.Address
};

var sendjson1 = JSON.stringify(data);

//make ajax call to server
$.ajax({
type: ‘POST’,
url: ‘Service.asmx/UpdateCustomers’,
contentType: ‘application/json; charset=utf-8’,
dataType: “json”,
data: sendjson1,
success: function (data, status, xhr) {
alert(xhr);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
alert(textStatus);
alert(jqXHR.toString());
commit(false);
}
}),

$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}

Server side update function :

[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public void UpdateCustomers(string jsonobj)
{
JavaScriptSerializer js = new JavaScriptSerializer();
UpdateData ud = js.Deserialize(jsonobj);

CustomersTableAdapter tableadapter = new CustomersTableAdapter();
tableadapter.UpdateCustomerQuery(ud.CompanyName, ud.ContactName,
ud.ContactTitle, ud.City, ud.Country, ud.Address, ud.CustomerID);
}

[Author]

Posts