Develop Reference

Uncaught TypeError: $(...).html(...).modal is not a function

I am getting above error when i try to show id in pop up window.
my code are below
grid.cshtml
<script src="#Url.Content("~/js/Grid.js")" type="text/javascript"></script>
<div id="login_for_review" class="modal hide" role="dialog"></div>
grid.js
var init = function () {
var Grid = $("#Grid");
Grid.kendoGrid({
dataSource: {
transport: {
read: {
url: "/",
dataType: "json",
type: "GET"
},
parameterMap: function (data, type) {
if (type == "read") {
return {
limit: ,
offset: ,
sort:
}
}
}
},
schema: {
data: "Records",
total: "TotalRecordCount"
},
serverPaging: true,
pageSize: 25,
serverSorting: true,
sort: { field: "Name", dir: "asc" }
},
sortable: {
allowUnsort: false
},
pageable: true,
pageable: {
pageSizes:
},
noRecords: {
template: ""
},
columns: [
{
field: "Name",
title: "Name"
},
{
template: "<div>#if(data.id> 0){#<a href = 'javascript:void(0);' onClick='showDiv(#:TemplateId#)'>#:id# Sites</a>#} else{#ff#}#</div>",
field: "id",
title: ""
}
]
});
};
(function ($) {
$(document).trigger("o", [false, { type: "item", href: "url", text: "", showText: true }]);
init();
})(jQuery);
function showDiv(data) {
getSiteId();
console.log(data);
}
var getSiteId = function () {
$.ajax({
type: 'GET',
url: "",
dataType: 'json',
success: function (data) {
$('#login_for_review').html(data).modal('show');
// window.$('#myModal').modal();
console.log(data);
}
});
};
actually I am trying to show return id like 1,2,3.. in horizonal in a pop up when showDiv clicked .
I have followed some links and implemented in this way . Could you please help me to solve this issue ?

Bug with kendo grid,for closing pop up editor,you need to press cancel many times

its over a week im dealing with a strange behavior of kendo grid ,let me split my problem, for better understanding ,i have a autocomplete text box ,after I press ENTER,it binds my grid,when I press "add new record" on my kendo grid,if I press cancel,the pop up will be closed,BUTTT after second search and the add new record,if press cancel,this time needs 2times pressing,3d time needs 3times pressing.......made me crazy,badly need your help
Here is the code
$(document).keypress(function (e) {
var myResult;
var modelProducerResult;
var temp = null;
var mydata;
var mydata_deviceType;
var modelProducerDrpList;
if (e.which == 13) {
var i = 0;
debugger;
var flag = 0;
// $('#turbingrid').data().kendoGrid.refresh();
var drp = document.getElementById('autocomplete').value;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("turbineDeviceDetail","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "turbine": drp, }),
success: function (result) {
//debugger;
myResult = result;
var flg = "s";
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("producersDevice","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "flg": flg, }),
success: function (data) {
// debugger;
mydata = data;
}
})
var flg_dvType = "s";
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("deviceTypeList","AdminTool")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "flg": flg_dvType, }),
success: function (data) {
// debugger;
mydata_deviceType = data;
}
});
dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
options.success(result); // where data is the local data array
},
create: function (options) {
if ($("input[name='DeviceIP']").val() == "" || $("input[name='TurbineId']").val() == "") {
alert("DeviceIP and TurbineID could not be blank ");
$("input[name='DeviceIP']").css("background-color", "red");
$("input[name='TurbineId']").css("background-color", "red");
}
else
$.ajax({
type: "POST",
url: "#Url.Action("AddDeviceToTurbine","AdminTool")",
data: options.data.models[0],
dataType: "json",
success: function (data) {
options.success(data);
alert("New Device Has Been Inserted");
//var e = $.Event("keypress", { which: 13 });
//$('#autocomplete').trigger(e);
},
//error: function (data) {
// options.error(data);
// alert("Insert New Data Has Been Failed");
// alert(data);
//},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
},
update: function (options) {
if ($("input[name='DeviceIP']").val() == "" || $("input[name='TurbineId']").val() == "") {
alert("DeviceIP and TurbineID could not be blank ");
$("input[name='DeviceIP']").css("background-color", "red");
$("input[name='TurbineId']").css("background-color", "red");
}
else
$.ajax({
type: "POST",
url: "#Url.Action( "update_grid","AdminTool")",
data: options.data.models[0],
dataType: "json",
success: function (data) {
options.success(data);
alert("Update Has Been Done!");
var value = document.getElementById('autocomplete').value;
var e = $.Event("keypress", { which: 13 });
$('#autocomplete').trigger(e);
},
error: function (data) {
options.error(data);
alert("Update Failed!");
},
});
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 40,
schema: {
//data: employee,
model: {
id: "DeviceIP",
fields: {
DeviceIP: { editable: true, nullable: false },
//Producer: { type:"string" },
//3 Model: { type: "string" },
DeviceType: { type: "string" },
Description: { type: "string" },
Username: { type: "string" },
Password: { type: "string" },
PublicIP: { type: "string" },
ModelProducer: { type: "string" },
Model: { type: "string" },
Producer: { type: "string" },
TurbineId: { type: "string" }
//UnitPrice: { type: "number", validation: { required: true, min: 1} },
//Discontinued: { type: "boolean" },
//UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#turbingrid").kendoGrid({
// debugger;
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{
name: "create",
text: "ADD NEW DEVICE"
}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id: 'Producer' },//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px', id: 'Model' },
// { field: 'DeviceType', title: 'DeviceType', width: '100px', id: 'DeviceType', editor: deviceTypesList },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px', id: 'PublicIP' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', id: 'TurbineId', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', id: 'deviceid', hidden: true },
// { field: 'ModelProducer', title: 'Producer/Model', id: 'ModelProducer', hidden: true, editor: modelPro },
{
command: ["edit"], title: " "
}
],
editable: "popup",
});
}
})
}
});
//This Part Is For The AUTOCOMPLETE textbox
$(document).ready(function () {
var value = document.getElementById('autocomplete').value;
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("List_Turbine","AdminTool")",
contentType: "application/json; charset=utf-8",
//data: JSON.stringify({ "name": value ,}),
data: {},
success: function (result) {
$("#autocomplete").kendoAutoComplete({
dataSource: result,
dataTextField: "Text",
// filter: "contains"
});
}
})
});

