Client Script [Product Form] - Mode View - suitescript2.0

I wanted to display a message on the screen when a field the user is filling in is already registered in another product.
can anybody help me? Below the code:

With the help of my friend Emerson Minero I am posting the code with the solution. I hope it can be useful to friends here. Thank you!
/**
* #NApiVersion 2.x
* #NScriptType ClientScript
* #author Adriano Barbosa
* #since 2019.2
*/
define(['N/log', 'N/record', 'N/search', 'N/ui/dialog'], function(log, record, search, dialog) {
function pageInit(context) {
if ( context.mode === 'copy' || context.mode === 'create' ) {
var currentRecord = context.currentRecord;
}
}
function saveRecord(context) {
var ean, item_id, ean_existe, codigo_item_sap;
var currentRecord = context.currentRecord;
item_id = currentRecord.getValue({ fieldId: 'itemid' });
ean = currentRecord.getValue({ fieldId: 'upccode' });
// Valida o EAN na cópia/criação do item
if (!ean) {
dialog.alert({ title: 'Alerta: EAN não informado', message: 'Informe o EAN para prosseguir cadastro.' });
log.debug({ title: '[Cópia/Criação do Item] ' + 'Alerta: EAN não informado', details: 'Informe o EAN para prosseguir cadastro.' });
return false;
} else {
search.create({ type: "item",
filters: [
[ "upccode", "is", ean ]
],
columns: [
search.createColumn({ name: "internalid", label: "ID interna" }),
search.createColumn({ name: "upccode", label: "Código UPC" })
]
}).run().each(function (result) {
item_id = result.id;
ean_existe = result.getValue({ name: 'upccode' });
codigo_item_sap = record.load({ type: 'inventoryitem', id: item_id, isDynamic: true })
.getValue({ fieldId: 'itemid' });
return false;
});
}
// Valida o EAN na edição do Item
if (currentRecord.id) {
ean = currentRecord.getValue({ fieldId: 'upccode' });
if (!ean) {
dialog.alert({ title: 'Alerta: EAN não informado', message: 'Informe o EAN para prosseguir cadastro.' });
log.debug({ title: '[Edição do Item] ' + 'Alerta: EAN não informado', details: 'Informe o EAN para prosseguir cadastro.' });
return false;
} else {
search.create({ type: "item",
filters: [
[ "upccode", "is", ean ]
],
columns: [
search.createColumn({ name: "internalid", label: "ID interna" }),
search.createColumn({ name: "upccode", label: "Código UPC" })
]
}).run().each(function (result) {
item_id = result.id;
ean_existe = result.getValue({ name: 'upccode' });
codigo_item_sap = record.load({ type: 'inventoryitem', id: item_id, isDynamic: true })
.getValue({ fieldId: 'itemid' });
return false;
});
}
// [Edição do Item] - Se encontrado o EAN na base, impede o salvamento.
if ((item_id != currentRecord.id) && codigo_item_sap) {
dialog.alert({ title: 'Alerta: EAN ' + ean_existe + ' já cadastrado!',
message: 'O item: ' + '"' + codigo_item_sap + '"' + ' já possui este mesmo EAN' + '. Informe outro EAN para prosseguir cadastro.'
});
log.debug({ title: '[Edição do Item] ' + 'Alerta: EAN ' + ean_existe + ' já cadastrado!',
details: 'Verifique o código do item: ' + '"' + codigo_item_sap + '".'
});
return false;
} else {
return true;
}
} else if (ean_existe) { // [Cópia/Criação do Item] - Se encontrado o EAN na base, impede o salvamento.
dialog.alert({ title: 'Alerta: EAN ' + ean_existe + ' já cadastrado!',
message: 'O item: ' + '"' + codigo_item_sap + '"' + ' já possui este mesmo EAN' + '. Informe outro EAN para prosseguir cadastro.'
});
log.debug({ title: '[Cópia/Criação do Item] ' + 'Alerta: EAN ' + ean_existe + ' já cadastrado!',
details: 'Verifique o código do item: ' + '"' + codigo_item_sap + '".'
});
return false;
} else {
log.debug({ title: 'Item cadastrado!',
details: '"Código Item SAP:" ' + currentRecord.getValue({ fieldId: 'itemid' }) + ', "EAN:" ' + currentRecord.getValue({ fieldId: 'upccode' })
});
return true;
}
}
return { pageInit: pageInit, saveRecord: saveRecord }
});

