We Keep Coding

Telerik Kendo Grid editing inline with kendo treeview editor template

I have a kendo grid that is edited inline. One of the fields should be edited selecting an element from a list, but the list must have a hierarchical structure (would be nice be able of filter that list). I was thinking in use a kendo treeview as editor for that field but I haven't found any way to accomplish this. I tried make a custom editor template (using columns.Bound(s => s.FieldId).EditorTemplateName("_TreeEditorTemplate")) that render the treeview, but the treeview is not an input and is not selectable. I also thinked in make an editor that use a kendo dropdownlist with the tree inside but this is no currently supported by kendo. Any ideas???

Have you looked at the sample on the Kendo site: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-treeview-as-grid-editor
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//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 } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
},
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
edit: function (e) {
//checking if a cell from the Test column is opened for editing
var dummyInput = e.container.find("input[name='test']");
if (dummyInput.length > 0) {
var treeView = $(e.container).find(".treeViewEditor").data("kendoTreeView");
var originalItem = treeView.findByText(dummyInput.val());
if (originalItem != null) {
// Select the item based on the field value
treeView.select(originalItem);
}
}
},
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{
field: "test", title: "Test", width: 120,
editor: function (container, options) {
var input = $("<input class='tveInput'/>");
input.attr("name", options.field);
var tvDiv = $("<div class='treeViewEditor'></div>");
$(tvDiv).kendoTreeView({
animation: false,
dataSource: [
{
text: "foo1"
},
{
text: "foo2",
items: [
{ text: "bar" },
{ text: "bar1" },
{ text: "bar2" }
]
}
]
});
var treeView = $(tvDiv).data("kendoTreeView");
$(tvDiv).find(".k-in").mousedown(function (e) {
var clickedNode = $(e.toElement).closest("[role=treeitem]");
var dataItem = treeView.dataItem(clickedNode);
var dummyInput = clickedNode.closest("[role=gridcell]").find("input[name='test']");
dummyInput.val(dataItem.text);
dummyInput.trigger("change");
});
tvDiv.appendTo(container);
input.appendTo(container);
}
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
</script>
</div>
<style>
.tveInput {
display: none;
}
</style>

Kendo UI datasource not triggering transport :Create

I've 2 kendoUI grids doing CRUD from a web service. For some reason, read command works perfectly and populates my grid. But the create is not triggering in the UserEventGrid() method.
Here is my current situation. I have a grid that displays first. When I click on Add it opens a lookup grid when I select an item from that grid it opens a window with the selected row. That has
a Add button. Now when I click on this Add the transport : Create is not triggered.
UserEventGrid() this is the main Grid[First Grid].This has addentry button(It triggers addEntry(e))
namesListGrid() this is the second grid that populates after clicking lookup. After selecting row on the new window it has add button.(It triggers add(dataItem) and respective transport . Here comes the
issue. It's not triggering the transport Create.
Below is my code.
function UserEventGrid() {
userDS = new kendo.data.DataSource({
type: "json",
schema: {
data: function (response) {
return JSON.parse(response.d);
},
model: {
id: "UserId",
fields: {
UserId: { editable: false, nullable: false, type: "string" },
FirstName: { editable: true, nullable: true, type: "string" },
LastName: { editable: true, nullable: true, type: "string" },
},
},
transport: {
read: {
url: "/Services/Services.asmx/getUsers",
contentType: "application/json; charset=utf-8",
type: "POST",
},
create: {
url: "/Services/Services.asmx/AddUsers",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json"
},
update: {
url: "/Services/Services.asmx/UpdateUsers",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json"
},
destroy: {
url: "/Services/Services.asmx/DeleteUsers",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json"
},
parameterMap: function (data, type) {
if ((type == "update") || (type == "create") || (type == "destroy")) {
console.log('parameterMap: data => ' + JSON.stringify(data));
return JSON.stringify({ "erpUserJson": data });
} else {
return data;
}
}
}
});
userGrid = $("#user-event-grid").kendoGrid({
dataSource: userDS,
height: 450,
pageable: false,
sortable: true,
autosync: true,
binding: true,
columns: [
{
field: "Active",
title: "Active",
headerTemplate: '<span class="tbl-hdr">Active</span>',
template: '<input type="checkbox" #= Active ? "checked=checked" : "" # disabled="disabled" ></input>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
},
width: 65
},
{
field: "FirstName",
title: "FirstName",
headerTemplate: '<span class="tbl-hdr">FirstName</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
}
},
{
field: "LastName",
title: "LastName",
headerTemplate: '<span class="tbl-hdr">LastName</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
}
},
,
{
command: [
{
name: "destroy",
template: "<div class='k-button delete-btn'><span class='k-icon k-delete'></span></div>",
text: "remove"
},
{
text: "Edit",
template: "<div class='k-button edit-btn'><span class='k-icon k-edit'></span></div>",
click: editEntry
},
],
width: 90,
attributes: {
style: "vertical-align: top; text-align: center;"
}
},
],
editable: "popup"
}).data('kendoGrid');
}
function namesListGrid() {
nameDS = new kendo.data.DataSource({
type: "json",
schema: {
data: function (response) {
return JSON.parse(response.d);
},
model: {
id: "Z_CIM_WRK_ID",
fields: {
Z_NAMEFIRST: { editable: false, nullable: false, type: "string" },
Z_NAMELAST: { editable: false, nullable: true, type: "string" },
EMAILID: { editable: false, nullable: true, type: "string" },
}
},
},
transport: {
read: {
url: "/Services/Services.asmx/getNames",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json",
data: getSearchCriteria()
},
parameterMap: function (data, type) {
if ((type == "read") || (type == "create") || (type == "destroy")) {
console.log("parametermap => " + JSON.stringify(data));
return JSON.stringify(data);
} else {
return data;
}
}
}
});
namesGrid = $("#second").kendoGrid({
dataSource: nameDS,
height: 450,
pageable: false,
sortable: true,
binding: true,
selectable: "row",
serverFiltering: true,
autoSync: true,
columns: [
{
field: "Z_EID",
title: "ID",
headerTemplate: '<span class="tbl-hdr">ID</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
}
},
{
field: "Z_NAMELAST",
title: "ZNAMELAST",
headerTemplate: '<span class="tbl-hdr">ZNAMELAST</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
}
},
{
field: "Z_NAMEFIRST",
title: "ZNAMEFIRST",
headerTemplate: '<span class="tbl-hdr">ZNAMEFIRST</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
}
},
],
change: function (e) {
var dataItem = this.dataItem(this.select());
$("#third").hide(true);
$("#second").hide(true);
$("#first").show(true);
$("#gtable").show(true);
add(dataItem);
}
}).data('kendoGrid');
}
function add(dataItem) {
console.log(JSON.stringify(dataItem));
var model = {
"UserId": dataItem.Z_EID,
"FirstName": dataItem.Z_NAMEFIRST,
"LastName": dataItem.Z_NAMELAST,
"Group": "OPS",
"EmailAddr": dataItem.EMAILID,
"MobilePhone": dataItem.PHONE,
};
var viewModel = kendo.observable({
data: model,
isAddMode: true,
isLookupMode:false,
isEditMode: false,
groups: userGroups,
closeWin: function (dataItem) {
console.log('data => ' + JSON.stringify(this.data));
console.log("BEFORE => " + JSON.stringify(userDS.data()));
userDS.add(this.data);
userDS.sync();
var editWin = $("#window");
editWin.data("kendoWindow").close();
},
});
kendo.bind($("#edit-win"), viewModel);
$("#palette").html('');
$("#palette").append('<div id="palette-widget"></div>');
$('#window').data("kendoWindow").center().open();
}
function addEntry(e) {
var model = {
"UserId": "",
"FirstName": '',
"LastName": '',
};
var viewModel = kendo.observable({
data: model,
isAddMode: false,
isLookupMode:true,
isEditMode: false,
filterable:true,
groups: userGroups,
closeWin: function (e) {
console.log('data => ' + JSON.stringify(this.data));
userDS.add(this.data);
var editWin = $("#window");
editWin.data("kendoWindow").close();
e.preventDefault();
},
LookupWin: function (e) {
namesListGrid();
},
});
kendo.bind($("#edit-win"), viewModel);
$("#palette").html('');
$("#palette").append('<div id="palette-widget"></div>');
$('#window').data("kendoWindow").center().open();
}

