I have two functions (load_data and fetch_data) inside of my datatables script. They are both using different ajax calls.
My table (name: product_data) and the script is working as expected but this error message is shown with the first page load:
"DataTables warning: table id=product_data - Cannot reinitialise
DataTable"
I think this error comes because I have a mistake in mergin these two functions together in one script. Could you help me how the two functions can initialise my table "product_data" correctly ?
$(document).ready(function() {
// Start Function 1
load_data();
function load_data(is_category) {
var dataTable = $('#product_data').DataTable({
"processing": true,
"serverSide": true,
"sDom": "rtipl",
"order": [],
"ajax": {
url: "fetch.php",
type: "POST",
data: {
is_category: is_category
}
},
"columnDefs": [{
"targets": [2],
"orderable": false,
}, ],
});
}
// Script for Function 1 //
$(document).on('change', '#category', function() {
var category = $(this).val();
$('#product_data').DataTable().destroy();
if (category != '') {
load_data(category);
} else {
load_data();
}
});
// Start Function 2
fetch_data('no');
function fetch_data(is_date_search, start_date = '', end_date = '') {
var dataTable = $('#product_data').DataTable({
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
url: "fetch.php",
type: "POST",
data: {
is_date_search: is_date_search,
start_date: start_date,
end_date: end_date
}
}
});
}
// Script for Function 2 //
$('#search').click(function() {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if (start_date != '' && end_date != '') {
$('#product_data').DataTable().destroy();
fetch_data('yes', start_date, end_date);
} else {
alert("Both Date is Required");
}
});
// Search Field
var datatable = $('#product_data').DataTable();
$('#searchfield').on('keyup', function() {
datatable.search(this.value).draw();
});
});
part of fetch.php
...
if($_POST["is_date_search"] == "yes")
{
$query .= 'order_id BETWEEN "'.$_POST["start_date"].'" AND "'.$_POST["end_date"].'" AND ';
}
if(isset($_POST["is_category"]))
{
$query .= "order_item = '".$_POST["is_category"]."' AND ";
}
...
At the backebd i,e fetch.php you may have validations
like check if start_date,end_date exist or not
check if is_category exist or not and fetch only for valid post data
$(document).ready(function() {
// Start Function 1
function load_data() {
//first recive all inputs here
let is_category = $("#category").val();
let start_date = $('#start_date').val();
let end_date = $('#end_date').val();
//at the backebd i,e fetch.php you may have validations
//i.e start_date,end_date exist or not
//is_category exist or not
//and initialise datatables once only
var dataTable = $('#product_data').DataTable({
"processing": true,
"serverSide": true,
"sDom": "rtipl",
"order": [],
"ajax": {
url: "fetch.php",
type: "POST",
data: {
is_category: is_category,
start_date: start_date,
end_date: end_date
}
},
"columnDefs": [{
"targets": [2],
"orderable": false,
}, ],
});
}
//calling the function on document load
load_data();
$(document).on('change', '#category', function() {
$('#product_data').DataTable().destroy();
load_data();
});
$('#search').click(function() {
if (start_date != '' && end_date != '') {
$('#product_data').DataTable().destroy();
load_data();
} else {
alert("Both Date is Required");
}
});
// Search Field
var datatable = $('#product_data').DataTable();
$('#searchfield').on('keyup', function() {
datatable.search(this.value).draw();
});
})
Related
I have datatable Like this
oInnerTable = $("#url_table_" + rotator_id).DataTable({
"processing": true,
"serverSide": true,
rowReorder: {
dataSrc: [1]
},
"ajax":{
url :"actions/data_url_response.php",
type: "post",
data: function ( d ) {
var url_status = $('.url_status').val();
d.rotator_id = rotator_id;
d.url_status = url_status;
}
},
autoWidth: false,
columnDefs: [
{ "visible": false, "targets": 0 },
{ orderable: true, className: 'reorder', targets: 0 },
{
"targets":[0, 7],
"orderable":false,
},
{
targets: 0,
render: function (data, type, row) {
return '<div class="form-check"><input type="checkbox" class="form-check-input position-static select_ids" value="'+row[0]+'"></div>';
}
},
],
dom: '<"datatable-scroll"t><"datatable-footer"ip>',
language: {
search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to search...',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '←' : '→', 'previous': $('html').attr('dir') == 'rtl' ? '→' : '←' }
}
});
And Update function is like below
var positionArray = [];
oInnerTable.on( 'row-reorder', function ( e, diff, edit ) {
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = oInnerTable.row( diff[i].node ).data();
positionArray.push({
myid:rowData[0],
mypositiion: diff[i].newData
});
}
if (positionArray.length>0) {
$.post("/link-to-script.php", {
positionArray: positionArray
}, function(data, status) {
positionArray = [];
})
} ;
} );
Since I have three rows in table, everytime when I change position, its calling ajax three time and sometime its even more time, Its not possible that its fire only one time and I can send position data to server with single ajax call?
Thanks!
How can I use the "DeviceID" in the "columns:" in another part of the script. I have tried all manner of things like re positioning some of the code but no matter what I do I can't get it to work.
I need to use the "DeviceID" as a variable in
"url: 'get_wayfinder_offline_status.php', data: { DeviceID: deviceid },"
Look at << USE THIS IN PART MARKED "HERE"
$(document).ready(function() {
var table = $('#WayFinderStatusTable').DataTable({
ordering: false,
paging: false,
searching: false,
bInfo: false,
responsive: true,
fixedHeader: true,
scrollX: false,
pageResize: true,
ajax: {
url: 'check_wayfinder_status.php',
dataSrc: ''
},
columns: [{
data: 'DisplayDescription',
"sWidth": "100%"
},
{
data: 'DeviceName',
"visible": false
},
{
data: 'MessageCount',
"visible": false
},
{
data: 'BoardOverride',
"visible": false
},
{
data: 'DeviceID',
"visible": false
}, // << USE THIS IN PART MAKED "HERE"
],
rowCallback: function(row, data, dataIndex) {
if (data.MessageCount == 2) {
$(row).find('td:eq(0)').addClass('WayFinderStatusTableOn HeaderStatusWayfinderRedTextBlink');
} else if (data.BoardOverride == 1) {
$(row).find('td:eq(0)').addClass('WayFinderStatusTableOverrideOn ');
$('#WayFinderStatusTable tbody').on('click', 'tr', function() {
var hotelid = "<?php echo $_SESSION['_amember_user']['hotelid'];?>";
var data = table.row(this).data();
var deviceid = data.DeviceID;
console.log("DEVICE ID", deviceid);
$.ajax({
url: 'get_wayfinder_override_status.php',
data: {
DeviceID: deviceid
},
type: 'POST',
dataType: 'JSON',
success: function(data) {
var result = JSON.stringify(data);
result = JSON.parse(result);
if (result.length > 0) {
console.log("BoardName", result);
$('#EditOverrideWayfinderRecordID').val(result[0]);
$('#EditOverrideWayfinderBoardName').val(result[1]);
var testimage = result[2];
console.log("TEST IMAGE", testimage);
$('#EditOverrideWayfinderImage').val(result[2]);
var imagepath = '../../../../conf/conf_images/override/' + hotelid + '/' + result[2];
$("#EditOverrideWayfinderLookUpCompanyImage").attr("src", imagepath);
$("#EditOverrideWayfinderImagePreview").attr("src", imagepath);
$('#EditOverrideWayfinderRoomFromDate').val(result[3]);
$('#EditOverrideWayfinderRoomFromTimeH').val(result[4]);
$('#EditOverrideWayfinderRoomFromTimeM').val(result[5]);
$('#EditOverrideWayfinderRoomToDate').val(result[6]);
$('#EditOverrideWayfinderRoomToTimeH').val(result[7]);
$('#EditOverrideWayfinderRoomToTimeM').val(result[8]);
$('#EditOverrideWayfinderPromotionName').val(result[9]);
$('#EditOverrideWayfinderHardwareID').val(result[10]);
$('#edit_wayfinder_override_data_modal').modal('show');
}
}
});
});
} else if (data.BoardOverride == "") {
$(row).find('td:eq(0)').addClass('WayFinderStatusTableOff');
}
},
});
$(document).on('click', '.WayFinderStatusTableOff', function(e) {
$('#wayfinder_override_data_modal').modal('show');
});
$(document).on('click', '.WayFinderStatusTableOn', function(e) {
console.log("OFFLINE CLICKED");
$.ajax({
url: 'get_wayfinder_offline_status.php',
data: {
DeviceID: deviceid //<<HERE
},
type: 'POST',
dataType: 'JSON',
success: function(data) {
var result = JSON.stringify(data);
result = JSON.parse(result);
if (result.length > 0) {
// DO SOMETHING
}
}
});
$('#offline_data_modal').modal('show');
});
setInterval(function() {
$('#WayFinderStatusTable').DataTable().ajax.reload();
}, 30000);
});
Based on structure of your datatables and column, clicked on a row the deviceId is find by using the method table.row( this ).data(); and next find the right index of the data.
$('#WayFinderStatusTable').on('click', 'tr', function () {
const data = table.row( this ).data();
const deviceId = data[4];
alert(deviceId + ' -> deviceid');
});
I want to create and show number sort ascending data in datatables like in this picture
index number
and I don't have sorted data number in database and my json data
this is my code:
$(document).ready(function() {
$('#dataya').DataTable({
lengthChange: false,
ajax: {
url: "http://localhost/jdih_webservice/api/xxxx",
dataSrc: ""
},
columns: [
{ data: "id_dokumen"},
{ data: "judul"},
{ data: "subjek"}
],
select: true
});
$('#search').click(function(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
var myTable = $('#dataya').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"bDestroy": true,
"autoWidth": true,
"data": [],
"columns": [{
"title": "ID",
"data": "id_dokumen"
}, {
"title": "Judul",
"data": "judul"
}, {
"title": "Subjek",
"data": "subjek"
}],
"order": [[ 1, 'asc' ]]
});
if(start_date != '' && end_date !='')
{
var startDate = new Date(start_date);
var tglmulai = startDate.getFullYear();
var endDate = new Date(end_date);
var tglselesai = endDate.getFullYear();
let url = 'http://localhost/jdih_webservice/api/xxxx';
fetch(url)
.then(res => res.json())
.then((out) => {
var resultProductData = out.filter(function(a) {
var createdAt = new Date(a.tgltetap);
var tgldata = createdAt.getFullYear();
if( tgldata >= tglmulai && tgldata <= tglselesai ) return a;
});
myTable.clear();
$.each(resultProductData, function (index, value) {
myTable.row.add(value);
});
myTable.draw();
})
.catch(err => { throw err });
}
});
});
Anyone could help? , so appreciate thanks
and maybe if you not busy could you create/build in jsfiddle
This code is from this DataTables thread and should do what you want. It's using an additional column for the indexes:
dataTable.on( 'order.dt search.dt', function () {
dataTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
I have created a partial view with Jquery data table. I simply pass GridResulViewtModel to partial view where ever I need Jquery data table grid. It working fine. Now I need a column with edit button so that edit functionality could be implemented but I am unable to figure out how to implement it.
Following GridResulViewtModel I set value on each controller and use on partial view.
public class GridResulViewtModel
{
private List<ColumnsHeader> _Header;
private string _JsonHeader;
public String TableId { get; set; }
public List<string> DisplayHeader { get; set; }
public List<ColumnsHeader> Header
{
get { return _Header; }
set
{
_Header = value;
StringBuilder headerProperty = new StringBuilder();
headerProperty.Append("[");
foreach (var item in Header)
{
if (!string.IsNullOrEmpty(item.DefaultContent))
headerProperty.Append("{ 'mDataProp': '" + item.DataField + "', sDefaultContent: '" + item.DefaultContent + "' },");
else
headerProperty.Append("{ 'mData': '" + item.DataField + "', sDefaultContent: '" + item.DefaultContent + "' },");
}
headerProperty.Append("]");
_JsonHeader = headerProperty.ToString().Replace(",]", "]");
}
}
public String JsonData { get; set; }
public String JsonHeader { get { return _JsonHeader; } }
public string URL { get; set; }
}
Setting value from controller like this
public ActionResult Index()
{
try
{
GridResulViewtModel model = new GridResulViewtModel();
List<ColumnsHeader> lstColumnsHeader = new List<ColumnsHeader>();
var data = customerService.GetCustomers();
// var Edit = new ColumnsHeader() { DataField = null, DefaultContent = "<button style=\"color:green;\">I am text</button>" };
var Edit = new ColumnsHeader() { DataField = "", DefaultContent = "How to make it Edit button?" };
var CustomerID = new ColumnsHeader() { DataField = "CustomerID", DefaultContent = "" };
var firstName = new ColumnsHeader(){ DataField="FirstName", DefaultContent =""};
var LastName = new ColumnsHeader() { DataField = "LastName", DefaultContent = "" };
var CustomerCode = new ColumnsHeader() { DataField = "CustomerCode", DefaultContent = "" };
lstColumnsHeader.Add(CustomerID);
lstColumnsHeader.Add(firstName);
lstColumnsHeader.Add(LastName);
lstColumnsHeader.Add(CustomerCode);
lstColumnsHeader.Add(Edit);
model.Header = lstColumnsHeader;
//model.Header = new List<string> { "CustomerID", "FirstName", "LastName", "CustomerCode" };
model.DisplayHeader = new List<string> { "Edit", "ID", "First Name", "Last Name", "Customer Code" };
model.TableId = "tblCustomer";
model.JsonData = JsonConvert.SerializeObject(data);
model.URL = "/Customer/GetCustomer";
return ViewResult("Index", model);
}
catch (Exception ex)
{
throw;
}
and this is partial view I result on mulitple views
<script type="text/javascript">
$(document).ready(function () {
try {
var table = $(#Model.TableId);
var tableData = #Html.Raw(Model.JsonData)
var tableHeader = #Html.Raw(Model.JsonHeader)
oTable = $(table).dataTable(
{
"processing": true,
"serverSide": true,
"ajax":
{
"url": "#Model.URL",
"type": "POST",
"dataType": "JSON"
},
"aaData": tableData,
"aoColumns": tableHeader,
"bPaginate": true,
//"bLengthChange": true,
//"bFilter": true,
//"bSort": true,
//"bInfo": true,
//"bAutoWidth": false,
//"bStateSave": false,
//"idisplayLength": 15,
"sPaginationType": "full_numbers",
"bDeferRender": true,
// "sDom": 'T<"clear">lfrtip',
//"oTableTools":
// {
// "sSwfPath": "../Content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
// "aButtons": [ "copy",
// {
// "sExtends": "collection",
// "sButtonText": "Save",
// "aButtons": [ "csv", "pdf" ]
// }
// ]
// }
});
}
catch (err) {
//alert("Error in operation! " + err);
}
});
</script>
</div>
}
I am still unable to understand how should I set Id as data-id attribute on Edit button?
The code below updates the DataTable options to version 1.10+ and adds an event handler that lets you get hold of a data object for a row.
oTable = $(table).dataTable(
{
"processing": true,
"serverSide": true,
"ajax":
{
"url": "#Model.URL",
"type": "POST",
"dataType": "JSON"
},
"data": tableData,
"columns": tableHeader,
"paging": true,
//"bLengthChange": true,
//"bFilter": true,
//"bSort": true,
//"bInfo": true,
//"bAutoWidth": false,
//"bStateSave": false,
//"idisplayLength": 15,
"pagingType": "full_numbers",
"deferRender": true,
// "sDom": 'T<"clear">lfrtip',
//"oTableTools":
// {
// "sSwfPath": "../Content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
// "aButtons": [ "copy",
// {
// "sExtends": "collection",
// "sButtonText": "Save",
// "aButtons": [ "csv", "pdf" ]
// }
// ]
// }
});
// row button on click handler
$("#example tbody").on("click", "button", function () {
var tr = $(this).closest("tr");
var data = oTable.rows(tr).data()[0];
// do what you need to do with the row data
});
Kendo Scheduler via javascript
Custom Edit Template
Edit Event -> programmatically setting a value on custom template controls
Value shows in control, not included in dataModel
I am implementing a Kendo Scheduler via javascript. I am using a custom edit template because there are several editable fields which are not native to the scheduler. One such field uses a kendo dropdownlist. I have subscribed to the edit event and in this event I get a handle on the dropdown and set its value. The UI element correctly shows the value I have set but when I save the scheduler the dropdownlist value is not included in the JSONified dataModel which I pass off to a CRUD handler. If I manually select an option from the dropdownlist it is included. I called the change event of the dropdownlist for giggles after the programmatic setting of its value. Still nothing. I tried this with textboxes, multiselections, numerictextboxes... they all fail to register their programmatically set values with the model.
Ideas? Thanks.
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2015/4/14"),
views: [
"day",
{ type: "workWeek", selected: true, showWorkHours: true },
"week",
"month"
],
allDayEventTemplate: $("#allDay-template").html(),
eventTemplate: $("#event-template").html(),
edit: function (e) {
var location = e.container.find("[id=location]");
location.kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: GetLocations,
filter: "contains",
suggest: true
});
var taskReminder = e.container.find("[id=AddTaskReminder]");
taskReminder.kendoNumericTextBox({
placeholder: "None",
format: "n0",
min: "0",
decimals: "0",
step: 15
});
var wnd = $(e.container).data("kendoWindow");
wnd.setOptions({
width: 800,
height: 600
});
var clientID = $("#clientID");
var ClientID = e.container.find("[id=ClientID]").data("kendoDropDownList");
if (clientID.val() != "All") {
ClientID.enable(false);
}
var Priority = $(e.container.find('[data-bind="value: Priority"]')).data("kendoDropDownList");
if (e.event.isNew()) {
if (clientID.val() != "All") {
ClientID.value(clientID.val());
e.container.find("[id=ClientID]").change();
}
var workerID = $("#workerID");
var WorkerID = e.container.find("[id=workers]").data("kendoMultiSelect");
if (workerID.val() != null) {
WorkerID.value(workerID.val());
e.container.find("[id=workers]").change();
}
Priority.value(2);
(e.container.find('[data-bind="value: Priority"]')).change();
}
var taskName = e.container.find("[id=taskName]");
taskName.kendoComboBox({
dataSource: GetTaskTypes,
dataTextField: "text",
dataValueField: "value",
filter: "contains",
suggest: true
});
var isAllDay = $(e.container.find('[id=isAllDay]'));
var StartDateTime = $(e.container.find('[id=startdatetime]')).data("kendoDateTimePicker");
var EndDateTime = $(e.container.find('[id=enddatetime]')).data("kendoDateTimePicker");
var DueDateFirm = $(e.container.find('[id=DueDateFirm]'));
var Reminder = $(e.container.find('[id=AddTaskReminder]')).data("kendoNumericTextBox")
var TaskComment = $(e.container.find('[id=TaskComment]'));
taskName.change(function () {
$("#TaskTypeName").val($(e.container.find("[id=taskName]")).data("kendoComboBox").text());
if ($(e.container.find("[id=taskName]")).data("kendoComboBox").select() != "-1") {
if (confirm("Apply task type defaults (overriding previous values)?")) {
$.ajax({
type: "GET",
cache: false,
url: "/home/schedule/remotetasks.asp?Action=GetDefaultTaskTypeValues&DefaultTask=" + $(taskName).val(),
success: function (data) {
DS = JSON.parse(data);
Priority.value(DS[0].Priority);
if (DS[0].AllDayEvent == "True") {
isAllDay.prop("checked", true);
}
else {
isAllDay.prop("checked", false);
if (DS[0].DefaultStartTime != "") {
var d = new Date(StartDateTime.value());
d.setHours(DS[0].DefaultStartHour);
d.setMinutes(DS[0].DefaultStartMinute);
StartDateTime.value(d);
}
if (DS[0].DefaultEndTime != "") {
var d = new Date(EndDateTime.value());
d.setHours(DS[0].DefaultEndHour);
d.setMinutes(DS[0].DefaultEndMinute);
EndDateTime.value(d);
}
}
isAllDay.change();
Reminder.value(DS[0].DefaultReminderMinutes);
TaskComment.val(DS[0].TaskComment);
}
});
}
}
});
},
save: function (e) {
if (e.container != null) {
// AssignedTaskName req val
// Dates req val
var isAllDay = e.container.find("[id=isAllDay]");
var startdatetime = e.container.find("[id=startdatetime]");
var startdate = e.container.find("[id=startdate]");
var enddatetime = e.container.find("[id=enddatetime]");
var startdatereq = e.container.find("[id=startdatereq]");
var enddatereq = e.container.find("[id=enddatereq]");
var isAllDay = $(startdate).is(":visible");
if (isAllDay) {
if ($(startdate).val() == "") {
//alert('invalid startdate');
e.preventDefault();
if ($(startdatereq).hasClass('hidden'))
startdatereq.removeClass('hidden');
}
else {
//alert('valid startdate');
if (!$(startdatereq).hasClass('hidden'))
startdatereq.addClass('hidden');
}
}
else {
if ($(startdatetime).val() == "") {
//alert('invalid startdatetime');
e.preventDefault();
if ($(startdatereq).hasClass('hidden'))
startdatereq.removeClass('hidden');
}
else {
//alert('valid startdatetime');
if (!$(startdatereq).hasClass('hidden'))
startdatereq.addClass('hidden');
}
if ($(enddatetime).val() == "") {
//alert('invalid enddatetime');
e.preventDefault();
if ($(enddatereq).hasClass('hidden'))
enddatereq.removeClass('hidden');
}
else {
//alert('valid enddatetime');
if (!$(enddatereq).hasClass('hidden'))
enddatereq.addClass('hidden');
}
}
}
},
editable: {
template: kendo.template($("#customEditorTemplate").html())
},
moveEnd: function (e) {
if (!confirm("Are you sure you want to update this event?")) {
e.preventDefault();
}
},
resizeEnd: function (e) {
if (!confirm("Are you sure you want to update this event?")) {
e.preventDefault();
}
},
dataSource: {
batch: true,
sync: function () {
this.read();
},
transport: {
create: {
url: "/home/schedule/remotemanagecalendar.asp?Action=create",
dataType: "json"
},
read: {
url: "/home/schedule/remotemanagecalendar.asp?Action=read",
dataType: "json"
},
update: {
url: "/home/schedule/remotemanagecalendar.asp?Action=update",
dataType: "json"
},
destroy: {
url: "/home/schedule/remotemanagecalendar.asp?Action=destroy",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation === "read") {
var scheduler = $("#scheduler").data("kendoScheduler");
var result = {
start: scheduler.view().startDate(),
end: scheduler.view().endDate(),
clientid: $("#clientID").val(),
workerid: $("#workerID").val(),
taskstatus: $("#taskStatus").val()
}
return { models: kendo.stringify(result) };
}
else if (operation === "create" && options.models) {
return { models: kendo.stringify(options.models) + "||" + $("#TaskTypeName").val() };
}
else if (operation === "update" && options.models) {
return { models: kendo.stringify(options.models) + "||" + $("#TaskTypeName").val() };
}
else if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "AssignedTaskID", type: "number" },
taskTypeID: { from: "TaskTypeID", type: "int" },
title: { from: "AssignedTaskName", type: "string" },
start: { from: "StartDateTime", type: "date", validation: { required: true } },
end: { from: "EndDateTime", type: "date" },
isAllDay: { from: "isAllDay", type: "boolean" },
dueDateFirm: { from: "DueDateFirm", type: "boolean" },
reminderMinutes: { from: "ReminderMinutes", type: "int" },
ClientID: { from: "ClientID", type: "int" },
Priority: { from: "Priority", type: "int" },
workers: { from: "Workers", nullable: true },
TaskComment: { from: "TaskComment", type: "string" },
locationid: { from: "LocationID", type: "string" }
}
}
}
}
});
});
var GetTaskTypes = new kendo.data.DataSource({
transport: {
read: {
url: "/home/schedule/remotetasks.asp?Action=GetAddTaskTypes",
dataType: "json"
}
}
});
var GetClientIDs = new kendo.data.DataSource({
transport: {
read: {
url: "/home/schedule/remotetasks.asp?Action=GetAddClients",
dataType: "json"
}
}
});
var GetPriorities = new kendo.data.DataSource({
transport: {
read: {
url: "/home/schedule/remotemanagecalendar.asp?Action=GetPriorities",
dataType: "json"
}
}
});
var GetAddWorkers = new kendo.data.DataSource({
transport: {
read: {
url: "/home/schedule/remotetasks.asp?Action=GetAddWorkers",
dataType: "json"
}
}
});
var GetLocations = new kendo.data.DataSource({
transport: {
read: {
url: "/home/schedule/remotemanagecalendar.asp?Action=GetLocations",
dataType: "json"
}
}
});
$("#AddTaskReminder").kendoNumericTextBox({
placeholder: "None",
format: "n0",
min: "0",
decimals: "0",
step: 15
});
I found the answer
edit: function(e) {
e.event.set('modelFieldName', 'value');
}
This sets it on the UI element as well as updates the dataModel. Hope it helps the next poor sap.