put the following code in your saveRecord event:
if(!currentReocord.id){
//put here all your logic for your validation
}
The above line will help you to determine if the user is creating the record.

Related

Datatable.Net - Search by columns is not rendering

I'm using jQuery datatable.net to render a table (server-side). Everything including filtering is working fine. I elected to implement searching by column and I just can't seem to get it to render the values. When I type in a value, the "Processing" window displays and immediately goes away (which tells me that the search string is being processed) however the search results are not being displayed.
My datatable script is as follows:
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
$('#contacts tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
var contactlist = $('#contacts').DataTable({
responsive: true,
destroy: true,
orderMulti: true,
processing: true,
serverSide: true,
stateSave: true,
stateSaveCallback: function (settings, data) {
localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data))
},
stateLoadCallback: function (settings) {
return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance))
},
oLanguage: {
sSearch: ""
},
pagingType: "full_numbers",
filter: true,
rowId: "id",
order: [[1, "asc"]],
ajax: {
url: "/Contact/GetContactList",
type: "POST",
datatype: "json"
},
columnDefs: [{
targets: [0],
visible: false,
searchable: false
}],
"columns": [
{ data: "id", name: "Id", autoWidth: true},
{ data: "firstName", name: "FirstName", autoWidth: true },
{ data: "lastName", name: "LastName", autoWidth: true },
{ data: "company", name: "Company", autoWidth: true },
{
data: null,
name: "Phone",
autoWidth: true,
defaultContent: "",
render: function (data, type, row) {
var cell = "";
var office = "";
var other = "";
if (row.phoneCell != null) {
cell = "<i class='fas fa-mobile-alt'></i><a href='tel:" + row.phoneCell + "'> " + "<small>" + row.phoneCell + "</small></a>";
}
if (row.phoneOffice != null) {
if (cell != "") { office = "<br />"; }
office = office + "<i class='fas fa-building'></i><a href='tel:" + row.phoneOffice + "'> " + "<small>" + row.phoneOffice + "</small></a>";
}
if (row.phoneOther != null) {
if (office != "") { other = "<br />"; }
other = other + "<i class='fas fa-phone-square-alt'></i><a href='tel:" + row.phoneOther + "'> " + "<small>" + row.phoneOther + "</small></a>";
}
return cell + office + other;
}
},
{
data: "webSite",
name: "WebSite",
autoWidth: true,
defaultContent: "",
render: function (data, type, row) {
if (row.webSite != null) {
return "<i class='fas fa-globe-americas'></i><a href='" + row.webSite + "' target='_blank'> " + "<small>" + row.webSite + "</small></a>";
}
}
},
{ data: "campaign", name: "Campaign", autoWidth: true, defaultContent: "" },
],
initComplete: function () {
var r = $('#contacts tfoot tr');
r.find('th').each(function () {
$(this).css('padding', 8);
});
$('#contacts thead').append(r);
$('#search_0').css('text-align', 'center');
var api = this.api();
api.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that.search(this.value);
that.draw();
}
});
});
}
});
$('.dataTables_filter input[type="search"]').
attr('placeholder', 'Filter by first/last name or company ...').
css({ 'width': '350px', 'display': 'inline-block' });
$('#contacts tbody').on('click', 'tr', function () {
debugger;
var currentRowData = contactlist.row(this).data();
var id = currentRowData.id;
var url = "#Url.Action("View", "Contact")?id=" + id;
window.open(url,"_parent");
});
});
</script>
Any idea what I'm doing wrong?
Thanks.
-- Val