In your addEntry function, you do add data to the dataSource like this:
userDS.add(this.data);
However, you never call the userDS.sync() (you do it in the add function but not addEntry). You did set the autosync property to true, which would have triggered the create event, but instead of doing on the userDS dataSource, you did it on the userGrid. You can either set the autosync to true in the userDS dataSource or call the userDS.sync() after the userDS.add.

How to post a data using mvvm kendo grid and post api controller not Calling?

i want to send data from kendo grid to sql database, here is my javascript view model code:
document.onreadystatechange = function () {
var viewModel = kendo.observable({
products: new kendo.data.DataSource({
schema: {
//data:"Data",
total: "Count",
model: {
Id: "Id",
fields: {
Id: { editable: true, type: "int" },
ShortName: { editable:true, type: "string" },
FullName: { editable: true, type: "string" },
ContactPerson: { editable: true, type: "string" },
CurrentCurrencyCode: { editable: true, type: "int" },
Adress1: { editable: true, type: "string" },
CompanyState: { editable: true, type: "string" },
CompanyCity: { editable: true, type: "string" },
CompanyCountry: { editable: true, type: "string" },
ZipPostCode: { editable: true, type: "string" },
TelArea: { editable: true, type: "string" }
}
}
},
batch: true,
transport: {
read: {
url: "/api/Companies/GetAllCompanies",
dataType: "json"
},
create:{
url: "/api/Companies/SaveDefCompny", // here is a correct api url, which i want to call
dataType: "json"
},
destroy: {
url: "/api/Companies/Delete",
dataType: "json"
},
parameterMap: function (data, operation) {
if (operation !== "read" && data) {
return kendo.stringify(data) ;
}
}
}
})
});
kendo.bind(document.getElementById("example"), viewModel);
}
Here is my controller code to post data to database but its is not calling by clicking create or update button what the problem with my grid or controller call?
[HttpPost]
public void SaveDefCompny(IEnumerable<DefCompanyDTO> DfCmpny1)
{
var result = new List<DefCompany>();
using (var data = new RPDBEntities())
{
foreach (var productViewModel in DfCmpny1)
{
var product = new DefCompany
{
Id = productViewModel.Id,
CurrentCurrencyCode = productViewModel.CurrentCurrencyCode,
ShortName= productViewModel.ShortName,
FullName= productViewModel.FullName,
ContactPerson= productViewModel.ContactPerson,
Address1= productViewModel.Address1,
CompanyCity= productViewModel.CompanyCity,
CompanyState= productViewModel.CompanyState,
CompanyCountry= productViewModel.CompanyCountry,
ZipPostCode= productViewModel.ZipPostCode,
TelArea= productViewModel.TelArea
};
result.Add(product);
data.DefCompanies.Add(product);
};
data.SaveChanges();
}
}
the url is correct but it doesnot called even while debugging cursor not goes to url but grid reads all values and display in it

