We Keep Coding

Vue.Draggable div items display left and right

I am new to Vue.js and for this project, I am using Vuedraggable to drag items. Currently, the items inside the draggabble div are displayed as
Text 1
Text 2
Text 3
Text 4
Is there a way we can change that and display as
Text 1 Text 2
Text 3 Text 4
JsFiddle Link = https://jsfiddle.net/ujjumaki/y1xw95rc/41/
View
<div id="app">
<div>
<draggable id="first" data-source="juju" :list="todos" class="list-group" draggable=".item">
<div class="list-group-item item" v-for="(element, index) in todos" :key="index" style="border-style: outset;
margin-top:0.5%; width: 10%; border-color:#17a2b8; border-width:thin;">
<p>
{{element.text}} id {{element.id}}
</p>
</div>
</draggable>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs#1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
Method
new Vue({
el: "#app",
data: {
todos: [
{ text: "Text 1", id: "1" },
{ text: "Text 2", id: "2" },
{ text: "Text 3", id: "3"},
{ text: "Text 4", id: "4" }
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})

Try to add following css:
#first {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
text-align: center;
}
.list-group-item {
width: 100% !important;
}

How to display selected list below select box container?

I am making an application where I have multi select dropdown..
In which there is a requirement that I need to place the selected items below the select container.
Working Snippet:
#container {
position: relative;
text-align: left;
width:100%;
}
#container > div {
padding-top: 2em;
}
._2iA8p44d0WZ {
border: 1px solid #cccccc;
border-radius: 4px;
padding: 5px;
min-height: 22px;
position: relative;
}
._7ahQImy {
padding: 4px 10px;
background: #0096fb;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 10px;
display: inline-flex;
align-items: center;
font-size: 13px;
color: #fff;
white-space: nowrap;
}
#search_input {
position: absolute;
top: 0;
left: 0;
}
<div id="container">
<div class="_2iA8p44d0WZ">
<span class="chip _7ahQImy">This is the main label</span>
<span class="chip _7ahQImy false false">secondary label</span>
<span class="chip _7ahQImy">Another label</span>
<span class="chip _7ahQImy false false">even more labels labels labels labels labels labels</span>
<input type="text" class="searchBox" id="search_input" placeholder="Select" autocomplete="off" value="">
</div>
</div>
The above one provides the result of making the selected items and select box inside a container.
Expected Output
|------ (#container) Start -----|
| --------------------- |
| | Search Input | |
| --------------------- |
| |
|------ (#container) End -------|
| This is the main label |
| secondary label |
| Another label |
| even more labels labels labels labels labels labels |
Note:
-> I cannot modify any of the HTML elements given.
-> There are some dynamic classes inside it for which I cannot modify the css classes for those dynamic classes.
-> List of dynamic classes for which css properties cannot be modified, _2iA8p44d0WZ and _7ahQImy .
-> List of ids/classes, I can modify the css properties are #container and .chip (span).
The exact library that I am trying to modify in my real app is here along with css code,
Please help me to place the selected items below the container box as like the above given expected result.

You can hide the internal chips of the multi-select using the style prop.
CSS Customization
style={{
chips: {
display: 'none',
}
}}
Now you need to render your selectedValues outside the Multiselect component. In order to do this you need to update your state.selectedValues state array, and map state.selectedValues to your own custom chip components.
Add an onSelect callback.
onSelect={(selectedValues) => this.setState({ selectedValues })}
Map state.selectedValues to "chips". I used a span, but you can use any wrapping element and style it accordingly.
<div>
{selectedValues.map((chip) => (
<span>{chip.key}</span>
))}
</div>
Fullcode
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
plainArray: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
objectArray: [
{ key: "Option 1", cat: "Group 1" },
{ key: "Option 2", cat: "Group 1" },
{ key: "Option 3", cat: "Group 1" },
{ key: "Option 4", cat: "Group 2" },
{ key: "Option 5", cat: "Group 2" },
{ key: "Option 6", cat: "Group 2" },
{ key: "Option 7", cat: "Group 2" }
],
selectedValues: [
{ key: "Option 1", cat: "Group 1" },
{ key: "Option 2", cat: "Group 1" }
]
};
this.style = {
chips: {
background: "red"
},
searchBox: {
border: "none",
"border-bottom": "1px solid blue",
"border-radius": "0px"
},
multiselectContainer: {
color: "red"
}
};
}
render() {
const { objectArray, selectedValues } = this.state;
return (
<div className="App">
<h4 id="checkbox" className="mt40 mx20">
<b>
{" "}
How can I customize the css for below below multi select to display
only select box inside container and selected items after container
box?{" "}
</b>
</h4>
<Multiselect
options={objectArray}
displayValue="key"
onSelect={(selectedValues) => this.setState({ selectedValues })}
showCheckbox={true}
selectedValues={selectedValues}
style={{
chips: {
display: "none"
}
}}
/>
<div>Some Content</div>
<div>Some More Content</div>
<div>
Selected Values:
{selectedValues.map((chip) => (
<span>{chip.key}</span>
))}
</div>
</div>
);
}
}
Edit
To enable removing selected items then also implement the onRemove callback. To duplicate the chip style copy the applied chip CSS rules to your own style object.
const styles = {
chip: {
padding: "4px 10px",
background: "#0096fb",
marginRight: "5px",
marginBottom: "5px",
borderRadius: "10px",
display: "inline-flex",
alignItems: "center",
fontSize: "13px",
color: "#fff",
whiteSpace: "nowrap"
}
};
Also start with empty selected state
this.state = {
plainArray: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
objectArray: [
{ key: "Option 1", cat: "Group 1" },
{ key: "Option 2", cat: "Group 1" },
{ key: "Option 3", cat: "Group 1" },
{ key: "Option 4", cat: "Group 2" },
{ key: "Option 5", cat: "Group 2" },
{ key: "Option 6", cat: "Group 2" },
{ key: "Option 7", cat: "Group 2" }
],
selectedValues: []
};
...
<Multiselect
options={objectArray}
displayValue="key"
onSelect={(selectedValues) => this.setState({ selectedValues })}
onRemove={(selectedValues) => this.setState({ selectedValues })} // <-- implement
showCheckbox={true}
selectedValues={selectedValues}
style={{
chips: {
display: "none"
}
}}
/>
...
<div>
Selected Values:
{selectedValues.map((chip) => (
<span key={chip.key} style={styles.chip}> // <-- set chip style prop
{chip.key}
</span>
))}
</div>