How can I put sign (%) on data in ChartJS?

I want to add the sign (%) next to the value. The problem is when I concatenate sign (%) the pie chart is not showing data: vm.distributed_per_day.map(item => (item.Amount / sum * 100).toFixed(2) + '%'). How can I add the sign (%) to my pie chart? Can somebody help me with my problem? Here's my code
retrieveDistributedPerDayByPie : function() {
var self = this;
var sum = 0;
axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
.then(response => {
console.log(response);
vm.distributed_per_day = response.data
var ctxChart = self.$refs.myChart2.getContext('2d');
for(var i = 0; i < this.distributed_per_day.length; i++) {
sum += parseFloat(this.distributed_per_day[i].Amount);
}
var myChart2 = new Chart(ctxChart, {
type: 'pie',
data: {
labels: vm.distributed_per_day.map(item => item.Day),
datasets: [{
label: 'Total Amount',
data: vm.distributed_per_day.map(item => (item.Amount / sum * 100).toFixed(2) + '%'),
backgroundColor: this.poolColors(vm.distributed_per_day.length),
borderColor: '#eee',
borderWidth: 2
}]
},
reponsive : true,
options: {
title : {
display : true,
text : "Distributed Reports per Day",
fontFamily: "sans-serif",
fontSize: 18,
},
legend: {
display: false
},
tooltips: {
enabled: true
}
}
});
}).catch(e => {
console.log(e)
});
},
This works on a bar chart, haven't tried it on a pie chart. Hope it works for you.
yAxes: [
{
ticks: {
callback: function (value, index, values) {
return value + " %";
}
}
}
]
This solution worked for me.
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
var indice = tooltipItem.index;
return data.labels[indice] + ': ' + data.datasets[0].data[indice] + '%';
}
}
}

Share data from one component with another component in same App.js