As you are going to post data type: "POST" is missing in create method.
And also check posting data.models instead of data

How to perform the search operation in server side in jQGrid using c#?

I have implemented the JqGrid in my application. I have done the edit,delete, insert operations but I am failing in searching the records. I have bind the data from the sql server.
Here is my script
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.extend(jQuery.jgrid.edit, {
closeAfterEdit: true,
closeAfterAdd: true,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
return JSON.stringify(postdata); ;
}
});
jQuery.extend(jQuery.jgrid.del, {
ajaxDelOptions: { contentType: "application/json" },
onclickSubmit: function (eparams) {
var retarr = {};
var sr = jQuery("#contactsList").getGridParam('selrow');
rowdata = jQuery("#contactsList").getRowData(sr);
retarr = { PID: rowdata.PID };
return retarr;
},
serializeDelData: function (data) {
var postData = { 'data': data };
return JSON.stringify(postData);
}
});
$.extend($.jgrid.defaults,
{ datatype: 'json' }
);
jQuery.extend(jQuery.jgrid.search, {
});
$("#contactsList").jqGrid({
url: '/WebService.asmx/GetListOfPersons1',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
colModel: [
{ name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
{ name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true },
{ name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
{ name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true },
editoptions: { value: getAllSelectOptions() }
}],
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'PID',
sortorder: "asc",
pager: jQuery('#gridpager'),
viewrecords: true,
gridview: true,
height: '100%',
editurl: '/WebService.asmx/EditRow',
// searchurl: '/WebService.asmx/Searchrow',
caption: 'Person details'
}).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: true, search: true });
jQuery("#contactsList").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
// jQuery("#contactsList").setGridParam({ data: results.rows, localReader: reader }).trigger('reloadGrid');
jQuery("#contactsList").jqGrid('setGridParam', { url: "WebService.asmx/searchrow", page: 1 }).trigger("reloadGrid");
});
function getAllSelectOptions() {
var states = { 'male': 'M', 'female': 'F' };
return states;
}
</script>
Here I have given the reference for searching in my asmx file like WebService.asmx/searchrow when I click the find button in the popup the cursor is moving to the specified method in the url.
Here is my question how can I get the user entered search parameter name and value to that method to perform the search operation .
I have defined the searchrow method like following
[WebMethod]
public List<Person> searchrow(HttpContext context)
{
return null;
}
Please help me to out from this problem or any other alternative to do the search operation in JQGrid.
thanks
purna

