After adding and entering a button, I implemented changing the table by pressing the button, but I want to change the column and row of the table immediately as soon as I enter the number. For example, if I enter 4, I want to have a 4X4 table. I don't know. Help me.
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
</style>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<button type="button" #click="change(size)">Change</button>
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
for (let r = 0; r < this.size; ++r) {
this.matrix[r] = [];
for (let c = 0; c < this.size; ++c)
this.matrix[r][c] = r * this.size + c +1;
}
},
methods:{
change(s){
this.size=s
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
}
})
</script>
</body>
</html>
you can using a watcher on your size state
the watch statement should be like this:
watch: {
size(newVal){
this.change(newVal)
}
}
and you can see a working example in the below :)
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
this.change(this.size)
},
methods:{
change(s){
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
},
watch: {
size(newVal){
this.change(newVal)
}
}
})
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
</body>
</html>
Related
I'm using react-native-webview and another page I can render a static webview like this:
return `<html>
<head>
<style>
.t-center{
text-align: center;
</style>
</head>
<body>
<div class="t-center">
<h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
<h1>0000000</h1>
</div>
</body>
</html>`
But now I need to render a list of items from an array inside a webview. I tried using the map but it didn't work:
return items.map((item) => {
return `<html>
<head>
<style>
.t-center{
text-align: center;
</style>
</head>
<body>
<div class="t-center">
<h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
<h1>${item.namE_CLI}</h1>
</div>
</body>
</html>`;
});
here is the solution where you can find the props value injectedJavaScript which helps to inject JavaScript to webview. sample code given below how to add array list to webview.
ex:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
const App = () => {
let myList = `["A", "B", "C", "D"]`;
const overrideJs = `
let $buttons = $('<div id="buttonGallery">');
let myList = ${myList}
let myColors = ["red", "green", "blue", "red"];
myList.map(function(letter, index) {
let $button = $("<div></div>")
.addClass("buttons")
.attr("id", "button_" + letter)
.html("<p>" + letter + "</p>")
.on("mouseenter", function() {
$(this).css("background", myColors[index]);
})
.on("mouseleave", function() {
if (!$(this).hasClass('clicked')) {
$(this).css("background", "transparent");
}
})
.on("click", function() {
$(this).css("background", myColors[index]);
$(this).addClass('clicked');
})
$buttons.append($button);
});
$("body").append($buttons);
$("#done").on("click", clearColor);
function clearColor() {
$(".buttons").css({
backgroundColor: 'transparent'
});
$(".buttons").removeClass('clicked');
}
`
const html = `<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
#buttonGallery {
margin: 10px;
padding: 10px;
border: solid 2px black;
width: 155px;
}
#done {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
</style>
</head>
<body>
<div id="done">
<p>done</p>
</div>
</body>
</html>
`
return (
<View style={{ flex: 1, backgroundColor: 'red' }}>
<WebView
ref={(r) => this.webviewRef = r}
source={{ html }}
// onMessage={}
injectedJavaScript={overrideJs}
injectedJavaScriptForMainFrameOnly={false}
allowUniversalAccessFromFileURLs={true}
/>
</View>
)
};
export default App;
Thanks Virendrasinh R, your propose is very good! But I found a way to do this with map and toString():
const names = items.map(function (item) {
return `<div class="row"><span class="title">${item["idcont"]} - ${item["nomE_CLI"]}</span></div>
<div class="row"><strong>Tipo:</strong> ${item["tipO_CONHECIMENTO"]}</div>
<div class="row"><strong>Contêiner:</strong> ${item["idcont"]}</div>
<div class="row"><strong>N:</strong> ${item["numerO_CE_MERCANTE"]}</div>
<div class="row"><strong>Status:</strong> ${item["status"]}</div>
<div class="row"><strong>Data Status:</strong> ${item["datA_STATUS"]}</div>
<div class="row"><strong>Data Prevista:</strong> ${item["dH_PREV_INSPECAO"]}</div>
<div class="row last-row"><strong>Data Descarga:</strong> ${item["dH_DESCARGA"]}</div>
`;
});
const html = `
<html>
<head>
<style>
body{
padding: 0 25px;
}
.row{
font-size: 38px;
border-bottom: 1px solid ${theme.color.gray};
padding: 10px;
}
.last-row{
margin-bottom: 50px;
}
.title{
color: ${theme.color.success};
font-size: 48px;
font-weight: bold;
}
strong{
color: ${theme.color.primary};
}
</style>
</head>
<body>${names.toString()}</body>
</html>
`;
I have read vue transitions documentation and is pretty clear how to apply them to the desired elements. But how to make height variations smooth to the parent container (grey) when a new child (green) is added/removed to a flex column? I have tried to animate max-height of the new child from 0, but isn't working. Here is my case:
fiddle: link
code:
HTML
<html>
<body>
<div id="app" class="demo">
<div>
<button v-on:click="on=!on">
toggle
</button>
</div>
<div class="background">
<div class="container">
<transition name="fade-outin" mode="out-in">
<red v-if="on"></red>
<blue v-else></blue>
</transition>
<transition name="fade-down">
<div v-if="!on">
<div style="height: 25px"></div>
<green></green>
</div>
</transition>
</div>
</div>
</div>
</body>
</html>
JS
var red = {
template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};
var blue = {
template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};
var green = {
template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};
var app = new Vue({
el: '#app',
data: {
on: true
},
components: {
red,
blue,
green
}
})
CSS
body {
padding: 20px;
}
.background {
border: 1px solid #000;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 500px;
overflow: hidden;
}
.container {
background-color: #abc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.fade-outin-enter-active, .fade-outin-leave-active {
transition: opacity 0.5s ease-in-out;
}
.fade-outin-enter, .fade-outin-leave-to {
opacity: 0;
}
.fade-down-enter-active {
transition: all 0.5s ease-in-out 0.5s;
}
.fade-down-leave-active {
transition: all 0.5s ease-in-out;
}
.fade-down-enter, .fade-down-leave-to {
max-height: 0;
opacity: 0;
transform: translateY(-65px);
}
Thanks for your time,
H25E
You can't use transition with height: auto, the CSS need a value to apply the transitions.
In this case, you must to use the max-height for animate your component. See this article for more details: https://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0
I do some changes in your code. Try something like this, but you can improve:
<html>
<body>
<div id="app" class="demo">
<div>
<button v-on:click="toggle">
toggle
</button>
</div>
<div class="background">
<div class="container" ref="container">
<transition name="fade-outin" mode="out-in">
<red v-if="on"></red>
<blue v-else></blue>
</transition>
<transition name="fade-down">
<div v-if="!on">
<div style="height: 25px"></div>
<green></green>
</div>
</transition>
</div>
</div>
</div>
</body>
</html>
var red = {
template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};
var blue = {
template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};
var green = {
template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};
var app = new Vue({
el: '#app',
data: {
on: true
},
components: {
red,
blue,
green
},
methods: {
toggle() {
if (this.on) {
this.$refs.container.style['max-height'] = '500px';
} else {
this.$refs.container.style['max-height'] = '170px';
}
this.on = !this.on;
}
}
})
.container {
background-color: #abc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
max-height: 170px;
transition: max-height 3s;
}
I'm trying to use a component called "Vue-Chartjs" to create a LineChart.[
I'm passing some data from a MySql database to the 'chartData' prop, defined in the Chart.js file.
But I'm getting this error. What I understood (I think), is that chartData doesn't get updated.
Does anyone know why it doesn't work? Thank you very much!
This are my Chart.js file and my Forecast.vue file
import {
Line,
mixins
} from 'vue-chartjs'
const {
reactiveProp
} = mixins
export default {
name: 'line-chart',
extends: Line,
mixins: [reactiveProp],
props: {
chartData: {
type: Array,
required: true
},
chartLabels: {
type: Array,
required: true
}
},
data() {
return {
options: {
scales: {
yAxes: [{
display: true
}],
xAxes: [{
display: false
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart({
labels: this.chartLabels,
datasets: [{
label: 'Temperature',
colors: '#000000',
backgroundColor: '#000000',
data: this.chartData
}]
}, this.options)
}
}
<template>
<div class="FiveDaysForecast">
<div class="tabs is-fullwidth">
<ul>
<li><router-link to="OneDayForecast"><span class="icon is-small"><i class="fas fa-cloud"></i></span>One day forecast</router-link></li>
<li class="is-active"><router-link to="FiveDaysForecast"><span class="icon is-small"><i class="fas fa-cloud"></i></span>Five days forecast</router-link></li>
<li><router-link to="FilterByDate"><span class="icon is-small"><i class="fas fa-calendar-alt"></i></span>Filter forecast by date</router-link></li>
</ul>
</div>
<h1>FIVE DAYS FORECAST</h1>
<form>
<div class="box">
<div class="field">
<div class="control">
<input class="input is-rounded" type="text" placeholder="Place" v-model="place">
</div>
<br>
<div class="control">
<input class="input is-rounded" type="text" placeholder="Country" v-model="country">
</div>
<br>
<div class="control">
<input class="input is-rounded" type="text" placeholder="Unit of measure (Celsius = 'metric' | Fahrenheit = 'imperial')" v-model="unitOfMeasure" required>
</div>
<br>
<div class="control">
<input class="input is-rounded" type="text" placeholder="Latitude" v-model="latitude">
</div>
<br>
<div class="control">
<input class="input is-rounded" type="text" placeholder="Longitude" v-model="longitude">
</div>
</div>
<button class="button is-medium is-rounded" #click="getFiveDaysForecast">Search</button>
</div>
</form>
<br>
<table class="table is-narrow">
<thead>
<tr>
<th>Temperature</th>
<th>TemperatureMin</th>
<th>TemperatureMax</th>
<th>Humidity</th>
<th>Pressure</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr v-for="forecast in forecastData" :key="forecast.Pressure">
<td>{{forecast.temperature}}</td>
<td>{{forecast.temperatureMin}}</td>
<td>{{forecast.temperatureMax}}</td>
<td>{{forecast.humidity}}</td>
<td>{{forecast.pressure}}</td>
<td>{{forecast.timeStamp}}</td>
</tr>
</tbody>
</table>
<line-chart
:chart-data="tempRows"
:chartLabels="weatherDate"
></line-chart>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "FiveDaysForecast",
data() {
return {
place: "",
country: "",
unitOfMeasure: "",
latitude: "",
longitude: "",
forecastData: [],
temperature: [],
weatherDate: [],
tempRows: []
};
},
methods: {
getFiveDaysForecast() {
axios({
method: "get",
url: "http://localhost:55556/api/ForecastActions/fiveDaysForecast",
params: {
Place: this.place,
Country: this.country,
UnitOfMeasure: this.unitOfMeasure,
Lat: this.latitude,
Lon: this.longitude
}
})
.then(response => {
console.log(response);
this.forecastData = response.data;
this.forecastData.forEach(item => {
var tempArray = [];
this.tempRows.push(item.temperature);
this.weatherDate.push(item.timeStamp);
});
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
<style scoped>
.FiveDaysForecast {
width: 1200px;
margin: 30px auto;
}
.tabs {
width: 600px;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 50px;
}
#forecast-params {
margin-top: 30px;
margin-bottom: 50px;
text-align: left;
font-size: 20px;
}
.param-names {
font-weight: bold;
color: black;
font-size: 20px;
}
.box {
background-color: transparent;
width: 600px;
margin: 0 auto;
border: 3px solid royalblue;
box-shadow: 0px 0px 30px royalblue;
}
::placeholder {
color: rgb(170, 170, 170);
}
input,
button {
background-color: #fcfcfc;
border: 2px solid rgb(170, 170, 170);
}
input:focus {
border: 2px solid royalblue;
box-shadow: 0px 0px 30px royalblue;
}
input:hover {
border: 2px solid royalblue;
}
button:focus {
border: 2px solid royalblue;
box-shadow: 0px 0px 30px royalblue;
}
button:hover {
border: 2px solid royalblue;
}
.table {
margin: 0 auto;
width: 1000px;
}
td,
th {
text-align: center;
}
thead {
font-size: 20px;
display: table-header-group;
vertical-align: middle;
border-bottom: 3px solid royalblue !important;
}
tr {
font-weight: 600;
transition: background-color 0.5s ease;
}
tr:hover {
background-color: rgb(153, 179, 255);
}
#chart {
display: inline-block;
padding: 0px;
margin: 0px;
}
#tempChart {
padding: 0 auto;
}
#charts {
padding: 0px auto;
}
</style>
Well your "problem" is that your data is async. So the chart will be rendered without any data or without proper data.
You have to put a
v-if="loaded"
on your chart component.
And in your axios call you need to set it to true.
I'm learning how to use vue.js to pull movie information and display it.
Inside the main application mc I have a method getMovie which isn't being called when another method updateMovie is called. The updateMovie method is called from the event 'switch' which is emitted by a child component details-card
I can see that the title on my application gets changed and the method updateMovie is working if you click on a director and then a movie under that director. The input field also changes value. Why won't the getMovie work?
var mc = new Vue({
el: "#movie-card",
data: {
title: '',
valid: false,
loading: false,
error: false,
mc: {},
directorArray: [],
actorArray: [],
},
computed: {
checkMulti: function(item) {
if (Object.keys(item).length <= 1) {
return false;
} else {
return true;
}
}
},
methods: {
getMovie: function() {
this.cm = {};
console.log("getMovie called")
if (this.title !== "") {
this.loading = true;
this.error = false;
searchString = 'https://www.omdbapi.com/?t=' + this.title;
var that = this;
axios.get(searchString)
.then(function(res) {
that.cm = res.data;
that.directorArray = res.data.Director.trim().split(/\s*,\s*/);
that.actorArray = res.data.Actors.trim().split(/\s*,\s*/);
that.valid = true;
that.loading = false;
})
.catch(function(error) {
console.log(error.message);
that.loading = false;
that.error = true;
})
}
},
updateMovie: function(movie) {
console.log(movie);
this.title = movie;
this.getMovie;
}
}
})
Vue.component('details-card', {
props: [
'name',
'title'
],
template: `
<div>
<a href=""
#click="handleShowDetails($event)"
>
{{ name }}
</a>
<div v-if="visible" class="detailsCard">
<h3 class="removeTopMargin">{{ name }}</h3>
<img :src="picUrl">
<h4>Known for</h4>
<p v-for="movie in knownForArray">
<a href=""
#click="switchMovie(movie.original_title, $event)"
>{{ movie.original_title }}</a>
</p>
</div>
</div>
`,
data: function() {
return {
picUrl: "",
knownForArray: [],
visible: false
}
},
methods: {
handleShowDetails: function($event) {
this.visible = !this.visible;
this.callPic($event);
},
switchMovie( movie , $event) {
if ($event) $event.preventDefault();
console.log("switching to...", movie);
this.$emit('switch', movie);
},
callPic: function(event) {
if (event) event.preventDefault();
let that = this;
let searchString = "https://api.themoviedb.org/3/search/person?api_key=9b8f2bdd1eaf20c57554e6d25e0823a2&language=en-US&query=" + this.name + "&page=1&include_adult=false";
if (!this.picUrl) { //only load if empty
axios.get(searchString)
.then(function(res) {
let profilePath = res.data.results[0].profile_path;
if (profilePath === null) {
that.picUrl = "http://placehold.it/150x200"
} else {
that.picUrl = 'https://image.tmdb.org/t/p/w150/' + profilePath;
}
that.personPic = profilePath;
that.knownForArray = res.data.results[0].known_for;
}).catch(function(err){
console.log(err);
})
}
},
hideDetails: function () {
this.visible= false;
}
}
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
ul {
padding-left: 1em;
}
.loading {
margin: auto;
max-width: 450px;
}
.details {
display:block;
margin: 1em auto;
text-align: center;
}
.searchBar {
padding: .5em;
-webkit-box-shadow: 0px 2px 16px 2px rgba(168,168,168,0.45);
-moz-box-shadow: 0px 2px 16px 2px rgba(168,168,168,0.45);
box-shadow: 0px 2px 16px 2px rgba(168,168,168,0.45);
text-align: center;
}
.searchBar input {
padding: .5em;
width: 300px;
font-size: 1em;
border: none;
border-bottom: 1px solid gray;
}
.searchBar button {
padding: .2em;
border: 2px solid gray;
border-radius: 8px;
background: white;
font-size: 1em;
color:#333;
}
img {
display: block;
margin: auto;
width: 150px;
padding-bottom: .33em;
}
.card {
max-width: 500px;
margin: 2em auto;
-webkit-box-shadow: 0px 6px 16px 2px rgba(168,168,168,0.45);
-moz-box-shadow: 0px 6px 16px 2px rgba(168,168,168,0.45);
box-shadow: 0px 6px 16px 2px rgba(168,168,168,0.45);
padding: 2em;
}
.detailsCard {
-webkit-box-shadow: 0px 6px 16px 2px rgba(168,168,168,0.45);
-moz-box-shadow: 0px 6px 16px 2px rgba(168,168,168,0.45);
box-shadow: 0px 6px 16px 2px rgba(168,168,168,0.45);
padding: 1em;
}
/* ======= Typography */
html {font-size: 1em;}
body {
background-color: white;
font-family: roboto;
font-weight: 400;
line-height: 1.45;
color: #333;
}
p {margin-bottom: 1.3em;}
h1, h2, h3, h4 {
margin: 1.414em 0 0.5em;
font-weight: inherit;
line-height: 1.2;
}
h2, h3, h4 {
border-bottom: 1px solid gray;
}
h1 {
margin-top: 0;
font-size: 3.998em;
text-align: center;
}
h2 {font-size: 2.827em;}
h3 {font-size: 1.999em;}
h4 {font-size: 1.414em;}
small, .font_small {font-size: 0.707em;}
.removeTopMargin {
margin-top: .5em;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="movie-card">
<div class="searchBar">
<input type="text" ref="input" v-model="title" placeholder="Enter a movie title here..." v-on:keyup.enter="getMovie">
<button type="submit" #click="getMovie">Search</button>
</div>
<div class="loading" v-if="loading">
<BR><BR>
<h1>Loading...</h1>
</div>
<div class="loading" v-if="error">
<BR><BR>
<h1>Something went wrong!</h1>
</div>
<div class="card" v-if="valid && !loading">
<h1> {{ cm.Title }}</h1>
<div v-if="!(cm.Poster === 'N/A')" class="poster">
<img v-bind:src="cm.Poster">
</div>
<div class="details">
<p>{{ cm.Year + " – " + cm.Rated + " – " + cm.Runtime }}</p>
</div>
<p>{{ cm.Plot }}</p>
<div class="directors" v-if="cm.Director">
<h3 v-if="(directorArray.length > 1)">Director</h3>
<h3 v-else>Director</h3>
<p>
<p v-for="(director, index) in directorArray">
<details-card :name="director" v-on:switch="updateMovie"></details-card>
</p>
</p>
</div>
<div class="actors" v-if="cm.Actors">
<h3 v-if="actorArray.length > 1">Actors</h3>
<h3 v-else>Actor</h3>
<p>
<p v-for="(actor, index) in actorArray">
<details-card :name="actor"></details-card>
</p>
</p>
</div>
<div class="ratings" v-if="cm.Ratings">
<h3>Ratings</h3>
<ul>
<li v-for="rating in cm.Ratings">{{ rating.Source }}: {{ rating.Value }}</li>
</ul>
</div>
</div>
</div>
I have a view with a partial view. In my main view there's a dropdown list, on selection of a value from dropdown list, WebGrid is populated according to the choice selected.
Also in the main view I have a dropdown list, a datetime picker text box, and a Submit (Allocate) button.
Webgrid has one check box for each row. On selecting a row from WebGrid, collected data needs to go the controller. But my button ain't working!
Please help me with my controller, I'm not able to get selected values in my controller.
My View is like:
#model LipiProject.Models.Allocation
#{
ViewBag.Title = "Call Allocation";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/StyleSheet1.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="~/Scripts/Timepicker.js"></script>
<script>
$(function () {
$("#datepicker").datetimepicker({ timeFormat: "hh:mm tt" });
});</script>
<style>
.webgrid-table {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
width: 650px;
display: table;
border-collapse: collapse;
border: solid 1px #C5C5C5;
background-color: white;
}
.webgrid-table td, th {
border: 1px solid #C5C5C5;
padding: 3px 7px 2px;
}
.webgrid-header, .webgrid-header a {
background-color: #0094ff;
color:#ffffff;
text-align: left;
text-decoration: none;
}
.webgrid-footer {
}
.webgrid-row-style {
padding: 3px 7px 2px;
}
.webgrid-alternating-row {
background-color:azure;
padding: 3px 7px 2px;
}
.col1Width {
width: 55px;
}
.col2Width {
width: 220px;
}
.lineSep {
border-bottom: 1px solid #000;
display: block;
margin: 10px 0;
}
</style>
<h2>Index</h2>
<div id="overlay" style="display: none">
<img id="loading" src="~/Images/ajax-loader.gif">
</div>
#using (Html.BeginForm("CallAllocationSubmit", "Home", FormMethod.Post, new { id = "FrmCallAllocate", ReturnUrl = ViewBag.ReturnUrl }))
{
<table>
<tr>
<td>
<div class="row">
<div class="col-sm-12">
<section class="panel default blue_title h5">
<div class="panel-heading">Select Call Category</div>
<div class="panel-body">
#Html.DropDownList("CallNature", Model.CallNature, "Select Call Nature")
</div>
</section>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="GridView">
#Html.Partial("_CallAllocation",Model.CallTicketGrid)
</div>
</td>
</tr>
</table>
<div class="row">
<div class="col-sm-12">
<section class="panel default blue_title h5">
<div class="panel-heading">Allocate Engineer</div>
<div class="panel-body">
#Html.DropDownList("DefaultEngg", Model.DefaultEngg, "Select Engineer")
ETA: <input type="text" id="datepicker">
<input type="submit" value="Allocate" class="btn btn-primary">
</div>
</section>
</div>
</div>
}
<script type="text/javascript">
$('#CallNature').change(function (e) {
e.preventDefault();
var url = '#Url.Action("Filter")';
$.get(url, { CallNatureId: $(this).val() }, function (result) {
debugger;
$('#GridView').html(result);
});
});
</script>
My Partial View is like:
#model List<LipiProject.Models.Allocation>
#{
ViewBag.Title = "_CallAllocation";
}
<style>
.webgrid-table {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
width: auto;
display: table;
border-collapse: collapse;
border: solid 1px #C5C5C5;
background-color: white;
}
.webgrid-table td, th {
border: 1px solid #C5C5C5;
padding: 3px 7px 2px;
}
.webgrid-header, .webgrid-header a {
background-color: #0094ff;
color:#ffffff;
text-align: left;
text-decoration: none;
}
.webgrid-footer {
}
.webgrid-row-style {
padding: 3px 7px 2px;
}
.webgrid-alternating-row {
background-color:azure;
padding: 3px 7px 2px;
}
.col1Width {
width: 55px;
}
.col2Width {
width: 220px;
}
.lineSep {
border-bottom: 1px solid #000;
display: block;
margin: 10px 0;
}
</style>
#{ var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent", columnNames: new[] { "CallTicketNumber", "TicketDate", "SerialNumber", "CustomerName", "City", "State", "DefaultEngg" }, defaultSort: "DateCreated");
<div class="row" id="GridView">
<div class="col-sm-12">
<section class="panel default blue_title h5">
<div class="panel-heading">Allocate Calls</div>
<div class="panel-body">
<div class="col-sm-12">#grid.GetHtml(mode:WebGridPagerModes.All,
tableStyle: "webgrid-table",
htmlAttributes: new {id = "checkableGrid"},
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns: grid.Columns(
grid.Column(columnName: "CallTicketNumber", header: "CallTicketNumber"),
grid.Column(columnName: "TicketDate", header: "Ticket Logged On"),
grid.Column(columnName: "SerialNumber", header: "Serial Number"),
grid.Column(columnName: "CustomerName", header: "Customer Name"),
grid.Column(columnName: "City", header: "City"),
grid.Column(columnName: "State", header: "State"),
//grid.Column("DefaultEngg", "Engineer", format:item => Html.DropDownList(((string)item.DefaultEngg).ToString(), (List<SelectListItem>)Model[0].DefaultEngg))
//grid.Column(header:"Default Engineer", format: item =>Html.DropDownList(((long)item.CallTicketNumber).ToString(), (IEnumerable<SelectListItem>)Model[0].DefaultEngg))
grid.Column(format: #<text> <input type="checkbox" value="#item.CallTicketNumber" name="ids" /> </text>,
header: "SelectAll")
)) </div>
</div>
</section>
</div>
</div>
}
<script>
$(document).ready(function () {
// 1st replace first column header text with checkbox
$("#checkableGrid th").each(function () {
if ($.trim($(this).text().toString().toLowerCase()) === "SelectAll") {
$(this).text('');
$("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
$(this).append("<span>Select All</span>");
}
});
//2nd click event for header checkbox for select /deselect all
$("#cbSelectAll").live("click", function () {
var ischecked = this.checked;
$('#checkableGrid').find("input:checkbox").each(function () {
this.checked = ischecked;
});
});
//3rd click event for checkbox of each row
$("input[name='ids']").click(function () {
var totalRows = $("#checkableGrid td :checkbox").length;
var checked = $("#checkableGrid td :checkbox:checked").length;
if (checked == totalRows) {
$("#checkableGrid").find("input:checkbox").each(function () {
this.checked = true;
});
}
else {
$("#cbSelectAll").removeAttr("checked");
}
});
});
</script>
My Controller is like:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CallAllocationSubmit(Allocation allocate, FormCollection frmCollection)
{
string CallTicketNumber = frmCollection["CallTicketNumber"].ToString();
string CallNature = frmCollection["CallNature"].ToString();
var Defengg = frmCollection["DefaultEngg"].ToList();
var ETA = frmCollection["ETA"].ToString();
return RedirectToAction("CallAllocation");
}