Kendo Grid Search ParameterMap - kendo-ui

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.

Related

Empty column after DataSource Query in Kendo

After making a call to DataSource.Query(), I am unable to call grid.setOption() function. If I do, it returns just an empty grid.
I have searched through several forums but no luck so far.
Just calling setOption works as intended in the grid.
this.grid.setOptions({scrollable: true, autoBind: true});
But when I make a call to query function and then call setOption, it loads an empty grid.
this.jobKendoGrid.dataSource.query({
sort: sort,
filter: filter,
pageSize: this.jobKendoGrid.dataSource.pageSize(),
page: 1
})
I think after making dataSource.Query call, the remote call is being disconnected. Guess that's why I am unable to call setOption, but how can I connect back to remote data source?
PS: Edit
The reason I want to call setOption again, is that I have a toolbar option in every grid that I can do "FitToScreen". This option will shink all columns into the screen.
public fitToScreen() {
for (var i = 0; i < this.grid.columns.length; i++) {
if (this.grid.columns[i].title && this.grid.columns[i].title != "Edit" && this.grid.columns[i].title != " ") {
// console.log(this.grid.columns[i].width);
delete this.grid.columns[i].width;
}
}
//setOption Call
this.grid.setOptions({ scrollable: true });
// https://www.telerik.com/forums/grid-setoptions-causes-empty-grid
if (this.grid.options.autoBind === false) {
this.grid.refresh();
}
}
Found a similar query on the grid forum. One of the answers suggested using getOptions() followed by setOptions() doing that resolves the issue.
<div id="example">
<div id="grid"></div>
<button onclick="filterGrid()">Filter Grid</button>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://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,
filterable: {extra: false, mode: "row"},
sortable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name", width: 200
}, {
field: "ShipCity",
title: "Ship City", width: 200
}
]
});
});
function filterGrid()
{
var grid = $("#grid").data("kendoGrid");
var sort= { field: "Freight", dir: "desc" };
var filter ={ field: "Freight", operator: "gte", value: 100 };
grid.dataSource.query({
sort: sort,
filter: filter,
pageSize: grid.dataSource.pageSize(),
page: 1
});
fitToScreen();
}
function fitToScreen()
{
console.log("fitToScreen");
var grid = $("#grid").data("kendoGrid");
for (var i = 0; i < grid.columns.length; i++) {
if (grid.columns[i].title && grid.columns[i].title != "Edit" && grid.columns[i].title != " ") {
delete grid.columns[i].width;
}
}
var currOpt = grid.getOptions();
//Check values of options you want to set
console.log(currOpt.sortable);
//setOptions call
grid.setOptions(currOpt);
//refresh call
grid.refresh();
}
</script>
</div>

How to get field value when edit data in Kendo Ui treelist

I'm new in Kendo UI,and i have a question. Now i'm use TreeList / Editing and how to auto load value to other field when i edit value to first field ?
example:
1.serial number: 123456789
2.name : test
when i edit serial number 123456789 to first field and auto load name to second field.
To set the value of column B based on change made to a column A, you need to edit the model bound to the tree list. For this do the following:-
Handle edit event of the tree list. On this save the model to a
local variable.
Add an editor
template
to column A. On the select event set the value of model.
Below is a working code snippet:-
<div id="treelist"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
var model= null;
var employeesData=[{"EmployeeId":101,"FirstName":"Daryl","LastName":"Sweeney"},
{"EmployeeId":202,"FirstName":"Guy","LastName":"Wooten"},
{"EmployeeId":303,"FirstName":"Priscilla","LastName":"Frank"},
{"EmployeeId":404,"FirstName":"Ursula","LastName":"Holmes"},
{"EmployeeId":505,"FirstName":"Anika","LastName":"Vega"}];
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory/All",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
EmployeeId: { type: "number", nullable: false },
ReportsTo: { nullable: true, type: "number" },
FirstName: { validation: { required: true } },
HireDate: { type: "date" },
Phone: { type: "string" },
HireDate: { type: "date" },
BirthDate: { type: "date" },
Extension: { type: "number", validation: { min: 0} },
Position: { type: "string" }
},
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
toolbar: [ "create", "save", "cancel" ],
editable: "incell",
height: 540,
dataBound: function (e) {
var items = e.sender.items();
for (var i = 0; i < items.length; i++) {
var dataItem = e.sender.dataItem(items[i]);
var row = $(items[i]);
if (dataItem.isNew()) {
row.find("[data-command='createchild']").hide();
}
else {
row.find("[data-command='createchild']").show();
}
}
},
edit: function(e) {
model = e.model;
},
columns: [{
field: "EmployeeId",
expandable: true,
title: "Serial Number",
width: 180,
editor: function(container, options) {
// create an input element
var input = $("<input/>");
// set its name to the field to which the column is bound ('lastName' in this case)
input.attr("name", options.field);
// append it to the container
input.appendTo(container);
// initialize a Kendo UI AutoComplete
input.kendoAutoComplete({
dataTextField: "EmployeeId",
dataSource: employeesData,
select: function(e) {
if(model !=null){
model.FirstName = e.dataItem.FirstName;
model.LastName = e.dataItem.LastName;
}
}
});
}
},
{ field: "FirstName", title: "First Name", width: 100 },
{ field: "LastName", title: "Last Name", width: 100 },
{ field: "Position", width: 100 },
{ field: "Phone", title: "Phone", width: 100 },
{ field: "Extension", title: "Ext", format: "{0:#}", width: 100 },
{ command: [{name: "createchild", text: "Add child"},"destroy" ], width: 240 }]
});
});
</script>
You can trigger your function when the row is being saved or when the edit field is being changed. Take a look at the list of events here and choose when exactly you want to make the changes. https://demos.telerik.com/kendo-ui/treelist/events
here is a example how to all a function when saving the changes: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/methods/saverow
I´m not sure witch edit method you are using (inline, inCell or Popup edit mode) each method can use events like saveRow, beforeEdit...
Check all the events documentation here: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events

