I need to apply a condition in my kendo grid column template.
Here is my code:
columns: [
{
field: "EmpName",
title: "Name",
template: '<a href="\\#" onclick="showName();">#= if (empName == null){ "show xxx"
} else {
// I want to show actual name if it is not null
empName
} #</a>'
},
Check this
''# if( empName==null) {#<span>show xxx<span># } else {#<span>#: empName#<span>#} #''
something like this should work for you:
# if(test == null) { #
<span style="border:1px solid red"></span>
# } else { #
<span style="border:1px solid lime"></span>
# } #
Don´t know how to do inline at the moment.
Hope it will also help
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<dt> Name:</dt> #= Name #
<br>
<dt>Selected Device: </dt> iOS:-# if (PushToiOS == true) { #Yes# } else { #No# } #,
Android:-# if (PushToAndroid == true) { #Yes# } else { #No# } #,
WP:-# if (PushToWP == true) { #Yes# } else { #No# } #
<br>
<dt>Expire Date:</dt> #= kendo.toString(ExpiredDate, "MM/dd/yyyy") #
<br>
</div>
</script>
Related
I created a dark and light mode in my laravel project and whenever the vue JS toggle is clicked it should create a cookie that saves the value. It works perfectly fine on google chrome but when i tried it on edge and firefox it showed (Undefined array key "isDarkModeOn").
I just want this cookie to be saved to any browser
My toggle Vue component which includes create cookie
<template>
<div
class="flex cursor-pointer items-center justify-between"
#click="store.modeToggle(), modeToggle()"
>
<div
class="flex h-4 w-12 items-center rounded-full bg-gray-300 p-1 duration-300 ease-in-out"
:class="{ 'bg-green-400': store.toggleActive }"
>
<div
class="h-3 w-3 transform rounded-full bg-white shadow-md duration-300 ease-in-out"
:class="{ 'translate-x-7': store.toggleActive }"
></div>
</div>
</div>
</template>
<script>
import { store } from "./store.js";
export default {
props: ["theme"],
data() {
return {
store,
};
},
mounted() {
if (this.theme === "false") {
store.light();
} else {
store.dark();
}
},
methods: {
dark() {
this.$emit("dark");
},
light() {
this.$emit("light");
},
modeToggle() {
if (
this.darkMode ||
document.querySelector("body").classList.contains("dark")
) {
this.light();
} else {
this.dark();
}
const isDarkModeOn = store.toggleActive;
createCookie("isDarkModeOn", isDarkModeOn.toString(), 60 * 60 * 24);
},
},
};
</script>
<style></style>
my Js file which contains the logic for creating the cookie
function createCookie(name, value, timeInSeconds) {
var date = new Date();
date.setTime(date.getTime() + timeInSeconds * 1000);
var expires = "; expires=" + date.toGMTString();
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(";");
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
window.onload = function () {
const isDarkModeOn = getCookie("isDarkModeOn");
if (isDarkModeOn === "true") document.body.classList.add("dark");
};
and this is how I tell browser to display dark class or hide it according to the cookie if it exists
<body id="app" style="font-family: Open Sans, sans-serif" class="scroll-smooth {{ $_COOKIE[('isDarkModeOn')] === 'true' ? 'dark' : '' }}">
It works on chrome but not on any other browser.
Also when testing in Laravel like this
#if ($value = $_COOKIE['isDarkModeOn'])
{{ $value }}
#else
'not found'
#endif
It echos the value not problem so since there is a cookie why any other browser can't identify it
As for your test, you should use something more safe (doesnt trigger an error when absent)
#if (isset($_COOKIE['isDarkModeOn']))
{{ $_COOKIE['isDarkModeOn'] }}
#else
'not found'
#endif
Issue is solved by adding the below lines of code before the body
<?php
if (isset($_COOKIE['isDarkModeOn'])) {
$cookie = $_COOKIE['isDarkModeOn'];
} else {
$cookie = '';
}
?>
Not the best way to do it but It did the trick
I have an action button that will open a modal. and it will go to this component and the user will upload an image the problem that that i currently unable to solve is fetching the ID that i've clicked on
Modal.vue
<template>
<section>
<div style="margin: 0 0 15px; text-align: left; padding: 10px 30px">
<div class="-checkbox-div">
<el-checkbox v-model="swim" class="-checkbox">
Swimming anytime soon
</el-checkbox>
<span v-if="swim" class="-upload-mc">
<el-link type="success" :underline="false" #click="uploadCert('Swimming')">
Upload medical certificate
<i class="el-icon-circle-check el-icon--right" v-if="checkIssue('Swimming')"></i>
</el-link>
</span>
</div>
<div class="-checkbox-div">
<el-checkbox v-model="below" class="-checkbox">
Below 18 years old ?
</el-checkbox>
<span v-if="below" class="-upload-mc">
<el-link type="success" :underline="false" #click="uploadCert('Below 18 years old')">
Upload medical certificate
<i class="el-icon-circle-check el-icon--right" v-if="checkIssue('Below 18 years old')"></i>
</el-link>
</span>
</div>
<el-dialog :visible.sync="waiverModal" width="30%" class="-waiver-modal" :append-to-body="true">
<WaiverModal v-if="waiverModal" :visible.sync="waiverModal" #upload="setIssueUrl" :form="form"></WaiverModal>
</el-dialog>
<div style="text-align: center; margin-top: 20px;">
<el-button type="primary" v-if="below + swim + noCon > 0"
#click="$emit('confirm', issues)">Confirm</el-button>
</div>
</section>
</template>
<script>
import {mapGetters} from "vuex";
import WaiverModal from "../../../../client/components/checkout/WaiverModal";
export default {
name: "Modal",
components:{
WaiverModal
},
data(){
return{
checkbox: false,
noCon: true,
swim: false,
below: false,
waiverModal: false,
issues: [],
form: {},
}
},
methods:{
setIssueUrl(arg){
this.issues = this.$helper.removeFromArray(this.issues, 'issue', arg.issue);
this.issues.push(arg);
},
removeIssue(arg){
this.issues = this.$helper.removeFromArray(this.issues, 'issue', arg);
},
uploadCert(arg){
let d = this.$helper.getFromArrayObj(this.issues, 'issue', arg);
this.form = Object.assign({}, d);
this.waiverModal = true;
},
checkIssue(arg){
let base = this.$helper.getFromArrayObj(this.issues, 'issue', arg);
if(!!base){
if(base.hasOwnProperty('url')){
if(!base.url == ''){
return true;
}
return false;
}else{
return false;
}
}
return false;
}
},
watch: {
noCon: function (v) {
if(v){
this.checkbox = false;
this.noCon = false;
this.swim = false;
this.below = false;
}
},
swim: function(v){
if(v){
this.noCon = false;
this.issues.push({
"issue" : "Swimming",
"url" : ""
})
}else{
this.removeIssue('Swimming');
}
},
below: function(v){
if(v){
this.noCon = false;
this.issues.push({
"issue" : "Below 18 years old",
"url" : ""
})
}else{
this.removeIssue('Below 18 years old');
}
}
}
}
</script>
im currently studying it and i stuck up for days
how can i fetch the ID that i clicked and save it to laravel controller like this
public function MobileBookingIssue(Request $request)
{
$mobileIssue = DB::table("booking_health_issues")
->where("id", '=', $request->id);
return response()->json(["message" => "success"]);
}
I am not sure but, I think id needs to be returned in data() then only it will works
I'm coding a to-do list using React hooks.
Every added item has two dropdown list where the user can decide how urgent the task (urgency value) is and how long the thing to do will take (speed value).
Updating either list will add their value into a 'score' property.
By clicking a "Sort" button I can sort the entries based on the score.
Right now the problem is that if I have more then one to-do item with different urgency and speed value, the score will always be the same for both components.
Can somebody help? Thanks
function ToDo(){
const [ input, setInput ] = React.useState('')
const [ toDo, setToDo ] = React.useState([])
const [ score, setScore ] = React.useState(0)
const [ speed, setSpeed ] = React.useState(0)
const [ urgency, setUrgency ] = React.useState(0)
return(
<div>
<h2>List of things to do</h2>
<input
value={ input }
onChange={ (e) => setInput( e.target.value ) }/>
<button
onClick={ () => {
setToDo( toDo.concat(input))
setInput('')
}}>Add
</button>
<ul>
{ toDo.map(( task, idTask ) => {
return (
<li
key={idTask}
score={ speed + urgency }>
{task}<br/>
<select onChange={(e) => { setSpeed(Number(e.target.value)) }}>
<option value={1}>slow</option>
<option value={2}>medium</option>
<option value={3}>fast</option>
</select><br/>
<select onChange={(e) => { setUrgency(Number(e.target.value)) }}>
<option value={1}>non-urgent</option>
<option value={3}>urgent</option>
</select>
<span
onClick={
(index) => {
const newTodos = [...toDo]
newTodos.splice(index, 1);
setToDo( newTodos)
}}>
[-------]
</span>
</li>
)
})
}
</ul>
<button onClick={
() => {
const sortMe = [...toDo].sort((a, b) => b - a)
setToDo( sortMe )
}}>Sort!</button>
</div>
)
}
ReactDOM.render(<ToDo/>, document.getElementById('app'));
You should implement a different data model to achieve that. You should hold an array of objects for your todos (each todo will be an object) and each object should have an urgency property so you can set that individually.
Something like this:
function App() {
const [todos,setTodos] = React.useState([
{ id: 'todo1', text: 'This is todo1', urgency: 0 },
{ id: 'todo2', text: 'This is todo2', urgency: 1 }
]);
function handleClick(id) {
setTodos((prevState) => {
let aux = Array.from(prevState);
aux = aux.map((todo) => {
if (todo.id === id) {
todo.urgency === 0 ? todo.urgency = 1 : todo.urgency = 0;
}
return todo;
});
return aux;
});
}
const todoItems = todos.map((todo) =>
<li
key={todo.id}
className={todo.urgency === 1 ? 'urgent' : 'normal'}
onClick={()=>handleClick(todo.id)}
>
{todo.text}
{!!todo.urgency && '<--- This is urgent'}
</li>
);
return(
<React.Fragment>
<div>
Click on the todos!
</div>
<ul>
{todoItems}
</ul>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
li {
cursor: pointer;
}
.urgent {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
I have this sample :
<ul id="users"></ul>
<script type="text/x-kendo-template" id="myTemplate">
#if(isAdmin){#
<li>#: name # is Admin</li>
#}else{#
<li>#: name # is User</li>
#}#
</script>
<script type="text/javascript">
var templateContent = $("#myTemplate").html();
var template = kendo.template(templateContent);
//Create some dummy data
var data = [
{ name: "John", isAdmin: false },
{ name: "Alex", isAdmin: true }
];
var result = kendo.render(template, data); //render the template
$("#users").html(result); //append the result to the page
</script>
I would like to know if it possible to have a data which not exists and test with a function but apparently, it doesn't work ....
var data = [
{ isAdmin: false },
{ isAdmin: true }
];
Do you have a idea ?
Thanks for your help
In order to ensure there are no issues when using x-kendo-template, ensure to validate the data provided to the template.
For example if you provide:
var data = [
{ name: "John" },
{ name: "Alex", isAdmin: true }
];
To the template, you can modify the template to check like following:
<script type="text/x-kendo-template" id="myTemplate">
#if(typeof(isAdmin) != "undefined" && isAdmin != null){#
#if(isAdmin && name.length > 0){#
<li>#: name # is Admin</li>
#}else if(name.length > 0){#
<li>#: name # is User</li>
#} else {#
<li>No name provided</li>
#}#
#}#
</script>
Dojo example to demonstrate this.
I am developing a movie ticket reservation system in codeigniter.The user can select his seat by checking the box on each available seat.When I try to store the checked valued in session data i get an error.Below is my code.
View select_seat
<!DOCTYPE html>
<html>
<head>
<title>Select Seats</title>
<link rel="stylesheet" type="text/css" href="http://localhost/cinema/assets/css/form2.css"/>
</head>
<body>
<form method="post" action="http://localhost/cinema/Movies/select_combo" name="selectshow" accept-charset="utf-8" class="username">
<?php
$prevRowId = null;
$seatColor = null;
$tableRow = false;
//echo $result;
echo "<table width='100%' border='0' cellpadding='0' cellspacing='2'>";
foreach($query as $key=>$result)
{
$rowId = $result['rowId'];
$status = $result['status'];
$columnId = $result['columnId'];
$typeID=$result['seat_type_id'];
if ($prevRowId != $rowId) {
if ($rowId != 'A') {
echo "</tr></table></td>";
echo "\n</tr>";
}
$prevRowId = $rowId;
echo "\n<tr><td align='center'><table border='0' cellpadding='5' cellspacing='2'> <tr>";
} else {
$tableRow = false;
}
if ($status == 0) {
if($typeID==1)
$seatColor = "grey";
else if($typeID==2)
$seatColor="yellow";
else
$seatColor="white";
}
else {
$seatColor = "red";
}
echo "\n<td bgcolor='$seatColor' align='center'>";
echo "$rowId$columnId";
if ($status == 0)
{
echo "<input type='checkbox' name='seats[]' value='$rowId$columnId'></checkbox>";
}
echo "</td>";
if (($rowId == 'A' && $columnId == 6)
|| ($rowId == 'B' && $columnId == 7)
|| ($rowId == 'C' && $columnId == 7)
|| ($rowId == 'D' && $columnId == 7)
) {
// This fragment is for adding a blank cell which represent the "center aisle"
echo "<td> </td>";
}
}
echo "</tr></table></td>";
echo "</tr>";
echo "</table>";
mysql_close();
?>
<input type="submit" class="button-link" style="float:right; margin-top: 20px; margin-right:0px; margin-bottom: 10px;" value="Submit" />
</form>
</body>
</html>
Model
<?php
class Selectseat extends CI_Model {
public function __construct()
{
$this->load->database();
}
function get() {
return $this->db->query("SELECT * from seats order by rowId, columnId asc")
->result_array();
}
}
?>
Controller
function select_combo(){
foreach($this->input->post('seats[]') as $seat)
$data['seats']=$seat;
$this->session->set_userdata($data);
$this->load->model('combo_model');
$data['combos'] = $this->combo_model->get_combo();
$this->load->view('header');
$this->load->view('select_combo',$data);
}
I'm getting this error
A PHP Error was encountered
Severity: Warning
Message: Invalid argument supplied for foreach()
Filename: controllers/Movies.php
A quick finding:
You can't use as
$this->input->post('seats[]')
Instead
$seats = $this->input->post('seats');
Now seats having array of values.
You can change your code as below:
function select_combo(){
$data['seats']=$this->input->post("seats");
$this->session->set_userdata($data);
$this->load->model('combo_model');
$data['combos'] = $this->combo_model->get_combo();
$this->load->view('header');
$this->load->view('select_combo',$data);
}