I'm try to access parent data scope in kendo grid template, is it a bad practice use "this.parentDataItem"? Or exist other ways? As final result in my example I want hide first column.
My Grid:
<div id="someGrid"
data-role="grid"
data-row-template="someTemplate"
data-bind="source: gridDataSource"
data-columns="[
{ title: 'FirstColumn', width: '100px' },
{ title: 'SecondColumn', width: '100px'},
]">
</div>
My template:
<script id="someTemplate" type="text/x-kendo-template">
<tr role="row" data-uid="${uid}">
<td class="check-row"># if(this.isFirstColumnVisible) { # InvisibleText # } #</td>
<td class="check-row">VisibleText</td>
</tr>
<script>
My model
{
isFirstColumnVisible: false,
gridDataSource: ...
}
This did the trick:
parent().parent().myProperty
Related
I have one vue componet i wanna click to a href link bellow code to load another vue componet to pass id or any value of this form.
<template>
<div class="container">
<table class="table table-hover">
<tbody>
<tr>
<th>No</th>
<th>another vue component</th>
</tr>
<tr>
<td>1 </td>
<td>
<a href="'/NewVueComponent.vue/ + this.form.id'" > show </a>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data (){
return {
form: new Form({
id: '',
})
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
In your view component, have a method that will push router to another view. The id can be passed as an arg via params.
<script>
export default: {
data() {
return {
id: "someId"
}
},
methods: {
goTo() {
this.$router.push({name: OtherComponent, params: {
id: this.id
}})
}
}
}
</script>
and on your route declaration, make sure props is set to true
{
path: "/path-to-component",
component: OtherComponent,
name: "OtherComponent",
props: true,
}
and of course on the OtherComponent you will have to define id as a prop.
You can read more about it here https://router.vuejs.org/guide/essentials/passing-props.html
I am creating a table in an html file. The table is populated with data from a json file using ajax call. I am using datatable in bootstrap for loading data from json file. https://datatables.net/extensions/responsive/examples/initialisation/ajax.html.
Now I want to open a modal on clicking a row in the table. The model part is not working. Also, I want to populate the modal with the data from the corresponding row. Can anyone please help me
The table part in table.html file is below:
<div class="table-responsive">
<table class="table table-bordered responsive" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Phone no</th>
<th>Start date</th>
</tr>
</thead>
</table>
</div>
The ajax call in demo.js file
// Call the dataTables jQuery plugin
$(document).ready(function() {
$("#dataTable").DataTable({
ajax: "./data/newusers.json",
columns: [
{ data: "name" },
{ data: "location" },
{ data: "email" },
{ data: "phone" },
{ data: "startdate" }
]
});
});
The json file is below:
{
"data": [
{
"name": "Tiger Nixon",
"location": "Bangalore",
"email": "tiger.nixon#yahoo.com",
"phone": "7896546789",
"startdate": "2018/04/25"
},
{
"name": "Garrett Winters",
"location": "Goa",
"email": "garrett.wint34#gmail.com",
"phone": "6398764532",
"startdate": "2018/07/25"
}
]
}
I tried this based on https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
// Call the dataTables jQuery plugin
$(document).ready(function() {
$("#dataTable").DataTable({
ajax: "./data/newusers.json",
columns: [
{ data: "name" },
{ data: "location" },
{ data: "email" },
{ data: "phone" },
{ data: "startdate" }
],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function(row) {
var data = row.data();
return "Details for " + data[0];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: "table"
})
}
}
});
});
The above code is not working. Can anyone please help me?
If you want to use ajax data with the DataTables responsive details modal display option, the "trick" is to add an extra empty column with class="none" for the modal trigger...
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Phone no</th>
<th>Start date</th>
<th class="none"></th>
</tr>
</thead>
and then use the column type and target option to make clicking the tr row trigger the modal...
responsive: {
details: {
type: 'column',
target: 'tr',
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Details for ' + data.name;
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
},...
Demo of responsive details modal
Alternately, you can use a Bootstrap modal in the markup and its show.bs.modal event to populate the modal with data as needed using jQuery. The from the row render method can be passed using data attributes to the modal. With this method you have complete control over the modal content.
HTML:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle"></h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
JS:
"columns": [
...
{ "data": "fieldname", "render": function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-id="'+row.id+'" data-title="'+row.title+'" data-target="#myModal">'+data+'</button>'} },
...
],
$("#myModal").on('show.bs.modal', function (e) {
var triggerLink = $(e.relatedTarget);
var id = triggerLink.data("id");
var title = triggerLink.data("title");
$("#modalTitle").text(title);
$(this).find(".modal-body").html("<h5>id: "+id+"</h5>");
});
Demo of custom Bootstrap modal
I have a Kendo Datepicker that worked perfectly on a div while I was beginning development of a page.
After I got everything all set and working the way it was supposed, I moved the datepicker to a Durandal Modal as was the requirement. The modal works fine, and other databinding is working on the modal, but not the datepicker.
I have tried loading the datepicker at various times in the Durandal lifecycle such as activate, compositionComplete and attached, as well as changing the Z Index to 20000. I am not quite user what I might be missing.
Here is the latest pertinent code:
define([
'durandal/app',
'plugins/router',
'plugins/dialog',
'services/datacontext',
'services/dialogs',
'viewmodels/helpers/vc',
'services/logger',
'services/settings'
],
function (app, router, dialog, datacontext, dialogs, vc, logger, settings) {
var featureSetToEdit;
var startFeaturesDatePicker = null;
var endFeaturesDatePicker = null;
var today = new Date();
var featList = ko.observableArray(['']);
var saving = ko.observable(false);
var isUserInReadOnlyRole = ko.observable(true);
function attached() {
loadDatePickers();
};
function compositionComplete() {
isUserInReadOnlyRole(vc.isUserReadOnly(datacontext.userRole));
};
function loadDatePickers() {
startFeaturesDatePicker = $("#startDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setStartDate,
}).data('kendoDatePicker');
endFeaturesDatePicker = $("#endDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setEndDate,
}).data('kendoDatePicker');
};
var setStartDate = function () {
startFeaturesDatePicker.value($("#startDateFeatureSet").val());
};
var setEndDate = function () {
endFeaturesDatePicker.value($("#endDateFeatureSet").val());
};
function checkboxDivId(featuresKey) {
return 'checkboxDivId' + featuresKey;
};
function edit(featureSetToEdit, fList) {
self = this;
self.featList(fList);
return dialog.show(self);
};
function save() {
};
function cancel() {
dialogs.confirmYesNo('Discard changes to this feature Set?', 'Confirm cancel',
function () {
dialog.close(self, false);
},
function () {
return;
}
);
};
// Definition of viewmodel (list of exposed properties and methods)
var vm = {
featList: featList,
edit: edit,
save: save,
saving: saving,
cancel: cancel,
isUserInReadOnlyRole: isUserInReadOnlyRole,
checkboxDivId: checkboxDivId
};
return vm;
});
HTML
<div class="messageBox autoclose" style="min-height: 330px" >
<div class="modal-header">
<h3>Edit Feature Set</h3>
</div>
<div class="modal-body" style="padding: 2px 5px 2px 5px; background-color: #ddd; min-height: 250px; width: 400px; border: 1px solid silver;">
<table class="k-grid">
<tr class="dataRow" style="padding: 2px;">
<td><span>Start Date</span></td>
<td><input id="startDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>End Date</span></td>
<td><input id="endDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>Features</span></td>
<td id="featuresCheckbox" style="font-size: 10pt; text-align: left" data-bind="foreach: featList">
<input data-bind="attr: { id: $parent.checkboxDivId($data.keyChar), value: $data.keyChar }" type="checkbox" style="margin-bottom:6px;" /> <span data-bind="text: $data.name" style="margin-top:6px;"></span> <br />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<div style="float: right">
<span class="icon-spin icon-spinner waiting" data-bind="visible: saving"> </span>
<button class="btn btn-primary" data-bind="click: save, enable: !saving() && !isUserInReadOnlyRole()">Save</button>
<button class="btn btn-default" data-bind="click: cancel, enable: !saving()">Cancel</button>
</div>
</div>
</div>
Can you please take a look and let me know what I might be missing?
So after finding I still needed to load it through the usual Kendo initialization, I searched more until I found that to load it properly I needed the following code in the modal js page:
self = this;
self.compositionComplete = function () {
loadDatePickers();
};
return dialog.show(self);
Now it works exactly the same as a datepicker on a non-modal page.
I hope this helps others to!
When I'm using other "groupable" row template doesn't work in the kendo grid
But before there was no problem and now how to use the grouping together of row template
I put the code I wrote in a review do
jsfiddle :
Click here to check with jsfiddle
<script>
$(document).ready(function () {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: '/api/clientssnapshot',
dataType: 'json',
type: 'get'
}
}
});
$('.table').kendoGrid({
dataSource: ds,
sortable: true,
groupable: true,
selectable: true,
navigatable: true,
height: 500,
scrollable: true,
rowTemplate: kendo.template($("#client-row-template").html().replace('class="k-alt"', '')),
altRowTemplate: kendo.template($("#client-row-template").html()),//#class="k-alt"#
dataBound: function () {
$('.spark').sparkline([1, 2, 3, 4, 5, 6, 85, 2, 1]);
//$('.spark').each(function (i, e) {
// var $this = $(this);
// //console.info($this.attr('data-inrate'));
// var arr = eval('[' + $this.attr('data-inrate') + ']');
// console.log(this);
// $this.sparkline(arr);
//});
}
});
});
</script>
<body class="menu_hover">
<script id="client-row-template" type="text/x-kendo-template">
<tr role="row" class="k-alt">
<td role="gridcell" >#= Mac #</td>
<td role="gridcell" >#= RadioName #</td>
<td role="gridcell" > #=ApName# </td>
<td role="gridcell" > #=RemoteIp# </td>
<td role="gridcell" > <a href=#"#= AccountingId #" target="_blank" > #= AccountingName # </a> </td>
<td role="gridcell" >#= TX #</td>
<td role="gridcell" >#= RX #</td>
<td role="gridcell" >#= Signal #</td>
<td role="gridcell" >#= Uptime #</td>
<td role="gridcell">
<span class="spark" data-inrate="#= InRateHistory #" > </span>
</td>
</tr>
</script>
<div class="span6 box gradient main_stting">
<div class="dataTables_filter" id="txtSearch">
<label>
Search:
<input type="text" aria-controls="DataTables_Table_0"></label>
</div>
<div class="title">
<h3></h3>
</div>
<div class="content">
<table class="table">
<colgroup>
<!-- Mac -->
<col style="width: 170px">
<col style="width: 150px">
<col style="width: 80px">
<col style="width: 160px">
<col style="width: 130px">
<col style="width: 44px">
<col style="width: 50px">
<col style="width: 50px">
<col style="width: 78px">
<!-- Usage -->
<!-- <col style="width: 100px" />-->
</colgroup>
<thead>
<tr>
<th>Mac</th>
<th>Radio</th>
<th>AP</th>
<th>Remote IP</th>
<th>Name</th>
<th>TX</th>
<th>RX</th>
<th>Signal</th>
<th>Uptime</th>
<th>Usage</th>
</tr>
</thead>
</table>
</div>
</div>
</body></html>
You can do it in your own template with a trick that was posted in this thread: http://www.telerik.com/forums/grid-grouping-problem-when-using-row-template-bug
Which contains this JSFiddle: http://jsfiddle.net/THRQV/
Here's the code from that fiddle.
Markup
<table id="grid" style="width: 100%;">
</table>
<script id="rowTemplate" type="text">
<tr>
#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
<td>${Id}</td>
<td>${StatusText}</td>
<td>${CommissionTypeText}</td>
</tr>
</script>
Javascript
var localData = [
{Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
{Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
{Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];
var dataSource = new kendo.data.DataSource( {
data: localData,
schema: {
model: {
fields: {
Id: { type: "number" },
StatusText: { type: "string" },
CommissionTypeText: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 500,
sortable: true,
filterable: true,
groupable: true,
pageable: true,
columns: [
{
field: "Id",
title: "Id",
filterable: false
},
{
field: "StatusText",
title: "StatusText"
},
{
field: "CommissionTypeText",
title: "CommissionTypeText"
}
]
});
Basically you are passing in the datasource, calling group() on it, and injecting the group cell when applicable.
When you group cells, KendoUI inserts a new cell in front of the existing but this is only done for the standard template, not for your templates.
My recommendation is switching to a template for each cell. Basically your column definition would become:
columns : [
{ field: "Mac", title: "Mac", width: 170 },
{ field: "RadioName", title: "Radio", width: 150 },
{ field: "ApName", title: "Ap", width: 80, template: '#=ApName#' },
{ field: "RemoteIp", title: "Remote IP", width: 160, template: '#=RemoteIp#' },
{ field: "AccountingName", title: "Name", width: 130, template: ' #= AccountingName # ' },
{ field: "TX", title: "TX", width: 44 },
{ field: "RX", title: "RX", width: 50 },
{ field: "Signal", title: "Signal", width: 50 },
{ field: "Uptime", title: "Uptime", width: 78},
{ field: "Usage", title: "Usage", template: '<span class="spark" data-inrate="#= InRateHistory #"> </span>' },
{ command: [ "edit" ], title: " " }
],
In addition, you simply define the grid HTML placeholder as:
<div class="table"></div>
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/Dyb9Y/10/
Hi Friends i am trying to use knockoutjs on one of my web pages in mvc
razor. From the following ViewModel i am achieving the "ADD MORE"
functionality.But My Problem is that how can we achieve the following
functionality:
(1) The second dropdown should be invisible when the dropdown for
"Type of Tobacco" is selected to "Choose..."
(2)When we choose some other value (other than "Choose") second
dropdown should be populated containing value 1 to 10....
(3) When we select "Others" instead of drop down a textbox should
appear
HERE IS MY ATTEMPT:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script type="text/html" id="ddlSelection">
<div><select></select> yrs.</div>
<div><input type="text" data-bind=""></input></div>
</script>
<div id="container">
#*<div data-bind="template:{name:'smoker'}"></div>*#
<table cellpadding="3" cellspacing="4">
<tbody data-bind="foreach: seats">
<tr>
<td>
Type of Tobacco/Nicotine consumed :
</td>
<td>
<select data-bind="options: $root.availabledrugs, value: Drug, optionsText: 'DrugName'"></select>
</td>
<td><select></select></td>
</tr>
<tr>
<td>
Quantity : <input data-bind="value: Name" />
</td>
<td>
Frequency : <select data-bind="options: $root.availablefrequency, value: Frequency, optionsText: 'frequency'"></select>
</td>
<td data-bind="text: FormatPrice"></td>
</tr>
</tbody>
</table>
<button data-bind="click:AddConsumption">Add New One</button>
</div>
<script type="text/javascript">
function setconsumption(name, initdrug,initfrequency) {
var self = this;
self.Name = name;
self.Drug = ko.observable(initdrug);
self.Frequency = ko.observable(initfrequency);
self.FormatPrice = ko.computed(function () {
return self.Drug().Price ? "$" + self.Drug().Price.toFixed(2) : "none";
});
}
function ConsumptionViewModel() {
var self = this;
self.availabledrugs = [{ "DrugName": "Choose...", "Price": 0 },
{ "DrugName": "Cigarettes", "Price": 10 },
{ "DrugName": "Cigar", "Price": 20 },
{ "DrugName": "Others", "Price": 30}];
self.availablefrequency = [{ "frequency": "Choose..." }, { "frequency": "freq1" }, { "frequency": "freq2"}];
self.seats = ko.observableArray(
[new setconsumption("", self.availabledrugs[0], self.availablefrequency[0])]);
self.AddConsumption = function () {
self.seats.push(new setconsumption("", self.availabledrugs[0], self.availablefrequency[0]));
};
}
ko.applyBindings(new ConsumptionViewModel());
</script>
Its hard to guess for me that what you are trying to achieve. But i think you are looking for visible binding in knockout.
The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.
And second think should be the optionsCaption comes under options binding.
If you use optionsCaption with options binding than ko will prepend an extra option in the select list, which will be selected by default and contains value undefined.
By using this both i have create a fiddle according to your requirement. Check this:
Demo fiddle
Hope this is what you are looking for!