I would like to see if you can help me with this. I want to display an image already saved in my database as a blob type in my datatable in Laravel 6.
my code clients.blade.php
<th>#</th>
<th>Nombre</th>
<th>Observacion</th>
<th>Estado</th>
<th>Grabacion</th>
<th width="150px">Imagen</th>
<th>Fecha</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>{{--
#foreach ($client as $key => $value)
<tr>
<td>{{($key+1)}}</td>
<td>{{($value["titulo"])}}</td>
<td>{{($value["observacion"])}}</td>
<td>{{($value["estado"])}}</td>
<td>{{($value["grabacion"])}}</td>
<td>
<img src="{{($value["lugar_imagen"])}}" class="img-fluid" >
</td>
...
code js(datatable).
columns: [
{
data: 'id',
name: 'id'
},
{
data: 'titulo',
name: 'titulo'
},
{
data: 'observacion',
name: 'observacion'
},
{
data: 'estado',
name: 'estado'
},
{
data: 'grabacion',
name: 'grabacion'
},
//columna mostrar imagen blob
{
data: 'lugar_imagen',
name: 'lugar_imagen',
render: function (data, type, row, meta) {
var imgsrc = 'data:image/png;base64,' + data;
return '<img class="img-responsive" src="' + imgsrc +'" " height="100px" width="100px">';
}
},
orderable: false
},
...
attentive to your comments. Thank
You need in the td only put the base64 blob.
<td> <img src="{{($value["lugar_imagen"])}}" class="img-fluid" ></td>
is only
<td> {{($value["lugar_imagen"])}} </td>
Related
I'm using react to display a table with data and inputs with the values.
My question is how to add a event handler inside my code?
And also how to update my JSON on the right position with the right value?
My JSON is a state named cards.
My JSON looks like this:
cards: [{
index: 0,
export: true,
fieldname: 'sub_nr',
caption: "Subnr",
tags: []
}, {
index: 1,
export: false,
fieldname: 'address1',
caption: "Adress",
tags: []
}, {
index: 2,
export: false,
fieldname: 'post_code',
caption: "zipcode",
tags: []
}]
My code generates this:
This is my react code:
const Card = props => {
return props.connectDropTarget(
<tbody>
{ props.connectDragSource(
<tr className="pt-1 pb-1">
<td style={{textAlign: "center"}}>
<input type="checkbox" checked={props.export} />
</td>
<td>
<input type="text" value={props.caption} />
</td>
<td>
<input type="text" value={props.fieldname} />
</td>
<td>
<input type="option" />
</td>
<td style={{textAlign: "center"}}>
<i class="fa fa-arrows" aria-hidden="true"></i>
</td>
</tr>
) }
</tbody>
);
}
const typeCard = Symbol.for('##Type::Card');
const specTarget = {
drop(props) {
return {
index: props.index,
indexnr: props.indexnr,
};
}
};
const specSource = {
beginDrag(props) {
return {
index: props.index,
};
},
endDrag(props, monitor) {
if (!monitor.didDrop()) {
return;
}
const source = monitor.getItem();
const target = monitor.getDropResult();
if (source.index === target.index) {
return;
}
props.moveCard(source.index, target.indexnr);
}
};
const collectTarget = connect => ({
connectDropTarget: connect.dropTarget(),
});
const collectSource = (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
});
const CardWithDnD = ReactDnD.DropTarget(typeCard, specTarget, collectTarget)(
ReactDnD.DragSource(typeCard, specSource, collectSource)(Card)
);
class App extends React.Component {
constructor(props) {
super(props);
this.moveCard = this.moveCard.bind(this);
this.state = {
cards: [{
index: 0,
export: true,
fieldname: 'sub_nr',
caption: "Subnr",
tags: []
}, {
index: 1,
export: false,
fieldname: 'address1',
caption: "Adress",
tags: []
}, {
index: 2,
export: false,
fieldname: 'post_code',
caption: "Postcode",
tags: []
}
]
};
}
moveCard (index, indexnr) {
const { cards } = this.state;
const sourceCard = cards.find(card => card.index === index);
const sortCards = cards.filter(card => card.index !== index)
sortCards.splice(indexnr, 0, sourceCard);
Object.keys(sortCards).forEach(function(nr) {
sortCards[nr].index = parseInt(nr, 10);
});
this.setState({ cards: sortCards });
console.log(this.state.cards);
}
render() {
const { cards } = this.state;
return (
<table className="offset-2 col-8">
{ cards.map((card, i) => (
<CardWithDnD
key={card.index}
indexnr={i}
moveCard={this.moveCard}
{...card}
/>
)) }
</table>
);
}
}
ReactDOM.render(
<ReactDnD.DragDropContextProvider backend={ReactDnDHTML5Backend}>
<App />
</ReactDnD.DragDropContextProvider>,
document.getElementById('root'),
);
I'm already able to update the index on dragging the table row, but I also want to update the Json fieldname and caption when I change the input.
How to do that?
Create a handleChange(event) function and assign it to get the input fields you want to get or set the input from. Then use the passed value inside (event.target.value) and update your state using this.setState() method inside the handleChange(event) function
Check this link for clarification
All together HTML with js work for custom filter. Here I am taking example of books with click filter when we click on subject name it filter
angular.module('testApp', []).controller('namesCtrl', function($scope) {
$scope.names = [{
name: 'Hindi'
},
{
name: 'Math'
},
{
name: 'English'
},
{
name: 'Science'
},
{
name: 'Computer'
},
{
name: 'History'
},
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<font size="3" color="red">
<p>Click the table headers to change the sorting order:</p>
</font>
<div ng-app="testApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Subject Name</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
</tr>
</table>
</div>
I am new in knockout. I want to make the list of students.
I have attached the list structure which returned from MVC as an image, Click here to view.
Js code:
var employeeListViewModel = {};
var employeeViewModel = {
id: "",
name: ko.observable("neenu"),
age: ko.observable(),
email: ko.observable(),
department: ko.observable(),
address: {
address1: ko.observable(),
city: ko.observable(),
State: ko.observable()
},
};
var employeePageViewModel = {
employee: employeeViewModel,
employees: employeeListViewModel
};
var dataSource = {
getemployees: function () {
getData("Employee/GetEmployees").then((data) => {
var result = ko.mapping.fromJS(data.data);
employeeListViewModel = result();
console.log(employeeListViewModel);
});
},
init: function () {
this.getemployees();
}
}.init();
ko.applyBindings(employeePageViewModel);
Html code:
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody data-bind="foreach: employees">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Id"></td>
</tr>
</tbody>
When I run this page ,It is neither displaying any error nor displaying data. Please help.
1) employeeListViewModel must be a ko.observableArray()
2) also when getting the result from your getData function just set the observableArray to the list:
employeeListViewModel(data.data); //assuming data.data is a [].
3) ko.mapping.fromJS(data.data); can be removed
I'm pretty new to angularjs.So,please kindly ignore if there are any errors.Here I have one dropdownlist within ng-repeat if I select the values in dropdownlist the corresponding Item code and the selected description from dropdownlist should pass to angularcontroller and I need to post it to the mvc controller
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope',function ($scope, $http,$rootScope) {
$scope.values = [{
Code: 1,
Description: 'Apple'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Mango'
}, {
COde: 4,
Description: 'Guva'
}
];
$scope.ddlrhs = '';
$scope.data = [{
Code: 1,
Description: 'Red'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Yellow'
}, {
Code: 4,
Description: 'Green'
}
];
$scope.submit = function ()
{
$scope.list = [];
for (var i = 0; i < $scope.values.length; i++) {
var j = "";
$scope.list.push({
VALUE: $scope.values[i].Code,
Description: $scope.myForm.items[i].Description
})
}
$http({
method: "POST",
url: "/Controller/Save",
data:
$scope.list
})
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div id="dvcollection" ng-App="myApp" ng-controller="ctrl" >
<form name="myForm" >
<table id="tblcollections">
<thead>
<tr >
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="myForm.items[$index]" ng-options=" element.Description for element in data ">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()"style="float:right;" >
</td>
</tr>
</tbody>
</table>
</form>
</div>
Hey May be this might be your expectation
<div ng-app="myApp" >
<div id="dvcollection" ng-controller="ctrl">
<form name="myForm">
<table id="tblcollections">
<thead>
<tr>
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="itemssample" ng-options=" element.Description for element in data " ng-change="pushingelement(item.Code,itemssample.Code)">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()" style="float:right;">
</td>
</tr>
</tbody>
</table>
</form>
<div> This is written to ensure that mapping is stored or not. (Not necessary)
<p ng-repeat="item in list">
Mapping of {{$index}} element {{item.ItemCode}} -> {{item.ColorCode}}
</p>
</div>
</div>
</div>
Ensure that your MVC Controller should have a model as
public class MapperClass
{
public int ItemCode { get; set; }
public int ColorCode { get; set; }
}
SCRIPT
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) {
$scope.list = [];
$scope.values = [
{ Code: 1, Description: 'Apple' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Mango' },
{ Code: 4, Description: 'Guva' }
];
$scope.ddlrhs = '';
$scope.data = [
{ Code: 1, Description: 'Red' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Yellow' },
{ Code: 4, Description: 'Green' }
];
$scope.pushingelement = function (itemCode, colorCode) {
var temp = { "ItemCode": itemCode, "ColorCode": colorCode };
$scope.list.push(temp);
console.log($scope.list);
}
$scope.submit = function () {
$http({
method: "POST",
url: "/Controller/Save",
data:
object:$scope.list
})
}
}
]);
TRY ONCE I HOPE IT HELPS YOU
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>get selected value from dropdownlist in angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Red'
}, {
id: '2',
name: 'Green'
}, {
id: '3',
name: 'Orange'
}, {
id: '4',
name: 'Yellow'
}];
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
Select Name:
<select data-ng-model="ddlvalue">
<option value="">--Select--</option>
<option data-ng-repeat="t in sample" value="">{{t.name}}</option>
</select>
</form>
</body>
</html>
I am developing ASP.Net mvc 4 Application using EF .
This is Client/index.cshtml (Before Adding ExtJS)
#model IEnumerable<Proj.Client>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name_Clt)
</th>
<th>
#Html.DisplayNameFor(model => model.LName_Clt)
</th>
<th>
#Html.DisplayNameFor(model => model.Birthday_Clt)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name_Clt)
</td>
<td>
#Html.DisplayFor(modelItem => item.LName_Clt)
</td>
<td>
#Html.DisplayFor(modelItem => item.Birthday_Clt)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.ID_Client }) |
#Html.ActionLink("Details", "Details", new { id=item.ID_Client }) |
#Html.ActionLink("Delete", "Delete", new { id=item.ID_Client })
</td>
</tr>
}
</table>
I was following this blogpost , But I couldn't load data on it .
http://cincolabs.com/2012/04/10/asp-net-mvc-4-ext-js-4-gridpanel/
I created another ClientController .
public JsonResult GetUsers()
{
var entities = new Entities();
//What is important is to return the data as JSON.
return Json(entities.Clients.ToList(), JsonRequestBehavior.AllowGet);
}
Should I remplace this code .
public ActionResult Index()
{
var db = new Entities();
return View(db.Clients.ToList());
}
Another Question :
// Set up a model to use in our Store
Ext.define('Client', {
extend: 'Ext.data.Model',
fields: [
{ name: 'First_Name', type: 'string' },
{ name: 'Last_Name', type: 'string' },
{ name: 'Email', type: 'string' },
{ name: 'Date_Created', type: 'date', dateFormat: 'MS'}
]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'Client',
proxy: {
type: 'ajax',
url: '/Examples/GetUsers',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
What does this mean "url: '/Examples/GetUsers'," !! Should I replace it in my case !!
Your first question is a bit vague. I never worked with Ext JS but from your posted code, it seems to me that it creates it own table using the GetUsers function. The first View you posted is an Index View that Visual Studio can automatically create that displays your data. If your Ext JS is creating the table, then I suggest you replace Index View with the appropriate code to call the table data. Then the method GetUsers should be renamed as Index.
Your question regarding /Examples/GetUsers should be the url to the controller method that saves your data (something like /Client/Save).