I am using kendo,
and work on it with grid.
I found this demo from the kendo web page
of kendo grid batch editing.
In this demo I am tring to bind my data source.
It works perfectly but only destroys and does not work on them.
I am also trying this:
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
destory: {
url: "<?php echo site_url('search_result_queue/destory_urls_fields').'/'.$id; ?>",
dataType: "json",
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
regex_id: "ProductName",
value: "Race",
event_url:"url"
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 430,
toolbar: ["create","save", "cancel"],
columns: [
{ field: "key", title: "field", width: 110 },
{ field: "value", title: "Units In Stock", width: 110 },
{ field: "event_url", width: 110 },
{ command: "destroy", title: " ", width: "90px" }],
editable: true,
destory:"inline"
});
});
Can anyone please know me how can I do this?
You spelled the dataSource transport function "destory" instead of "destroy".
You need to check the spelling of destroy. In your code it is "destory" it should be "destroy".
Related
I'm trying to have a kendo grid column extremely thin, basically like a line. Reducing the width property below 10px or 10 doesn't seem to have any effect.
Here's what I'm doing:
let mainGridOptions = {
dataSource: myData,
columns: [{
field: "color",
title: " ",
width: '5px' // tried even without px, just 5
}]
};
Anyone know what's happening?
I am not able to reproduce it I please try with the below code snippet or look in this demo.
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: '5px'
}]
});
});
</script>
If you will set the column width to '5px' then you could not see anything into column because some default spacing(Margin/padding) applied to the columns.
I am working on a odata grid with Kendo UI.
The problem is that the ajax request keeps containing a callback parameter. Which causes this error: Callback parameter is not supported. When I do the request manually without the callback, my odata service works perfect.
Someone an idea how to fix this?
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
type:"odata",
serverPaging: true,
serverFiltering: true,
serverSorting: true,
transport: {
contentType: "application/json; charset=utf-8",
type: "GET",
read: "/odata/FestivalSignUps?$inlinecount=allpages&$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
dataType: "json",
parameterMap: function (options, type) {
var paramMap = kendo.data.transports.odata.parameterMap(options);
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
},
pageSize: 10,
schema: {
data: function (data) {
return data["value"];
},
total: function (data) {
return data["odata.count"];
},
}
}),
filterable:true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ApplicationUser.Email", width: 90, title: "Email" },
{ field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },
{ field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
{ field: "PrefferedTasks", width: 90, title: "Taken",
template: "#= formatTasks(data) #"},
{ field: "Beschikbaar", width: 90, title: "Taken" }
]
});
Update
This code solved the problem:
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
type: 'odata',
transport: {
read: {
url: "/odata/FestivalSignUps?$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
dataType: "json"
},
},
schema: {
data: function (data) {
return data["value"];
},
total: function (data) {
return data["odata.count"];
},
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
}),
filterable:true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "ApplicationUser.Email", width: 90, title: "Email" },
{ field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },
{ field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
{ field: "PrefferedTasks", width: 90, title: "Taken",
template: "#= formatTasks(data) #"},
{
field: "AvailableDays", width: 90, title: "Beschikbaar",
template: "#= formatDays(data) #"
},
]
});
I cover this issue and some others in a blog post that I wrote: Server-Side Filtering Using KendoUI With MVC4 WebAPI and OData.
If you are querying your own data, and don't need to do a cross-domain request, we can just not use jsonp. To do this, we just tell Kendo the dataType for the read operation is "json".
var dataSource = new kendo.data.DataSource({
type: 'odata', // <-- Include OData style params on query string.
transport: {
read: {
url: "/api/Albums",
dataType: "json"; // <-- The default was "jsonp".
}
}
});
I would like to disable DiscountPercentageMRC/NRC/Usage columns for certain CatalogProductId's. Please find below javascript for the grid. Any help would be greatly appreciated.
<h2>Kendo Grid bound to ASP.NET MVC action methods</h2>
#* The DIV where the Kendo grid will be initialized *#
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{ field: "CompanyId"},
{ field: "CompanyName" },
{ field: "DiscountPercentageMRC" },
{ field: "CatalogProductId"},
{ field: "DiscountPercentageMRC" },
{ field: "DiscountPercentageNRC" },
{ field: "DiscountPercentageNRC" },
{ field: "DiscountPercentageUsage"}
],
height: 400,
editable: true, // enable editing
pageable: true,
sortable: true,
filterable: true,
toolbar: ["create", "save", "cancel","edit"], // specify toolbar commands
dataSource: {
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 10,
batch: true,
editable: "inline",
transport: {
read: {
url: "#Url.Action("ResellerDiscountsGet", "AccountDetail", new { BusOrdId = #ViewBag.Message })",
type: "POST",
}
}
},
selectable: true
});
});
</script>
You would use the Edit event to enable/disable cells. I created a working example here: http://jsfiddle.net/Eh8GL/151/
function OnEdit(e) {
// Make sure it's not a new entry
if (!e.model.isNew()) {
var catalogproductid = e.container.find("input[name=CatalogProductId]").data("kendoNumericTextBox").value();
// Disable DiscountPercentageMRC if catalog productid = 100
if (catalogproductid == 100) {
var disableField = e.container.find("input[name=DiscountPercentageMRC]").data("kendoNumericTextBox");
disableField.enable(false);
}
}
}
i am very much new to kendo grid, so please consider my question and help me.
i have a coldfusion page which has an array variable that contains all the user records retrieved from database.
now i have a function, for pagination.
i want to enable server side paging in this, but actually have no idea on how to do this.
please help.
$(document).ready(function(){
$("#data_table3").kendoGrid({
dataSource: {
pageSize: 10
},
pageable: {
refresh: true,
pageSizes: true
},
columns: [ {
field: "UserName",
width: 90,
title: "User Name"
} ,
{
field: "FirstName",
width: 90,
title: "First Name"
}
],
height: 460,
sortable: true
});
$("#data_table").show();
});
Hi try like this ,
$("#appointmentsGrid").kendoGrid({
columns: [
{ field: "MemberFirstName", title: "Member<br/>First Name" },
{ field: "MemberLastName", title: "Member<br/>Last Name" }
],
dataSource: new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
transport: {
read: {
url: "/Content/GetCustomerNameWithId",
data: additionalData
}
},
pageSize: 10,
schema: { data: "data", total: "total" }
}),
pageable: true,
sortable : true
});
I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}