Related
I need help here.I have kendogrid, which need to have a popup.Popup is loading from template(view1.cshtml) and everything is working perfectly.But when i add search in my page, and than add following code
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
in rest of the code in grid(search results are bind here to grid),search is working, popup is not working nothing and is showing when i click on the button to show up popup.What is here wrong?Thanks
<script>
$(function() {
$("#jobs-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerId: { type: "number" },
JobCount: { type: "number" },
JobYear: { type: "number" },
Status: { type: "number" },
Position: { type: "number" },
Finished: { type: "boolean" },
HasInvoice: { type: "boolean" },
}
}
},
#*type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},*#
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
//dataBound: onDataBound,
columns: [
#*{
field: "Status",
title: "#T("gp.Jobs.Fields.Status")",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "#T("gp.Job.Fields.JobNumber")",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "#T("gp.Job.Fields.Customer")",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "#T("gp.Job.Fields.Name")"
},
#*{
field: "ShortDesc",
title: "#T("gp.Jobs.Fields.ShortDesc")"
},*#
{
field: "DateCompletition",
title: "#T("gp.Job.Fields.DateCompletition")"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: '#T("Common.Edit")'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
// sortable: true,
// navigatable: true,
// filterable: true,
// scrollable: true,
selectable: true,
rowTemplate: kendo.template($("#jobRowTemplate").html()),
});
</script>
i want to loop through each row of kendo grid and check the check box of specific rows only.here's what i have tried so far.
function LoadControllerGrid(list) {
$("#controllerGrid1").kendoGrid({
data Source: {
type: "json",
// contentType: "application/json; charset=utf-8",
transport: {
read: {
url: "#Html.Raw(Url.Action("GetControllerList", "Account"))",
type: "POST",
dataType: "json"
},
},
schema: {
model: {
id: "Id",
fields: {
'Id': { type: "string" },
'Name': { type: "string" },
'Description': { type: "string" },
'URL': { type: "string" },
},
},
data: 'data',
total: 'TotalCount'
},
complete: function (jqXHR, textStatus) {
// HidePageLoader();
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
columnMenu: true
},
height: 300,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: 5000
},
columns: [{ template: '<input type="checkbox" id="#=Id#" class="gridCK" />', width: "35px" },
{ field: "Description", title: "Actions" }, ]
});
var df = list;
var grid = $("#controllerGrid1").data("kendoGrid");
grid.tbody.find("input").closest("tr").each(function (index, row) {
var dataItem = grid.dataItem(row);
for (var i = 0; i < df.length; i++)
{
if (df[i] == dataItem.Id) {
$("#controllerGrid1 tbody").find("tr[data-uid=" + dataItem.Id + "]").attr("checked");
});
}
can any one explain what did i do wrong?? and suggest if there are any alternative ways of doing this. Thanks in advance
I found a solution.
var selected = $("#controllerGrid1 tbody").find("tr[data-uid=" + dataItem.uid + "]");
selected
.find("td:first input")
.attr("checked", true);
It works for me after adding above code instead of following,
$("#controllerGrid1 tbody").find("tr[data-uid=" + dataItem.Id + "]").attr("checked");
I want to use use a popup menu for registration and I have to use radio button on it somewhere. It should have multiple choices and just one is able to chosen.
Here is my code:
Here is my PersonModel.js
define([
'kendo/kendo.data.min', 'robe/Validations'], function () {
var PersonModel = kendo.data.Model.define({
id: "oid",
fields: {
oid: {
editable: false,
nullable: true,
type: "string"
},
lastUpdated: {
editable: true,
nullable: true,
type: "string"
},
tckNo:{
editable:true,
nullable:false,
type:"string",
validation :getValidations("tckNo","T.C. Kimlik Numarası",true,false,11,11,"[0-9]")
},
name: {
editable: true,
nullable: false,
type: "string"
},
surname: {
editable: true,
nullable: false,
type: "string"
},
birthday: {
editable: true,
nullable: false,
type: "date"
},
isSingle:{
editable:true,
nullable:false,
type:"boolean"
}
}
});
return PersonModel;});
Here is PersonDataSource.js
define(['common/SingletonDataSource', './PersonModel'], function (SingletonDataSource, personModel) {
var personDataSource = SingletonDataSource.define({
name: "personDataSource",
parameters: {
transport: {
read: {
type: "GET",
url: AdminApp.getBackendURL() + "person/all",
dataType: "json",
contentType: "application/json"
},
update: {
type: "POST",
url: AdminApp.getBackendURL() + "person",
dataType: "json",
contentType: "application/json"
},
destroy: {
type: "DELETE",
url: AdminApp.getBackendURL() + "person",
dataType: "json",
contentType: "application/json"
},
create: {
type: "PUT",
url: AdminApp.getBackendURL() + "person",
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, operation) {
if (operation !== "read") {
return kendo.stringify(options);
}
}
},
batch: false,
pageSize: 25,
schema: {
model: personModel
}
}
});
return personDataSource;});
And here is PersonManagement.js :
define([
'text!./PersonManagement.html',
'./PersonDataSource',
'kendo/kendo.grid.min',
'robe/view/RobeView'],
function(view,PersonDataSource){
var PersonManagementView = require('robe/view/RobeView').define({
name:"PersonManagementView",
html:view,
containerId:"container",
initialize:function(){
var grid = $("#personGrid").kendoGrid({
dataSource: PersonDataSource.get(),
sortable: true,
autoBind: false,
pageable: {
refresh: true
},
toolbar: [
{
name: "create",
text: "Yeni Kişi"
}
],
columns: [
{
field:"tckNo",
title:"TC Kimlik Numarası",
format:"{0:n0}"
},
{
field: "name",
title: "Ad"
},
{
field: "surname",
title: "Soyad"
},
{
field: "birthday",
title: "Doğum Günü"
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
}
});
}
});
return PersonManagementView;
}
);
Can you help me please?
You have too use checkboxes.
Radio-Buttons don't allow multiple selection.
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).
I start using Kendo UI editable grid, but I want to set my own datasource coming from php script which echoes a array of objects (copy/paste from the original Kendo UI datasource).
The thing is nothing populate the grid.
Here is the content of my html file.
` Back
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost/telererik-kendoui",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "../../datasource.php",
dataType: "json",
type:"GET",
contentType: "application/json; charset=utf-8",
cache: false
},
/* 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,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ 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: 120 }],
editable: true
});
});
</script>
</div>`
The content of my datasource.php file is as follow
<?php
echo "[{'ProductID':1,'ProductName':'Chai','UnitPrice':18,'UnitsInStock':39,'Discontinued':false},{'ProductID':2,'ProductName':'Chang','UnitPrice':19,'UnitsInStock':17,'Discontinued':false},{'ProductID':3,'ProductName':'Aniseed Syrup','UnitPrice':10,'UnitsInStock':13,'Discontinued':false}]"?>
Any help on that?
im not really familier with php but with your data in the php file i have done a demo for you .
call the dataSource read as a function so you have much more flexibility to do anyting for the result you get.
read: function (options) {
var result=[{'ProductID':1,'ProductName':'Chai','UnitPrice':18,'UnitsInStock':39,'Discontinued':false},{'ProductID':2,'ProductName':'Chang','UnitPrice':19,'UnitsInStock':17,'Discontinued':false},{'ProductID':3,'ProductName':'Aniseed Syrup','UnitPrice':10,'UnitsInStock':13,'Discontinued':false}]
options.success(result);
}
http://jsfiddle.net/chanaka1/ank22b0n/
you may look the kendo doc for how to return a json from a php file here : http://docs.telerik.com/kendo-ui/php/widgets/combobox/remote-binding#create-php-file-which-returns-json