As per the requirement, I am having a Kendo UI grid on my VIEW.But sadlyy, the read function is not being hit in the controller.This is annoying ,I am getting the same problem even though everyhting seems to be as per the documentation provided on http://demos.kendoui.com/web/grid/index.html. Here is my View code:
#(Html.Kendo().Grid<StudentManagement_Models.Student>()
.Name("studentsGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Groupable(false);
columns.Bound(p => p.FirstName);
columns.Bound(p => p.MiddleName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.CGPA);
})
.AutoBind(true)
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAllStudents", "Student"))
)
)
Here is my controller action:
public ActionResult GetAllStudents([DataSourceRequest] DataSourceRequest request)
{
//Thread.Sleep(2000);
StudentManagement_Models.Student student = new StudentManagement_Models.Student();
StudentHelper helper = new StudentHelper();
student.SavedStudents = helper.GetAllStudents();
return Json(student.SavedStudents.ToDataSourceResult(request));
}
How would I tackle this ?Am I missing something ?Kindly suggest.
Thanks in advance.
Add all of this file in your page
<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="~/Script/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script>
<script src="~/Script/kendo.web.min.js" type="text/javascript"></script>
<script src="~/Script/kendo.aspnetmvc.min.js" type="text/javascript"></script>
<link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
I think you mis one of the js in your page , probebly Jquery-1.8.1.min.js .
I was having similar issue with the MVC version.
I noticed I was getting a 404 but when clicking the 404'd link in the Chrome debugger it would indeed hit my controller method. Then I noticed that it was using POST (and I had HttpVerbs.Get) specified.
Then I found this (from http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/troubleshooting):
By default Kendo Grid for ASP.NET MVC should make POST requests when
configured for ajax binding. This is implemented by a custom
DataSource transport and schema. Those are defined in the
kendo.aspnetmvc.min.js. Make sure that this file is included after the
other Kendo JavaScript files.
After verifying that the scripts were indeed in the correct order (and knowing it probably had something to with POST) I specified the verb to use at the end of my Read in the grid as so:
.Read(read => read.Action("MyList_Read", "Diagnosis").Type(HttpVerbs.Get))
This solved MY problem.
try to call the read method with JQuery's document.ready()
$(document).ready(function ()
{
var grid = $("#studentsGrid").data("kendoGrid")
grid.dataSource.read()
})
Also is savedStudent a type of student.... Ur grid is bound to Student but you are returning SavedStudent objects
"By default Kendo Grid for ASP.NET MVC should make POST requests when configured for ajax binding. " ???
For Kendo UI version 2014.1.318, I think, by default Kendo Grid for asp.net mvc makes GET requests when configured for ajax binding.
I discovered that if there are two grids on the same webpage (in this case, in different tabs), then each grid MUST have its own datasource method in the MVC controller - even if both grids are using the same data,
Related
We're using Kendo UI MVC 2019.2.619 in our MVC5 project.
Our TreeView is rendering like this:
We took a look at the HTML it's generating at our end
But it should look like this
(Source: https://www.telerik.com/forums/k--items)
This is how we generate our TreeView.
#(Html.Kendo().TreeView()
.Name("BroadcastTreeView")
.DataTextField("Text")
.DataSource(dataSource => dataSource
.Model(model => model
.Id("Id")
.HasChildren("HasChildren")
.Children("Items"))
.Read(read => read.Type(HttpVerbs.Post).Action("ReadTree", "Broadcast").Data("treeViewReadData"))
.Events(events => events.RequestEnd("onRequestEnd")))
.Messages(msg => msg
.Loading("Data ophalen...")
.RequestFailed("Kan data niet ophalen")
.Retry("Probeer opnieuw"))
.Events(events => events
.Change("onTreeViewChange")
.Expand("onTreeViewExpand"))
.HtmlAttributes(new { #class = "custom-border" }))
When we drag the .k-in span outside of the .k-icon span in the Chrome debugger. The layout is like it's supposed to be. We do not have any custom JavaScript that's manipulating the TreeView. Is this a known bug with version we're using? Thank you.
Have you upgraded your jQuery to 3.5 recently? It doesn't allow for some self-closing tags, like <span class="k-icon" /> which are present in Kendo's source.
See https://github.com/telerik/kendo-ui-core/issues/5735 .
You need to upgrade Kendo or downgrade jQuery .
We've searched for a couple of hours, but no luck. We made the decision to upgrade to Kendo 2020.5.513. It makes for some layout issues but it has fixed the issue with the treeview.
I have an issue on having an external template inside Column ClientTemplate
.Columns(col =>
{
col.Bound(c => c.ID);
col.Bound(c => c.Name).Width(100);
col.Bound(c => c.StatusID)
.Title("Action")
.ClientTemplate("#=_actionTemplate(data)#")
.Width(100);
})
<script id="tmplAction" type="text/x-kendo-template">
#(Html.Kendo().Button().Name("btnTest_#=ID#")
.Content("Test")
.ToClientTemplate())
</script>
<script>
var _actionTemplate = kendo.template($('#tmplAction').html());
</script>
Even though it is called and rendered inside the grid column, kendo script is not executed therefore the only rendered element is a basic Button and not Kendo Button
Any help would be appreciated
Copied from your code :
.ClientTemplate("#= fnactionTemplate(data)#")
And declare that function like:
function fnactionTemplate(data){
// External logic goes here....
return $('#tmplAction').html();
}
Hope it will work.
I am using following code to display data from server in a Kendo Grid.
Working fine.
I want to put two hyperlinks in last cell of each row, but can do with only one.
I want EDIT and DELETE link in same cell.
How can I achieve this?
CODE
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(u => u.USERNAME);
columns.Bound(u => u.PASSWORD);
columns.Bound(u => u.ROLE);
columns.Bound(u => u.STATUS);
columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));
}
)
.Pageable()
)
There are a couple of ways to do this.
First you could use the inbuilt edit/delete options from within the grid config
like so:
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
Then just wire up the edit config and destroy delete commands appropriately.
Alternatively you can template these out using one of two methods:
First inline template:
columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a>
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")
So this is just bound to a column and the template is added as per your requirements using standard html and javascript if required. This is fine for simple things but can get very clunky fast if you have more complex templates which then leads to the second method creating a template and calling that like this:
columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")
then create your template like so:
<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='#Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a>
<a class="btn btn-danger" href='#Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a>
<div>
</script>
then the getButtonTemplate function:
function getButtonTemplate(data, templateName) {
var templateObj = $("#" + templateName).html();
var template = kendo.template(templateObj);
return template(data);
}
So let me explain what is going on here with this second method.
Instead of templating the html in the column we extract it out into two components for want of a better word.
We use the getButtonTemplate function to pass 2 params in the data item and the template's id. This function simply loads the passed data object into the template and the kendo magic renders the html and injects the values in as required. Check the kendo demo site for more info on this subject.
The template element can be a mix of html and javascript so if you needed to apply some logic in the template this can be done in here. Again refer to the kendo site for more info on this subject.
I personally prefer the second method of doing this client templating as it is easier to manage and make changes without rogue hash's or brackets breaking code.
If you need any more info let me know and I will update the answer for you.
I've got a Kendo Ui datetimepicker. But when I choose time or date, there is an error "Cannot call method 'attr' of undefined", that appears in kendo.all.min.js. What might be the issue?
Honestly, i've got Kendo Scheduler. But when i try to create an event, there are datetimepickers, and when i choose date or time i've got such kind of error.
Here's my code:
#{
var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}
<script src="#Url.Content("~/Scripts/kendo/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/cultures/kendo.culture." + culture + ".min.js")"></script>
<script>
kendo.culture("#culture");
</script>
#using Kendo.Mvc.UI
#(Html.Kendo().Scheduler<TaskViewModel>()
.Name("scheduler")
.Date(DateTime.UtcNow)
.StartTime(DateTime.UtcNow)
.Height(600)
.Width(1000)
.Timezone("Etc/UTC")
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.DataSource(d => d
.Model(m => {
m.Id(f => f.TaskID);
})
.Read("Read", "TaskManager")
.Create("Create", "TaskManager")
.Destroy("Destroy", "TaskManager")
.Update("Update", "TaskManager")
)
)
i'm using ru-Ru culture.
Does your declaration/include of scripts looks something like this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
...
JQuery should be declared first and along with your Kendo scripts.
The second posible cause is your JQuery selector. Try something simple and setting both name and id attributes like:
$("#ctrl")
Could any one give an example, how to use Jquery in Controller Page. MVC3 -ASP.NET(How To put various tags like )
I want to show a simple alert before rendering a view in Controller.
Thank you.
Hari Gillala
Normally scripts are part of the views. Controllers shouldn't be tied to javascript. So inside a view you use the <script> tag where you put javascript. So for example if you wanted to show an alert just before rendering a view you could put the following in the <head> section of this view:
<script type="text/javascript">
alert('simple alert');
</script>
As far as jQuery is concerned, it usually is used to manipulate the DOM so you would wrap all DOM manipulation functions in a document.ready (unless you include this script tag at the end, just before closing the <body>):
<script type="text/javascript">
$(function() {
// ... put your jQuery code here
});
</script>
If you are talking about rendering partial views with AJAX that's another matter. You could have a link on some page that is pointing to a controller action:
#Html.ActionLink("click me", "someAction", null, new { id = "mylink" })
and a div container somewhere on the page:
<div id="result"></div>
Now you could unobtrusively AJAXify this link and inject the resulting HTML into the div:
$(function() {
$('#mylink').click(function() {
$('#result').load(this.href, function() {
alert('AJAX request finished => displaying results in the div');
});
return false;
});
});