I have the following App.js file that runs on WebSphere. I just added a new component that needs a value from the same API the larger component uses. I don't want to hit the API twice. I'm thinking I need to move the data access into the new Vue({… and then pass the result into the two components. How do I do that? Can someone point me to sample code?
Vue.component('greeting-portlet-text', {
data: function() {
return {
today: '',
bonusPageLink: '/wps/myportal/k/payroll/bonus'
};
},
methods: {
getFormattedTodaysDate: function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
return today;
}
},
mounted: function() {
this.today = this.getFormattedTodaysDate();
},
template:
'<div class="greeting-text"><h1>Welcome ' +
_greentin_app_config.user.firstName +
'</h1>' +
' <p class="subtitle">Your bonus progress as of {{ today }}</p> ' +
' <div class="greeting-buttons greeting-buttons-top show-for-large">' +
' <greeting-portlet-buttons></greeting-portlet-buttons>' +
' <a :href="bonusPageLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent highlight">View Full Bonus Progress</a>' +
' </div>' +
'</div>'
});
Vue.component('greeting-portlet-buttons-panel', {
data: function() {
return {
bonusPageLink: '/wps/myportal/k/payroll/bonus'
};
},
template:
'<div class="greeting-buttons greeting-buttons-bottom grid-x grid-margin-x">' +
' <div class="cell small-12 medium-6">' +
' <greeting-portlet-buttons></greeting-portlet-buttons>' +
' </div>' +
' <div class="cell small-12 medium-6"><a :href="bonusPageLink" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent highlight">View Full Bonus Progress</a></div>' +
'</div>'
});
Vue.component('greeting-portlet-buttons', {
data: function() {
return {
SmartDriveLink: '/wps/myportal/k/company-info/news/smartdrivefaq'
};
},
template:
'<div>' +
' <a v-if="SmartDriveScore>=25 && SmartDriveScore!=99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--red-A700 mdl-color-text--white">SmartDrive Score: {{SmartDriveScore}} <i class="material-icons">thumb_down_alt</i></a>' +
' <a v-if="SmartDriveScore=== 99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--yellow">SmartDrive Score: <i class="material-icons">phone_in_talk</i> CALL DDM</a>' +
' <a v-if="SmartDriveScore<25" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--green mdl-color-text--white">SmartDrive Score: {{SmartDriveScore}} <i class="material-icons">thumb_up_alt</i></a>' +
'</div>'
});
Vue.component('greeting-portlet-progress', {
data: function() {
return {
bonus: {
payBand: {
showPayBand: false // default
},
milageTiers: {
tier1: 0,
tier2: 0,
tier3: 0,
tier4: 0
},
rateTiers: {
tier1: 0,
tier2: 0,
tier3: 0,
tier4: 0
},
currentMileage: 872
},
viewStatus: {
dataLoaded: false
},
storageKey: 'bonusProgressData'
};
},
computed: {
tier1Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier1);
},
tier2Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier2);
},
tier3Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier3);
},
tier4Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier4);
},
tier1Rate: function() {
return '$' + this.bonus.rateTiers.tier1;
},
tier2Rate: function() {
return '$' + this.bonus.rateTiers.tier2;
},
tier3Rate: function() {
return '$' + this.bonus.rateTiers.tier3;
},
tier4Rate: function() {
return '$' + this.bonus.rateTiers.tier4;
},
tier1Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier1 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
tier2Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier2 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
tier3Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier3 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
tier4Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier4 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
currentMilage: function() {
return this.formatNumber(this.bonus.currentMileage);
},
progress: function() {
return this.progressNumber + '%';
},
progressNumber: function() {
var percentage = 0;
if (
this.bonus.currentMileage !== 0 ||
this.bonus.milageTiers.tier4 !== 0
) {
percentage = Math.floor(
(this.bonus.currentMileage / this.bonus.milageTiers.tier4) * 100
);
}
return percentage;
},
showPayBand: function() {
return this.bonus.payBand.showPayBand;
},
payBandMiles: function() {
return this.formatNumber(this.bonus.payBand.miles);
}
},
methods: {
loadBonusDataFromService: function() {
var app = this;
var servicePath =
_greentin_app_config.serviceBasePath +
'/v1/knight/portal/bonus/progress';
axios
.get(servicePath)
.then(function(response) {
app.bonus = response.data;
app.viewStatus.dataLoaded = true;
if (typeof storageWrap !== 'undefined') {
// cache the data
storageWrap.setItem(app.storageKey, app.bonus);
}
})
.catch(function(error) {
console.error(error);
});
},
getBonusData: function() {
var cachedData;
if (typeof storageWrap !== 'undefined') {
cachedData = storageWrap.getItem(this.storageKey);
}
// return cachedData if found otherwise load the data from service
if (cachedData) {
this.bonus = cachedData;
this.viewStatus.dataLoaded = true;
} else {
this.loadBonusDataFromService();
}
},
formatNumber: function(value) {
if (typeof value !== 'number') {
return value;
}
var formatter = new Intl.NumberFormat('en-US', {
style: 'decimal',
minimumFractionDigits: 0
});
return formatter.format(value);
}
},
mounted: function() {
this.getBonusData();
},
template:
'<div>' +
'<div v-if="viewStatus.dataLoaded" class="progress-wrapper">' +
'<div class="progress">' +
'<div class="progress-bar" v-bind:style="{ width: progress }">' +
'<span class="progress-bar__label" v-if="progressNumber > 9" >{{ currentMilage }} mi.</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier1Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier1Miles}}</span><br>' +
'<span class="progress-bar__markerText__value">{{tier1Rate}}</span>' +
'</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier2Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier2Miles}}</span><br>' +
'<span class="progress-bar__markerText__value">{{tier2Rate}}</span>' +
'</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier3Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier3Miles}}</span><br>' +
'<span class="progress-bar__markerText__value">{{tier3Rate}}</span>' +
'</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier4Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier4Miles}}+</span><br>' +
'<span class="progress-bar__markerText__value">{{tier4Rate}}</span>' +
'</span>' +
'</div>' +
'</div>' +
'<div class="payband" v-if="showPayBand">' +
'<p class="payband__stat"><span class="payband__label">Miles to next pay increase:</span> <span class="payband__amount">{{payBandMiles}}</span></p>' +
'<p class="payband__description"><span>* SOLO = $0.01/mi</span><span>* TEAM = $0.005/mi</span></p>' +
'</div>' +
'</div>' +
'</div>'
});
(window.onload = function() {
var SmartDriveScore = 0;
storageWrap.setAdaptor(sessionStorage); // default to session storage
if (_greentin_app_config.displayPage === 'dashboard') {
if (_greentin_app_config.started !== true) {
// performance check
_greentin_app_config.started = true; // sets performance flag
new Vue({
el: _greentin_app_config.targetEl,
mounted: function() {
this.SmartDriveScore = 99999;
},
template:
'<div class="greeting-portlet">' +
' <div class="grid-x grid-margin-x">' +
' <div class="cell small-12 large-5"><greeting-portlet-text></greeting-portlet-text></div>' +
' <div class="cell small-12 large-7"><greeting-portlet-progress></greeting-portlet-progress></div>' +
' <div class="cell small-12 hide-for-large"><greeting-portlet-buttons-panel></greeting-portlet-buttons-panel></div>' +
' </div>' +
'</div>'
});
}
} else {
new Vue({
el: '#bonus-progress-wrapper',
template:
'<div class="default-view"><greeting-portlet-text></greeting-portlet-text>' +
'<greeting-portlet-progress></greeting-portlet-progress></div>'
});
}
})();

