I have used JQGrid to get the data from the controller which uses "GET". But, still I'm getting a blank table. I have also tried to apply breakpoints and check whether my variable "details" inside "Detail" Method getting value or not. It worked fine. I guess the problem is in returning the data in JSON format.
Controller
[HttpGet]
public JsonResult Detail()
{
IntegrationsProcessor db = new IntegrationsProcessor(new MCNIDbContext());
DBModel.Integrations row = db.GetIntegrationRow();
List<Integrations> details = new List<Integrations>
{
new Integrations
{
IntegrationName = row.IntegrationName,
CompanyEmail = row.CompanyEmail
}
};
return new JsonResult()
{
Data = details,
JsonRequestBehavior = JsonRequestBehavior.AllowGet,
MaxJsonLength = Int32.MaxValue
};
HTML file
#using MCNIDev.CustomControls
#model MCNIDev.Models.ViewModel.Integrations
#{
ViewBag.Title = "Details";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicexb c-width" />
<title>Integrations</title>
</head>
#Styles.Render("~/Content/toasterCss")
#Styles.Render("~/Content/dataPickerCss")
<style type="text/css">
.btn {
min-width: 80px !important;
}
</style>
<body>
#using (Html.BeginForm("", "Integrations", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal", id = "frmManifestOrders" }))
{
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Integrations</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /.content-header -->
<section class="content">
<div class="container-fluid">
<div class="card card-block">
<div class="row table-responsive">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="tblSelectIntegrations"></table>
<div id="divSelect"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<hr />
<input type="button" class="btn btn-secondary" onclick="document.location.href='/Dashboard/Dashboard';" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
</body>
</html>
#Scripts.Render("~/bundles/integrations")
<script>
$(document).ready(function(){
Integrate.GetValue();
});
</script>
JQGrid File
var Integrate = function() {
function GetValue() {
$("#tblSelectIntegrations").jqGrid({
type: "GET",
url: "/Integrations/Detail",
datatype: "json",
async: false,
colNames: [
"First Name", "Email Address"
],
colModel: [
//{
// name: '',
// key: false,
// width: 30,
// editable: true,
// formatter: function () {
// return "<input type='checkbox' value='Select' class='fm-button ui-state-default ui-corner-all fm-button-icon-left noPrint'\>";
// }
//},
{ key: false, name: 'IntegrationName', index: 'IntegrationName', editable: false, width: 200 },
{ key: false, name: 'CompanyEmail', index: 'CompanyEmail', editable: false, width: 200 },
// { key: false, name: 'Blank', index: 'Blank', editable: false, width: 200 }
],
pager: jQuery("#divSelect"),
rowNum: 1,
scroll: 0,
height: $(window).innerHeight() - 450,
width: "100%",
viewrecords: true,
caption: "Product",
emptyrecords: "No records to display",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
autowidth: true,
multiselect: false,
loadonce: false,
ajaxGridOptions: { cache: false },
gridComplete: function () {
},
}).navGrid("tblSelectIntegrations", { edit: false, add: false, del: false, search: false, refresh: false });
}
return {
GetValue: GetValue
};
}();
The issue lies in controller. I am trying to send data without telling JQGrid where to insert data.
var jsonData = new
{
rows = value
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Replace below code with above code
return new JsonResult()
{
Data = details,
JsonRequestBehavior = JsonRequestBehavior.AllowGet,
MaxJsonLength = Int32.MaxValue
};
In my first code I've mentioned that add my data in the rows.
Related
I am using fullcalendar 5 and have created a custom view according to the documentaion
In may calendar configuration I have added this eventClick: (info) => this.displayDetail(info) it work great with the default views but can't figure out how to trigger the eventClick from my customview
How could I trigger it.
Customview configuration:
import { sliceEvents, createPlugin } from '#fullcalendar/core'
const CustomViewConfig = {
classNames: ['list-view'],
duration: {
month: 1.5
},
buttonText: 'Planning',
content (props, element) {
let html = '<div class="row">'
const events = sliceEvents(props, false)
for (const event of events) {
html += `
<div class="col-12 col-md-6 event color-${event.def.sourceId}">
<div class="row mb-4">
<div class="col-4">
<div class="col-date">
<span>${event.range.start.getDate()} ${event.range.start.toLocaleString('default', { month: 'long' })}</span>
<span>${event.range.end.getDate()} ${event.range.end.toLocaleString('default', { month: 'long' })}</span>
</div>
</div>
<div class="col-8">
<div class="col-content">
${event.def.title}
</div>
</div>
</div>
</div>
`
}
html += '</div>'
return { html: html }
}
}
export default createPlugin({
views: {
custom: CustomViewConfig
}
});
I am using vue-awesome-swiper component to create a nice images, the problem is when the next image comes in, a noisy gray overlay showing when loading the image.
I've tried to set lazy to false in my configuration but without avail.
Here is my swiper component content:
<div class="swiper-lazy c-slider__img" :data-background="require(`~/assets/images/${slide.image}`)">
<div class="c-slider__content h-container">
<div class="c-slider__content-block">
<h2 class="c-slider__heading">{{ slide.heading }}</h2>
<p class="c-slider__text">{{ slide.content }}</p>
<n-link
:to="localePath({ path: slide.url })"
class="c-slider__more"
>
Read More
<span class="c-slider__more-icon">
<app-icon
name="icon-arrow"
:width="21"
:height="8"
color="#fff"
/>
</span>
</n-link>
</div>
</div>
<div class="swiper-lazy-preloader"></div>
</div>
<script>
import AppIcon from '~/components/UI/AppIcon'
export default {
components: {
AppIcon
},
props: {
slides: {
type: Array,
default: () => []
}
},
data: () => ({
swiperOption: {
preloadImages: false,
lazy: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 5000
}
}
})
}
</script>
How to make tag is width to 100% in Semantic css with datatable inside tab.
Currently I have 3 tab with 1 datatable each, width is only set on Tab1 but not in Tab2 and Tab3
Here is my code: 1. HTML
<div class="ui top attached tabular menu">
<a data-toggle="tab" class="item active" data-tab="first">Other Hardwares Relation</a>
<a data-toggle="tab" class="item" data-tab="second">Software and License Relation</a>
<a data-toggle="tab" class="item" data-tab="third">Document Relation</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
<table class="ui celled table display nowrap" style="width:100%" datatable>
...
</table>
</div>
<div class="ui bottom attached tab segment" data-tab="second">
<table class="ui celled table display nowrap" style="width:100%" datatable>
<thead>
<tr>
<th>No.</th>
<th>Software #</th>
...
</tr>
</thead>
<tbody>
#foreach ($softwares as $index=>$software)
<tr>
<td>{{ $index+1 }}</td>
<td>{{$software->code}}</td>
...
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="ui bottom attached tab segment" data-tab="third">
<table class="ui celled table display nowrap" style="width:100%" datatable>
...
</table>
</div>
</div>
and 2. JS
<script>
$(document).ready(function() {
$('[datatable]').DataTable({
"scrollX": true,
"paging": false,
"searching": false,
dom: 'Bfrtip',
buttons: [ ... ]
});
$('.menu .item').tab();
});
</script>
The best practice in Datatables is instead of bringing your data with foreach you should try datatables builtin ajax. I've faced same problem and solved by turning my data form to json with and made an ajax call.
PHP JSON Encode;
$object = (object) $arr;
echo json_encode($object);
Datatables Ajax Form;
var table = $('#example').DataTable({
fixedHeader: true,
"initComplete": function(){
$('.ui.loader').remove();
)
},
ajax: {
url: 'api/yourhandler.php',
type: 'GET',
data: {
searchTerm:searchTerm,
'pane':paneno,
project: projectFilter
},
},
order: [[ 0, "desc" ], [ 5, "asc" ]],
columnDefs: [
{ "searchable": true, "targets": [0,1,2,3,4,5] },
{ "className": "align-center", "targets": [0,2,3,4,5,6,7,8,9] },
{ "width": "1%", "targets": [2,3,4,5,6,7] },
{ "width": "10%", "targets": [8] },
{ "width": "25%", "targets": [1,9] }
],
columns: [
{ data: "columndata1" },
{ data: "columndata2" },
{ data: "columndata3" },
{ data: "columndata4" }
],
responsive: true,
paging: true,
pageLength: 25
});
If you choose not to make an ajax, I could say your problem cause is your data is not fit with the table. Try to focus your foreach, you will see the problem.
i can not filtred MyJson Data "InstallationsDefaultTypes" have you an idea please. How i can filter mythe nested JSON
i just using ng-class to filter it's possible?
Angular Controller :
$scope.GetDefaultByInstallation = function ()
{
$scope.installationsStates = [];
Object.keys($scope.installationsHelper).forEach(function (key)
{
var res = false;
angular.forEach($scope.installationsHelper[key].InstallationsDefautsTypes, function (value, key)
{
if (value.value == true)
{
res = true;
}
});
$scope.installationsStates.push({
name: $scope.installationsHelper[key].InstallationsDefautsTypes.name,
state: res
});
});
}
page.chtml : this is my page html
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 stateDefaut">
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<div ng-repeat="value in installationsHelper" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<span ng-class="{value.InstallationsDefautsTypes.value | filter : value.InstallationsDefautsTypes.name = "Delestage" ? 'mDefault' : 'mActive'}">
OUI
</span>
</div>
</div>
</div>
JSON:
scope.installationsStates = [ {
Installations: {
id: 1
},
InstallationsDefautsTypes :
{
Delestage:
{
name: "Delestage",
value : false,
id: 1
}
defaut command:
{
name: "defaut1",
value : false,
id: 1
}
}
defaultsInstallations: {
0: "defaut",
1:Delestage
}
}]
As per my understanding I made following example as per assumptions
<html ng-app="myApp">
<head>
<title></title>
</head>
<body>
<div ng-controller="myController">
<div ng-repeat="value in installationsStates">
<span style="color: {{ value.InstallationsDefautsTypes.value ? 'red' : 'black' }};">
OUI
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myController', function($scope) {
$scope.installationsStates = [
{
Installations: {
id: 1
},
InstallationsDefautsTypes : {
name: "Delestage",
value : false,
id: 1
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
{
Installations: {
id: 2
},
InstallationsDefautsTypes : {
name: "Delestage",
value : true,
id: 2
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
{
Installations: {
id: 3
},
InstallationsDefautsTypes : {
name: "Delestage",
value : false,
id: 3
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
];
});
</script>
</body>
</html>
For better understanding about ng-repeat etc. please go though this link https://www.w3schools.com/angular/ng_ng-repeat.asp
Hope it helps
I want to make an editor of files. By the following code (JSBin), we list all the file names on the left hand, and their body on the right hand. I use ui-codemirror to style the body of the files.
However, when we click on the file names and switch from one to another, from time to time, we could see the quick flick from a textarea to a codemirror frame, which is not a good experience for an editor.
Does anyone have a solution to avoid the flick? Addtionally, is it a good direction to make an editor by angularJS and ui-codemirror?
<html ng-app="flapperNews">
<head>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('file', {
template: '<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
controller: 'FileCtrl',
params: { name: null }
})
}]);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
}]);
app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
$scope.file = $scope.files.find(function (file) { return file.name === $stateParams.name });
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ui-sref="file({name: file.name})">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Every time you click on the link, it is creating new editor, which is an expense operation.
The best approach is to create one editor and load the content on every click.
so I removed the ui-router linking (ui-sref) and related controllers
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
// for every click event it will load the content
$scope.go=function(file){
$scope.file=file;
}
}]);
and the body
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ng-click="go(file)">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>
</div>
</div>
</body>
Example : JSBin
you could avoid the flick by adding hide class to textarea like the following code ( jsbin )
template: '<textarea class="hide" ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',