I have the following selectize.js :
$("#abc").selectize({
valueField: 'name',
labelField: 'name',
searchField: ['name'],
plugins: ['remove_button'],
createOnBlur: true,
maxItems: 10,
preload: true,
create:function (input){
callback({ name:'Cricket', name:'Football', name : 'Tennis'})
},
});
The html code is :
<select id="abc" name="sport[]"></select>
I want the Cricket, Football, Tennis to pre load, Means it should be auto loaded on page load. But the options are not loading, What am i missing ?
Seems like you might just be looking for the options property to set the initial list of selection options and the items property to select the ones you want defaulted. If so, you don't need the create function (which is there to enable you to customize the handling of user entered options). See below.
$('#abc').selectize({
options: [
{name: 'Cricket'},
{name: 'Football'},
{name: 'Tennis'}
],
items: [
'Cricket',
'Football',
'Tennis'
],
valueField: 'name',
labelField: 'name',
searchField: ['name'],
plugins: ['remove_button'],
createOnBlur: true,
maxItems: 10,
preload: true
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selectize</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
</head>
<body>
<form action="" method="POST">
<input id="abc" name="abc" type="text" />
<button type="submit">Submit</button>
</form>
</body>
</html>
Related
I want to add a "Start Chat" button for every individual user in the last column to this JavaScript based table with data fetched from PHP database. I don't wish to use <TR><TD> table model cause its not attractive as this one. Also this one has a filter, sorting and search option included in the table. Which makes easier usability with more functions.Have Attached photos for the same...
the one with heading "User List" is the output of code written below.
<?php
session_start();
include("include/connection.php");
if(isset($_SESSION['Username1']))
{
//print_r($_SESSION['Username']);
}
else{
header("location:AdminSignIn.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type href="Images/favicon.ico">
<title>Admin Panel</title>
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/Admin.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/Admin.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<style>
</style>
</head>
<body>
<div class="navigation"> The Admin Panel </div>
<div class="split Sidebar" id="SB" style="color:#000000;">
<div class="sidebar_text" id="Connect">Connect</div>
</div>
<!--- Start Of Admin Connection --->
<div class="split Connect_Content" id="Connect_Cnt">
<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet">
<div class="container" style="width:100%;height:95%;margin:1%;">
<div class="col-md-12">
<div class="panel panel-success" style="background-color:#ffffff;color:#000000;font-size:20px;">
<div class="panel-heading" style="background-color:#000000;color:#ffffff;font-family:Monotype Corsiva; font-size:30px; font-weight:bold;">
User List
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table style="text-align:center;" id="table"
data-show-columns="true"
data-auto-refresh="true"
>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
var $table = $('#table');
$table.bootstrapTable({
url: 'include/UserConnectList.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 3,
columns: [{
field: 'TbID',
title: 'ID',
sortable: true,
},
{
field: 'TbUsername',
title: 'Username',
sortable: true,
},
{
field: 'TbAge',
title: 'Age',
sortable: true,
},
{
field: 'TbGender',
title: 'Gender',
sortable: true,
},
{
field: 'TbCountry',
title: 'Country',
sortable: true,
},
{
field: 'TbOnline',
title: 'Status',
sortable: true,
},
{
field: 'TbLogin',
title: 'Last Login Time',
sortable: true,
},
{
field: 'TbAccess',
title: 'Access',
sortable: true,
},
{
field: '<button type="submit" class="btn btn-info btn-xl start_chat"></button>',
title: 'Start Chat',
sortable: false,
},
],
});
$(function() {
var auto_refresh = setInterval(function () {
var t = Date.now();
$('#show').load('UserConnectList.php' + t);
}, 5);
});
</script>
</div>
<!--- End Of Admin Connection --->
</body>
</html>
<?php
/* UserConnectList.php*/
require 'connection.php';
$sqltran = mysqli_query($connection, "SELECT * FROM users ")or die(mysqli_error($connection));
$arrVal = array();
$i=1;
while ($rowList = mysqli_fetch_array($sqltran)) {
$name = array(
'TbID' => $i,
'TbUsername' => $rowList['Username'],
'TbGender' => $rowList['Gender'],
'TbAge' => $rowList['Age'],
'TbCountry' => $rowList['Country'],
'TbOnline' => $rowList['Online'],
'TbLogin' => $rowList['LoginDate'],
'TbAccess' => $rowList['Status'],
);
array_push($arrVal, $name);
$i++;
}
echo json_encode($arrVal);
mysqli_close($connection);
?>
Use render to generate the HTML. Notice that I used backticks on that line so that I could insert the ID variable into data-id
{
field: 'TbID',
title: '',
render: value => `<button class="btn btn-info btn-xl start_chat" data-id="${value}">Start Chat</button>`
}
Then create a listener for your buttons
$table.on('click', '.start_chat', function() {
const userId = this.getAttribute('data-id');
// function code here
}
I want to filter KendoDropDownList datasource data by presenting an ID in array.
As far as I know there is no such built-in filters that's why I decided to created CSV list with identifiers and use contains filter. But unfortunately this approach seems to be not working. Please see my fiddle below: https://dojo.telerik.com/igEREXUT
Can anybody explain why contains is not working? I would expect to see first and third item.
$(document).ready(function() {
var data = [{
text: "Black",
value: "1",
Clients: "-100-,-101-,-103-" //this should be displayed after filtering
},
{
text: "Orange",
value: "2",
Clients: "-200-,-101-,-303-"
},
{
text: "Grey",
value: "3",
Clients: "-300-,-102-,-103-" //this should be displayed after filtering
}
];
// create DropDownList from input HTML element
$("#color").kendoDropDownList({
dataTextField: "Clients",
dataValueField: "value",
dataSource: data,
index: 0
});
var color = $("#color").data("kendoDropDownList");
color.select(0);
setTimeout(function() {
console.log('count before filtering: ' + color.dataSource.view().length);
color.dataSource.filter([{
field: "Clients",
op: "contains",
value: "-103-"
}]);
console.log('count after filtering: ' + color.dataSource.view().length);
}, 1000);
});
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdownlist/index">
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="cap-view" class="demo-section k-content">
<h4>Customize your Kendo Cap</h4>
<h4><label for="color">Cap Color</label></h4>
<input id="color" value="1" style="width: 100%;" />
</div>
</div>
</body>
</html>
You have to use operator property instead of op in color.dataSource.filter method.
Refernce link
I have a js-GRID which when loading is default set to filtering in the upper right section. look at here please
How will I set it to be default in inserting? I mean how will the filtering being displayed to the top instead of the + inserting button?.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jsGrid - Custom View Scenario</title>
<link rel="stylesheet" type="text/css" href="demos.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
<script src="../external/jquery/jquery-1.8.3.js"></script>
<script src="db.js"></script>
<script src="../src/jsgrid.core.js"></script>
<script src="../src/jsgrid.load-indicator.js"></script>
<script src="../src/jsgrid.load-strategies.js"></script>
<script src="../src/jsgrid.sort-strategies.js"></script>
<script src="../src/jsgrid.field.js"></script>
<script src="../src/fields/jsgrid.field.text.js"></script>
<script src="../src/fields/jsgrid.field.number.js"></script>
<script src="../src/fields/jsgrid.field.select.js"></script>
<script src="../src/fields/jsgrid.field.checkbox.js"></script>
<script src="../src/fields/jsgrid.field.control.js"></script>
<style>
.config-panel {
padding: 10px;
margin: 10px 0;
background: #fcfcfc;
border: 1px solid #e9e9e9;
display: inline-block;
}
.config-panel label {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Custom View</h1>
<div class="config-panel">
<label><input id="heading" type="checkbox" checked /> Heading</label>
<label><input id="filtering" type="checkbox" checked /> Filtering</label>
<label><input id="inserting" type="checkbox" /> Inserting</label>
<label><input id="editing" type="checkbox" checked /> Editing</label>
<label><input id="paging" type="checkbox" checked /> Paging</label>
<label><input id="sorting" type="checkbox" checked /> Sorting</label>
<label><input id="selecting" type="checkbox" checked /> Selecting</label>
</div>
<div id="jsGrid"></div>
<script>
$(function() {
$("#jsGrid").jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control", modeSwitchButton: false, editButton: false }
]
});
$(".config-panel input[type=checkbox]").on("click", function() {
var $cb = $(this);
$("#jsGrid").jsGrid("option", $cb.attr("id"), $cb.is(":checked"));
});
});
</script>
</body>
</html>
The easiest solution (a bit hacky) would be just click on mode button after grid initialization:
// initialization is here
$("#jsGrid").find(".jsgrid-mode-button").click();
Showing filter by default is the behavior of control field. A better way would be creating a custom field with the expected behavior inheriting from control field.
I am using Kendo Grid in my web app and including kendo.all.min.js file. The version of this js file is 2012.1.515.
In the grid, columns are not resizeable in IE 10 and IE 11 though it works fine in all other browsers.
I have created a sample of grid and included the same file but grid columns are not resizeable in IE 10 and IE 11.
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
<link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
</head>
<body>
<div id="main">
<h1 id="exampleTitle">
<span class="exampleIcon gridIcon"></span>
<strong>Grid /</strong> Column resizing </h1>
<div id="theme-list-container"></div>
<div id="exampleWrap">
<script>preventFOUC()</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
gridDataSource = new kendo.data.DataSource({
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
scrollable: true,
resizable: true,
columns: [
{
field: "OrderDate",
title: "Order Date"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date"
},
{
field: "OrderID",
title: "ID"
}
]
});
});
</script>
</div>
</div>
</div>
</body>
</html>
Thanks
I think, you need to specify width for every columns to resize. Something like:
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 50px
}
I hope this is helpful.
I had some problems with clicking in ie10 and 11. Telerik advised me to update my js and css with latest edition. Which eventually solved my problem. Try update your kendo version to something on 2013. They have 4/5 updates on 2013, go for 3/4th one.
I'm trying to display set of data using "jq grid". For that I used below code, But it's showing only empty rows without data.Can anyone figure-out what is wrong in this code ?
I'm getting data by using ajax.So the "response" will get a data like this
{ID:"id1", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"}!{ID:"id3", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"}
After get data, split it and adding to an array.Then trying to display it.
This is .JSP file
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="grid/css/ui.jqgrid.css" />
<script src="grid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Scheduled SMS</title>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
datatype: "local",
colNames:['ID','Message', 'Date','Time','status'],
colModel :[
{name:'ID', index:'ID', width:60},
{name:'Message', index:'Message', width:200},
{name:'Date', index:'Date', width:90, align:'right'},
{name:'Time', index:'Time', width:90, align:'right'},
{name:'status', index:'status', width:80, align:'right'}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
viewrecords: true,
gridview: true,
caption: 'Single SMS'
});
$.ajax({
type : "GET",
url : "ScheduledClass",
data : {
type : "getSingleScheduledMsg"
}
})
.success(function(response,status){
tableResult = response;
var tableData = [];
tableData=tableResult.split("!");
for(var i=0;i<tableData.length;i++)
jQuery("#list").jqGrid('addRowData',i+1,tableData[i]);
})
.error(
function() {//error !!!!!
});
});
</script>
</head>
<body>
<div id="wrapper" style="height: 100%;">
<div id="content_box" style="width: 600px;">
<div class="ui-widget">
<div class="ui-widget-header">Edit Scheduled SMS</div>
<div>
<div class="ui-widget-content">
<div style="padding: 10px 10px 10px 10px;">
<Form name="EditScheduledSMS" method="post"
id="EditScheduledSMS style="display: inline;">
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
......//closing tags...........
The final picture is like this:
tableData[i] should be an object you have it as a string, if you convert your substrings to json strings you can try JSON.parse to change it into an object.
Also if your using ajax to populate the grid, why use local as the datatype, jqgrid already uses ajax to populate the grid if you specify a url and a different data type.