Develop Reference

jqgrid modify post data in upload image row

I just make functional on my application in order to upload image, convert it to base64 and send to server as base64 string.
I found function to convert image to base64. It works fine. I use jqgrid standart forms to create and edit data. Image uploads but I need to change post data before post to add base64 string to param value.
I use serializeEditData but it works faster than my function converts image to string. I used callback function and it doesn't work.
serializeEditData: function (postData) {
var fileContainer = document.getElementById('photo').files;
var reader = new FileReader();
reader.readAsDataURL(fileContainer[0]);
reader.onload = function () {
postData.image = reader.result;
};
/* I used this too
var fileContainer = document.getElementById('photo').files;
getBase64(fileContainer[0], function (result) {
postData.image = result;
});*/
return postData;
},
If I console log formData before return statement it shows me postData with image base64 string. But problem what return statement works faster than postData.image set string.
My getBase64 function code:
function getBase64(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
callback(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
And my full code:
jQuery(function ($) {
var quiz_table_id = $("#quiz_table_id");
var quiz_pager_id = "#quiz_pager_id";
var colNames = ['id', 'title', 'description', 'section', 'section', 'image', 'image'];
var postDataGlobal;
var template = {width: 160, fixed: true, align: 'center', editable: true, stype: 'text'};
var colModel = [
{
name: 'id',
index: 'id',
sortname: 'id',
editable: true,
sorttype: 'number'
},
{
name: 'title',
index: 'title',
sortname: 'title',
template: template,
sorttype: 'number'
},
{
name: 'description',
index: 'description',
sortname: 'description',
width: 120,
fixed: true, align: 'center', editable: true,
template: "number",
sorttype: 'number'
},
{
name: 'section.name',
sortname: 'section.name',
formatter: null,
sorttype: 'number',
editable: false
},
{
name: 'section.id',
sortname: 'section.id',
formatter: 'select',
edittype: "select",
hidden: true,
editable: true,
editrules: {edithidden: true, required: true},
editoptions: {value: "1:Java"}
/*editoptions: {
dataInit: function (elem) {
$.get("http://localhost:8080/section/get-all-map", function (data, status) {
$(elem).empty();
Object.keys(data).map(function (key, index) {
console.log(data[key] + " " + key);
$(elem).append("<option value=" + key + ">" + data[key] + "</option>")
});
});
}
}*/
},
{
name: 'image',
index: 'image',
sortname: 'image',
template: template,
sorttype: 'number',
editable: true
},
{
name: 'photo',
index: 'photo',
search: false,
editable: true,
edittype: 'file',
editoptions: {
enctype: "multipart/form-data"
},
align: 'center',
}
];
quiz_table_id.jqGrid({
url: 'http://localhost:8080/quiz/get-all',
datatype: "json",
jsonReader: {
repeatitems: true
},
height: 'auto',
colNames: colNames,
colModel: colModel,
shrinkToFit: false,
forceFit: true,
pager: quiz_pager_id,
toppager: true,
rowNum: 10,
rowList: [5, 10, 15, 20, 25, 30],
loadonce: true,
colMenu: true,
menubar: true,
viewrecords: true,
storeNavOptions: true,
editurl: 'http://localhost:8080/quiz/save',
loadComplete: function () {
},
gridComplete: function () {
}
});
//navButtons
quiz_table_id.jqGrid('navGrid', quiz_pager_id,
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
search: true,
refresh: true,
view: true,
position: "left",
cloneToTop: false
},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
checkOnUpdate: true,
checkOnSubmit: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
serializeEditData: function (postData) {
var fileContainer = document.getElementById('photo').files;
var reader = new FileReader();
reader.readAsDataURL(fileContainer[0]);
reader.onload = function () {
postData.image = reader.result;
};
/* I used this too
var fileContainer = document.getElementById('photo').files;
getBase64(fileContainer[0], function (result) {
postDataGlobal.image = result;
});*/
return postData;
},
beforeSubmit: function (data) {
return [true, ''];
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
{
multipleSearch: true,
showQuery: true
} // search options - define multiple search
);
$(window).triggerHandler('resize.jqGrid');
quiz_table_id.triggerHandler("jqGridAfterGridComplete");
});
function getBase64(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
callback(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}

jqGrid inline-edit POST without editurl?

I am trying to find the information about editurl. Currently, i am working on the framework which does not permit editurl. The calls must go through javascript function which in-turn invokes the component on serverside.
Question is it possible to POST the data to javascript function instead of editurl?
I am experimenting with following:
$(document).ready(function () {
console.log(">>>1");
//--
action.setCallback(this, function(a) {
if (a.getState() === "SUCCESS") {
result = a.getReturnValue();
console.log(result);
//---=
var editActionOptions = {
keys: true,
url:null,
oneditfunc: function (rowid) {
console.log("row with rowid=" + rowid + " is editing.");
},
aftersavefunc: function (rowid, response, options) {
console.log("row with rowid=" + rowid + " is successfuly modified.");
}
};
//-------------------------------------------------------------------------------------------------------
$("#jqGrid").jqGrid({
editurl: 'clientArray',
datatype: "local",
data:result,
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
labe: 'ID',
name: 'empid',
width: 75
},
{
label : 'Name',
name: 'Name',
width: 140,
editable: true // must set editable to true if you want to make the field editable
},
{
label: 'dob',
name: 'dob',
width: 100,
editable: true
},
{
label: 'dln',
name: 'dln',
width: 120,
editable: true
}
],
sortname: 'empid',
loadonce: true,
onSelectRow: editRow,
onSave:onSaveRow,
editParams: editActionOptions,
width: 780,
height: 400,
rowNum: 150,
pager: "#jqGridPager"
});
//------------------------------------------------------------------------------------------------------
} else if (a.getState() === "ERROR") {
$A.log("Errors", a.getError());
}
});
$A.enqueueAction(action);
var lastSelection;
function editRow(id) {
console.log(id);
if (id && id !== lastSelection) {
var grid = $("#jqGrid");
grid.jqGrid('restoreRow',lastSelection);
grid.jqGrid('editRow',id, {keys: true} );
lastSelection = id;
}
};
function onSaveRow(id){
console.log(id);
}

Kendo UI grid comboBox undefined on focus out?

I have working on Keno UI grid and I have added a comboBox as a column in the grid which also supports autocomplete feature. Apparently, comboBox is working fine but when I type half of world and focus out of the comboBox cell then it shows undefined. I have tried to handle it on combobox change event, but it is still showing undefined value? Below is my code for combobox and grid.
function productDropDownEditor(container, options) {
$('<input id="ProductDropDown" style="width:250px;" data-bind="value:' + options.field + '"/>')
.appendTo(container).kendoComboBox({
dataSource: dataSource,
autoBind: false,
dataTextField: 'ProductName',
dataValueField: 'ProductID',
filter: "contains",
suggest: true,
index: 3,
change: function (e) {
debugger;
var cmb = this;
// selectedIndex of -1 indicates custom value
if (cmb.selectedIndex < 0) {
cmb.value(0); // or set to the first item in combobox
}
},
close: function (e) {
debugger;
var cmb = this;
}
});
And here is following code for kendo grid.
$(function () {
$("#grid").kendoGrid({
columns: [
{
field: "Products", width: "250px",
editor: productDropDownEditor,
title: "Product",
template: "#=Products.ProductName#",
attributes: {
"class": "select2_single"
}
},
{ field: "PurchasePrice", width: "150px" },
{ field: "PurchaseQuantity", width: "150px" },
{ field: "SaleRate", title: "Sale Rate", width: "150px" },
{ field: "Amount", title: "Amount", width: "150px" },
{ command: "destroy", title: "Delete", width: "110px" },
],
editable: true, // enable editing
pageable: true,
navigatable: true,
sortable: true,
editable: "incell",
toolbar: ["create"], // specify toolbar commands
edit: function (e) {
//debugger;
//// var parentItem = parentGrid.dataSource.get(e.model.PurchaseID);
////e.model.set("ShipCountry", parentItem.Country);
//if (e.model.isNew()) {
// // set the value of the model property like this
// e.model.set("PropertyName", Value);
// // for setting all fields, you can loop on
// // the grid columns names and set the field
//}
},
//editable: "inline",
dataSource: {
serverPaging: true,
requestStart: function () {
kendo.ui.progress($("#loading"), true);
},
requestEnd: function () {
kendo.ui.progress($("#loading"), false);
},
serverFiltering: true,
serverSorting: true,
batch: true,
pageSize: 3,
schema: {
data: "data",
total: "Total",
model: { // define the model of the data source. Required for validation and property types.
id: "Id",
fields: {
PurchaseID: { editable: false, nullable: true },
PurchasePrice: { nullable: true },
PurchaseQuantity: { validation: { required: true, min: 1 } },
SaleRate: { validation: { required: true, min: 1 } },
Amount: { type: "number", editable: false },
Products: {
nullable: false,
validation: { required: true},
defaultValue: {ProductID:1, ProductName:"Googo" },
//from: "Products.ProductName",
parse: function (data) {
debugger;
if (data == null) {
data = { ProductID: 1};
}
return data;
},
type: "object"
}
}
}
},
batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
change: function (e) {
debugger;
if (e.action === "itemchange" && e.field !== "Amount") {
var model = e.items[0],
type = model.Type,
currentValue = model.PurchasePrice * model.PurchaseQuantity;//formulas[type](model);
if (currentValue !== model.Amount) {
model.Amount = currentValue;
$("#grid").find("tr[data-uid='" + model.uid + "'] td:eq(4)").text(currentValue);
}
//if (e.field == "Products") {
// $("#grid").find("tr[data-uid='" + model.uid + "'] td:eq(0)").text(model.Products);
//}
}
},
transport: {
read: {
url: "#Url.Action("Read", "Purchase")", //specify the URL which should return the records. This is the Read method of the HomeController.
contentType: "application/json",
type: "POST", //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
},
parameterMap: function (data, operation) {
debugger;
if (operation != "read") {
// post the products so the ASP.NET DefaultModelBinder will understand them:
// data.models[0].ProductID = data.models[0].Product.ProductID;
var result = {};
// data.models[0].ProductID = $("#ProductDropDown").val();
for (var i = 0; i < data.models.length; i++) {
var purchase = data.models[i];
for (var member in purchase) {
result["purchaseDetail[" + i + "]." + member] = purchase[member];
}
}
return result;
} else {
var purchaseID = $("#hdnPurchaseId").val();
//output = '{ purchaseID: ' + purchaseID + '}';
data.purchaseID = purchaseID; // Got value from MVC view model.
return JSON.stringify(data)
}
}
}
},
}).data("kendoGrid");

Getting a string on an update request in KendoUI datasource

I have a pretty simple grid with data source that retrieves data correctly
For that cause I have a schema.parse function defined
The problem is that when I try to update/create new row the schema.parse() called again and the parameter that is passed to it is a string that contains the HTML of my page. cannot really get what the hell is going on there.
thanks
var _dataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: layerDefProvider.getLayerUrlById("surveys") + "/query",
data: {
f: "json",
//token: token,
outFields: "*",
//outSR: 3857,
where: "1=1"
},
type: "POST"
},
create: function (options) {
console.debug("called");//never gets called
},
update: function (options) {
console.debug("called");//never gets called
},
destroy: function (options) {
console.debug("called");//never gets called
}
},
filter: {
field: "OBJECTID", operator: "eq", value: 0
},
schema: {
data:function(response) {
},
parse: function (data) {//on loading it is fine, on updating the data param is a string of my HTML of the page
var rows = [];
var features = data.features;
if (!features) {
return [];
}
for (var i = 0; i < features.length; i++) {
var dataRow = {};
dataRow.OBJECTID = features[i].attributes.OBJECTID;
dataRow.Name = features[i].attributes.Name;
dataRow.Date = features[i].attributes.Date;
dataRow.Comment = features[i].attributes.Comment;
rows.push(dataRow);
}
return rows;
},
model: {
id: "OBJECTID",
fields: {
OBJECTID: { type: "number", editable: false },
Name: { type: "string" },
Date: { type: "string" },
Comment: { type: "string" }
}
}
}
});
var _surveysPicker = $(config.table).kendoGrid({
toolbar: ["create","save"],
editable: true,
dataSource: _dataSource,
height: 300,
sortable: true,
selectable: "multiple",
columnMenu: true,
resizable: true,
columns: [{
field: "OBJECTID",
width: 40
}, {
field: "Name",
width: 40
}, {
field: "Date",
width: 40
}, {
field: "Comment",
width: 100
}]
});

You need to move your parse function inside read event if you need to parse data only on read action.

unable to display success message after editing the row in jqgrid

I'm developing a web based application using bootstrap.
I'm trying to implement inline editing in my grid on page load but i'm facing some issue while displaying the success or failure message after performing edit function.
Here is my code :
$(document).ready(function () {
var GetUrl = Web_Path + '/Test/TestHandler/GetTestData/' + AjaxHandlerName;
jQuery("#jqGrid-container").jqGrid({
url: GetUrl,
datatype: 'json',
mtype: 'POST',
postData: { SearchInfo: function () { return getSearchPostData() } },
colNames: [' ', 'ID', 'Name', 'ContactNo', 'EmpId', 'MailId', 'RoleName'],
colModel: [
{ name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback }
}
},
{ name: 'Id', index: 'Id', hidden: true, editable: true },
{ name: 'Name', index: 'Name', validation: { required: true }, sortable: true, editable: true, editoptions: { size: "40", maxlength: "50"} },
{ name: 'ContactNo', index: 'ContactNo', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} },
{ name: 'EmpId', index: 'EmpId', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} },
{ name: 'MailId', index: 'MailId', sortable: false, editable: true, editoptions: { size: "40", maxlength: "50"} },
{name: 'RoleName', index: 'RoleName', sortable: false }
],
editurl: ISM_Web_Path + '/Test/TestHandler/UpdateTestContacts/' + ISMAjaxHandlerName,
ajaxRowOptions: {
afterEditRow: function (rowid, cellname, value, iRow, iCol) {
alert('success');
}
},
serializeRowData: function (postdata) {
return { ContactInfo: JSON.stringify(postdata) };
},
jsonReader: {
id: 'Id',
repeatitems: false
},
height: "100%",
pager: '#jqGrid-pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'Id',
sortorder: 'desc',
viewrecords: true,
caption: "JQ grid data",
loadComplete: function () {
var table = this;
updatePagerIcons(table);
}
});
});
function getSearchPostData() {
var searchData = {};
searchData.Id=1;
return JSON.stringify(searchData);
}
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
'ui-icon-seek-prev': 'icon-angle-left bigger-140',
'ui-icon-seek-next': 'icon-angle-right bigger-140',
'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
<div class="row">
<div class="col-xs-12">
<table id="jqGrid-container" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all">
</table>
<div id="jqGrid-pager">
</div>
</div>
</div>
Handler function
public void UpdateTestContacts(HttpContext context)
{
TestContact contactInfo =new TestContact();
string jsonData = context.Request.Params["ContactInfo"];
MemoryStream TestContactMs = new MemoryStream(Encoding.UTF8.GetBytes(jsonData));
DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(TestContact));
contactInfo = (RelationshipContact)serializer.ReadObject(TestContactMs );
//call manger function
// return true or false
}
TestContact.cs
public class TestContact
{
public int Id { get; set; }
public string Name { get; set; }
public string ContactNo { get; set; }
public string EmpId { get; set; }
public int RelId { get; set; }
public int TypeId { get; set; }
public string MailId { get; set; }
public string RoleName { get; set; }
}
I have used jquery.jqGrid.min.js.
I'm unable to display success message after editing the row successfully.
I have used afterEditRow
Please help me out.

There are no afterEditRow callback function inside of ajaxRowOptions. I recommend you to use aftersavefunc callback function of inline editing which can be specified as afterSave function of formatoptions:
formatter: 'actions',
formatoptions: {
keys: true,
afterSave: function (rowid, response, postdata, options) {
alert("success");
},
delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback }
}

ajaxRowOptions: {
success: function (data, textStatus) {
if(textStatus=="true")
{
alert('success');
}
else
{
alert('failure');
}
}
}
I'm returning true in handler.
Above code is working for me.