Get data from database to combobox using KendoUI for MVC3 - asp.net-mvc-3

I'm using MVC3 with KendoUI.
I can retrieve the data by passing values to combobox manually, and could see the values in the combobox when executed.
This is by passing values manually
$("#input").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true,
index: 3
});
Now I need to retrieve data from SQL Server 2008.
Say my Table name is Products
Product Name <-- This is my column Name followed by the values in it.
abc
def
ghi
How can I do this ?
I'm very new to this KendoUI and also to MVC.
Please Help
Thanks,

Yo mate,
The client side configuration of the combobox should be very similar to this one.
http://demos.kendoui.com/web/combobox/remotedatasource.html
e.g.
<script>
jQuery("#products").kendoComboBox({
"dataSource": {
"transport": {
"read": {
"url": "/razor/web/Home/GetProducts",
"data": function() {
return kendo.ui.ComboBox.requestData("#products");
}
}
},
"serverFiltering": true,
"filter": [],
"schema": {
"errors": "Errors"
}
},
"dataTextField": "ProductName",
"dataValueField": "ProductID",
"filter": "contains"
});​
</script>
With such configuration from the sever method you need to create an action method which returns JsonResult and the most important part is that each object in the collection should include properties with names ProductName and ProductID representing the name and id used for the Combo.
public JsonResult GetProducts(string text)
{
var northwind = new NorthwindDataContext();
var products = northwind.Products.Select(product => new ProductViewModel
{
ProductID = product.ProductID,
ProductName = product.ProductName,
UnitPrice = product.UnitPrice ?? 0,
UnitsInStock = product.UnitsInStock ?? 0,
UnitsOnOrder = product.UnitsOnOrder ?? 0,
Discontinued = product.Discontinued
});
if (!string.IsNullOrEmpty(text))
{
products = products.Where(p => p.ProductName.Contains(text));
}
return Json(products, JsonRequestBehavior.AllowGet);
}

Related

Kendo Grid disable field during Edit mode

Using kendo grid edit event I want to disable field name and id during Edit mode. I manage to disable id by following this example here. But went I try to disable name seem it not working, any thought how to do this?
WORKING DEMO IN DOJO
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"name": { type: "string" }
}
}
}
},
editable: "inline",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew()) {
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
//var x = e.container.find("input[name=name]").data("kendoTextBox");
//x.enable(false);
//$("input[name=name]").prop("disabled", true).addClass("k-state-disabled");
//$("input[name=name]").editable = false;
}
}
});
by using editable function i created this
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
return (e.id == null || e.id == '');
}
and add this into the grid > column
columns: [
{ field: "id", editable: isEditable },
{ field: "name", editable: isEditable },
{ field: "age" },
{ command: "edit" }
],
Full working demo is here

kendo ui numeric column editor value resets on record add

I'm trying to add a numeric spinner input box to a column in a Kendo UI grid.
For some reason if I 'add' a record to the dataSource and change the numeric value, then 'add' another row, the value in all the previously added rows gets set to 1?
$("#add-btn").click(function(){
$("#items-grid").data("kendoGrid").dataSource.add({NAME:"Apples",QTY:1})
})
$("#items-grid").kendoGrid({
height: 300,
columns : [
{
field : "NAME",
title : "Name"
},
{
field : "QTY",
title : "Qty",
width: 140 ,
template: "<input class='numeric' value='#: QTY #' style='width:100%'> </input>"
} ],
noRecords: true,
dataSource: [] ,
dataBound: function() {
this.tbody.find(".numeric").each(function(){
$(this).kendoNumericTextBox({decimals: 0});
});
}
});
http://jsfiddle.net/5ow4sj3b/
Please advise
The problem with my Kendo Grid was that I hadn't added a model to the schema to specify the "number" type for the QTY column.
Without this, the inline numericTextBox doesn't behave correctly
dataSource : new kendo.data.DataSource({
data: [],
schema: {
model: {
fields: {
QTY: { type: "number", validation: { required: true, min: 1} }
}
}
}
}),

Multiple sort on Kendo Grid columns / DataSource - set sorting dynamically

