I am searching data on the database in accordance to date range.
In the search box how can I make the data to be picked from the datapicker.
Here is my code :
public ActionResult List(DateTime startDate, DateTime endDate)
{
//var cards = new List<Card>();
//using (CardDBEntities _db = new CardDBEntities() )
//{
// cards = _db.Cards.ToList();
//}
using (var db = new CardDBEntities())
{
var cards = (from c in db.Cards
join d in db.RegistrationDTs
on c.CardId equals d.CardId
where d.RegistrationDateTime >= startDate &&
d.RegistrationDateTime <= endDate
select new Model
{
CardId = d.CardId,
Description = c.Description,
RegistrationDateTime = d.RegistrationDateTime
}).OrderByDescending(x => x.RegistrationDateTime)
.ToList();
ViewData["cards"] = cards;
return View();
and my view :
#using(Html.BeginForm())
{
<fieldset>
<legend>Search criteria</legend>
#Html.Label("startDate", "Start Date:")
#Html.TextBox("startDate", null, new { #class = "DateTime" })
#Html.Label("endDate", "End Date:")
#Html.TextBox("endDate", null, new { #class = "DateTime" })
<input type="submit" value="Apply" />
</fieldset>
Thank you in advance
You can use jQueryUI DatePicker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
</body>
</html>
Working JSFIDDLE: http://jsfiddle.net/18h8zfr8/
Just go through DatePicker API, you will find more options..
Related
With the older version of telerik, we had a snippet of code to find the number of childnodes as given below
function onUploadSelect(ev) {
var numberOfFiles;
if (ev.target.childNodes[1] != undefined && ev.target.childNodes[1] != null) {
numberOfFiles = ev.target.childNodes[1].childNodes.length;
}
if ((numberOfFiles + ev.files.length) > 4) {
//some custom validation error msgs being thrown
}
}
the basic logic of this code is to prevent uploading more than 4 files,
Ex - i select 2 files,dont click on upload instead select a file again and then click on upload, I'm good(2+1<4)
With the KEndo Uplaod, ev.target is undefined,
can you suggest a possible alternative for this?
Thanks
Adarsh
Please try with the below code snippet.
Kendo-HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section">
<input name="files" id="files" type="file" />
</div>
<script>
$(document).ready(function() {
$("#files").kendoUpload({
select: onSelect
});
});
function onSelect(e) {
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
var existingfileCount = $(".demo-section li").length;
if((e.files.length + existingfileCount) > 4)
{
alert("You can not upload more than 4 files");
e.preventDefault();
}
}
}
</script>
</body>
</html>
Kendo-MVC
Javascript
<script>
function onSelect(e) {
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
var existingfileCount = $(".demo-section li").length;
if((e.files.length + existingfileCount) > 4)
{
alert("You can not upload more than 4 files");
e.preventDefault();
}
}
}
</script>
View.cshtml
<div class="demo-section">
#(Html.Kendo().Upload()
.Name("files")
.Events(events => events.Select("onSelect"))
)
</div>
Note : I have used 'demo-section' class to simplyfy the code. If you want to rename this class then rename this class in html/cshtml and javascript.
Let me know if any concern.
Hi this is what you want ,
function onSelect(e) {
var ct = $('#Count').val();
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
ct= parseInt(ct == "" ? 0 : ct);
$('#Count').val(ct + e.files.length);
}
}
#Html.Hidden("Count")
to restrict user to not upload more then 4 file. If i understand right.
hey hi everyone i am try to insert new record using kendo grid.
it's work fine.
but i want to set hide and show.
when its new then hide second column.
only on this row not other all.
here is my code:-
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
, { UserId: 2, UserName: "Hood", IsAdmin: false }];
var t = $("#grid").kendoGrid({
dataSource: { data: users, pageSize: 10 }// binding data
,pageable: true
, selectable: "multiple row"
, toolbar: ["create"]
, columns: [
{ field: "UserId" }
, { field: "UserName"},
{ command: "destroy", title: " ", width: "100px" }
],
editable: true,
edit: function(e)
{
if(e.model.isNew())
{
$("td:nth-child(2)").css("display","none");
}
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="button" value="Iterate" onclick="iterate()"/>
<div id="grid"></div>
</body>
</html>
please help if is possible when insert new record hide there second td.
thanks.
Try this,
Below code set in document.ready
$(".k-button,.k-button-icontext,.k-grid-add").click(function(){
var activityGrid = $("#grid").data("kendoGrid");
activityGrid.hideColumn(1);
});
Updated Code:
var cnt = 1;
$(".k-button,.k-button-icontext,.k-grid-add").click(function () {
cnt = 0;
});
var hideFieldName = "UserName";
$(".k-textbox").live("focusin", function (e) {
if (cnt == 0) {
if ($(this).attr("name") == hideFieldName) {
if ($(this).closest('tr').index() == cnt) {
$(this).attr("readonly", "readonly");
}
}
}
});
So, below code worked as per your requirement. But in this case textbox was generated but user can't enter any value.
Let me know if any issue....
I'm trying to configure a Kendo grid and I'm having issues when trying to add properties such as sorting, grouping, etc. The grid works until I add the property, then it doesn't display any of the data. I have looked at the documentation on Kendo's site and it looks as if I have everything the same as theirs but obviously I'm nissing something.
Here is the View:
#model ExampleKendoUI.Models.HeaderVm
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>#Model.Name</div>
#section scripts {
<script>
// Output the data as JSON
var podata = #Html.Raw(Json.Encode(ViewBag.LineItems));
</script>
<div id="poGrid" class="k-content">
<script>
$(document).ready(function () {
$("#poGrid").kendoGrid({
dataSource: {
data: podata
},
// sortable:true, *** Uncommenting this will break the grid ***
columns: [
{
field: "Description",
title: "Desc"
},
{
field: "Quantity",
title: "Quantity"
}
]
});
});
</script>
</div>
}
Here is the controller:
namespace ExampleKendoUI.Controllers
{
public class SampleController : Controller
{
//
// GET: /Sample/
public ActionResult Index(int id)
{
var header = new HeaderVm()
{
Id = id,
Name = "Req ID"
};
var results = new List<PoLineVm>()
{
new PoLineVm()
{
Id = 1,
Description = "Some Product",
Quantity = 1.5
},
new PoLineVm()
{
Id = 2,
Description = "Another Product",
Quantity = 4.0
},
new PoLineVm()
{
Id = 3,
Description = "Last Product",
Quantity = 20
},
};
ViewBag.LineItems = results;
return View(header);
}}}
Here is the _Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
<link href="~/Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" />
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
<script src="/scripts/kendo/2012.3.1114/kendo.core.min.js"></script>
<script src="~/Scripts/kendo/2012.3.1114/kendo.data.min.js"></script>
<script src="~/Scripts/kendo/2012.3.1114/kendo.grid.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
You haven't included the required JavaScript files and the JavaScript error means that kendoSortable is missing. Check the documentation for the required JavaScript files: http://docs.kendoui.com/getting-started/javascript-dependencies
I need urgently to make a range datepicker for two dates :start date and end date.
Start date cannot be before date time now and end date cannot be before choosed start date.
Here is an example of what i want.Can somebody tell me what to use to make this?
http://rezervari.hotelalpin.ro/
this is what i tried but is not working:
</head>
#using (Html.BeginForm("SearchFree", "Reservation", FormMethod.Get,new {id = "form" }))
{
<h7>Introduceti perioada Rezervarii</h7>
<div class="editor-label">
<label id="cautare" for="StartDate">Data Intrare: </label>#(Html.JQueryUI().Datepicker("StartDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
<div class="editor-label">
<label id="cautare" for="EndDate">Data Iesire: </label>#(Html.JQueryUI().Datepicker("EndDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
<p>
<input id="buton1" type="submit" value="Cauta camere libere" />
</p>
}
<script type="text/javascript">
$(document).ready(function () {
$.validator.addMethod("EndDate", function (value, element) {
var startDate = $('.StartDate').val();
return Date.parse(startDate) <= Date.parse(value);
}
, "* End date must be after start date");
$('.form').validate();
});
</script>
The jquery UI datepicker has a date range option that you can use. You can set it up like this:
HTML:
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
Javascript:
$(function() {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
Should be able to do that with a JQuery date picker!
You can then use some Javascript/JQuery validation to alert the user if they enter a date outside the range you specify.
You can restrict the range of selectable dates using the minDate and maxDate options of jQuery datepicker. See an example here:
http://jqueryui.com/demos/datepicker/#min-max
<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
$(document).ready(function () {
$("#tbStartDate").datepicker({
//minDate: new Date(2007, 1 - 1, 1), //use for Date time now
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onSelect: function (dateText, inst) {
var $endDate = $('#tbStartDate').datepicker('getDate');
$endDate.setDate($endDate.getDate() + 1);
$('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
},
onClose: function (dateText, inst) {
//$("#StartDate").val($("#tbStartDate").val());
}
});
$("#tbEndDate").datepicker({
//minDate: new Date($("#tbStartDate").datepicker('getDate')),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onSelect: function (dateText, inst) {
$('#tbStartDate').datepicker("option", 'minDate', new Date($("#tbEndDate").datepicker('getDate')));
},
onClose: function (dateText, inst) {
//$("#EndDate").val($("#tbEndDate").val());
}
});
var $endDate = $('#tbStartDate').datepicker('getDate');
$endDate.setDate($endDate.getDate() + 1);
$('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); });
</script>
Can't get this to do anything. When I click 'Upload File' absolutely nothing happens as well as I don't see any of the flash rendered to the screen. I believe this is somehow related to the jquery, but I am not sure. PLEASE HELP! If someone can mail me a simple VS2010 solution with uploadify working to infinitimods at gmail.com that actually works I'd appreciate even more! Thanks a bunch!
My Layout file:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link type="text/css" rel="Stylesheet" media="screen" href="/Scripts/uploadify/uploadify.css" />
<script type="text/javascript" src="/Scripts/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" src="/Scripts/uploadify/jquery-1.4.2.min.js"></script>
</head>
<body>
#RenderBody()
</body>
</html>
My index file:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
#using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<script type="text/javascript">
$(document).ready(function () {
$("#file_upload").uploadify({
'uploader': '~/Scripts/uploadify/uploadify.swf',
'cancelImg': '~/Scripts/uploadify/images/cancel.png',
'buttonText': 'Upload foto',
'script': '/Home/UploadFiles',
'folder': '/Content/upload',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
'scriptData': { 'thisGuid': $("input#Id").val() },
'multi': false,
'auto': true,
'onError': function (event, queueID, fileObj, errorObj) {
alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
}
});
$("#btnSave").button().click(function (event) {
$('#file_upload').uploadifyUpload();
});
});
</script>
<input id="file_upload" type="file" />
<input type="button" id="btnSave" value="Upload file" />
<input id="Id" name="Id" type="hidden" value="5168e-yada-yada" />
}
My controller:
public class HomeController : Controller
{
/// <summary>
///
/// </summary>
/// <returns></returns>
[HttpGet]
public ActionResult Index()
{
return View("Index");
}
/// <summary>
///
/// </summary>
/// <param name="fileData"></param>
/// <param name="form"></param>
/// <returns></returns>
[HttpPost]
public string UploadFile(HttpPostedFileBase fileData, FormCollection form)
{
return "ok";
}
}
Uploadify requires jQuery. This means that you need to include the jQuery script before the uploadify script. If you had looked in your javascript debugging console you would have seen this error.
So, the layout:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Scripts/uploadify/uploadify.css")" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="#Url.Content("~/Scripts/uploadify/swfobject.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/uploadify/jquery-1.4.2.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js")"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase fileData, string thisGuid)
{
if (fileData != null && fileData.ContentLength > 0)
{
var appData = Server.MapPath("~/app_data");
var file = Path.Combine(appData, Path.GetFileName(fileData.FileName));
fileData.SaveAs(file);
}
return Json(new { status = true });
}
}
and the view:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(document).ready(function () {
$('#file_upload').uploadify({
'uploader': '#Url.Content("~/Scripts/uploadify/uploadify.swf")',
'cancelImg': '#Url.Content("~/Scripts/uploadify/images/cancel.png")',
'buttonText': 'Select photo',
'script': $('form').attr('action'),
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
'multi': false,
'auto': false,
'onError': function (event, queueID, fileObj, errorObj) {
alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
}
});
$('form').submit(function () {
$('#file_upload').uploadifySettings('scriptData', { thisGuid: $('#id').val() });
$('#file_upload').uploadifyUpload();
return false;
});
});
</script>
<h2>Index</h2>
#using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input id="id" name="id" type="hidden" value="5168e-yada-yada" />
<input id="file_upload" type="file" name="fileData" />
<input type="submit" value="Upload file" />
}
And if you want to kick the uploading process when the user selects a photo you could get rid of the form and the submit button and set the auto property to true:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(document).ready(function () {
$('#file_upload').uploadify({
'uploader': '#Url.Content("~/Scripts/uploadify/uploadify.swf")',
'cancelImg': '#Url.Content("~/Scripts/uploadify/images/cancel.png")',
'buttonText': 'Select photo',
'script': $('form').attr('action'),
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
'multi': false,
'auto': true,
'scriptData': { thisGuid: $('#id').val() },
'onError': function (event, queueID, fileObj, errorObj) {
alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
}
});
});
</script>
<h2>Index</h2>
<input id="id" name="id" type="hidden" value="5168e-yada-yada" />
<input id="file_upload" type="file" name="fileData" />
Also don't forget to checkout the uploadify documentation to better understand what the different options are used for and also you can see some examples.
You need to work around a bug with asp.net and flash.
This article helped me once: Working around flash cookie bug
Maybe this is a better solution: jquery file upload