KendoUI Grid Update Issue

I define a grid in my page :
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Grid/GetPerson",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'Get'
},
update: {
url: function (person) {
debugger;
return "/Grid/Update";
},
contentType: 'application/json; charset=utf-8',
type: "POST",
},
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: "ID",
fields: {
ID: { type: "number", editable: false, nullable: true },
Name: { validation: { required: true } },
Family: { validation: { required: true, min: 1 } },
Tel: {}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "Name", title: "نام" },
{ field: "Family", title: "فامیل" },
{ field: "Tel", title: "تلفن", width: "100px" },
{ command: [{ name: "edit", text: "ویرایش" }, { name: "destroy", text: "حذف" }], title: "عملیات", width: "160px" }],
messages: {
editable: {
cancelDelete: "لغو",
confirmation: "آیا مایل به حذف این رکورد هستید؟",
confirmDelete: "حذف"
},
commands: {
create: "افزودن ردیف جدید",
cancel: "لغو کلیه‌ی تغییرات",
save: "ذخیره‌ی تمامی تغییرات",
destroy: "حذف",
edit: "ویرایش",
update: "ثبت",
canceledit: "لغو"
}
},
editable: "popup"
});
});
In person parameter in update function, i can access changed row by :
person.models[0]
it gives me :
Object {ID:1,Name:"pejman",Family:"kam",Tel:"098787887"}
SO i want to send this data to the server, so i have a action in GridController:
[HttpPost]
public void Update(TblPerson person)
{
//do update
}
for doing it, i try :
url: function (person) {
return "/Grid/Update/" + JSON.stringify(person.models[0])
},
in the update method, but it doesn't work, how can i do it?
NOTE: when i using above in Network tab of browser give me Bad Reuest error:
URL:http://localhost:2145/Grid/Update/%7B%22ID%22:1,%22Name%22:%22pejman%22,%22Family%22:%22kam%22,%22Tel%22:%22098787878%22%7D
Status Code:400 Bad Request

The problem is that kendo.stringify(options.models) sends your object in JSON string. So I believe that your js code can stay as it is. Just change your Update method in controller to something like:
[HttpPost]
public void Update(string models)
{
var values = JsonConvert.DeserializeObject<IEnumerable<TblPerson>>(models);
foreach (var value in values)
{
//Your action
}
}
The approach above just assume that you can send more models to update. Don't forget using Newtonsoft.Json

Change Value of kendo grid based on second datasource