What I'm trying to accomplish is to apply an "automatic" secondary column sort when a user sorts a column in a kendo grid.
So in this JS fiddle example, if a user sorts by "Value", it'll also sort by "Name". Note that the 0s are sorted together, but the names aren't alphabetical. I'd like them to be alphabetical (the secondary sort).
Here's an attempt at overriding the datasource sorting to accomplish this. I'm taking the user's original sort and the adding an additional sort on "SortedName". Based on the sorting array that's logged, it seems to be close but is still not working.
Any other ideas on how to accomplish this?
Note: I don't want to allow users to sort by multiple columns. The real world example I'm using this for can have up to 50+ columns (unfortunately), so multiple sort can get confusing / unintuitive. And I'd like it to be done behind the scenes without extra user interaction.
Example code for overriding kendo datasource sort():
dataSource.originalSort = dataSource.sort;
dataSource.sort = function () {
// take the user's sort and apply sorting on an additional column
// the sort array should look like this:
[
{ field: "Value", dir: "asc" }, // this is what the user sorted by
{ field: "SortedName", dir: "asc" }, // and I'm adding this
]
return dataSource.originalSort.apply(this, arguments);
}
Please try with the below code snippet.
<div id="grid">
</div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ Name: "Lisa", Value: 1 },
{ Name: "Dan", Value: 12 },
{ Name: "Ken", Value: 5 },
{ Name: "Arthur", Value: 15 },
{ Name: "Bob", Value: 0 },
{ Name: "Sally", Value: 0 },
{ Name: "Alexis", Value: 0 },
{ Name: "Cody", Value: 0 },
{ Name: "Steve", Value: 0 },
{ Name: "Andrew", Value: 0 },
{ Name: "Duke", Value: 0 }
],
schema: {
model: {
fields: {
Name: { type: "string" },
Value: { type: "number" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: function (e) {
var isSortedByName = false;
var grid = $("#grid").data("kendoGrid");
var ds = grid.dataSource;
var sort = ds.sort();
if (sort) {
for (var i = 0; i < sort.length; i++) {
if (sort[i].field == "Name") {
isSortedByName = true;
}
}
if (isSortedByName == false) {
sort.push({ field: "Name", dir: "asc" });
ds.sort(sort);
}
}
},
columns: [
{ field: "Name" },
{ field: "Value" }
],
sortable: true
});
</script>

Kendo Grid wouldn't sort when using Key/Value pair array object

I am using Telerik Kendo Grid; it wouldn't allow to use the sortable functionality of the table when my datasource (array) looks as below:
var myArray = [
{ Destination = { Country: "United Kingdom", AircraftTypeCount: 9 }, Origin= [ {​Country: "United States", Code: "JFK"} ] },
{ Destination = { Country: "Egypt", AircraftTypeCount: ​5 }, Origin= [ {​Country: "​Qatar", Code: "QR"} ] }]
It renders the country column fine, but when I click on the column the sorting doesn't occur. Below is my Kendo Grid (using AngularJS):
$("#myKendoTable").kendoGrid({
dataSource: {
data: myArray
},
sortable: {
mode: "multiple",
allowUnsort: true
},
columns: [
{
field: "Country",
title: "Country",
width: 300,
template: function (item) {
return item["Destination"].Country;
}
}
]
});
​
I've just sorted this out. It seems that Kendo's sorting functionality recognises basic array structure, so I had retrieve all Destinations from myArray into a separate array, and use that new array as the datasource.
I used the following method to do so (using underscoreJS):
function getDestinationsData(airlineRoutes)
{
return _.map(AirlineDestinationRoutes, function (airlineRoutes) { return airlineRoutes.Destination });
}

Saving a Kendo datasource using jStorage

I'm adding and removing data to a Kendo dataSource. I wish to save it localStorage, and be able to read it again from localStorage.
Here I've attempted to use jStorage for the saving and loading of data.
How it's loaded:
if ($.jStorage.get('favoritter') != null) {
var datakilde_favoritter = $.jStorage.get('favoritter');
} else {
var data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
var datakilde_favoritter = new kendo.data.DataSource({
data: data,
sort: { field: "name", dir: "asc" }
});
}
How it's saved:
$.jStorage.set('favoritter', datakilde_favoritter);
Define your DataSource as:
var ds = new kendo.data.DataSource({
transport: {
read : function (op) {
var data = $.jStorage.get('favoritter');
if (!data) {
data = [
{id: 5, name: "LINK ONE", url: "http://www.linkone.com" }
];
}
op.success(data);
},
update : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
destroy: function (op) {
console.log("destroy", ds.data());
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
},
create : function (op) {
$.jStorage.set("favoritter", ds.data());
op.success(op.data);
}
},
sort : { field: "name", dir: "asc" },
pageSize : 10,
schema : {
model: {
id : "id",
fields: {
id : { type: 'number' },
name: { type: 'string' }
}
}
}
});
You might consider removing create and destroy if not needed.
And your grid would be something like:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : "popup",
pageable : true,
toolbar : ["create"],
columns : [
{ command: ["edit", "destroy"], width: 100 },
{ field: "id", width: 90, title: "#" },
{ field: "name", width: 90, title: "URL Name" }
]
}).data("kendoGrid");
Basically when updating you need to invoke op.success with the data returned from the server. In your case since it is the browser itself, you don't need just to return the original data.

Resources