i have a dropdown in mvc view- where the value that is selected is to be sent as a paramater in the ajax call of jquery datatables. I am not sure what the right syntax is. Here is snippet my currrent code:
#using (Html.BeginForm())
{
<p>
#Html.DropDownList("StatusType", "Select a Value")
</p>
<p>
Find by Keyword or Phrase in Heading Or Description: #Html.TextBox("SearchString")
</p>
<p>
<input type="submit" value="Search" />
</p>
}
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
if ($.fn.DataTable.isDataTable('#tblsr')) {
$('#tblsr').dataTable().fnDestroy();
$('#tblsr').dataTable().empty();
}
var complete = $('#tblsr').DataTable(
{
"serverSide": true,
"destroy": true,
"processing": true,
"stateSave": true,
"ajax":
{
url: "/ServiceRequests/SRList",
method: "POST",
"data": { "StatusType": StatusType}
},
What is the appropriate syntax for the line under method: POST? If I hardcode in "Open" or "closed' instead of StatusType, the datatables does filter properly, so the value is properly passed, so I just dont know what the appropriate syntax to refer to the dropdown value...
Thanks
figured it out :
var complete = $('#tblsr').DataTable(
{
"serverSide": true,
"destroy": true,
"processing": true,
"stateSave": true,
"ajax":
{
url: "/ServiceRequests/SRList",
method: "POST",
"data": {
"StatusType": $("#StatusType").val()
//"StatusType": "Open"
}
},
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>
}
I am working on a vuejs repeatable component that will allow a user to due several things---enter a question and select the answer type from the drop down. Issue is based on the type, I need to display a select number of boxes if its multiple choices so it can update an array. I cannot figure out how or where to add this. I also need to make these variable (f1 and f2 dynamic) so that it can be reused at other times. So if its a single line choose f1 if it is multiple choice select f2. Someone please provide some direction
Vue.component('my-input', {
template: '<input v-attr="name: name" v-model="value" type="text">' + '<select>' + '<option value="type1">Multiple Choice</option>' + '<option value="type2">single line</option>' + '<option value="type3">multi-line</option>' + '</select><br>'+'<br>'+'</br>',
data() {
return {
value: '',
brand: 'multiple-choice',
options: ['option a, option b'] };
},
props: ['name'] });
new Vue({
el: '#app',
data: {
message:'',
inputs: [{ type: 'my-input' }]
},
mounted: function () {
this.getAllPages();
},
methods: {
addInput() {
this.inputs.push({ type: 'my-input' });
},
getAllPages: function () {
var vm = this;
$.ajax({
url: vm.config.domainRoot + "/_api/web/lists/getbytitle('" + vm.config.listName + "')/items",
type: 'Get',
headers: {
"Accept": "application/json; odata=verbose"
},
success: function (data) {
vm.pages = data.d.results;
console.log(vm.pages);
}
})
},
createCustomL:function(){
// Get filed collection
var fldCollection = oList.get_fields();
var f1 = clientContext.castTo(
fldCollection.addFieldAsXml('<Field Type="Text" DisplayName="NewField" Name="NewField" Required="True"/>', true, SP.AddFieldOptions.addToDefaultContentType),
SP.FieldText);
f1.set_title("q1");
f1.set_description(mydescription);
f1.update();
//Get filed collection
var fldCollection = oList.get_fields();
var f2 = clientContext.castTo(
oList.get_fields().addFieldAsXml('<Field Type="Choice" DisplayName="state" Name="fldchoice" />', true, SP.AddFieldOptions.addToDefaultContentType),
SP.FieldChoice);
var choices = Array("None", "California", "Colorado", "Connecticut", "Georgia", "Indiana");
f2.set_choices(choices);
f2.update();
}
}
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue.js repeater</title>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="app">
<p>Enter your ques</p>
<component v-repeat="inputs" is="{{ type }}" name="inputs[]">
</component>
<button v-on="click: addInput">Add Question</button>
</div>
<br>
<button v-on:click="createCustom">Generate</button>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.js'></script>
<script src="./script.js"></script>
</body>
</html>
I don't know if i understand correctly but if you want to pass different data to your component dynamically you can use props.
Take a look here https://v2.vuejs.org/v2/guide/components-props.html
I'm a great fan of JQuery DataTables and I have used this for very long time. Its the best and working fine. But now with my requirement of enabling both horizontal and vertical scroll, the table makes browser unresponsive for few seconds with just 50 records returned from server. I just have this table script and no other in my page.
Here is the HTML,
<div class="page-content">
<section class="card">
<div class="card-body p-0">
<table id="table" class="table table-sm table-bordered mt-0 w-100">
<thead class="text-center"></thead>
</table>
</div>
</section>
</div>
Here is the table script,,
var height = dynamically calculated,
table = $('#table').DataTable({
serverSide: true,
autoWidth: true,
language: {
processing: "Loading...",
zeroRecords: "No matching records found"
},
processing: true,
deferRender: true,
scrollX: true,
scrollY: height,
scrollCollapse: true,
order: [],
dom: '<tr>',
ajax: {
type: "POST",
url: "server url",
contentType: "application/json; charset=utf-8",
headers: {
"XSRF-TOKEN": $('#_AjaxAntiForgeryTokenForm input[name="__RequestVerificationToken"]').val()
},
global: false,
async: true,
data: function (data) {
return JSON.stringify(data);
}
},
columns: [
{
title:"",
data: "",
render: function(){
},
name: ""
}
//... 19 more columns
],
drawCallback: function (settings) {
var count = table.data().count();
$('.data-table-disable').prop('disabled', !(count > 0));
$('#spanResultsCount').text(count);
$('section.card').height(height + 27);
}
});
I'm using Jquery Datatables 1.10.18. If I comment the scrollX,scrollY and scrollCollapse properties and run, now horizontal and vertical scroll appears at browser level and there isn't any lag or unresponsiveness.
I followed their docs and found this,
https://datatables.net/examples/basic_init/scroll_xy.html
Any ideas on where I'm going wrong?
After doing a lot research and googling I found that adding paging: false in the DataTable Initialization fixed the issue. Hope this helps some one. :)
I have a page with a search box on it using Vue. What I want to do is this: when a user comes from another page with a parameter in the URL (e.g., myurl.com/?windows), I capture the parameter and populate the search field to run the search on that string when the page loads. If there's no parameter, nothing happens.
I'm capturing the string from the URL with JavaScript, but don't see how to get it in the input to run the search.... I created a method but don't see how to apply it.
<div id="app">
<input type="text" v-model="search" placeholder="Search Articles" />
<div v-for="article in filteredArticles" v-bind:key="article.id" class="container-fluid to-edges section1">
<div class="row">
<div class="col-md-4 col-sm-12 section0">
<div class="section0">
<a v-bind:href="article.url" v-bind:title="toUppercase(article.title)">
<img class="resp-img expand section0"
v-bind:src="article.src"
v-bind:alt="article.alt"/>
</a>
</div>
<div>
<h3 class="title-sec">{{ article.title }}</h3>
<p>{{ article.description }}</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var pgURL = window.location.href;
var newURL = pgURL.split("?")[1];
console.log(newURL);
</script>
// Filters
Vue.filter('to-uppercase', function(value){
return value.toUpperCase();
});
new Vue({
el: "#app",
data: {
articles: [
{ id: 1, title: 'Trend Alert: Black Windows', category: 'Windows', description: 'Timeless, elegant, and universally flattering, black is an excellent color to add to any wardrobe – or any window. Get in the black with this chic design trend.', src: 'http://i1.adis.ws/i/stock/Trending_Polaroid_Black_Windows_2018_1?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/trend-alert-black-windows', alt: 'Pantone Colors image' },
{ id: 2, title: 'Benefits of a Pass-Through Window', category: 'Windows', description: 'Whether you’re adding a pass-through window in order to enjoy an al fresco aperitif or for easier access to appetizers in the kitchen, we’re big fans of bringing the outdoors in.', src: 'http://i1.adis.ws/i/stock/polaroid_benefitsofapassthroughwindow655x536?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/kitchen-pass-through-bar-window', alt: 'Benefits of a Pass-Through Window image' }, etc....
],
search: ''
},
methods: {
toUppercase: function(title){
return title.toUpperCase();
},
urlSearch: function(newURL) {
if (newURL) {
return this.search = newURL;
}
}
},
computed: {
filteredArticles: function() {
// returning updated array based on search term
return this.articles.filter((article) => {
return article.category.match(new RegExp(this.search, "i"));
});
}
}
})
You can call the urlSearch method during the mounted hook:
mounted() {
this.urlSearch(newURL)
},
methods: {
urlSearch(url) {
return this.search = url
}
},
$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
});
});
I want to add close text to it. by default it shows 'X', but I want to change it. Is it possible?
You can use icons option to define a custom css class for your icon and then you can write a css rule to customize close text as shown below:
$(function () {
var current_month = moment(); // just a sample value
$('#datetimepicker1').datetimepicker({
showClose: true,
viewMode: 'months',
format: 'MM/YYYY',
maxDate: current_month,
icons: {
close: 'closeText'
}
});
});
.closeText:before {
content: "Close";
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
One way to do this is to use the icon classes to a add a new class and then use css to add some content. Something like:
$(function() {
$('input.month-mode').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
showClose: true,
maxDate: current_month,
icons: {
close: 'textclass1'
}
});
});
Css:
.textclass1::before {
content: "Close";
}