Search any kendo grid field regardless of it's column name - asp.net-mvc

Is it possible to search all columns without listing them individually? My problem is new columns will be added on a regular basis and I don't want to have to come back and add the column header each time. For example in the code below instead of listing "Name", "Phone", "Email", ... etc. is there some code I could use to basically say if the column exists to include it in the filter?
Thanks in advance!
$(document).ready(function () {
$("#FieldFilter1").keyup(function () {
var value = $("#FieldFilter1").val();
grid = $("#UnclaimedLeadsGrid").data("kendoGrid");
if (value) {
grid.dataSource.filter({
logic: "or",
filters: [
{ field: "Name", operator: "contains", value: value },
{ field: "Phone", operator: "contains", value: value },
{ field: "Email", operator: "contains", value: value },
{ field: "Address", operator: "contains", value: value },
{ field: "City", operator: "contains", value: value },
{ field: "State", operator: "contains", value: value },
{ field: "ZipCode", operator: "contains", value: value },
{ field: "Subject", operator: "contains", value: value },
{ field: "Message", operator: "contains", value: value },
{ field: "FirstName", operator: "contains", value: value },
{ field: "LastName", operator: "contains", value: value }
]
});
} else {
grid.dataSource.filter({});
}
});
});

This sounds like a job for the Search Panel.
You add the Search Panel as a toolbar option to the grid:
toolbar: ["search"]
The search box will appear in the top right of the grid. The search will run a "contains" filter on all of the columns in your grid.
Here is the example from the demo page linked above:
<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,
toolbar: ["search"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>

Related

How to use data from Model to bind as kendo datasource

i have an empty div that i want to initialize into a kendo grid using data from Model..it should be something like the following but i am unable to load data
$("#mapsDiv").kendoGrid({
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
About.cshtml
#model List<KendoExample.Entities.ShortStudent>
<div class="row">
<div class="col-md-12 table-responsive" id="mapsDiv">
</div>
My Home Controller is as follows
List<ShortStudent> students = new List<ShortStudent>();
ShortStudent student1 = new ShortStudent();
student1.birthdate = new DateTime(1999, 4, 30);
student1.classname = "1B";
student1.firstname = "Fredie";
student1.surname = "Fletcher";
student1.studentid = 1;
ShortStudent student2 = new ShortStudent();
student2.birthdate = new DateTime(2010, 5, 4);
student2.classname = "1B";
student2.firstname = "Lee";
student2.surname = "Hobbs";
student2.studentid = 2;
students.Add(student1);
students.Add(student2);
return View(students);
I have seen examples using json but not odata...
Also, there are examples to use it like
#(Html.Kendo().Scheduler<MeetingViewModel>()
.Name("scheduler")
.Editable(false)
.DataSource(ds => ds
.Custom()
.Batch(true)
.Schema(schema => schema
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
m.Field("start", typeof(DateTime)).From("Start");
m.Field("end", typeof(DateTime)).From("End");
m.Field("description", typeof(string)).From("Description");
m.Field("recurrenceID", typeof(int)).From("RecurrenceID");
m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
m.Field("recurrenceException", typeof(string)).From("RecurrenceException");
m.Field("isAllDay", typeof(bool)).From("IsAllDay");
m.Field("startTimezone", typeof(string)).From("StartTimezone");
m.Field("endTimezone", typeof(string)).From("EndTimezone");
}))
.Transport(new {
//the ClientHandlerDescriptor is a special type that allows code rendering as-is (not as a string)
read = new Kendo.Mvc.ClientHandlerDescriptor() {HandlerName = "customRead" }
})
)
)
which i am unable to understand/implement so please ignore this kind of a solution.
Currently i see a grid footer that says (1 - 2 of 4852 items) without any header or content(datarows) on my screen. What am I doing wrong?
UPDATE
var dataSource = new kendo.data.DataSource(
{
transport: {
read: {
url: '#Url.Action("About", "Home")',
contentType: "application/json",
dataType: "json"
}
},
schema: {
model: {
fields: {
firstname: { type: "string" },
surname: { type: "string" },
birthdate: { type: "date" },
classname: { type: "string" }
}
}
},
type: "json",
serverPaging: false,
serverFiltering: true,
serverSorting: false
}
);
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read: dataSource
},
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field: "age",
}]
});
HomeController
public ActionResult About()
{
....
return View(students);
}
Now the grid with header is there but no data is present..
If i change action to json, it returns plain json on the page
public ActionResult About()
{
....
return Json(students, JsonRequestBehavior.AllowGet);
}
Have you tried adding the fields to the grid?
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
columns: [
{
field: "classname",
title: "Class Name"
},
{
field: "firstname",
title: "First name"
},
{
field: "surname",
title: "Last name"
}
],
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
I just visit demo of telerik. Try following. Hope to help, my friend. Or you can visit this link to refer more: http://demos.telerik.com/kendo-ui/grid/remote-data-binding.
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
schema: {
model: {
fields: {
studentid: { type: "number" },
birthdate : { type: "date" },
classname : { type: "string" },
firstname : { type: "date" },
surname : { type: "string" }
}
}
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
So here is what i found what should have been straight forward :)
var values = #Html.Raw(Json.Encode(#Model));
$("#MapDetails")
.kendoGrid(
{
sortable: true,
dataSource: {
data:values,
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field
: "age",
}]
});

angular ui-grid filter issues with MALE/FEMALE