How to add a link button in knockout grid using MVC

I am new to knockout and MVC. I wanted to add a link button(delete) which will delete the record that is displayed in my knockout grid. I really dont have any idea how to achieve this. I have the following code that displays the record using the KO grid. Now I want to add a link button in the grid to delete the record
CONTROLLER:
public JsonResult GetResult()
{
GetResultRequest req = new GetResultRequest() { AcctID=57345, PartyType=2 };
var getResultInfo = WSHelper.WsService.GetResults(req);
return Json(getResultInfo.Signers, JsonRequestBehavior.AllowGet);
}
VIEW:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/SafeHarborBundle")
<script src="~/Scripts/koGrid-2.1.1.js"></script>
<script type="text/javascript">
var dataViewModel = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)));
<div id="gridSigner">
<div id="grids123" style="height: 700px; width: 650px;"
data-bind="koGrid: {
data: gridItems, columnDefs: [{ field: 'AcctID', displayName: 'AcctID', width: '150' },
{ field: 'FName', displayName: 'First Name', width: '150' },
{ field: 'LName', displayName: 'Last Name', width: '150' },
{ field: 'AliasFName', displayName: 'Alias First Name', width: '150' },
{ field: 'SSN', displayName: 'AcctID', width: '150' }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: false,
multiSelect: false
}">
JQUERY FILE:
$(document).ready(function () {
loadApplication(dataViewModel);
ko.applyBindings(Gridviews, document.getElementById('gridSigner'));
});
function loadApplication(initialData) {
self = this;
self.ViewModel = initialData;
self.BranchOptions = ko.observableArray([]);
self.AcctTypeOptions = ko.observableArray([]);
self.OriginationOptions = ko.observableArray([]);
self.Message = ko.observable();
SearchSignerData();
ko.applyBindings(self, document.getElementById('main-search'));
}
SearchSignerData = function () {
$.ajax({
type: "Get",
url: "/SafeHarborApp/GetResult",
contentType: 'application/json',
async: true,
cache: false,
beforeSend: function () {
},
success: function (result) {
alert(result[0].AcctID.toString());
if (result.length != 0) {
$.each(result, function (i, item) {
Gridviews.gridItems.push(item);
});
}
else {
Gridviews.gridItems.removeAll();
alert("No Records found");
}
},
complete: function () {
},
error: function (xhr, textStatus, errorThrown) {
//alert(jqXHR.responseText);
var title = xhr.responseText.split("<title>")[1].split("</title>")[0];
alert(title);
// Handle error.
}
});
}
The above code works fine in displaying the record in the KO grid. However, I dont know how to add a delete button in the displayed KO grid now. I tried searching for it but was not able to find anything useful that will get me the result. Please help...
Use CellTemplate in ko grid.plese see code below
<script type="text/javascript">
self.NoOfAccountColumn = '<a data-bind="value: $parent.entity" onclick="Popup(this.value)">No Of Account</a>';
self.Delete = '<a data-bind="value: $parent.entity" onclick="deleteRow(this.value)">Delete</a>';
function Popup(rowItem) {
alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : NoOfAccount Clicked');
}
function deleteRow(rowItem) {
alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : Delete Clicked');
}
function isDoubleClick(oldValue, currentValue) {
var responseTime = 400;
if ((currentValue - oldValue) <= responseTime) {
self.clickTime = currentValue;
return true;
}
self.clickTime = currentValue;
return false;
};
</script>
<script src="~/Scripts/Packages/koGrid-2.1.1.js"></script>
<div id="disp">
<div id="grid" style="height: 200px; width: 600px"
data-bind="koGrid: {
data: BranchOptions,
afterSelectionChange: function (rowItem, event) {
if (event.type == 'click' && isDoubleClick(self.clickTime, event.timeStamp)) {
alert(rowItem.entity.ClientName + ' : Row DoubleClick');
}
},
columnDefs: [{ field: 'ClientName', displayName: 'Client Name', width: '*', },
{ field: 'AffinityNum', displayName: 'Affinity Num', width: '*', cellTemplate: NoOfAccountColumn },
{ field: 'AffinityID', displayName: 'Affinity ID', width: '*', cellTemplate: Delete }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: true,
multiSelect: false
}">
</div>
</div>