kendoui grid cell editor of dropdownlist

I created a KendoUI grid where the first column uses a custom editor. After editing, it doesn't call request of update, however if it is not using editor it will call request of update. Why?
var columns = [
{ field: 'AccountId', title: '客户名称', locked: false, template: '#= me.detail.brandName(data, \'ID\') #', editor: accountGridEditor, width: 200 },
{ field: 'BankNo', title: '付款银行', template: '#= me.detail.format(data, \'Bank\') #', attributes: { style: 'text-align: left;' }, width: 150 },
{ field: 'UnLinkedAmount', title: '未分配', template: '#= me.detail.format(data, \'UnLinkedAmount\') #', attributes: { style: 'text-align: left;' }, width: 100 },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
];
var dataSource = c.dataSourceOption({
transport: {
read: { url: url.api('Finance/FundJournal') },
update: { url: url.api('Finance/FundJournal', { action: 'post' }) },
destroy: { url: url.api('Finance/FundJournal', { action: 'delete' }), type: 'delete' },
parameterMap: function (data, type) {
console.log(type);
console.log(data);
if (type === 'read') return getReadParameters();
if (type === "update") return data;
if (type === 'create') return data;
if (type === 'destroy') return { id: data.Id };
return data;
}
},
schema: {
model: {
id: "Id",
fields: {
AccountId: { editable: true, nullable: false, validation: { required: true } },
BankNo: { editable: false},
UnLinkedAmount: { editable: false }
}
}
},
filter: [{ field: 'SubType', operator: 'neq', value: 'Id' }]
});
var grid = $("#result").kendoGrid({
dataSource: dataSource,
height: 550,
columns: columns,
editable: "inline",
save:function(e){$.ajax();}
}).data('kendoGrid');
If record property is set from dropdownlist something like this:
change: function() {
options.model.Name = this.value();
options.model.dirty = true;
}
it is necessary explicitly to set that model as dirty, to say to datasource that this record was modified and need to be updated. Otherwise, you can use set().
change: function() {
options.model.set('Name',this.value());
}
That way record is automatically marked as dirty in datasource.

How I write a dynamic URL in kendo UI DataSource like "update/{id}"

I have a web API. In that I wrote a update method. But it need to id of the table row to update to the row.
I use a grid to show data and use a toolbar to edit the row.
My question is how I pass that id to the update.
Can someone guide me ??
update: function(options) {
$.ajax( {
url: function(data) { return "updateUsuarios/"+data.Id,
dataType: "json",
.....
Well i suggest you, explain more your question, but i think this examples could help , if you have a toolbar as a template like this:
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<button type="button" id="update">Update</button>
</div>
</script>
You "grid" need the attr "toolbar"
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
filterable:true,
toolbar: kendo.template($("#template").html()),
columns: [
{ field:"username", title: "Username" , width: "120px" },
{ field: "nombre", title:"Nombre", width: "120px" },
{ field: "apellido", title:"Apellido", width: "120px" },
{ field: "ci", title:"Documento de Identidad", width: "120px" },
{ field: "email", title:"Direccion de Correo", width: "120px" },
{ field: "activo",title:"Estatus", width: "120px" },
{ field: "fecha_caducidad",title:"Fin Demo", width: "120px",template: "#= kendo.toString(kendo.parseDate(fecha_caducidad, 'yyyy-MM-dd'), 'MM/dd/yyyy') #" },
{ field: "licencia_status",title:" ", width: "40px",template:'<img src="assets/images/#:data.licencia_status#.png"/>' },
{ command: ["edit"], title: " ", width: "120px" }],
editable: "popup",
dataBound: function () {
var rows = this.items();
$(rows).each(function () {
var index = $(this).index() + 1;
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(index);
});
},
selectable: true
});
So,you can configure a kendo button and add functionality in the event click:
$("#update").kendoButton({
click: function(){
//Here you will have the selected row
var self=$('#grid').data('kendoGrid')
var index = self.items().index(self.select());
var rowActual= self.dataSource.data()[index];
rowActual=self.dataItem(self.select());
if(rowActual==undefined || rowActual ==null) {
alert("No row selected");
}else{
$.ajax({
type: "POST",
url: "update",
data: {
id:rowActual.id
},
dataType: 'json',
success: function (data) {
},
error: function(){
}
});
}
}
});
and send in the ajax the row id, but if you are update the row with the inline edition you could try with a datasource like this
dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax( {
url: "readUsuarios",
dataType: "json",
success: function(result) {
options.success(result);
}
});
},
update: function(options) {
$.ajax( {
url: "updateUsuarios",
dataType: "json",
data: {
models: kendo.stringify(options.data.models)
},
success: function(data) {
// response server;
},
error: function(result) {
// notify the data source that the request failed
options.error(result);
}
});
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
username: { editable: false, nullable: true },
nombre: { validation: { required: true } },
apellido: { type: "string", validation: { required: true} },
ci: { type: "string", validation: { required: true} },
email: { type: "string", validation: { required: true } },
activo: { type: "boolean",editable: false },
fecha_caducidad: { type: "date" },
licencia_status:{editable: false}
}
}
}
});
I hope this help!

