datatable reinstallation not working in jQuery - datatable

I am trying to fill the Datatable row content dynamically using Ajax Post. But it loaded the content at first shot correctly but when I try to fill content once again it returns error Can't instantiation Datatable. .
We refereed https://datatables.net/examples/data_sources/js_array.html For datatable row content.
Can Any one please help Us.

$.ajax({
url : SITE_ROOT_DIR+"ajaxFunction.php?Exportedinvoices=1&daterange="+daterange+"&fromDate="+fromDate+"&toDate="+toDate,
type : 'post',
cache : false,
success : function(data){
var message = JSON.parse(data);
var pLen,i;
pLen=message.length;
if(pLen>0){
var carter=[];var carterarr=[];
for(i=0;i<pLen;i++)
{
var company_name=message[i]['company_name'];
var salesOrderID=message[i]['salesOrderID'];
var salesOrderDate=message[i]['salesOrderDate'];
var product_code=message[i]['product_code'];
var quantity=message[i]['quantity'];
var deliveryDate=message[i]['deliveryDate'];
var ponuber=message[i]['ponuber'];
var TermsRefFullname=message[i]['TermsRefFullname'];
var ShipMethodFullName=message[i]['ShipMethodFullName'];
var SalesRepFullName=message[i]['SalesRepFullName'];
var ItemsalesTaxRefFullname=message[i]['ItemsalesTaxRefFullname'];
var CustomerMsgRefFullName=message[i]['CustomerMsgRefFullName'];
var val=company_name+'*'+salesOrderID+'*'+salesOrderDate+'*'+product_code+'*'+quantity+'*'+deliveryDate+'*'+ponuber+'*'+TermsRefFullname+'*'+SalesRepFullName+'*'+ShipMethodFullName+'*'+ItemsalesTaxRefFullname+'*'+CustomerMsgRefFullName;
var carterarr =carterarr+val+'#';
var carter=carterarr.slice(0, -1);
}
var arlene3 = carter.split("#");
var farray=[];var Aarray=[];var myarray=[];
for(var i=0;i<arlene3.length;i++){
var arraynow=arlene3[i];
Aarray=arraynow .split("*");
myarray.push(Aarray);
}
dataSet=myarray;
$('#example1').DataTable( {
destroy: true,
data: dataSet,
columns: [
{ title: "CustomerRefFullName" },
{ title: "InvoiceRefNumber" },
{ title: "TxnDate" },
{ title: "ItemRefFullName" },
{ title: "Quantity" },
{ title: "DueDate" },
{ title: "PoNumber" },
{ title: "TermsRefFullname" },
{ title: "SalesRepFullName" },
{ title: "ShipMethodFullName" },
{ title: "ItemsalesTaxRefFullname" },
{ title: "CustomerMsgRefFullName" },
],
"ordering": false,
"searching": false,
"paging": false,
"info": false,
} );
$('.tabheading').css("display","block");
}
else
{
alert("No datas found");
}
}
});

Related

KendoDropDownList clear value

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,

Grid is not loading as a item of penal.

I am trying to load grid in as a item panel with ajax call. My grid is not loading. Can you please help me. This is I am trying because I was not getting scope in ext ajax call.
My code is
{
xtype: 'panel',
title: "Search Result",
height:500,
items: [
Ext.Ajax.request({
url: 'XML/1Cohart.xml',
scope: this,
timeout: global_constants.TIMEOUT,
method: "GET",
disableCaching: true,
failure: function(response) {
utils.showOKErrorMsg(sdisMsg.ajaxRequestFailed);
},
success: function(response) {
debugger;
var datas = response.responseXML;
Ext.each(datas.getElementsByTagName("HEADER"), function(header) {
this.buildField(header);
this.buildColumn(header);
}, this);
Ext.each(datas.getElementsByTagName("G"), function (columnData) {
//debugger;
//this.buildData(columnData);
this.fieldLength = this.fields.length;
this.record = [];
for (i = 0; i < this.fieldLength; i++) {
//debugger;
var fieldName = this.fields[i].name
this.record[i] = columnData.getAttribute(fieldName);
}
this.data.push(this.record);
}, this);
this.store = new Ext.data.ArrayStore({
fields : this.fields
});
this.store.loadData(this.data);
var grid = new Ext.grid.GridPanel({
store: this.store,
flex: 1,
columns: this.columns,
stripeRows: true,
id: 'RID',
autoHeight: true,
//sm: new Ext.grid.Checkbo;xSelectionModel({singleSelect:true}),
frame: true,
});
}
})
]
}]
Actually I was not getting scope so I placed here.
{
xtype: 'panel',
title: "Search Result",
height:500,
items: [{
xtype : 'GridPanel',
store: new Ext.data.ArrayStore({
fields : this.fields
}),
flex: 1,
columns: this.columns,
stripeRows: true,
id: 'RID',
autoHeight: true,
//sm: new Ext.grid.Checkbo;xSelectionModel({singleSelect:true}),
frame: true,
listeners {
afterRenderer : function(){
Ext.Ajax.request({
url: 'XML/1Cohart.xml',
scope: this,
timeout: global_constants.TIMEOUT,
method: "GET",
disableCaching: true,
failure: function(response) {
utils.showOKErrorMsg(sdisMsg.ajaxRequestFailed);
},
success: function(response) {
debugger;
var datas = response.responseXML;
Ext.each(datas.getElementsByTagName("HEADER"), function(header) {
this.buildField(header);
this.buildColumn(header);
}, this);
Ext.each(datas.getElementsByTagName("G"), function (columnData) {
//debugger;
//this.buildData(columnData);
this.fieldLength = this.fields.length;
this.record = [];
for (i = 0; i < this.fieldLength; i++) {
//debugger;
var fieldName = this.fields[i].name
this.record[i] = columnData.getAttribute(fieldName);
}
this.data.push(this.record);
}, this);
});
}
})
}
}
]
}