Kendo UI grid toolbar template Dropdown selector Error (textbox instead of dropdown)

Example
I've been looking into getting this to work but so far instead of a dropdown I get and empty textbox which doesn't do anything.
Below is my present code:-
#section js {
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="external">Show checks by ex:</label>
<input type="search" id="external" style="width: 230px"></input>
</div>
</script>
<script type="text/javascript">
var theGrid;
$().ready(function () {
$('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '#Url.Action("_IList", "Entry", new { #ExId = Model.ExId })',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});
</script>
<style scoped="scoped">
#grid .k-toolbar
{
min-height: 27px;
}
.external-label
{
vertical-align: middle;
padding-right: .5em;
}
#external
{
vertical-align: middle;
}
.toolbar {
float: right;
margin-right: .8em;
}
</style>
}
<h2>Check Lists</h2>
<div id="listDiv"></div>
<br />
It works to display all check lists for each Ex which I can select on a previous page and pass in the string Id to this one but I'd like to be able to figure out what's wrong with with the toolbar template as having the functionality on 1 page rather than spread over 2 is far more desirable.
Any help/guidance will be much appreciated.
Edit:
I did also find someone else who encountered the problem except they didn't get a forum response.
Example 2
You mention that somebody else encountered the problem and didn't receive a response, however the linked forum thread does contain a response and an answer to this issue. In that particular case a Javascript error had occurred on the page which prevented the dropdown from initializing correctly and I believe this is also the case for yourself.
Although not completely working because there isn't a valid datasource, I took your example code and dumped it into a jsFiddle and (after fixing some JS errors) you can see that the dropdown appears absolutely fine.
In particular, there were errors regarding grid and sitePath not being defined that prevented the dropdown from initializing.
var grid;
var sitePath = '';
$().ready(function () {
grid = $('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});