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>
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 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.
In my ASP.NET MVC4 application, I have a view with "from" and "to" fields, for which I use a JQuery UI DatePicker control.
I'm using HtmlHelper to build my form, as the following code shows:
<p>
#Html.LabelFor(x => x.CustomerId)
#Html.DropDownListFor(x => x.CustomerId, new SelectList(Model.Customers, "Id", "Name"))
<span class="datePicker">
#Html.LabelFor(x => x.FromDate)
#Html.EditorFor(x => x.FromDate)
</span>
<span class="datePicker">
#Html.LabelFor(x => x.ToDate)
#Html.EditorFor(x => x.ToDate)
</span>
</p>
<p>
#Html.LabelFor(x => x.IsActiveOnly)
#Html.CheckBoxFor(x => x.IsActiveOnly)
</p>
On the model, I use the [DataType(DataType.Date)] and [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] attributes for the two DateTime properties, which renders the DatePicker correctly in Chrome - but without the default values - but not in IE or FF.
Is there a way to work with HtmlHelper (or with minimal JS) to display the DatePicker in all 3 browsers?
why not set the datePicker class to the texboxes as passing it to the TextBoxFor method's objectHtml attribute
#Html.TextBoxFor(model => model.FromDate, "{0:d}", new { #class = "datePicker"})
EDIT :
As as example to the above solution
#model MvcApplication3.Models.MVCTEST2
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.10.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$(".datePicker").datepicker();
})
</script>
<title>Index</title>
</head>
<body>
<div>
#Html.TextBoxFor(model => model.FromDate, "{0:d}", new { #class = "datePicker" })
</div>
</body>
</html>
TESTED on IE FF and GC
Hey there, total javascript noob here. Just wondering, I've set up some buttons inside ul tags using jquery selectable, which change colour when I click on them. One problem though, how do I make one of them select on the load of the page?
Thanks!
edit: here's my code:
<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
setLink('single');
$('#target').load($('#single a:first').attr('href'));
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
</script>
<style type="text/css">
#selectable .ui-selecting {
background-image:url(../images/nav-li-bcg.png);
}
#selectable .ui-selected {
background-image:url(../images/nav-li-bcg.png);
}
</style>
<script>
$(document).ready(function() {
$("#selectable").selectable();
$document.getElementById('current1').click();
});
</script>
</head>
<body>
<div id="tabs">
<div id="navigation">
<div id="single">
<div class="anchor1">
<ul id="selectable">
<li class="current1" id="current1"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li></ul>
</div>
<div class="clear"></div></div></div><!-- navigation -->
<div class="info">
<div class="top"></div>
<div id="target">
</div>
Simulate a click on document ready?
$(document).ready(function() {
$(".selectable .buttonSelector:first").click();
});
$('#myListItem').addClass('ui-selected');
I cannot for the life of me figure out why this postback sometimes does an ajax one as it is supposed to and sometimes it does not. Here is the relevant code:
JS:
<html>
<head>
<title>Index</title>
<link href="/Content/screen.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link href="/Content/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<link href="/Content/plugins/fancy-type/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/buttons/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/link-icons/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="/Content/jQueryUI/css/cupertino/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/HelpDesk.css" rel="stylesheet" type="text/css" />
<link href="/Content/droppy.css" rel="stylesheet" type="text/css" />
<link href="/Content/tablesorter.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.droppy.js" type="text/javascript"></script>
<script src="/Scripts/jquery.cascadingDropDown.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function () {
$('#nav').droppy();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#targetStartDate").datepicker();
$("#targetEndDate").datepicker();
$("#ticketsHTMLTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
$(".fakeLink").mouseover(function () {
$(this).css("color", "red");
});
$(".fakeLink").mouseout(function () {
$(this).css("color", "black");
});
});
</script>
</head>
Here is my View (Razor):
#using (Ajax.BeginForm("Index", "Problem", new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "ticketsTable",
InsertionMode = InsertionMode.Replace
}))
{
<div class="notice">
<div class="prepend-1 span-2">
<label for="targetPriorityID">
Priority</label>
</div>
<div class="prepend-1 span-3">
<label for="targetStatusID">
Status</label>
</div>
<div class="span-3">
<label for="targetBusinessUnitID">
Business Unit</label>
</div>
<div class="span-3 prepend-1">
<label for="targetStartDate">
Start Date</label></div>
<div class="span-3 prepend-2">
<label for="targetEndDate">
End Date</label></div>
<div class="prepend-1 span-3 last">
 
</div> <div class="prepend-1 span-2">
#Html.DropDownList("targetPriorityID",
new SelectList(ViewBag.Priorities as System.Collections.IEnumerable,
"ID", "Title"), "All", new { #onchange = " this.form.submit();" })
</div>
<div class="prepend-1 span-3">
#Html.DropDownList("targetStatusID",
new SelectList(ViewBag.Statuses as System.Collections.IEnumerable,
"ID", "Title"),"All", new { #onchange="this.form.submit();" })
</div>
<div class="span-3">
#Html.DropDownList("targetBusinessUnitID",
new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable,
"ID", "Title"), "All", new { #onchange = "this.form.submit();" })
</div>
<div class="span-3 prepend-1">#Html.TextBox("targetStartDate", "", new { onchange = "this.form.submit();" })</div>
<div class="span-3 prepend-2">#Html.TextBox("targetEndDate", "", new { onchange = "this.form.submit();" })</div>
<div class="prepend-1 span-3 last">
<input type="submit" value="Hide" />
</div>
<br />
<br />
<br />
</div>
}
<div id="ticketsTable">
#Html.Partial("_AllTickets", Model)
</div>
And finally the controller,
[HttpPost]
public ActionResult Index(int targetPriorityID = -1, int targetBusinessUnitID = -1, int targetStatusID = -1, string targetStartDate = "", string targetEndDate ="")
{
Repository<Priority> priorityRepository = new Repository<Priority>();
Repository<BusinessUnit> businessUnitRepository = new Repository<BusinessUnit>();
Repository<Status> statusRepository = new Repository<Status>();
ViewBag.Priorities = priorityRepository.GetAll();
ViewBag.BusinessUnits = businessUnitRepository.GetAll();
ViewBag.Statuses = statusRepository.GetAll();
var results = problemRepository.GetAll();
results = (targetPriorityID != -1) ? results.Where(t => t.PriorityID == targetPriorityID) : results;
results = (targetBusinessUnitID != -1) ? results.Where(t => t.BusinessUnitID == targetBusinessUnitID) : results;
results = (targetStatusID != -1) ? results.Where(t => t.StatusID == targetStatusID) : results;
results = (targetStartDate != "") ? results.Where(t => t.DateReported >= DateTime.Parse(targetStartDate)) : results;
results = (targetEndDate != "") ? results.Where(t => t.DateReported <= DateTime.Parse(targetEndDate)) : results;
if (Request.IsAjaxRequest())
{
return PartialView("__AllTickets", results);
}
return View(results);
}
Any thoughts?
I would suggest you to use normal form that will be AJAXified later:
#using (Html.BeginForm("Index", "Problem")
{
<div class="notice">
<div class="prepend-1 span-2">
<label for="targetPriorityID">Priority</label>
</div>
<div class="prepend-1 span-3">
<label for="targetStatusID">Status</label>
</div>
<div class="span-3">
<label for="targetBusinessUnitID">Business Unit</label>
</div>
<div class="span-3 prepend-1">
<label for="targetStartDate">Start Date</label></div>
<div class="span-3 prepend-2">
<label for="targetEndDate">End Date</label>
</div>
<div class="prepend-1 span-3 last">
 
</div>
<div class="prepend-1 span-2">
#Html.DropDownList("targetPriorityID", new SelectList(ViewBag.Priorities as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="prepend-1 span-3">
#Html.DropDownList("targetStatusID", new SelectList(ViewBag.Statuses as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="span-3">
#Html.DropDownList("targetBusinessUnitID", new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="span-3 prepend-1">
#Html.TextBox("targetStartDate", "")
</div>
<div class="span-3 prepend-2">
#Html.TextBox("targetEndDate", "")
</div>
<div class="prepend-1 span-3 last">
<input type="submit" value="Hide" />
</div>
<br />
<br />
<br />
</div>
}
<div id="ticketsTable">
#Html.Partial("_AllTickets", Model)
</div>
and then in a separate file AJAXify it:
$(function() {
$('form :input').change(function() {
var form = $('form');
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(result) {
$('#ticketsTable').html(result);
}
});
});
});
Another improvement I that I would suggest you is to use view models and get rid of ViewData and use strongly typed helpers.
One problem I can see is that your AJAX options in your Razor view specify the GET HTTP method, but the action filter on the controller action specifies POST.
I wonder if Request.IsAjaxRequest() is causing the problem. I would look at removing that code and always return PartialView("__AllTickets", results); instead.