Kendo Grid Search ParameterMap

I am not able to get the following to call the web service function. It has something to do with the ParameterMap since if I call a function that does not need parameters (Meditech_MeditechSearchResultsTEST) then I get results. I have logging set up on the Meditech_MeditechSearchResults web service function and can tell it never gets called.
function GetQuery() {
var SearchText;
var URLLink;
SearchText = document.getElementById('QueryID').value;
var FilterSelected;
FilterSelected = document.getElementById('ArchivedResultsSelect').value;
URLLink = URL + 'Meditech_MeditechSearchResults';
var CurrPage = 1;
var Pagesize =10;
try {
if (SearchText != '') {
$(document).ready(function () {
$("#grid").kendoGrid({
attributes: {
"class": "SearchControls"
},
dataSource: {
pageSize: Pagesize,
transport: {
read: {
url: URLLink,
type: "GET",
dataType: "jsonp",
}
},
type: {
data: "odata"
},
parameterMap: function (options) {
var parameters = {
Search: FormatJSONString(SearchText),
FilterValue: FilterSelected,
CurrentPage: CurrPage,
PageSize: Pagesize
}
return parameters;
},
},
columns: [{
field: "View",
title: "",
width: "30px",
align: "center",
template: kendo.template($("#view-template").html())
},
{
field: "Results",
title: "Results",
width: "800px",
template: kendo.template($("#result-template").html())
},
{
field: "Rank",
title: "Rank",
width: "40px",
},
],
height: 500,
width: 900,
scrollable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
error: function(e) {
alert(e.errors);
},
});
});
}
else { alert('Please enter a search text.') }
}
catch(ex) {
alert(ex.description);
}
}
The parameterMap option is part of the transport configuration. Try putting it there. Right now it is ignored.

Saving a Kendo datasource using jStorage

I'm adding and removing data to a Kendo dataSource. I wish to save it localStorage, and be able to read it again from localStorage.
Here I've attempted to use jStorage for the saving and loading of data.
How it's loaded:
if ($.jStorage.get('favoritter') != null) {
var datakilde_favoritter = $.jStorage.get('favoritter');
} else {
var data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
var datakilde_favoritter = new kendo.data.DataSource({
data: data,
sort: { field: "name", dir: "asc" }
});
}
How it's saved:
$.jStorage.set('favoritter', datakilde_favoritter);
Define your DataSource as:
var ds = new kendo.data.DataSource({
transport: {
read : function (op) {
var data = $.jStorage.get('favoritter');
if (!data) {
data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
}
op.success(data);
},
update : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
destroy: function (op) {
console.log("destroy", ds.data());
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
create : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
}
},
sort : { field: "name", dir: "asc" },
pageSize : 10,
schema : {
model: {
id : "id",
fields: {
id : { type: 'number' },
name: { type: 'string' }
}
}
}
});
You might consider removing create and destroy if not needed.
And your grid would be something like:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : "popup",
pageable : true,
toolbar : ["create"],
columns : [
{ command: ["edit", "destroy"], width: 100 },
{ field: "id", width: 90, title: "#" },
{ field: "name", width: 90, title: "URL Name" }
]
}).data("kendoGrid");
Basically when updating you need to invoke op.success with the data returned from the server. In your case since it is the browser itself, you don't need just to return the original data.

Kendo UI toolbar buttons

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!");
});

Resources