I am working on MVC 5, there is have
#Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { #id = "DDLServiceCate", #class = "form-control " })
I want to do bootstrap multiselect dropdown with checkbox. For, I have tried:
<script src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('[id*=DDLServiceCate]').multiselect({
includeSelectAllOption: true
});
});
</script>
But after implementing this, look like below image.
But actually I want look like below image showing.
How can I do this ?
You can use this plugin.
Multiple Select (MultiSelect)
This is the working fiddle.
Here is a working sample
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
alert(message);
});
});
</script>
<body>
<select id="lstFruits" multiple="multiple">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Orange</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />
</body>
</html>
I have done,
<script src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('[id*=DDLServiceCate]').multiselect({
includeSelectAllOption: true, buttonWidth: '200px'
});
});
</script>
And Inside drowpdown I have added '#multiple = "multiple"'
#Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "None selected ", new { #id = "DDLServiceCate", #class = "form-control", #multiple = "multiple" })
Now showing checkboxes inside drowpdownlistfor.
Related
I installed LazyLoading jquery plugin and try to use it in my bootstrap mvc project. In examples that I saw, address of just one image is set to tag. I don't know how does it work.
How can I show all images by scrolling page. This is my Code.
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/scripts/js/modernizr.custom.js"></script>
<script src="~/Scripts/jquery.lazyload.js"></script>
<script src="~/Scripts/js/bootstrap.min.js"></script>
<!--Custom-Theme-files-->
<!--theme-style-->
<link href="~/Content/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/products.css" rel="stylesheet" type="text/css" media="all" />
<div class="LazyImage">
<div class="container">
<div>
<div class="col-md-9 ">
<div>
<div class="col-md-4 product-left p-left">
<div class="product-main simpleCart_shelfItem">
<img class="lazy" src="~/Content/images/grey.gif" data-original="../Content/images/LazyLoad/example.jpg" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
//threshold = 100,
//event = "sporty",
placeholder : "/Content/images/grey.gif",
event : "lazyload",
effect : "fadeIn",
effectspeed : 2000
});
});
$(window).bind("load", function () {
var timeout = setTimeout(function () {
$("img.lazy").trigger("lazyload")
}, 6000);
});
$(window).load(function () {
$("html,body").trigger("scroll");
});
</script>
i want date formate in dd/MM/yyyy
using js and css
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
my jquery script
$(function () {
$('#DateOfBirth').datetimepicker({
format: 'dd/mm/yyyy'
});
});
but output is
Tu/00/yyyy
Your format should be like this: "DD/MM/YYYY"
$(function () {
$('#DateOfBirth').datetimepicker({
format: "DD/MM/YYYY"
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div style="position: relative">
<input type="text" id="DateOfBirth" class="form-control" />
</div>
I have found this JSFiddle that clear text from input? http://jsfiddle.net/xavi3r/D3prt/
How do I use this for Html.TextBox in razor View in MVC and then refresh page?
So far my solution is this (it works):
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
//this part clean text from textboxes
$('#button').click(function () {
$(':input', '#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
//this part submit my search button - it is like refresh button, returns state as it was in begin - this is the same as I click on search without entering parameters
$('#button').click(function () {
document.myForm.onSubmit.click();
});
});
</script>
using (Html.BeginForm("Index", "LoginUser", FormMethod.Get, new { id = "form", name = "myForm"}))
{
<div class="form-group">
#Html.TextBox("order", Model.Search.Order, new { placeholder="Luška št.", id ="quantity1", #class="quantity form-control"})
<button type="submit" class="btn btn-primary" name="onSubmit">Search</button>
<input type="button" class="btn btn-primary" value="Clear" id="button" />
</div>
}
In _Layout:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
Realy thanks for help...
Your view will be rendered like this as html:
<div class="form-group">
<input type="text" name="order" id="quantity1" placeholder="Luška št." class="quantity form-control" value="SomeValue" />
<input type="button" />
</div>
and you can do it with this code:
$(function () {
$('.form-group input:button').click(function () {
$('input#quantity1').val('');
});
});
I tried many ways of using my app as a jquerymobile but didn't succeed.
I know I have to use pageinit instead of document ready. Can you please show me the right way to do it. When I add it, it just simply not working. Here is code
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
try {
$(function() {});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
<script>
$(document).ready(function() {
$("form").change(function() {
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<form name="myform" id="myform" method="get">
<label for="DogalGaz">Doğal Gaz</label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="">Seçiniz</option>
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
What i did was, just simply send the form data to test2.php file and process. Thank you for any help
The Flip Toggle Switch should have 2 options instead of 3.
Try this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', function() {
$("#myform").change(function() { // use #myform instead of form to only serialize one form.
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<!-- include action and method in case javascript handler fails -->
<form name="myform" id="myform" action="test2.php" method="post">
<label for="DogalGaz">Doğal Gaz. Seçiniz: </label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
</body>
</html>
This will post to test2.php every time you switch the toggle.
I am using Kendo UI Grid to show mail list, when i click on a row, i need to select a row and show mail body in editor from mail object which i already have in client side.
But can not get the selected row value.
Here is the view code:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MVC3toHTML5.Models.MailModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("/Content/web/kendo.common.min.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("/Content/web/kendo.rtl.min.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("/Content/web/kendo.default.min.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("/Content/shared/examples-offline.css") %>" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("/Scripts/modernizr-1.7.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("/Scripts/jquery.min.js") %>"></script>
<script src="<%= Url.Content("/Scripts/kendo.web.min.js") %>"></script>
<script src="<%= Url.Content("/Scripts/kendo.aspnetmvc.min.js") %>"></script>
<script src="<%= Url.Content("/Scripts/console.min.js") %>"></script>
<script src="<%= Url.Content("/Scripts/prettify.min.js") %>"></script>
</head>
<body>
<div style="font-size:medium;">
<%: Html.Kendo().Grid(Model.mailList)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.MailId).Width(200);
columns.Bound(p => p.From.Value).Width(200);
columns.Bound(p => p.Subject).Width(200);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Events(events => events.Change("Grid_OnRowSelectUID"))
)
.Selectable()
%>
</div>
<div style="margin-left:220px;">
<% Html.Kendo().Editor()
.Name("Editor")
.HtmlAttributes(new { style = "width: 740px;height:440px;" })
.Render();
%>
<script type="text/javascript">
function Grid_OnRowSelectUID() {
var dataSource = new kendo.data.DataSource({
change: function (e) {
alert("datasource");
}
});
dataSource.bind("change", function (e) {
alert("Bind");
});
}
</script>
</div>
</body>
</html>
Controller is as follows:
namespace MVC3toHTML5.Controllers
{
public class Home2Controller : Controller
{
public ActionResult Index()
{
MailModel mailModelobj = new MailModel();
mailModelobj.GetMailList();
return View(mailModelobj);
}
}
}
I am getting mail from webservice.
What is the correct way to achieve that ?
Use the change event of the Grid not the change event of the dataSource.
<%: Html.Kendo().Grid(Model.mailList)
.Name("Grid")
.Selectable()
.Events(ev=>ev.Change("onSelectRow"))
//...
<script>
function onSelectRow(e){
var currentSelectedItem = this.dataItem(this.select());
alert(currentSelectedItem.SomeProp);
$('#Editor').data().kendoEditor.value(currentSelectedItem.SomeProp);
}
</script>