working for one id not for two
var kendoEditorFields = '#ApplicationGlobals.SELECTED_COMPANY_CODE' != '#CompanyCode.RICHMOND' ?
"#txArNcrLineDispositionsDisposition,#txArNcrLineDispositionsCorrectiveAction" : "#txArNcrLineDispositionsDisposition";
var kendoEditorFields = '#ApplicationGlobals.SELECTED_COMPANY_CODE' != '#CompanyCode.RICHMOND' ?
"#txArNcrLineDispositionsCorrectiveAction,#txArNcrLineDispositionsDisposition" : "#txArNcrLineDispositionsDisposition";
$(kendoEditorFields).kendoEditor({
encoded: false,
paste: function (e) {
if ((/^<img src="data:image/i).test(e.html)) {
e.html = "";
}
},
imageBrowser: {
transport: {
read: "ImageBrowser/Read",
destroy: { url: "ImageBrowser/Destroy", type: "POST" },
uploadUrl: "ImageBrowser/Upload",
thumbnailUrl: "ImageBrowser/Thumbnail",
imageUrl: baseUrl + $.cookie("IMAGEBROWSERFILEPATH") + "/{0}"
}
},
tools: [
"bold",
"italic",
"underline",
"strikethrough",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull",
"insertUnorderedList",
"insertOrderedList",
"indent",
"outdent",
"createLink",
"unlink",
"insertImage",
"insertFile",
"subscript",
"superscript",
"tableWizard",
"createTable",
"addRowAbove",
"addRowBelow",
"addColumnLeft",
"addColumnRight",
"deleteRow",
"deleteColumn",
"viewHtml",
"formatting",
"cleanFormatting",
"fontName",
"fontSize",
"foreColor",
"backColor",
"print",
{
name: "fullscreen",
template: '<a class="toggle-button" onclick="toggleFullScreen()" title="#ResourceStrings.Text_Toggle_Screen"> <span class="k-icon k-i-maximize k-tool-icon" /></a>'
}
]
});
Related
```
function chart(records) {
Highcharts.chart('thechart', {
chart: {
type: 'column'
},
title: {
text: ['Weekly Home Work', records.year[0], records.group[0], records.subject[0], records.paper[0],]
},
subtitle: {
text: 'Source: WorldClimate.com'
},
lang: {
noData: 'No data is available in the chart'
},
xAxis: {
categories: records.count,
crosshair: true
},
yAxis: {
// categories: records.question_no,
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return 'Question No: ' + this.x + 'Students whoose give Question Wrong: ' + this.y + '' + this.series.name;
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: records.data
});
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
var graphData = [];
$('#graph').click(function() {
var from = $("#from").val();
var to = $("#to").val();
var sub_id = $("#select_sub_id").val();
var year_id = $("#select_year_id").val();
var group_id = $("#select_group_id").val();
var week_id = $("#select_week_id").val();
var paper_id = $("#select_paper_id").val();
$.ajax({
url: '{{ route('graph_showDateGraph') }}',
method: "Post",
data:{ 'from' : from,
'to' : to,
'sub_id' : sub_id,
'year_id' : year_id,
'group_id' : group_id,
'paper_id' : paper_id,
'week_id' : week_id
},
success:function(updated) {
console.log(updated);
graphData = updated;
chart(updated);
}
});
});
```
I use kendoDropDownList and have the following code:
<div id="memberNotInit-grid"></div>
<script>
$(document).ready(function () {
$("#memberNotInit-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("MemberNotInitList", "RandomPoolInit"))",
type: "POST",
dataType: "json",
data: function() {
var data = {
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(Model.PageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(Model.AvailablePageSizes)],
#await Html.PartialAsync("_GridPagerMessages")
},
editable: {
confirmation: "#T("Common.DeleteConfirmation")",
mode: "inline"
},
scrollable: false,
columns: [
{
field: "FirstName",
title: "#T("PoolMemberList.Fields.FirstName")",
width: 150
},
{
field: "LastName",
title: "#T("PoolMemberList.Fields.LastName")",
width: 150
},
{
field: "Status",
template: columnTemplateFunction
},
{
field: "Reason",
width: 150,
template: "<input data-bind='value:Reason' class='reasonTemplate' />",
//hidden: true
}
],
dataBound: function (e) {
var grid = e.sender;
var items = e.sender.items();
items.each(function (e) {
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
$(ddt).kendoDropDownList({
value: dataItem.value,
dataSource: ddlDataSource,
dataTextField: "displayValue",
dataValueField: "Status",
change: onDDLChange
});
var reason = $(this).find('.reasonTemplate');
$(reason).keydown(reasonChange);
reason.hide();
});
}
});
var ddlDataSource = [
{
Status: #((int)DriverRandomPoolStatus.Enrollment),
displayValue: "Enrollment"
},
{
Status: #((int)DriverRandomPoolStatus.Active),
displayValue: "Active"
},
{
Status: #((int)DriverRandomPoolStatus.Excused),
displayValue: "Excused"
}
];
function columnTemplateFunction(dataItem) {
var input = '<input class="dropDownTemplate"/>'
return input
};
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#memberNotInit-grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("Status", e.sender.value());
//alert(e.sender.value());
if (dataItem.Status == #((int)DriverRandomPoolStatus.Active)) {
$.ajax({
method: "POST",
url: "#Html.Raw(Url.Action("ChangeMemberStatus", "RandomPoolInit"))",
data: { id: dataItem.Id, status: dataItem.Status }
}).done(function () {
grid.tbody.find("tr[data-uid=" + dataItem.uid + "]").hide();
grid.pager.refresh();
});
}
if (dataItem.Status == #((int)DriverRandomPoolStatus.Excused)) {
grid.tbody.find("tr[data-uid=" + dataItem.uid + "]").find('.reasonTemplate').show();
var ddl = grid.tbody.find("tr[data-uid=" + dataItem.uid + "]").find('.dropDownTemplate');
//ddl.value(dataItem.Status);
}
};
function reasonChange(event) {
if (event.keyCode === 13) {
var element = event.target;
var row = element.closest("tr");
var grid = $("#memberNotInit-grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
var r = grid.tbody.find("tr[data-uid=" + dataItem.uid + "]").find('.reasonTemplate').val();
$.ajax({
method: "POST",
url: "#Html.Raw(Url.Action("ChangeMemberStatus", "RandomPoolInit"))",
data: { id: dataItem.Id, status: dataItem.Status, reason: r }
}).done(function () {
grid.tbody.find("tr[data-uid=" + dataItem.uid + "]").hide();
grid.pager.refresh();
});
}
}
});
</script>
but when we select "Exclused" from dropdownlist value of dropdownlist is dumped to Enrollment (first value from dropdownlist). Why so and how to fix it?
I fixed it the following way:
$(ddt).kendoDropDownList({
value: dataItem.Status,
.....
});
not:
value: dataItem.value,
i have a problem with my datatable.
Using require.js buttons are not showing up as I would expect.
I have tried without require.js and it is working fine, using require I have this problem.
Here the code snippet:
UPDATE 15.12.2016:
var jobDataTable = function(){
requirejs.config({
baseUrl: "./assets",
paths: {
jquery: "js/vendor/jquery-1.11.1.min.js",
bootstrap: 'js/bootstrap/js/bootstrap.min',
datatables: 'plugins/dataTables/js/jquery.dataTables.min',
'datatables.bootstrap': 'plugins/dataTables/js/dataTables.bootstrap.min',
buttons: "plugins/dataTables/extensions/buttons/dataTables.buttons.min",
colVis: "plugins/dataTables/extensions/buttons/buttons.colVis.min",
html5: " plugins/dataTables/extensions/buttons/buttons.html5.min",
flash: " plugins/dataTables/extensions/buttons/buttons.flash.min",
print: " plugins/dataTables/extensions/buttons/buttons.print.min",
jsZip: "js/jszip"
},
shim: {
'bootstrap':{ deps:['jquery']},
'datatables':{ deps:['jquery', 'bootstrap']},
'datatables.bootstrap':{ deps:['datatables']},
'buttons': { deps:['datatables']},
'html5': { deps:['datatables', 'buttons']},
'flash': { deps:['datatables', 'buttons']},
'colVis':{ deps:['datatables', 'buttons']},
'print': { deps:['datatables', 'buttons']}
}
});
require(['jquery', 'bootstrap', 'datatables'], function($){
var dataset = app.getJobsByUser();
var jobTable = $('#axCsJobsTable').DataTable({
aaData: dataset,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
aoColumns: [
{ "mDataProp": "JOB_ID" },
{ "mDataProp": "JOB_NAME" },
{ "mDataProp": "JOB_EXPORT_DATE" },
{ "mDataProp": "JOB_EXPORT_FORMAT" },
{ "mDataProp": "JOB_CDATE" },
{ "mDataProp": "JOB_STATUS",
"sClass": "status",
"mRender": function (data, type, row) {
if (parseFloat(data) > 0) {
return "<span class='glyphicon glyphicon-ok-circle'></span>";
} else {
return "<span class='glyphicon glyphicon-time'></span>";
}
}
},
{
"mDataProp": null,
"className": "center",
"defaultContent": "<button id='axCsJobRemove' type='button' class='btn btn-default btn-sm'> <span class='glyphicon glyphicon-trash'></span> Delete </button>"
},
{
"mDataProp": null,
"className": "center",
"defaultContent": "<button id='axCsJobConvert' type='button' class='btn btn-default btn-sm'> <span class='glyphicon glyphicon-save'></span> Convert </button>"
}
]
});
$('#axCsJobsTable tbody').on( 'click', '#axCsJobRemove', function () {
var data = jobTable.row( $(this).parents('tr') ).data();
if (removeJob(data)==1){
jobTable
.row( $(this).parents('tr') )
.remove()
.draw();
}
});
$('#axCsJobsTable tbody').on( 'click', '#axCsJobConvert', function () {
var data = jobTable.row( $(this).parents('tr') ).data();
if(startJob(data)==1){
console.log('Job run successfully');
$('#axCsJobsTable').dataTable().fnDestroy();
setTimeout(function() { jobDataTable(); }, 3000);
}
});
});
}
Some ideas where It hangs?
Missing some dependencies?
Regards,
Patric
Is there any method like that dataSource.getFieldType(field) in datasource:
var dataSource = new kendo.data.DataSource({
// somethings here,
schema : {
model : {
post_id : {type: "number" },
post_title : {type:"string"},
post_date : {type:"date"}
}
}
});
var fieldType = dataSource.getFieldType("post_title"); // it should return string
You should define a getFieldType function as:
function getFieldType(dataSource, field) {
return dataSource.options.schema.model.fields[field].type;
}
and using it would be:
var fieldType = getFieldType(dataSource, "post_title");
Alternatively, you can extend KendoUI DataSource for defining a new method called getFieldType by doing:
kendo.data.DataSource.prototype.getFieldType = function(field) {
return this.options.schema.model.fields[field].type;
}
and using it would be:
var fieldType = dataSource.getFieldType("post_title");
Check here the version using DataSource extension:
$(document).ready(function() {
kendo.data.DataSource.prototype.getFieldType = function(field) {
return this.options.schema.model.fields[field].type;
}
$("#show").on("click", function() {
var ds = $("#grid").data("kendoGrid").dataSource;
alert("Freight: " + ds.getFieldType("Freight"));
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
pageable: true,
columns: [
{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShipCity",
title: "Ship City"
}
]
});
});
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<button id="show" class="k-button">Show Freight type</button>
<div id="grid"></div>
I am using a Kendo UI grid, which looks like this:
function refreshGrid()
{
$(".k-pager-refresh.k-link").click();
}
var editWindow;
var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
var gridColumns =
[{
width: 90,
command: {
name: "edit",
text: "Edit",
click: function(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
editWindow = $("#edit").kendoWindow({
title: "Edit User",
modal: true,
visible: false,
resizable: false,
width: 800,
height: 400,
content: 'myediturl' + dataItem.ID
});
editWindow.data("kendoWindow").center().open();
return false;
}
}
},
{
width: 90,
command: {
name: "delete",
text: "Delete",
click: function(e) {
//alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
if (confirm("Are you sure you want to delete this user?"))
{
$.ajax({
type: 'POST',
url: '#Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
success: function (param) { refreshGrid(); },
async: false
});
}
return false;
}
}
},
{
field: "FullName",
title: "Full Name",
type: "string"
},
{
field: "Email",
title: "Email",
type: "string"
},
{
field: "LogCreateDate",
title: "Created",
type: "date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
}];
//getSorts the columns of the grid
function getColumns() {
//Parsing the set of columns into a more digestable form
var columns = "";
for (var col in gridColumns) {
if (!!gridColumns[col].field)
{
if (columns.length > 0) {
columns += ";";
}
columns += gridColumns[col].field + "," + gridColumns[col].type;
}
}
return columns;
}
function getSorts(sortObject) {
if (!(sortObject)) {
return "";
}
//Getting the row sort object
var arr = sortObject;
if ((arr) && (arr.length == 0)) {
return "";
}
//Parsing the sort object into a more digestable form
var columnSet = getColumns();
var returnValue = "";
for (var index in arr) {
var type = "";
for (var col in gridColumns) {
if (gridColumns[col].field === arr[index].field) {
type = gridColumns[col].type;
}
}
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
}
return returnValue;
}
var grid;
$(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "mydatasourceurl",
type: "POST",
},
parameterMap: function (data, type) {
data.filters = JSON.stringify(data.filter);
data.columns = JSON.stringify(getColumns());
data.sorts = JSON.stringify(getSorts(data.sort));
console.log(data);
return data;
}
},
schema: {
fields: fields,
data: "Data",
total: "Total"
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
toolbar: [{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}],
height: 392,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: gridColumns
});
grid = $("#grid").data("kendoGrid");
});
My create toolbar action is not triggered on click. How can I resolve this problem, is Kendo UI able to handle toolbar click events? The best solution I came up with looks like this:
$(".k-button.k-button-icontext.k-grid-add").click(function () {
//If the window doesn't exist yet, we create and initialize it
if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
grids[gridContainerID].addWindow.kendoWindow({
title: "Add " + entityName,
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: addUrl
});
}
//Otherwise we just open it
else {
grids[gridContainerID].addWindow.data("kendoWindow").open();
}
//Centralizing and refreshing to prepare the layout
grids[gridContainerID].addWindow.data("kendoWindow").center();
grids[gridContainerID].addWindow.data("kendoWindow").refresh();
return false;
});
Thanks in advance.
Instead of using that complex selector use the one that Kendo UI creates from name:
toolbar: [
{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}
],
and then:
$(".k-grid-Add", "#grid").bind("click", function (ev) {
// your code
alert("Hello");
});
In kendogrid docs here shows that there is no click configuration for grid toolbar buttons like grid.colums.commands.
To solve this problem you can reference following steps:
create a template for toolbar
<script id="grid_toolbar" type="text/x-kendo-template">
<button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>
apply tempate to toolbar
toolbar:[{text:"",template: kendo.template($("#grid_toolbar").html())}]
add event listener to button
$("#grid_toolbar_queryBtn").click(function(e) {
console.log("[DEBUG MESSAGE] ", "query button clicked!");
});