Kendo Grid Showing error "Uncaught TypeError: Cannot read property 'template' of undefined "

Uncaught TypeError: Cannot read property 'template' of undefined
I am using a kendo grid .
I want to Disable a Column when I edit.(Not when I add a new record).Did write code when edit
function onEdit(e) {
var indexCell = 1;
var grid = $('#consumablesGrid').data('kendoGrid');
if (e.model.id) { // when Editing the id is defined
if (indexCell != 'undefined' && grid.columns[indexCell].title == "Consumable") {
grid.closeCell();
}
}
}
But it shows "Uncaught TypeError: Cannot read property 'template' of undefined " when executing grid.closeCell() .
For better understanding I am Including My full grid Condition.
function ConsumableManager() {
$("#consumablesGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: "GetConsumablesGrid",
type: "POST",
contentType: "application/json",
dataType: "json"
},
update: {
url: "UpdateConsumables",
contentType: "application/json",
type: "POST",
dataType: "json",
complete: function (data) {
var result = jQuery.parseJSON(data.responseText);
if (result.State == true) {
toastr.success(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
else {
toastr.error(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
}
},
destroy: {
url: "DestroyConsumables",
contentType: "application/json",
type: "POST",
dataType: "json",
complete: function (data) {
var result = jQuery.parseJSON(data.responseText);
if (result.State == true) {
toastr.success(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
else {
toastr.error(result.Description);
}
}
},
create: {
url: "CreateConsumables",
contentType: "application/json",
type: "POST",
dataType: "json",
complete: function (data) {
var result = jQuery.parseJSON(data.responseText);
if (result.State == true) {
toastr.success(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
else {
toastr.error(result.Description);
}
}
},
parameterMap: function (data, operation) {
if (operation != "read") {
return kendo.stringify(data.models);
}
}
},
serverPaging: false,
pageSize: 10,
batch: true,
schema: {
model: {
id: "ConsumablesID",
fields: {
ConsumablesID: { editable: false },
Consumable: { editable: true },
UnitCost: { editable: true },
Currency: { editable: true },
ContractID: { editable: false }
}
},
errors: "Errors"
},
error: function (e) {
alert(e.errors + "grid");
}
},
editable:
{
mode: "inline",
createAt: "bottom"
},
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create"],
sortable: true,
autoBind: false,
edit: function (e) {
alert("Edit");
onEdit(e);
},
update: function (e) {
},
columns:
[
{ field: "ConsumablesID", width: 50, hidden: true, title: "ID" },
{ field: "Consumable", width: 200, title: "Consumable", editor: ConsumablesDropDownEditor },
{ field: "UnitCost", width: 100, title: "Unit Cost" },
{ field: "Currency", width: 200, title: "Currency", editor: CurrencyUnitDropDownEditor },
{ field: "ContractID", width: 85, hidden: true, title: "ContractID" },
{ command: ["edit", "destroy"], title: "Action", width: "175px" }
]
});
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
Anyone have Idea Why this happened.How can I do that Please response.
1.I've a grid
2.I want to editable (False) when edit (Not in add)
You probably have too new a jquery version: http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies#jquery-version
Current Kendo UI supports jquery 1.9.1. If you use later versions of jquery with kendo you may face issue with closeCell().
To fix(work around) this issue you can use
$('#consumablesGrid').getKendoGrid().trigger('cancel')
instead of grid.closeCell()
It's depend of jquery versions .
To avoid this problem you can use this script
function onEdit(e) {
if (!e.model.isNew() && (e.model != 'undefined') && (e.model != null)) {
e.container.find("input[name=GroupName]").hide(); // To hide only the value of the column when updating the row
// e.container.find("#GroupName").parent().hide().prev().hide(); //to hide completely the column (value + structure + title name)
}
}

Resources