Regarding imageupload in grid | Infragistics Forums

515

Regarding imageupload in grid

Rohit Rawat posted over 1 year ago

Hello everyone,

So , I have to basically add imageupload option in my image column when user edit or add a row and display image normally.But i cant figure out how to do that. I have a controller method which takes Iformfile type image varible and store it alli need is help with grid to upload and how to get that upoad file details to store it in database.

@using Infragistics.Web.Mvc;
@using System.Text.Json

@*@model IEnumerable<GridTransaction.Models.Student>*@
@* The Ignite UI for MVC Grid data source uses LINQ and therefore only accepts instances of IQueryable<T>.
Even when you opt to use the GridMode you will explicitly set the DataSource property which
requires an instance of IQueryable<T> .*@

</head>
<body>

</table>
</div>

<button type="submit"id="b2" class="btn btn-primary">Export</button>

</body>
</html>

@section scripts{

@*Batch Update*@
<script>
$(function () {
$("#grid").igGrid({
primaryKey: "id",
renderCheckboxes: true,
autoGenerateColumns: false,
updateUrl: "/Student/put/",
width: "100%",

columns: [
{ headerText: "Student ID", key: "id", dataType: "number", width: "15%" },
{ headerText: "Student Name", key: "name", dataType: "string", width: "30%" },
{ headerText: "Marks", key: "marks", dataType: "number", width: "30%" },
{
headerText: "Image",
key: "imagepath",
dataType: "string",
width: "15%",
template: "<img src='${imagepath}' width='50' height='50' />"
},
{ headerText: "Subject", key: "subject", dataType: "string", width: "15%" }
],
dataSourceUrl: "/Student/Data12",
dataSource: "/Student/Data",

features: [
{
name: "Selection",
mode: "row",
multipleSelection: true,
persist: true
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableSelectAllForPaging: true,
enableRowNumbering: true
},
{
name: "GroupBy"
},
{
name :"Paging",
type:"local",
pageSize : 7
},

{
name: "Filtering",
type:"local",
columnSettings: [
{
columnKey: "selectColumn",
allowFiltering: false
}
]
},
{
name: "Sorting",
type: "remote",
// sortUrlKey: 'sort',
// sortUrlKeyAscValue: 'asc',
// sortUrlKeyDescValue: 'desc'
},
{
name: "Updating",
enableAddRow: true,
editMode: "row",
validation: true,
enableDeleteRow: true,
rowAdded: function (evt, ui) {
// Custom logic to execute when a row is added
console.log("Event arguments (ui):", ui);
console.log("Row data:", ui.rowId);
console.log(typeof (ui.values));
},
columnSettings: [
{
columnKey: "id",
readOnly: true

},

{
columnKey: "name",
editorType: "text",
validation: true,
editorOptions: {

validatorOptions:
{
required: {
errorMessage: "You must enter a value to submit."

},
custom: function(ui,evt){
var validator = $("#grid").igGridUpdating("editorForKey", "name").data("igValidator").element;

console.log(validator);
if (ui == "rohit") {

$(validator).igValidator("option", "errorMessage", "cant enter name rohit");

return false;
}
return true;

}

}
}
},
{
columnKey: "marks",
editorType: "combo",
validation: true,

editorOptions: {
mode: "dropdown",
dataSource: [
{ "ID": 0, "Name": "Food" },
{ "ID": 1, "Name": "Beverages" },
{ "ID": 200, "Name": "Electronics" }
],
textKey: "Name",
valueKey: "ID",
validatorOptions: {
required: {
errorMessage: "You must enter a value to submittt."

},
custom:function(ui,evt){
console.log(ui);
console.log("hi");
if (ui >= 50) {
console.log(ui);
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
// console.log(validator1);
console.log("inside if");
// var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath");

$(validator1).igValidator("option", "required", true);

$(validator1).igValidator("option", "errorMessage", 'This field is required for marks between 50-100');

return true;
}
else {
// var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
// var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath");
console.log("else");
var validatorElement = $("#grid").igGridUpdating("editorForKey", "imagepath");
console.log(validatorElement);
if (validatorElement) {
var validator = validatorElement.data("igValidator").element;
$(validator).igValidator("option", "required", false);

} else {
console.log("Imagepath editor element is null");
}

// console.log(validator11);

//Set

return true;
}
}
}
}
}
]
}
]
});

$("#b2").on("click",function(){
$.ig.GridExcelExporter.exportGrid(
$('#grid'),
{
fileName: 'igGrid',
worksheetName: 'Sheet1'
},
{
rowExporting: function (sender, args) {
var id = args.rowId;
var selectedRows = $("#grid").igGridSelection("selectedRows");
for (var i = 0; i < selectedRows.length; i++) {
if (selectedRows[i].id === id) {
return true;
}
}
return false;
}

}

);
// var rows = $('#grid').igGridSelection('selectedRows');
// var arr = [];
// for (var i = 0; i < rows.length; i++) {
// // console.log("id=",rows[i].id);
// // console.log("index",rows[i].index);
// var a = rows[i].id;
// arr.push(a); /// pushing ids of selected checbox in array

// }

// console.log(arr);

// // Perform your desired operations on element and index here
// $.ajax({
// url: "/Student/Export/",
// data: { ar: arr },

// method: "POST",
// responseType:"blob",
// success: function (data) {
// console.log(typeof (data));
// var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
// var url = window.URL.createObjectURL(blob);

// var a = document.createElement("a");
// a.setAttribute("download", "student.xlsx");
// a.setAttribute("href", url);
// document.body.appendChild(a);

// a.click();

// window.URL.revokeObjectURL(url); // Release the object URL
// document.body.removeChild(a);

// },
// error: function () {
// console.log("failure");
// }
// });
});

$("#savechanges").on("click", function () {
alert("Save button clicked");
// Save changes when the button is clicked
$("#grid").igGrid("saveChanges");
});
});

</script>

}

CONTROLLER METHOD:-

public async Task<ActionResult> Edit(Student s3)
{
if (s3.path != null)
{
string uploadfolder = Path.Combine(_webHostEnvironment.WebRootPath, "pictures");
if (!Directory.Exists(uploadfolder))
{
Directory.CreateDirectory(uploadfolder);
}
string uniqueFileName = Guid.NewGuid().ToString() + "_" + s3.path.FileName;
string filePath = Path.Combine(uploadfolder, uniqueFileName);

using (var fileStream = new FileStream(filePath, FileMode.Create))
{
await s3.path.CopyToAsync(fileStream);
}

s3.Imagepath = "pictures/" + uniqueFileName;
}
//Student s3 = new Student();
//s3.Name= h["Name"].ToString();
//s3.Id = Convert.ToInt32(h["Id"]);
//s3.subject = h["subject"].ToString();
//s3.Marks = Convert.ToInt32(h["Marks"]);
try
{
s.UpdateDetails(s3);
return Json(new { redirect = Url.Action("Index") });

}
catch
{
return View();
}
}

1320

Offline Monika Kirkova posted over 1 year ago

Hello,

After an investigation I have determined that your requirement could be achieved by using a custom editorProvider. The editorProvider will be an igUpload component and when a new image is uploaded, it will be set as the new value for the cell.

A sample demonstrating this behavior could be found here.

Additionally, more information regarding implementing a custom editor provider could be found in the following topic of our documentation.

Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics
Cancel
Reply

Cancel