I'm new to Kendo UI. I can't figure out why my autocomplete is not showing the header template.The row template is working fine. I looked at the example and I'm not sure what I'm doing differently
Here is my JavaScript code:
<script>
$(document).ready(function () {
$("#drug_name").kendoAutoComplete({
dataTextField: "name",
change: function (e) {
if ($("#drug_name").val() == "") {
$("#dose").val("");
$("#unit").val("");
$("#route").val("");
}
},
select: function (e) {
var dataItem = this.dataItem(e.item.index());
$("#dose").val(dataItem.dose);
$("#unit").val(dataItem.unit);
$("#route").val(dataItem.route);
//output selected dataItem
console.log(kendo.stringify(dataItem));
},
headerTemplate: '<div class="dropdown-header"><span class="k-widget k-header">Name</span><span class="k-widget k-header">Route</span><span class="k-widget k-header">Dose</span><span class="k-widget k-header">Unit</span></div>',
template: '<span class="k-state-default">#:data.name#</span><span class="k-state-default">#:data.route#</span><span class="k-state-default">#:data.dose#</span><span class="k-state-default">#:data.unit#</span>',
filter: "contains",
minLength: 3,
dataSource: {
serverFiltering: true,
transport: {
read: { url: "/Medication/Load", dataType: "json" },
parameterMap: function (data, action) {
if (action === "read") {
return {
medicationName: data.filter.filters[0].value
};
} else {
return data;
}
}
}
},
height: 370
});
});
Please try to write like this:
headerTemplate: '<div class="dropdown-header">' + '<span class="k-widget k-header">Name</span>' + '<span class="k-widget k-header">Route</span>' + '<span class="k-widget k-header">Dose</span>' + <span class="k-widget k-header">Unit</span>' + '</div>',
Related
I am using Grails grails-2.5.6 version. I am trying to render a view not template from the controller during an ajax call. But failing. It shows no error at all and stay on the current page. It call the controller action also.
Here is my code. My AJAX call:
$(document).on("click", ".dashboard-item", function(e) {
var $element = $(this);
var controller = $element.attr("controller"),
action = $element.attr("action");
$.ajax({
url: CONTEXT_PATH + '/' + controller + '/' + action,
type: "POST",
data: {
id: 9999,
value: "val9999"
},
beforeSend: function() {
$.blockUI({
css: {
border: 'none',
padding: '5px',
'background-color': 'transparent',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .8,
color: '#fff',
cursor: 'default'
},
message: '<i class="fa fa-refresh fa-spin" style="font-size:40px;"></i> ' +
'<span class="ajax-wait-message">Please Wait while Loading ...</span>'
});
},
success: function (response) {
$.unblockUI();
},
error: function (xhr, textStatus, errorThrown) {
$(".alert-danger").removeClass("hidden").find('.dng-span').text(errorThrown);
$.unblockUI();
}
});
});
My controller render:
def testA1() {
render(view: 'test1')
}
What can I try next?
Just overwrite the success part as follows >>
success: function (response) {
document.open();
document.write(response);
document.close();
$.unblockUI();
}
Using the Kendo UI tabStrip widget, I'd like to do two things:
1) auto-select the first tab, as it does not show the tab content right away.
2) Swap out the contentUrl of the first tab, under a specific condition of course.
Funny thing is, when I use the k-content-urls directive on my Html, the first tabs loads up the content right away.
ex/
<div kendo-tab-strip k-content-urls="['myTemplate.html', 'myTemplate2.html']">
However, I don't want to do it this way. I prefer the approach below, as in k-options="settings.tabOptions"
Here are the tabOptions in my controller code, and the HTML markup below it:
settings.tabOptions = {
animation: { open: { effects: "fadeIn" } },
select: function (e) {
console.log("Selected: " + e.item.innerText);
// NOT WORKING..
e.sender.dataSource.options.data[0].contentUrl = "../myNewTemplate.html"
},
change: function (e) {
console.log("Changed: ");
},
activate: function (e) {
console.log("Activated: " + e.item.innerText);
},
show: function (e) {
console.log("Shown: " + e.item.innerText);
},
contentLoad: function (e) {
console.log("Content loaded in " + e.item.innerText);
},
dataTextField: "title",
dataContentUrlField: "contentUrl",
dataSource: [{
title: "Formatting",
contentUrl: '../app/shared/include/grid-config/gad-config-grid-prop.html'
},
{
title: "Dimensions",
contentUrl: '../app/shared/include/grid-config/gad-config-grid-dimen.html'
},
{
title: "Risk Measures",
contentUrl: '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'
}],
error: function (e) {
console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
};
<div id="Gadgettabs" kendo-tab-strip="tabstrip" k-options="settings.tabOptions">
<ul>
<li class="k-state-active">Formatting</li>
<li>Dimensions</li>
<li>Risk Measures</li>
</ul>
</div>
Again, I need to immediately show the first tab's content; and also figure out how to dynamically change out the content of the first tab.
Thanks in advance...
Bob
**** UPDATE ****
I'm trying to dynamically change the contentUrl in the select: event above but it's not working.
Final resolution:
note: if you not using "controller as" syntax in your ng-controller directive (as I am), then just replace my "settings." object with "$scope." in the controller code. And of course in the html, just remove "settings." .
// KENDO TABSTRIP
settings.urls = ['../app/shared/include/grid-config/gad-config-grid-prop.html', '../app/shared/include/grid-config/gad-config-grid-dimen.html', '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'];
if ($scope.widget.gadgetType == "chart") {
settings.urls[0] = '../app/shared/include/barchart-config/gad-config-barchart-prop.html';
};
settings.tabOptions = {
//animation: { open: { effects: "fadeIn" } },
select: function (e) {
console.log("Selected: " + e.item.innerText);
},
change: function (e) {
console.log("Changed: ");
},
activate: function (e) {
console.log("Activated: " + e.item.innerText);
},
show: function (e) {
console.log("Shown: " + e.item.innerText);
},
contentLoad: function (e) {
console.log("Content loaded in " + e.item.innerText);
},
error: function (e) {
console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
};
<div id="Gadgettabs" kendo-tab-strip="settings.tabStrip"
k-rebind="settings.urls"
k-content-urls="settings.urls"
k-options="settings.tabOptions" >
<ul>
<li class="k-state-active">TAB1</li>
<li>TAB2</li>
<li>TAB3</li>
</ul>
</div>
Although I have tried several times, I could not solve trying many method.
Shortly this is the thing what I want to do : only get modified or new rows as an object or JSON string.
You should use set for changing the content of a record. Then, getting the records modified is just iterating through datasource.data() array and checking which items have dirty set to true.
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
// Dirty array contains those elements modified
console.log("dirty", dirty);
The following snippet shows both that changing the data programmatically or via Grid built-in incell edition is compatible with this approach.
$(document).ready(function() {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Discontinued: { type: "boolean" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
columns: [
"ProductName",
{ field: "Discontinued", width: 120 }
],
editable: "incell",
selectable: true
}).data("kendoGrid");
$("#change").on("click", function() {
var sel = grid.select();
if (sel.length) {
var item = grid.dataItem(sel);
item.set("Discontinued", true);
}
});
$("#show").on("click", function() {
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
$("#logger").html(JSON.stringify(dirty, null, 2));
});
});
#logger {
min-height: 60px;
border: 1px solid black;
overflow-x: scroll
}
#grid {
width: 500px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example">
<div>
This button changes the Discontinued field to "true" for the selected row:
<button id="change" class="k-button">Change selected</button>
</div>
<div>
Click for displaying modified rows:
<button id="show" class="k-button">Show dirty</button>
<pre id="logger"></pre>
</div>
<div id="grid"></div>
</div>
I'm having trouble configuring a `Kendo UI' grid to use a DropDownList as an editor. I have a JS Bin example to reproduce my behavior. The goal is to populate the BinNumber, PartNumber and StockNumber fields once a selection is made from the dropdown. Currently I can't even get the DropDown to bind to the recordset properly. If I make a selection and move to another field, I get [object Object] in the BinNumber field. If I go back in and make another selection, the BinNumber then sticks. I have read the documentation thoroughly but I am still thoroughly confused by it.
For the [object object] mess have a look at this post, there is an attribute introduced back in late 2013 dealing with this issue data-value-primitive="true". In the past I just used to re-map the selection back to ds manually, but the attribute does it all for you, I tested in you jsBin and works fine.
binDropdownEditor: function (container, options) {
$('<input data-text-field="BinNumber" data-value-field="BinNumber" data-value-primitive="true" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: viewModel.binDropDownDataSource
});
}
On change binding (please paste into your JSBin javascript tab):
var bins =["BinNumber:12121"];
var gridDS = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(bins);
}
},
schema: {
model: {
id:"Row",
fields: {
Row:{type:"string"},
BinNumber: {type:"string"},
PartNumber: {type:"string"},
StockNumber:{type:"string"}
}
}
},
pageSize: 50
});
var binDropDownDataSource = [
{ BinNumber: "12345",PartNumber:"P-2929",StockNumber:"S-06565" },
{ BinNumber: "23456",PartNumber:"P-2323",StockNumber:"S-956565" },
{ BinNumber: "34567",PartNumber:"P-4344",StockNumber:"S-67676" } ];
function appendEditor (container, options) {
$('<input data-text-field="BinNumber" data-value-primitive="true" data-value-field="BinNumber" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: binDropDownDataSource,
change:function(e){
var ddldataitem = this.dataItem();
var griditem = gridDS.at(0); // you might need to tweak this line
griditem.set("PartNumber",ddldataitem.PartNumber);
griditem.set("StockNumber",ddldataitem.StockNumber);
}
});
}
var grid= $("#bins").kendoGrid({
dataSource: gridDS,
scrollable: false,
autoBind:false,
batch:true,
editable : true,
navigatable: true,
toolbar: [ {name: 'custom-create', text: "Add New Line Item"}],
columns: [ {"field":"Row", title: "Row", width: "20px"},
{"field": "BinNumber","title":"Bin", editor: appendEditor},
{"field": "PartNumber", title: "Part ", width: "200px",editable: false },
{"field": "StockNumber", title: "Stock ", width: "200px",editable: false }
]
}).data("kendoGrid");
$(".k-grid-custom-create").on("click", function (e) {
gridDS.add({ Row:"1"});
});
The observable you had plugged in is not really necessary the underling data source is already observable, I have removed it. Please consider improving following line the index won't be always 0 var griditem = gridDS.at(0);
Here's how my DropDown is setup. This is a boolean field, so you will have to adjust it accordingly to your field
columns.Bound(m => m.IsInForecast).Title("Is Forecasted").ClientTemplate(
"# if (IsInForecast == true) { #" +
"<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
"<option id='yes' selected value='1'>Yes</option>" +
"<option id='no' value='0'>No</option>" +
"</select>" +
"# } else { #" +
"<select id='#= OrderId #' onchange=save('#= OrderId #'); style='Width: 80px; color: 'navy' > " +
"<option id='yes' value='1'>Yes</option>" +
"<option id='no' selected value='0'>No</option>" +
"# } #"
);
I am trying to figure out why appended form elements are not being notice by kendo mobile --- i have tried 10 different fixes but those items just dont get noticed:
This is in the view:
<li>
<div id="currentMovements">
<ul id="curMoves" data-role="listview" ></ul>
</div>
Add Movements:
<div id="routineMovements"></div>
</li>
And this is my script:
<script>
//init move count
var move_count = 0;
function onSelect(e) {
console.log("Selected: " + this.text(e.node));
//add li to movements div
//make each field unique by li
//using move_count
$("#currentMovements ul").append('<li><input type="text" name="moves[' + move_count + ']" data-min="true" id="moves[' + move_count + ']" class="k-input small-move" value="' + this.text(e.node) + '" /><input type="text" name="id[' + move_count + ']" data-min="true" id="sets[' + move_count + ']" class="k-input small-nums" value="3" /> sets of <input type="text" name="reps[' + move_count + ']" data-min="true" id="reps[' + move_count + ']" class="k-input small-nums" value="10" /><span class="clearitem">Delete</span></li>');
//increase move count
move_count++;
///test to see if the field is being noticed
moves = $('#moves[0]').val();
console.log(moves);
}
function populateRoutineForm() {
$('#curMoves .clearitem').live('click', function() {
$(this).parent().remove();
});
var routineMovementsData = new kendo.data.HierarchicalDataSource({
data: [
{
text: "Chest", items: [
{ text: "Inclined Bench" },
{ text: "Decline Bench" },
{ text: "Dumbell Presses" }
]
},{
text: "Tricep", items: [
{ text: "Cable Pulldowns" },
{ text: "Skull Crushers" },
{ text: "Close Grip Benchpress" }
]
}
]
});
//todo can we use the MVVM stuf from above to do this now?
$("#routineMovements").kendoTreeView({
dataSource: routineMovementsData,
select: onSelect
});
}
function sendAddRoutine() {
var userID = window.localStorage.getItem("userID");
var routine_title = $('#routine_title').val();
var routine_share = $('#routine_share').val();
///test to see if the field is being noticed
moves = $('#moves[0]').val();
console.log(moves);
$.ajax({
url: endpoint + "app/api/add_routine.php",
dataType: "jsonp",
type: "GET",
data: { userID: userID, routine_title: routine_title, routine_share: routine_share },
success: function (data) {
$('#routineResult').html(data.results);
//app.navigate("#view-routineFeed");
}
});
}
$('#routineDoneButton').click(function () {
sendAddRoutine();
});
</script>
Im wondering if there some way to re-init the view without losing other fields that appear above the append div?