In my view I have a kendo dropdownlist. I´ve implement jQuery validation inserting these scripts in the view:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
I've set the property as Required in the entity and all I need to perform the validation.
Model:
[Required(ErrorMessage = "Campo Tipo de Llenado es necesario")]
public int TipoLlenado { get; set; }
View:
#(Html.Kendo()
.DropDownListFor(model => model.pedidoGranelAutoEs.TipoLlenado)
.BindTo(new SelectList(cmbTipoLlenado.Select(s => new { Key = s.IdDatoMaestro, Value = s.ValorPortal }), "Key", "Value"))
.Events(events =>
{
events.Select("selectTipoLlenado");
})
.OptionLabel(Idioma.Shared.Pedidos_SeleccioneOpcion)
)
#Html.ValidationMessageFor(model => model.pedidoGranelAutoEs.TipoLlenado)
The thing is that if I inspect the web with Chrome and remove the "display:none" style from the input generated by the kendo DropDownList (using Razor), and then press the Submit button the validation works fine.
I've tried the following solutions without result:
$(document).ready(function () {
$('#formu').validate({
ignore: []
});
}
OR
$(document).ready(function () {
$('#formu').validate({
ignore: ':hidden'
});
}
OR
$.validator.setDefaults({ ignore: []});
OR
$.validator.setDefaults({ ignore: ':hidden' });
Any advise??
Thanks in advance!!
I've found the mistake.
It was that I have to write the line:
$.validator.setDefaults({
ignore: []
});
outside of $(document).ready(function () {...}
Related
Within sitefinity I am create a widget that I want to initialize KendoGrid and populate the data. For the widget do I need to add the javascript onto the view or is there another way?
The kendo scripts and styles have to be included on the page one way or the other.
You do it either via the view of the widget or (if you use them on many places) you may include them in the main page template.
Some people like to also bundle them into a single local file, as opposed to downloading them from the kendo cdn.
Update:
Controller:
[HttpGet]
public ActionResult Index()
{
// fill the model with data
var model = InitializeModel();
return View("Index", model);
}
Index view
#using Telerik.Sitefinity.Modules.Pages;
#using Telerik.Sitefinity.Frontend.Mvc.Helpers;
#using Newtonsoft.Json;
#using Telerik.Sitefinity.Services;
#using Telerik.Sitefinity.UI.MVC;
#model List<SitefinityWebApp.Mvc.Models.Country>
#if (!SystemManager.IsDesignMode)
{
#Html.Script(ScriptRef.JQuery, "top")
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.web.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<div id="grid"></div>
<script>
var data = #Html.Raw(JsonConvert.SerializeObject(Model));
$(function () {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: { id: "Id" }
},
pageSize: 10
},
pageable: true,
scrollable: false,
persistSelection: true,
sortable: true,
columns: [
{ selectable: true, width: "50px" },
{ field: "Title", title: "Country" },
{ field: "CountryCode", title: "Country Code" },
{ field: "CurrencyCode", title: "Currency Code" },
{ field: "Id" }]
});
})
</script>
}
Just started on a vue tutorial and am simple stuck within the first 5 minutes trying to follow their example - these are my 2 files ( i try to start without building a vue project but include it directly in the html ).
the on Input works but the part with myFunc isn't working ( it should work according the tutorial but not in my end ) - the result i get on screen is this :
output
The code here - very simple - anyone can help what it is i'm doing wrong ?
index.html
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<script src="jsTest.js"></script>
<div id ="app">
<h3>hello</h3>
<div>input:
<input v-on:input="onInput"/>
</div>
output:
{{ myFunc }}
<div v-html ="myFunc" />
</div>
</div>
</div>
</body>
jstest.js
console.log ("wew");
new Vue({
el :"#app",
data: {
textInput :''
},
computed: {
myFunc : function () {
this.textInput = "*";
}
},
methods : {
onInput : function (event) {
this.textInput = event.target.value;
}
}
});
Your code has many errors.
data should return an object
The computed should be use to display a (formatted) value
Here is you code corrected :
Working codepen : https://codepen.io/Andugal/pen/yLYOmMq?editors=1111
new Vue({
el :"#app",
data () {
return {
textInput :''
}
},
computed: {
myFunc : function () {
return this.textInput
}
},
methods : {
onInput : function (event) {
this.textInput = event.target.value;
}
}
});
I am using Select2's Loading Remote Data Functionality.The problem is that data is not getting loaded on the dropdownlist.On keypress remote function is getting called and data is returning properly,but its not showing in dropdownlist.
HTML
<div class=" form-group col-md-4" data-url="#Url.Action("GetStudentWalkInnName")" id="WalkinnName">
<div>
<label for="txtEmployee" class=" control-label">
Name
</label>
</div>
<div>
<select class="form-control " id="ddlName"></select>
</div>
</div>
Jquery
//REGISTRATION=>INDEX.JS
$(function () {
var ddlNameUrl=$("#WalkinnName").data("url");
$("#ddlName").select2({
placeholder: "Search for Name",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: ddlNameUrl,
type: "POST",
dataType: 'json',
data: function (params) {
return {
term: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data,
};
}
}
});
});
Controller is
public JsonResult GetStudentWalkInnName(string term)
{
try
{
var walkInnNameList = _db.StudentWalkInns
.Where(s => s.CandidateName.StartsWith(term))
.Select(x => new
{
Id=x.Id,
Text=x.CandidateName
}).ToList();
return Json(walkInnNameList, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json("", JsonRequestBehavior.AllowGet);
}
}
Any help will be highly appreciated.
According to the documentation, the format if the data should be an array of objects with names id and name i.e. lowercase (not Id and Name).
Change you query to
var walkInnNameList = _db.StudentWalkInns
.Where(s => s.CandidateName.StartsWith(term))
.Select(x => new
{
id = x.Id,
text = x.CandidateName
}); // .ToList() should not be necessary
I have successfully implemted the plugin, now I need functionality. There are no examples of mixed implementation, ie. delete all with selected checkbox, with csv/print. Just examples of single function implementation. Which is ok but I think there will be an application or 2 that need 2 to 3 of the plugin extentions to be a complete application.
my code, mvc 4 razor view:
#{
ViewBag.Title = "Price Comparison";
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title> Learning JQuery</title>
<!---CSS-->
<link href="~/Content/Site.css" rel="stylesheet" />
<!---JQuery-->
<link href="~/Content/DataTables/css/dataTables.tableTools.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/dataTables.tableTools.min.css" rel="stylesheet" />
<script src="~/Scripts/DataTables/dataTables.tableTools.js"></script>
<script src="~/Scripts/DataTables/dataTables.tableTools.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'PricingService.asmx/GetPricing',
method: 'post',
dataType: 'json',
success: function (data) {
var table = $('#example').dataTable({
select: true,
data: data,
columns: [
{ 'data': 'Manufacturer' },
{ 'data': 'Product' },
{ 'data': 'SKU' },
{
'data': 'BarcodePrice',
'render': function (barcodeprice) {
return "$" + barcodeprice;
}
},
{
'data': 'ScansourcePrice',
'render': function (scansourceprice) {
return "$" + scansourceprice;
}
},
{
'data': 'BluestarPrice',
'render': function (bluestarprice) {
return "$" + bluestarprice;
}
},
]
});
var tableTools = new $.fn.dataTable.TableTools(table, {
'sSwfPath': '//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls.swf',
'aButtons': [{
'sExtends': 'copy',
'bShowAll': false
},
{
'sExtends': 'print',
'bShowAll': false
},
{
'sExtends': 'csv',
'bShowAll': false
},
{
'sExtends': 'xls',
'bShowAll': false
},
]
});
$(tableTools.fnContainer()).insertBefore('#example_wrapper')
}
});
});
</script>
</head>
<body>
<form id="frm-example" action="/nosuchpage" method="POST">
<div style="border:1px solid black; padding:3px; width:1200px">
<table id="example">
<thead>
<tr>
<th>Manufacturer</th>
<th>Product</th>
<th>SKU</th>
<th>Our Price</th>
<th>Scansource Price</th>
<th>Bluestar Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Manufacturer</th>
<th>Product</th>
<th>SKU</th>
<th>Our Price</th>
<th>Scansource Price</th>
<th>Bluestar Price</th>
</tr>
</tfoot>
</table>
<hr>
<p>Press <b>Submit</b> and check console for URL-encoded form data that would be submitted.</p>
<p><button>Submit</button></p>
<b>Data submitted to the server:</b><br>
<pre id="example-console">
</pre>
</div>
</form>
</body>
</html>
1.I can not initialize ('#example') more than once, so how in the world can I combine the following into the ajax code in my view?
//
// Updates "Select all" control in a data table
//
function updateDataTableSelectAllCtrl(table){
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
// If none of the checkboxes are checked
if($chkbox_checked.length === 0){
chkbox_select_all.checked = false;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// If all of the checkboxes are checked
} else if ($chkbox_checked.length === $chkbox_all.length){
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// If some of the checkboxes are checked
} else {
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = true;
}
}
}
$(document).ready(function (){
// Array holding selected row IDs
var rows_selected = [];
var table = $('#example').DataTable({
'ajax': {
'url': 'ids-arrays.txt'
},
'columnDefs': [{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox">';
}
}],
'order': [1, 'asc'],
'rowCallback': function(row, data, dataIndex){
// Get row ID
var rowId = data[0];
// If row ID is in the list of selected row IDs
if($.inArray(rowId, rows_selected) !== -1){
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
}
}
});
// Handle click on checkbox
$('#example tbody').on('click', 'input[type="checkbox"]', function(e){
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
// Get row ID
var rowId = data[0];
// Determine whether row ID is in the list of selected row IDs
var index = $.inArray(rowId, rows_selected);
// If checkbox is checked and row ID is not in list of selected row IDs
if(this.checked && index === -1){
rows_selected.push(rowId);
// Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
} else if (!this.checked && index !== -1){
rows_selected.splice(index, 1);
}
if(this.checked){
$row.addClass('selected');
} else {
$row.removeClass('selected');
}
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle click on table cells with checkboxes
$('#example').on('click', 'tbody td, thead th:first-child', function(e){
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
// Handle click on "Select all" control
$('#example thead input[name="select_all"]').on('click', function(e){
if(this.checked){
$('#example tbody input[type="checkbox"]:not(:checked)').trigger('click');
} else {
$('#example tbody input[type="checkbox"]:checked').trigger('click');
}
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle table draw event
table.on('draw', function(){
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
});
// Handle form submission event
$('#frm-example').on('submit', function(e){
var form = this;
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
// FOR DEMONSTRATION ONLY
// Output form data to a console
$('#example-console').text($(form).serialize());
console.log("Form submission", $(form).serialize());
// Remove added elements
$('input[name="id\[\]"]', form).remove();
// Prevent actual form submission
e.preventDefault();
});
});
2.This successfully added the csv and other buttons along with the search and pagination. But the csv and copy still selects all the pages in the table instead of the one displayed.I followed the documentation and used the sExtends, but it still does not work.
Any help Please?
I code web MVC4 by VS2012. I use Ajax to paging in list page, when ajax working is double result. Below is my code:
This is View:
<div id="result">
<% using (Ajax.BeginForm("Paging","pa",new AjaxOptions{UpdateTargetId="result"})){ %>
<table>...<table>
<div class="Paging"><%= ViewBag.PhanTrang %></div>
<%} %></div>
<script>
$(function () {
$('.a_pt').click(function () {
var _val = $(this).data("id");
$.ajax({
url: this.action,
type: this.method,
data: { id: _val },
success: function (result) {
$('#result').html(result);
}
});
return false;
});
});
</script>
This is Controller:
public ActionResult Paging(string id)
{
demoMVC4Entities db = new demoMVC4Entities();
var _listProvince = db.T_Provinces;
ViewBag.ddl_Province = new SelectList(_listProvince, "Province_ID", "Province_Name");
var _listStudent = db.T_Student.OrderBy(n => n.MA).Skip((_pageIndex - 1) * pageSize).Take(pageSize);
return View(_listStudent);
}
And this is first result:
<body>
<p>...</p>
<div id="result">
<form action=.............></form>
</div>
And this í second result:
<body>
<p>...</p>
<div id="result">
<form action=.............>
___<body>
___<p>...</p>
___<div id="result">
___<form action=.............></form>
___</div>
</form>
</div>
Plese help me.! Thanks.!
I think you are updating the target id (#result) twice. Either remove the success function in the javascript or remove the UpdateTargetId in the Ajax Options.
hth
O
Create a Partial View named: WhateverList.cshtml
Put this is in a Partial View:
<% using (Ajax.BeginForm("Paging","pa",new AjaxOptions{UpdateTargetId="result"})){ %>
<table>...<table>
<div class="Paging"><%= ViewBag.PhanTrang %></div>
<%} %></div>
Keep this in the current view you have:
<div id="result"></div>
Then in Controller do this:
public ActionResult WhateverList(string id)
{
demoMVC4Entities db = new demoMVC4Entities();
var _listProvince = db.T_Provinces;
ViewBag.ddl_Province = new SelectList(_listProvince, "Province_ID", "Province_Name");
var _listStudent = db.T_Student.OrderBy(n => n.MA).Skip((_pageIndex - 1) * pageSize).Take(pageSize);
return PartialView(_listStudent);
}
And you only need either the jQUery Ajax OR the Ajax.BeginForm not both:
I suggest you use jQuery in this Case:
<script>
$(function () {
$('.a_pt').click(function () {
var _val = $(this).data("id");
$.ajax({
url: this.action,
type: this.method,
data: { id: _val },
success: function (result) {
$('#result').html(result);
}
});
return false;
});
});
</script>
And remove the Ajax.BeginForm from your PartialView:
So Partial View is only:
#model SelectList
<table>...<table>
<div class="Paging"><%= ViewBag.PhanTrang %></div>
When you return View(), it will render the _Layout.cshtml of the Page , and return the <html>, <body> tags. But return PartialView() only returns the HTML content of the Partial View without Layout.cshtml