I am very new to both kendo and javascript so excuse any lapses in knowledge. I have a kendo grid with a field called TicketStatusID. I have another independent datasource with TicketStatusID and TicketStatusName. Is there a way to replace TicketStatusID in my grid with TicketStatusName from my other datasource?
here is my grid:
var commentsDatasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
//url: sBaseUrl,
url: baseUrl + "TicketIssueComment",
type: "get",
dataType: "json",
contentType: "application/json"
},
create: {
url: baseUrl + "TicketIssueComment",
type: "post",
dataType: "json",
ContentType: 'application/json',
success: refresh
},
},
schema: {
data: "value",
total: function (data) {
return data['odata.count'];
},
model: {
id: "TicketCommentID",
fields: {
TicketCommentID: { type: "number" },
TicketID: { type: "number" },
TicketCommentValue: { type: "string" },
TicketCommentCreatedBy: { type: "string", defaultValue: "z13tas", editable: false },
TicketCommentCreatedTS: { type: "date", editable: false },
TicketStatusID: { type: "number", editable: false },
//TicketStatusName: { type: "string", editable: false }
}
}
},
filter: { field: "TicketID", operator: "eq", value: filterValue },
pageSize: 50,
serverPaging: true,
serverFilering: true,
serverSorting: true,
sort: { field: "TicketID", dir: "asc" },
});
//-----------------KENDO GRID-----------------
$("#gridComments").kendoGrid({
dataSource: commentsDatasource,
pageable:
{
refresh: true,
pageSizes: [10, 25, 50, 100],
buttonCount: 5
},
//height: 300,
width: 300,
//sortable: true,
toolbar: ["create", "save", "cancel"],
scrollable: true,
reorderable: true,
editable: true,
selectable: "row",
resizable: true,
edit: function edit(e) {
if (e.model.isNew() == false) {
$('input[name=TicketCommentValue]').parent().html(e.model.TicketCommentValue);
}
},
columns: [
{ field: "TicketCommentValue", title: "Comment", width: "500px" },
{ field: "TicketStatusID", title: "Status", width: "100px" },
{ field: "TicketCommentCreatedBy", title: "Created By", width: "100px" },
{ field: "TicketCommentCreatedTS", title: "Created Date", width: "150px", format: "{0:MM-dd-yyyy hh:mm tt}" }
]
});
and here is my second datasource:
var StatusDatasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
dataType: "json",
url: baseUrl + "TicketIssueStatusView",
}
},
schema: {
data: "value",
total: function (data) {
return data['odata.count'];
},
model: {
id: "TicketStatusID",
fields: {
TicketStatusID: { type: "number" },
TicketStatusName: { type: "string" },
TicketStatusDescription: { type: "string" },
TicketStatusUpdatedTS: { type: "date" },
TicketStatusUpdatedBy: { type: "string" },
}
}
},
serverFilering: true,
optionLabel: "--Select Value--"
});
I think I may be onto something with this solution here - http://demos.telerik.com/kendo-ui/grid/editing-custom - but Telerik's documentation offers no explanation of how to implement. Thanks

Do it from this example.
Add this field where you want to change kendo grid.
$.ajax({
cache: false,
type: "POST",
url: "#Html.Raw(Url.Action("assing", "Customer"))",
data: postData,
complete: function (data) {
//reload antoher grid
var grid = $('#Customer-grid').data('kendoGrid');
grid.dataSource.read();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
traditional: true
});
from below code your problem is solve..try it first.
var grid = $('#Customer-grid').data('kendoGrid');
grid.dataSource.read();

{
field: "TicketStatusID",
title: "Status",
width: "100px",
template: #= StatusDatasource.get(data.TicketStatusID).TicketStatusName #
}
Remember your StatusDatasource should be top level, I mean available as windows.StatusDatasource, and both initialized and read data before grid initialization (without first condition there will be an error, and without second you will see undefined inside a column).

kendo grid delete button doesn't trigger delete function

Here is my grid:
$("#category-gridview").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: function (options) {
return '/Product/GetCategories?id=' + $("#selectedProductId").val() + '&company=' + $("#company-dropdown").val() + '&language=' + $("#country-dropdown").val();
},
dataType: "json",
type: "POST"
},
destroy: {
url: '/Product/DeleteProductCategory',
dataType: "json",
type: "POST",
contentType: "application/json"
},
parameterMap: function (options, operation) {
console.log("HÄÄR");
console.log(options);
if (operation !== "read" && options.models) {
return JSON.stringify({
category: options
});
}
}
},
schema: {
model: {
fields: {
id: {
type: "string"
},
name: {
type: "string"
},
}
}
},
},
columns: [{
field: "id",
hidden: true
}, {
field: "name",
title: "Category",
width: "30px"
}, {
command: "destroy",
title: " ",
width: 15
}],
editable: false,
});
somehow the read function works as expected but when i press the delete button i won't even reach my parameter map function.
When i look in chrome console there is no request sent to my controller.
here is my controller method:
[HttpPost]
public JsonResult DeleteProductCategory(CategoryResponse category)
{
return Json(category);
}

Let me try to answer, but to note that i change your transport and the column setting to match the field using kendo because obviously i can't use yours. Similar to this
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/products/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
At first glance i notice you use "POST" on read and delete call, actually you don't need them?
But then you said that you couldn't reach the parametermap, i came to
think of
You set editable : false, how can you edit it if you
set it to false? you should make it to editable : true(note: also you can try to set it to false and then you can see the delete function will not work)
DEMO

Instead of stringifing {param:value} Simply stringify value i.e stringify(options.models) for parameter category
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { category: kendo.stringify(options.models) };
}
}