I am using the OpenSource version of Kendo-UI with a MVC4 project and Entity Framework. Can someone please explain how to connect the kendo-ui grid to my datasource in my .cshtml file. I am used to just simply creating a view and using #model to pull in the info from my controller. Since I don't have ASP.NET server tags for Kendo-UI. What would I put after the datasource: part when declaring my grid in javascript?
Please try with the below code snippet.
Let me know if any concern.
VIEW
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="Grid">
</div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "Home/GetDummydata",
dataType: "json"
}
}
,
schema: {
data: function (data) {
return data;
}
}
});
$("#Grid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ID",
title: "ID"
},
{
field: "Name",
title: "Name"
}
]
});
});
</script>
CONTROLLER
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[AllowAnonymous]
[HttpGet]
public JsonResult GetDummydata()
{
List<TestModels> models = new List<TestModels>();
for (int i = 1; i < 6; i++)
{
TestModels t1 = new TestModels();
t1.ID = i;
t1.Name = "Name" + i;
models.Add(t1);
}
return Json(models, JsonRequestBehavior.AllowGet);
}
}
MODEL
public class TestModels
{
public int ID { get; set; }
public string Name { get; set; }
}
Related
I wanna do autocomplete when i enter a letter.
I have a database "USERS" and it has name .When i try texted for example e
it must show "edgar,edwin,emir" but ,t shows nothing.
ClientController here:
public class ClientController : Controller
{
public JsonResult AutocompleteSuggestions(string searchstring)
{
ModelContext db = new ModelContext();
var suggestions = from E in db.USERS
select E.Name;
var namelist = suggestions.Where(n => n.ToLower().Contains(searchstring.ToLower()));
return Json(namelist, JsonRequestBehavior.AllowGet);
}
}
index.cshtml here:in here there is a textbox and i send client controller autocopleteSuggeston method but it doesnt go or it doesnt work.I add jquery script file on cshtml but it still not working.
#using (Html.BeginForm())
{
<p>
Name: #Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}
<script type="text/javascript">
window.jQuery(function () {
window.jQuery("#SearchString").autocomplete({
source: "/Client/AutocompleteSuggestions",
minLength: 1,
select: function (event, ui) {
if (ui.item) {
window.jQuery("#SearchString").val(ui.item.value);
window.jQuery("form").submit();
}
}
});
});
</script>
i add jquery
Where is the mistake?
you need to add [HttpPost] before JsonResult method like this:
[HttpPost]
public JsonResult AutocompleteSuggestions(string searchstring)
{
ModelContext db = new ModelContext();
var suggestions = from E in db.USERS
select E.Name;
var namelist = suggestions.Where(n => n.ToLower().Contains(searchstring.ToLower()));
return Json(namelist, JsonRequestBehavior.AllowGet);
}
as the form here is submitted using window.jQuery("form").submit(),it invokes a Post Action, so you need to add [HttpPost] for capturing the form submissions or any kind of Post Action!
Change your View Code to
#using( Html.BeginForm(null, null, FormMethod.Post, new{#id ="SearchForm"} ))
{
<p>
Name: #Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}
$(function() {
$("#SearchString").autocomplete({
source: "/Client/AutocompleteSuggestions",
select: function(event, ui) {
$("#SearchString").val(ui.item.value);
$("#SearchForm").submit();
}
});
});
i want to perform filtering,sorting and no of records in kendo grid but it is not working.
this is my view page:
<script>
$(document).ready(function () {
$("#categories-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("categoriesList", "Admin"))",
type: "POST",
dataType: "json",
data: '',
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 2,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [10,20,30]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
columns: [{
field: "CategoryName",
title: "CategoryName",
width: 100
}, {
field: "CategoryId",
title: "Edit",
width: 100,
template: 'Edit'
}]
});
});
</script>
This is my controller side http post action:
[HttpPost]
public ActionResult categoriesList(DataSourceRequest command)
{
Categories categoriesBal = new Categories();
List<CategoryModel> categoriesList = new List<CategoryModel>();
var category = GetCategory();
ViewBag.Category = GetCategory();
List<Category> categoryDetails = categoriesBal.fetchCategory();//here i am fetching categoryid,name
var gridModel = new DataSourceResult
{
Data = categoryDetails.Select(x =>
{
var categoryModel = new CategoryModel();
categoryModel.CategoryId = x.CategoryId;
categoryModel.CategoryName = x.Name;
return categoryModel;
}),
Total = categoryDetails.Count
};
return Json(gridModel);
}
This is my DataSourceRequest class
public class DataSourceRequest
{
public int Page { get; set; }
public int PageSize { get; set; }
public DataSourceRequest()
{
this.Page = 1;
this.PageSize = 10;
}
}
This is my Category model:
public class CategoryModel
{
public int CategoryId { get; set; }
public string CategoryName { get; set; }
public int frequency { get; set; }
public virtual ICollection<SubcategoryModel> subCategory { get; set; }
}
i am having 12 category.when i am setting item per page dat is 2 it display all records.
can any body tell me what is the problem in my code and how to perform sorting and filtering??
Change your schema to act as a function
schema: {
data: function(response) {
return response.Data ;
}
total: function(response) {
return response.Total;
}
},
and pageable to
pageable: {
refresh: true,
pageSizes: [2,10,20,30]
},
and do not see the use of DataSourceRequest in your code since you don't send the pageSize from the read . send a object of DataSourceRequest and return only what is specify in your DataSourceRequest . in this case only two records
transport: {
read: function (options) {
var commandOBJ=[{
Page: 1, // Once the first two item is loaded and you click for the next page you will have the page in "options" (should be like options.page)
PageSize:2
}];
$.ajax({
url:"#Html.Raw(Url.Action("categoriesList", "Admin"))",
data: { command: bookmarkID },
dataType: "json",
cache: false,
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
}
Now from your action categoriesList check the command and send data accordingly . and your read action can be a GET instead of POST . hope this Helps
Instead of using your custom DataSourceRequest class, use the KendoGridMvcRequest class from this project, this class correctly maps the paging, sorting and filtering.
Also available as nuget.
See this link for demo.
I have a working application integrating Bootstrap and Knockout. This app pulls data from my controller and displays this in the UI as I would expect. I can see values are updated when I click or change a value but I can't seem to see that data passed back to my controller for the purposes of saving it. All I need to know is how to fix what I have to allow me to pass the selectedRequestorName back to the controller.
Here is a sample class
public class Requestor
{
public int Id { get; set; }
public string Name { get; set; }
}
Interface
interface IRequestorRepository
{
IList<Requestor> GetAllRequestors();
}
Here is the repository with the seed data
public class RequestorRepository : IRequestorRepository
{
private List<Requestor> requestors = new List<Requestor>();
private int _nextId = 1;
public RequestorRepository()
{
Add(new Requestor{ Id = 1, Name = "Brian" });
Add(new Requestor { Id = 2, Name = "Steve" });
Add(new Requestor { Id = 3, Name = "Jake" });
}
public IList<Requestor> GetAllRequestors()
{
return requestors;
}
public Requestor Add(Requestor item)
{
if (item == null)
{
throw new ArgumentNullException("Null Requestor");
}
item.Id = _nextId++;
requestors.Add(item);
return item;
}
}
My HomeController looks like the following
public class HomeController : Controller
{
static readonly IRequestorRepository req_repository = new RequestorRepository();
// GET: /Home/
public ActionResult Index()
{
ViewBag.DateNow = DateTime.Now.ToShortDateString();
return View();
}
public JsonResult GetRequestors()
{
return Json(req_repository.GetAllRequestors(), JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult SaveDetails(Requestor selectedRequestorName)
{
int id = -1;
return Json(id, "json");
}
}
In my Index.cshtml I have the following in a script tag at the top of the page
// Global variable
var viewModel = null;
$(document).ready(function () {
function ViewModel() {
//Make the self as 'this' reference
var self = this;
// Requestors
self.RequestorId = ko.observable("");
self.RequestorName = ko.observable("");
self.RequestorSourceDatabase = ko.observable("");
var RequestorNames = {
Id: self.RequestorId,
Name: self.RequestorName,
SourceDatabase: self.RequestorSourceDatabase
};
self.selectedRequestorName = ko.observable();
self.RequestorNames = ko.observableArray(); // Contains the list of RequestorNames
// Initialize the view-model for Requestors
$.ajax({
url: '#Url.Action("GetRequestors", "Home")',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
self.RequestorNames(data);
}
});
// END Requestors
// Reset
self.reset = function () {
self.Name("");
}
// Cancel
self.cancel = function () {
self.Name(null);
}
}
viewModel = new ViewModel();
ko.applyBindings(viewModel);
});
$(function () {
$('#Save').click(function (e) {
// Check whether the form is valid. Note: Remove this check, if you are not using HTML5
if (document.forms[0].checkValidity()) {
e.preventDefault();
$.ajax({
type: "POST",
url: '#Url.Action("SaveDetails", "Home")',
data: ko.toJSON(viewModel.selectedRequestorName),
contentType: 'application/json; charset=utf-8',
async: true,
beforeSend: function () {
// Display loading image
},
success: function (result) {
if (result > 0) {
alert("This work request has been successfully saved in database. The Document ID is: " + result);
} else {
alert("The Work Request was not saved, there was an issue.");
}
},
complete: function () {
// Hide loading image.
},
error: function (jqXHR, textStatus, errorThrown) {
// Handle error.
}
});
}
else {
alert("Form is not valid");
}
});
});
And finally the control that contains the displayed data for the user to select from...
<p>Current selection is <span data-bind="text:selectedRequestorName"></span></p>
<!-- Requestors -->
<div class="input-group col-sm-8">
<input type="text" data-bind="value:selectedRequestorName" class="form-control item" placeholder="Requestor Name" name="Requestor">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle item" data-toggle="dropdown">Select <span class="caret"></span></button>
<ul class="dropdown-menu" data-bind="foreach: RequestorNames">
<li class="dropdown">
</li>
</ul>
</div>
</div>
<div>
<button id="Save" type="submit" class="btn btn-default btn-success">Create</button>
</div>
create an action method on your controller that accepts an selectedRequestorName (string?) as argument.
create a function in your knockout viewmodel that reads the selectedRequestorName from the ko vm, JsonStringify it and pass it back to the above action method via ajax.
[HttpPost]
public JsonResult SaveDetails(String selectedRequestorName)
{
int id = -1;
return Json(id, "json");
}
change type of selectedRequestorName to String from Requestor as above that should work.
note not tested.but let me know if it helps.
Within $('#Save').click(), would you please change the line
data: ko.toJSON(viewModel.selectedRequestorName)
with
data: ko.toJSON(viewModel.selectedRequestorName())
hope, this will help.
I am developing web application in asp.net MVC 4. I am populating a jtable with JSON data.
But I am getting error "
Cannot call method 'data' of Undefined jtable/jquery.jtable.js:436
"
I have been searching for the solution of this error but not able to solve I am a newbie on MVC and jQuery as well. So I am sharing my code below for controller and view both.
And I have debug and check while my data base return the data problem is while loading the jtable
View file code for loading jtable
#{
ViewBag.Title = "Patients";
}
<div id="StudentTableContainer1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#StudentTableContainer1').jtable({
title: 'Patients List',
actions: {
listAction: ' #Url.Action("PatientsList")',
deleteAction: '#Url.Action("DeleteStudent")',
updateAction: '#Url.Action("UpdateStudent")',
createAction: '#Url.Action("CreateStudent")'
},
fields: {
PatientId: {
key: true,
create: false,
edit: false,
list: false
},
MedicalRegNo: {
title: 'MedicalRegNo',
width: '23%'
},
OldMedicalRegNo: {
title: 'OldMedicalNo',
width: '23%'
},
FirstName: {
title: 'FirstName',
width:'12%'
},
Gender:{
title: 'Gender',
width:'13%'
},
DOB: {
title: 'DOB',
width:'13%'
},
CNIC: {
title: 'CNIC',
width:'11%'
}
}
});
//Load student list from server
$('#StudentTableContainer1').jtable('load');
});
</script>
Controller code
[HttpPost]
public JsonResult PatientsList()
{
try
{
Thread.Sleep(200);
var Patients = obj_class.GetPatients();
return Json(new {Result = "OK", Records = Patients});
}
catch (Exception ex)
{
return Json(new {Result = "ERROR", Message = ex.Message});
}
}
Actually I solved it the error was that the columns which I was using for displaying in jtable were different ,they should have to be same as the JSonResult method object returns to view.
Like I want to give an example for this:
I have a jtable:
<div id="Mytable"></div>
$(document).ready(fucntion(){
$('#Mytable').jTable{
title:'My Jtable',
actions:
{
listAction:'#url.Action("MytableData")'
},
fields:{
ID:{
title:'ID',
widthL'20%'
},
Name:{
title:'My name',
width:'20%'
}
}
});
$('#Mytable').jTable.('load')
});
And My controller which is returning the JSON Object for MytableData is:
using System.Web.Mvc;
using System.Web.SessionState;
using System.Linq;
namespace CrudPlugInDevelop.Controllers
{
public class DemoController : RepositoryBasedController
{
PatientsModel obj_data=new PatientsModel();
public JsonResult MyTableData(string name)
{
List<DB_Patient> obj_data = context.PatientsList(name);
return Json(new { Result = "OK", Records = obj_data });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
}
And My Model Class
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using mEMR.Core.Interfaces;
namespace mEMR.Core.Models.PatientSearch
{
public class PatientSearchViewModel : IPatientSearchModel
{
public int ID { get; set; }
[DisplayName("First Name")]
public string Name { get; set; }
So here you go if In model you have name column in jtable column it should be name if you change it by first name or any thing else it will not show the data in jtable.
I just figured it out.
I have four controls on the page, a simple form with first and last names, date of birth and this drop down that contains some names of countries. When I make changes to the these controls I am able to see those changes in my viewModel that is passed in as a parameter in the SavePersonDetails POST below, but I never see the LocationId updated in that view model and I am not sure why.
This is what I have in my markup, Index.cshtml:
#model Mvc4withKnockoutJsWalkThrough.ViewModel.PersonViewModel
#using System.Globalization
#using Mvc4withKnockoutJsWalkThrough.Helper
#section styles{
#Styles.Render("~/Content/themes/base/css")
<link href="~/Content/Person.css" rel="stylesheet" />
}
#section scripts{
#Scripts.Render("~/bundles/jqueryui")
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/Application/Person.js"></script>
<script type="text/javascript">
Person.SaveUrl = '#Url.Action("SavePersonDetails", "Person")';
Person.ViewModel = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)));
var userObject = '#Html.Raw(Json.Encode(Model))';
var locationsArray = '#Html.Raw(Json.Encode(Model.Locations))';
var vm = {
user : ko.observable(userObject),
availableLocations: ko.observableArray(locationsArray)
};
ko.applyBindings(vm);
</script>
}
<form>
<p data-bind="with: user">
Your country:
<select data-bind="options: $root.availableLocations, optionsText: 'Text', optionsValue: 'Value', value: LocationID, optionsCaption: 'Choose...'">
</select>
</p>
</form>
This is my View Model:
public class PersonViewModel
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime DateOfBirth { get; set; }
public string LocationId { get; set; }
public IEnumerable<SelectListItem> Locations { get; set; }
}
I have a simple controller that loads my Person and a drop down list containing three countries.
private PersonViewModel _viewModel;
public ActionResult Index()
{
var locations = new[]
{
new SelectListItem { Value = "US", Text = "United States" },
new SelectListItem { Value = "CA", Text = "Canada" },
new SelectListItem { Value = "MX", Text = "Mexico" },
};
_viewModel = new PersonViewModel
{
Id = 1,
FirstName = "Test",
LastName = "Person",
DateOfBirth = new DateTime(2000, 11, 12),
LocationId = "", // I want this value to get SET when the user changes their selection in the page
Locations = locations
};
_viewModel.Locations = locations;
return View(_viewModel);
}
[HttpPost]
public JsonResult SavePersonDetails(PersonViewModel viewModel)
{
int id = -1;
SqlConnection myConnection = new SqlConnection("server=myMachine;Trusted_Connection=yes;database=test;connection timeout=30");
try
{
// omitted
}
catch (Exception e)
{
Console.WriteLine(e.ToString());
}
finally
{
myConnection.Close();
}
return Json(id, "json");
}
Lastly, here is my Person.js file, I am using knockout
var Person = {
PrepareKo: function () {
ko.bindingHandlers.date = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
element.onchange = function () {
var observable = valueAccessor();
observable(new Date(element.value));
}
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var observable = valueAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(observable);
if ((typeof valueUnwrapped == 'string' || valueUnwrapped instanceof String) && valueUnwrapped.indexOf('/Date') === 0) {
var parsedDate = Person.ParseJsonDate(valueUnwrapped);
element.value = parsedDate.getMonth() + 1 + "/" + parsedDate.getDate() + "/" + parsedDate.getFullYear();
observable(parsedDate);
}
}
};
},
ParseJsonDate: function (jsonDate) {
return new Date(parseInt(jsonDate.substr(6)));
},
BindUIwithViewModel: function (viewModel) {
ko.applyBindings(viewModel);
},
EvaluateJqueryUI: function () {
$('.dateInput').datepicker();
},
RegisterUIEventHandlers: function () {
$('#Save').click(function (e) {
// Check whether the form is valid. Note: Remove this check, if you are not using HTML5
if (document.forms[0].checkValidity()) {
e.preventDefault();
$.ajax({
type: "POST",
url: Person.SaveUrl,
data: ko.toJSON(Person.ViewModel),
contentType: 'application/json',
async: true,
beforeSend: function () {
// Display loading image
},
success: function (result) {
// Handle the response here.
if (result > 0) {
alert("Saved");
} else {
alert("There was an issue");
}
},
complete: function () {
// Hide loading image.
},
error: function (jqXHR, textStatus, errorThrown) {
// Handle error.
}
});
}
});
},
};
$(document).ready(function () {
Person.PrepareKo();
Person.BindUIwithViewModel(Person.ViewModel);
Person.EvaluateJqueryUI();
Person.RegisterUIEventHandlers();
});
As you can see, I have the data in the page but none of them show as selected
Your solution is overly complex and is leading to certain weirdness with your data. Instead of trying to patch the Titanic, your best bet is to start over and simplify:
Your page's model contains all the information you need. There's no need to try to create two totally separate view models to work with the user data versus locations. With the mapping plugin, you can specify different "view models" for various objects in your main view model, and there's a simpler pattern that can be followed to set all that up. Here's what I would do:
// The following goes in external JS file
var PersonEditor = function () {
var _init = function (person) {
var viewModel = PersonEditor.PersonViewModel(person);
ko.applyBindings(viewModel);
_wireEvents(viewModel);
}
var _wireEvents = function (viewModel) {
// event handlers here
}
return {
Init: _init
}
}();
PersonEditor.PersonViewModel = function (person) {
var mapping = {
'Locations': {
create: function (options) {
return new PersonEditor.LocationViewModel(options.data)
}
}
}
var model = ko.mapping.fromJS(person, mapping);
// additional person logic and observables
return model;
}
PersonEditor.LocationViewModel = function (location) {
var model = ko.mapping.fromJS(location);
// additional location logic and observables
return model;
}
// the following is all you put on the page
<script src="/path/to/person-editor.js"></script>
<script>
$(document).ready(function () {
var person = #Html.Raw(#Json.Encode(Model))
PersonEditor.Init(person);
});
</script>
Then all you need to bind the select list to the locations array is:
<p>
Your country:
<select data-bind="options: Locations, optionsText: 'Text', optionsValue: 'Value', value: LocationId, optionsCaption: 'Choose...'">
</select>
</p>
Based on your updated question, do this.
1.We do not need locationsArray actually. Its already in user.Locations (silly me)
2.On Index.cshtml, page change the JavaScript like this.
var userObject = #Html.Raw(Json.Encode(Model)); // no need for the quotes here
jQuery(document).ready(function ($) {
Person.PrepareKo();
Person.EvaluateJqueryUI();
Person.RegisterUIEventHandlers();
Person.SaveUrl = "#Url.Action("SavePersonDetails", "Knockout")";
Person.ViewModel = {
user : ko.observable(userObject)
};
Person.BindUIwithViewModel(Person.ViewModel);
});
3.On your Person.js page, inside RegisterUIEventHandlers #Save button click event, do this.
$('#Save').click(function (e) {
var updatedUser = Person.ViewModel.user();
updatedUser.Locations.length = 0; // not mandatory, but we don't need to send extra payload back to server.
// Check whether the form is valid. Note: Remove this check, if you are not using HTML5
if (document.forms[0].checkValidity()) {
e.preventDefault();
$.ajax({
type: "POST",
url: Person.SaveUrl,
data: ko.toJSON(updatedUser), // Data Transfer Object
contentType: 'application/json',
beforeSend: function () {
// Display loading image
}
}).done(function(result) {
// Handle the response here.
if (result > 0) {
alert("Saved");
} else {
alert("There was an issue");
}
}).fail(function(jqXHR, textStatus, errorThrown) {
// Handle error.
}).always(function() {
// Hide loading image.
});
}
});
5.Finally, our markup
<p data-bind="with: user">
Your country:
<select data-bind="options: Locations,
optionsText: 'Text',
optionsValue: 'Value',
value: LocationId,
optionsCaption: 'Choose...'">
</select>
</p>
On an unrelated side-note,
The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are
deprecated as of jQuery 1.8. To prepare your code for their eventual
removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.