Im using angular ui-grid, the bottom line is that I have a 'gender' column that has "MALE" and "FEMALE". When i click the "MALE" dropdown, all MALE and FEMALE show up (obviously because m-a-l-e is in f-e-m-a-l-e). How can I get the filter to differentiate between the two?
{
field: 'sex'
, displayName: 'SEX'
, width: '120'
, editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" style="border-bottom-color: #74B3CE; border-bottom-width: 2px;"></form></div>'
, filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
},
You can provide custom functions for filtering. Change your column def to have the custom filter function.
{
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
],
condition: customFilterSelected
}
},
and then define customFilterSelected
function customFilterSelected(function filterSelected(term, value, row, column) {
return term === value;
}
this function is run everytime filter changes for each row. Parameter term is what the value of filter is and value is the value of current row. A row is show if this function returns true.
Try this
name: 'gender', displayName: 'Gender', enableHiding: false, resizeable: true,
filter: {
type: uiGridConstants.filter.SELECT,
condition: uiGridConstants.filter.EXACT,
selectOptions: [{ value: 'Male', label: 'Male' }, { value: 'Female', label: 'Female' }, { value: 'Other', label: 'Other' }]
}

Bind data to grid after page load MVC

I have problem here.With kendo grid i'm loading data from some action in controller.But in the last column i have link which should fire another action in same controller.When i delete this piece of 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"
},
last column is working perfect,bit when is present this piece of code, last column is not working>please here some help, i;m new to mvc.Below is the code:
$("#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: "Status",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "jobNumber",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "Customer",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "Id"
},
#*{
field: "ShortDesc",
title: "ShortDesc"
},*#
{
field: "DateCompletition",
title: "DateCompletition"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: '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
});
});
</script>
It seems you want to add a command to the grid, The way to add a command as described here is as follows
var grid = $("#jobs-grid").kendoGrid({
dataSource: {
pageSize: 20,
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
},
pageable: true,
height: 550,
columns: [
{ field: "JobNumber", title: "JobNumber", width: "140px" },
{ field: "CustomerId", title: "Customer", width: "140px" },
{ field: "Id", title:"Id" },
{ field: "DateCompletition", title:"DateCompletition" },
{ command: { text: "Edit",
click: function(e){
// here you can add your code
}},
title: " ",
width: "180px" }]
}).data("kendoGrid");
You might have a look on the documentation of the kendo grid here
Hope this will help you

Kendo UI stacked bar chart with remote data

I am trying to bind the kendo chart to the remote json data.
I have a sample example that I created.
I dont know why the chart is incorrectly displayed and the ordering of the axis is messed up in this example.
var data = [
{"Name":1,"Year":2011,"Expense":200.00},
{"Name":1,"Year":2012,"Expense":274.91},
{"Name":1,"Year":2013,"Expense":0},
{"Name":1,"Year":2014,"Expense":0},
{"Name":5,"Year":2011,"Expense":100.00},
{"Name":5,"Year":2012,"Expense":315.84},
{"Name":5,"Year":2013,"Expense":0},
{"Name":5,"Year":2014,"Expense":0},
{"Name":6,"Year":2011,"Expense":100.00},
{"Name":6,"Year":2012,"Expense":0},
{"Name":6,"Year":2013,"Expense":200},
{"Name":6,"Year":2014,"Expense":50},
];
$(document).ready(function() {
$("#chart").kendoChart({
theme: "silver",
title: {
text: "Total records processed"
},
legend: {
position: "bottom"
},
dataSource: {
data: data,
group: {
field: "Name"
}
},
transitions: false,
series: [{
type: "column",
stack: "true",
field: "Expense"
}],
categoryAxis: {
field: "Year"
},
tooltip: {
visible: true,
template: "#= value #"
}
});
});
http://jsfiddle.net/johnok/F2TQ8/92/
You can add a sort property to the dataSource:
dataSource: {
data: data,
group: {
field: "Name"
},
sort: { field: "Year", dir: "asc" }
},
Updated FIDDLE

how to use kendo ui grid in mvc with GPL version

I am using asp.net mvc4. And for my views designing am using kendo ui GPL version, here am using only javascript of kendo.
<div id="grid" style="width:500px"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: "Movies/Index", dataType: "json" }
},
schema: {
model: {
fields: {
ID:{type:"number"},
Title: { type: "string" },
ReleaseDate: { type: "date" },
Price: { type: "number" },
Genre: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
height:230,
filterable: true,
columnMenu: true,
groupable: true,
sortable: true,
pageable: true,
columns: [
{
field: "ID",
width: 90,
title: "ID"
}, {
field: "Title",
width: 90,
title: "Title"
},
{
field: "Genre",
width: 90,
title: "Genre"
}, {
width: 100,
field: "Price"
}, {
field: "ReleaseDate",
title: "ReleaseDate",
template: '#= kendo.toString(ReleaseDate,"dd MMMM yyyy") #'
}
]
});
});
and in my controller am using json action:
public JsonResult Index()
{
try
{
var ind = db.Movies.Select(a => new Models.Movie
{
ID = a.ID,
Title = a.Title,
Genre = a.Genre,
Price = a.Price,
ReleaseDate = a.ReleaseDate
}).OrderBy(a => a.Title);
return this.Json(ind, JsonRequestBehavior.AllowGet);
}catch(Exception)
{
throw;
}
}
But the problem is data is not fetching into my view. Any help is greatly appreciated.

Resources