getting specific json object array entered in textbox

I have html file , and JSON file . In html file , I have created textbox with button to enable the user to enter a course name . In JSON I have an array of course objects contains some information regarding the course .
I want to use Ajax with jQuery when the user enter a course and hit the button it should loop the array in json to check whether this value is found or not . If it is found then show the details of this course .
This is my trying .
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Finding Course Details</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#btn').click(function() {
var result = $('#div1');
result.html('');
var data1 = $('#text1').val();
$.ajax({
url: 'course.json',
method: 'get',
data: data1,
dataType: 'json',
success: function(response) {
result.html('level: ' + response.course[0].level + '<br/>' + 'Theoretical hours :' + response.course[0].Theoretical + '<br/>' + 'Practical hours :' + response.course[0].Practical);
}
});
});
});
</script>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header,
footer {
padding: 1em;
color: black;
background-color: white;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
a:hover {
color: blue;
background-color: transparent;
text-decoration: underline
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<img src="9.jpg" width="300" height="200" alt="">
</header>
<nav>
<ul>
<li>Main
</li>
<li>Courses
</li>
</ul>
</nav>
<article>
<h1>Course Details</h1>
<form>
Enter Course Name :
<br/>
<input type="text" id="text1">
<input type="button" id="btn" value="Get Course Details">
<br/>
</form>
<div id="div1"></div>
</article>
<footer>B</footer>
</div>
</body>
</html>
This is json code :
{
"course" : [
{
"name":"Computer Programming",
"level" : "level 1",
"Theoretical" : "4",
"Practical" : "2"
},
{
"name":"Web Technologies",
"level" : "level 2",
"Theoretical" : "2",
"Practical" : "2"
},
{
"name":"Project",
"level" : "level 4",
"Theoretical" : "2",
"Practical" : "2"
}
]
}

get the specific json by user entered data using $.grep
var data = {
"items": [{
"id": 1,
"category": "cat1"
}, {
"id": 2,
"category": "cat2"
}, {
"id": 3,
"category": "cat1"
}]
};
var returnedData = $.grep(data.items, function (element, index) {
return element.id == 1;
});
alert(returnedData[0].id + " " + returnedData[0].category);

Vanilla JavaScript solution:
var searchItem = "Web Technologies"
var jsonCourses = {
"course" : [
{
"name":"Computer Programming",
"level" : "level 1",
"Theoretical" : "4",
"Practical" : "2"
},
{
"name":"Web Technologies",
"level" : "level 2",
"Theoretical" : "2",
"Practical" : "2"
},
{
"name":"Project",
"level" : "level 4",
"Theoretical" : "2",
"Practical" : "2"
}
]
};
var details = jsonCourses.course.filter(function(i){
if(i.name === searchItem)return i
})
alert("Course:"+details[0].name+"|Level:"+details[0].level)

Kendo grid Hyperlink

I have a table with 4 columns. [ID,FIRSTNAME,LASTNAME,ADDRESS]. I am displaying the 3 cloumns[ID,FIRSTNAME,LASTNAME] on the kendogrid. What i am trying to do is on clicking the FIRSTNAME it should display the ADDRESS on a new window.But i am not getting it. I tried to get the link on the FIRSTNAME but dont know how to proceed later. i am new to this concept.Below is my code.Do i need to create a kendo grid for the Address or how it works.What i want is a hyperlink on ID to show ADDRESS.
Thanks.
Grid = $("#grid").kendoGrid({
dataSource:gridDS,
height: 450,
pageable: false,
sortable: true,
binding: true
columns: [
{
field: "ID",
title: "ID",
headerTemplate: '<span class="tbl-hdr">ID</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
},
width: 85
},
{
field: "FIRSTNAME",
title: "FIRSTNAME",
headerTemplate: '<span class="tbl-hdr">FIRSTNAME</span>',
template: '#=ADDRESS#',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
},
width: 25
},
{
field: "LASTNAME",
title: "LASTNAME",
headerTemplate: '<span class="tbl-hdr">LASTNAME</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
},
width: 85
},
{
command: [
{
name: "destroy",
template: "<div class='k-button delete-btn'><span class='k-icon k-delete'></span></div>",
text: "remove"
},
{
text: "Edit",
template: "<div class='k-button edit-btn'><span class='k-icon k-edit'></span></div>",
},
],
width: 40,
attributes: {
style: "vertical-align: top; text-align: center;"
}
},
],
editable: "popup"
}).data('kendoGrid');
}