Setting model value on page load

Is there a way to set the models value on a page load. Because i need it to populate a schema with model values. and i tried a document.ready ajax call to get the model but it tells me that the model has no value before the ajax call even happens.
here is the code and you can see how im trying to populate the schema but it wont hit the functions
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")"> </script>
<script src="#Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
<script>
$(document).ready(function () {
$.ajax({
url: '/Team/Calendar/PopulateCalendar/',
type: "POST",
data: $(this).serialize(),
});
});
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "/Team/Calendar/PopulateCalendar/",
dataType: "json"
},
update: {
url: "http://demos.kendoui.com/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.kendoui.com/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.kendoui.com/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "#Model.CalendarItems.Select(calendar=> calendar.TaskId)", type: "number" },
title: { from: "#Model.CalendarItems.Select(calendar=> calendar.Title)", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "#Model.CalendarItems.Select(calendar => calendar.Start)" },
end: { type: "date", from: "#Model.CalendarItems.Select(calendar => calendar.End)" },
startTimezone: { from: "#Model.CalendarItems.Select(calendar => calendar.StartTimezone)" },
endTimezone: { from: "#Model.CalendarItems.Select(calendar => calendar.EndTimezone)" },
description: { from: "#Model.CalendarItems.Select(calendar => calendar.Description)" },
recurrenceId: { from: "#Model.CalendarItems.Select(calendar => calendar.RecurrenceId)" },
recurrenceRule: { from: "#Model.CalendarItems.Select(calendar => calendar.RecurrenceRule)" },
recurrenceException: { from: "#Model.CalendarItems.Select(calendar => calendar.RecurrenceException)" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "#Model.CalendarItems.Select(calendar => calendar.IsAllDay)" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});

I think you are using ASPNET MVC with Razor, you should be able to set your model via Scriplet into the javascript.