I think this is not a kendo issue, is pretty much about JS/jQuery. What I suggest is to bind an event on the grid to get all click events from that link in your template. Then, you can get the clicked dataItem with the row data of it.
.on("click", "a.name-link", function() {
var tr = $(this).closest("tr");
var dataItem = $("#grid").data("kendoGrid").dataItem(tr);
window.alert(dataItem.Address);
});
Working Demo
What is unclear is how you want to open a new window with the Address. What you mean:A fresh new browser tab/window or anything like a JS Popup inside your app?
If you want a new browser tab/window, you should pass the row id to it using window.open() and then in this window, you will have to hit the database again to show the information. Now, if want a javascript popup(e.g. Bootstrap's Modal) inside your app, you can use the previous retrieved dataItem to fill it. The information is already there.

I updated the code. You can click on firstName to view address.
If you want to go a little bit further, you can click on Address button to view address in pop-up window.
Sample at Telerik Kendo UI Dojo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<style type="text/css">
a {
cursor: pointer;
text-decoration: underline;
}
.k-grid-update {
display: none;
}
</style>
</head>
<body>
<script id="row-template" type="text/x-kendo-tmpl">
<a onclick="display('#=address#')">#=firstName#</a>
</script>
<script id="popup-editor" type="text/x-kendo-template">
#=address#
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "firstName", template: kendo.template($("#row-template").html()) },
{ field: "lastName" },
{ command: [{ name: "edit", text: { edit: "Address", cancel: "Close", update: "Close" } }]
}
],
dataSource: {
data: [
{ id: 1, firstName: "Jane", lastName: "Doe", address: "123 Street" },
{ id: 2, firstName: "John", lastName: "Doe", address: "456 Street" }
],
schema: {
model: { id: "id" }
}
},
editable: {
mode: "popup",
window: { title: 'Address' },
template: kendo.template($("#popup-editor").html())
}
});
function display(address) {
alert(address);
}
</script>
</body>
</html>

Axis Y and X labels in Kendo UI chart

How could I set a horizontal title for X axis and a vertical title for axis Y in Kendo chart ?
For example , for this chart I want to set titles (Month and VISITORS) as in this image -

valueAxis:[{
title: {
text: "My Text X"
}
}],
title:{
text: "My Text Y",
position: "bottom"
}

Thanks for this, it was very helpful when solving my problem, which was similar. I edited the example accordingly: http://dojo.telerik.com/OBOZefEr/2 I've put the entire code snipped below, you're welcome to run it from here.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
},
title: {
text: "VISITORS"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
},
title: {
text: "Month"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>