I have a Telerik Extensions for ASP .Net MVC grid on my web page and, even though I've added the "Selectable" method to it, the OnRowSelect event is not getting triggered. It seems that the grid is not even responding to the "Selectable" method since my mouse pointer does not change to the hand when I'm hovering over the grid.
Here is the grid declaration:
<% Html.Telerik().Grid(Model.Students)
.Name("Students")
.DataKeys(keys =>
keys.Add(s => s.Id)
)
.Columns(columns =>
{
columns.Bound(s => s.CourseScore).ReadOnly();
columns.Bound(s => s.StudentName).ReadOnly();
columns.Bound(s => s.Points).ReadOnly();
columns.Template(s =>
{%>
<input name="GradeReleaseStatus" type="checkbox" value="<%=s.GradeRelease%>"
<%if (s.GradeRelease)
{%>
checked="checked"
<%}%>
/>
<%
}).Title("Release Grade");
})
.Selectable()
.ClientEvents(events => events.OnRowSelect("Activities.DisplaySingleGrade"))
.Render(); %>
Can anyone tell me what I'm missing or doing wrong?
Thanks.
Do you see a hover effect when you move the mouse over a grid row? If yes - then selection is working. If not - probably there is a JavaScript error in your page. If you don't see a JavaScript error make sure the grid initialization JavaScript is output. This needs a ScriptRegistrar component to be present after the grid declaration. Lastly you can try with a simpler script to see if the JavaScript event is raised:
events.OnSelect("onSelect")
<script>
function onSelect() {
alert("OnSelect");
}
</script>
Related
I have been using kendo grid for asp.net MVC.
Two problems I am facing
1 - While displaying create view for users, I have set an autofocus attribute to first text box. When using without kendo, autofocus works fine and gets injected in Dom. But when using kendo and editortemplate, I can't see autofocus attribute being inserted.
2 - Also in kendo grid Ajax editing, I am unable see bootstrap style to text box when clicking on Edit link button.
Following are the codes
KENDO GRID IN INDEX VIEW
#(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.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
}
)
.Pageable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(u => u.ID))
.Update(update => update.Action("Edit", "Users"))
.Destroy(destroy => destroy.Action("Delete", "Users"))
)
)
CREATE VIEW USERNAME SNIPPET FOR USER WHERE 1st PROBLEM I AM FACING
<div class="form-group">
#Html.LabelFor(model => model.USERNAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.USERNAME, new { #autofocus = "autofocus", #class = "form-control" } )
#Html.ValidationMessageFor(model => model.USERNAME, "", new { #class = "text-danger" })
</div>
</div>
You can see I have put autofocus in Create view but I am unable to see focus on page load when using Kendo. If I remove Kendo and EditorTemplate, autofocus works fine.
I have added code and some more details. Please have a look.Basically two problems I am facing, If I use kendo, I cant get autofocus for USERNAME textbox in Create.cshtml. Second in Kendo Grid Edit, I am unable to see bootstrap class applied to textboxes in edit mode unless I apply EditorTemplate in the folder. If I apply editortemplate, I cant get autofocus working on create.cshtml.
For your first problem, the autofocus attribute identifies the input that should have focus when the page loads. But the kendo grid editor popup is dynamically added to the page when the user clicks the edit button on a row. So you should manually set the focus using javascript code on grid edit event. So, in your grid settings:
.Events(events => events.Edit("gridEdit"))
And this is the code that I usually put in my gridEdit event handler:
function gridEdit(e) {
// get the handle of the edit window
var wnd = e.container.data("kendoWindow");
// set focus to the first input
wnd.bind('activate', function () {
e.container.find(':input:visible:enabled:first').focus();
});
}
We need to set the focus on edit-window activation, when the inner elements are ready. My code sets the focus to the first, enabled, visible input element, but your logic might be different.
Your second question is not clear to me, but maybe you should ask a new question for that, and please include more details, like a snapshot image of the problem.
The set-up:
ASP MVC project
Kendo Grid in a view via Razor
Column custom command, calls...
JavaScript that opens Kendo window with refresh() URL to partial view as custom form
The form has an input type=button calling JavaScript
The barrier:
How to update the row (dataItem?) of Grid with new model (from window/form javascript). I am unable to get a handle to target dataItem. Select() is not applicable here because the row is not selected. Instead, a custom button event opens modal Grid Window having the fields and commands for update, close, etc..
I could use the native Edit of Grid, but what I am trying to accomplish is a way to have complete customization of a pop up window showing partial view that can be used to present CRUD actions.
BTW: Rationale for this is to optimize space in a grid row that would normally be consumed with unnecessary buttons for Editing, and Deleting, layed down by use of the Kendo native control properties. I feel this is better presented in a separate, details view, like a Model Grid Window, in my case.
Again, not using Select(), I am unable to understand how to get a handle, within the Window/form JavaScript, to the Grid row that it was called from, for purposes of updating the row with new model data.
Thanks for your time.
Using your method you are doing double request so my suggesting:
On edit open a window binded to row via MVVM :
function edit(e) {
//get the row which belongs to clicked edit button
var item = this.dataItem($(e.currentTarget).closest("tr"));
//bind the window to the item via mvvm http://docs.telerik.com/kendo-ui/framework/mvvm/overview
kendo.bind($("#window"), item);
}
The window contain an editor template (Shared/EditorTemplates/Client.cshtml) :
#(Html.Kendo().Window().Name("window")
.Title("Client Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(400)
.Content(#<text>
#Html.Partial("EditorTemplates/Client", new Product())
</text>))
//Put in every element in the window data-bind="value:INPUT NAME"
//<input name="price" /> become <input name="price" data-bind="value: price" />
$("#window [name]").each(function () {
var name = $(this).attr("name")
$(this).attr("data-bind", "value:" + name );
});
The editor template :
#model Product
#Html.TextBoxFor(m => m.Name)
This demo shows how to get reference of the dataItem bound to the column where the custom command key is pressed, and shows the respective info in a Window. You can use the dataItem to update the Grid as well:
http://demos.telerik.com/kendo-ui/grid/custom-command
Here is an example as well:
http://dojo.telerik.com/abUHI
Take a look at the showDetails function
My discoveries since posting this...
I'm new with web presentation development, therefore grasping the distinction of client vs. server side elements and scope of such was key point. As well, learning the various specifics of the Kendo Grid was also helpful.
Continuing on with my present solution...
Getting a handle on the row item selected from custom command event not done with Select() because row is not being selected. As previously stated in other posts, this was only a part of the needed work. In the custom command event handler JavaScript (seen again in full solution below):
var detailDataItem = this.dataItem($(e.target).closest("tr"));
MY SOLUTION:
In the parent window that hosts the Kendo Grid:
#* Declare modal Kendo Grid window control *#
#helper ClientGrid()
{
#(Html.Kendo().Grid<Purevision.Models.Person>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.FirstName).Width(100);
columns.Bound(c => c.LastName).Width(130);
columns.Bound(c => c.Email).Width(140);
columns.Bound(c => c.Phone).ClientTemplate("#= (data.Phone) ? formatPhoneNumber(data.Phone) : 'none' #").Width(130);
columns.Bound(c => c.Comments).Hidden().Width(140);
columns.Bound(c => c.UserId).Hidden();
columns.Bound(c => c.Id).Hidden();
columns.Command(command =>
{
command.Custom("Archive").Click("archiveCommand");
command.Custom("Detail").Click("detailCommand");
}).Width(90);
})
.ToolBar(toolbar => toolbar.Create())
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Events(e => e.Change("onChange").DataBound("onDataBound").DataBinding("onDataBinding"))
.Scrollable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Edit"))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(c => c.Id))
.Create(create => create.Action("People_Create", "Clients"))
.Read(read => read.Action("People_Read", "Clients"))
.Update(update => update.Action("People_Update", "Clients"))
.Destroy(update => update.Action("People_Destroy", "Clients"))
)
)
}
#* Declare modal Kendo Grid window control; MUST be named 'detailWindow' as referenced by partial view script *#
#(Html.Kendo().Window().Name("detailWindow")
.Title("Client Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(400)
.Content(#<text>
#Html.Partial("_edit", new Person())
</text>
)
<script type="text/javascript">
function detailCommand(e) {
var window = $("#detailWindow");
var kWnd = window.data("kendoWindow");
var data = this.dataItem($(e.target).closest("tr"));
e.preventDefault();
kendo.bind(window, data);
kWnd.center().open();
}
</script>
In the partial view _edit.cshtml being presented in Kendo modal window:
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-4">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>
<input type="button" id="updateButton" value="Update2" class="btn btn-default" />
Wire up button event during form ready, which gets a handle to the grid control still in scope on the client-side:
<script type="text/javascript">
// as mentioned by Tarek, bind each control's value attribute
$("#detailWindow [name]").each(function () {
var name = $(this).attr("name");
$(this).attr("data-bind", "value:" + name );
});
$(document).ready(function (e) {
var window = $("#detailWindow");
var grid = $("#grid").data("kendoGrid");
$("#updateButton").click(function (e) {
grid.saveChanges();
window.data("kendoWindow").close();
});
});
</script>
I'm open to refactoring suggestions here. It seems like lots of client-side coding in JavaScript to accomplish custom activity against the Kendo Grid. (sigh) I am happy to have the versatility though. (smile)
It took much re-editing to hopefully get this answer to something useful. Let me know. ;)
REFERENCES:
Telerik Forums / Kendo UI Forum / Grid / How does Grid update its dataSource?
I am using Telerik MVC Extensions Grid control, with AJAX binding, and run a delete command. Deletion works as intended, and the grid updates so that it doesn't show the deleted row.
However, after deleting one of the grid columns (the first one) shows up empty. There is also difference in the second column - 'false' instead of the unchecked box.
Any ideas why, and how do I fix that?
I can refresh the screen, and that fixes the view. But it is a heavy page, and I'd rather not do the second refresh.
After deleting, the first column shows up empty:
My grid:
Html.Telerik()
.Grid(Model)
.Name("scenarioGrid")
.DataBinding(dataBinding => dataBinding.Ajax()
.Delete("Delete", "Scenario"))
.DataKeys(keys => keys.Add(c => c.Id))
.Columns(columns =>
{
columns.Template(o => Html.ActionLink(o.Name, "Index", new {id = o.Name})).Title("Scenario")
.FooterTemplate(#<text>Total #Model.Count() </text>);
columns.Bound(o => o.IsLocked);
columns.Bound(o => o.ContractMonth);
columns.Bound(o => o.CreateDate);
columns.Command(commands => commands.Delete().ButtonType(GridButtonType.Image)).Title("Delete");
}
)
.Sortable()
.Scrollable(scroll => scroll.Height(200))
.ClientEvents(events => events.OnDelete("onDelete").OnComplete("afterDelete"))
You shouldn't use columns.Template with Ajax binding. It's meant for server side bound grids. You should use
columns.Bound(o => 0.whatever).ClientTemplate("convert your link to a string here");
It looks like you are using server binding to load the grid, but ajax binding to update it. columns.Template is used for server binding. You should use ClientTemplate for ajax binding.
Is it posible to use row specific content into HtmlAttributes?
I got this cell with its content (o.ArrivalTime), when i move my mouse over it i'll like it to show the content from a other element (o.Note) in a tooltip
I tried this but it will not accept the o.Note
columns.Bound(o => o.ArrivalTime)
.Title("Arrival Time")
.Template(o =>
{%><%=(o.ArrivalTime < Convert.ToDateTime("2000-01-01")) ? "?" : o.ArrivalTime.ToString()%><%})
.Width(140)
.HtmlAttributes(new {title = o.Note })
;
Rather than using HtmlAttributes, you can do this inside Template.
columns.Bound(o => o.ArrivalTime)
.Title("Arrival Time")
.Template(o =>
{%><div title="<%= o.Note %>"><%=(o.ArrivalTime < Convert.ToDateTime("2000-01-01")) ? "?" : o.ArrivalTime.ToString()%></div><%})
.Width(140)
;
Please take a look at the following example.
Grid - Server Templates
In this example the first column uses a templating mechanism to create the column. In similar way you can create a template for your column and then use the different columns while defining the template. Here is the code snippet from the demo:
<% Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
//Template column. The grid displays the HTML defined by the argument.
columns.Template(c => {
%>
<img
alt="<%= c.CustomerID %>"
src="<%= Url.Content("~/Content/Grid/Customers/" + c.CustomerID + ".jpg") %>"
/>
<%
});
//Regular databound column. The grid displays the value of the CustomerID property.
columns.Bound(c => c.CustomerID);
})
.Render();
%>
Hope this was helpful to your question.
Lohith (Tech Evangelist, Telerik India)
I am trying to bind a dropdownlist to a telerik grid, so that when the value of the dropdownlist changes the grid will update via ajax to show results. Here is my code so far:
IndexView:
<% Html.RenderPartial("AptProfileFilter"); %>
<%= Html.Telerik().Grid(Model.profiles)//Initial Server Binding
.Name("Profiles").DataBinding(dataBinding => dataBinding
.Ajax()
.Update("_AjaxBinding", "AptProfile", new {id = (string)ViewData["BuildingID"]}))
.Columns(columns =>
{
columns.Bound(p => p.AptProfileID).Width(100);
columns.Bound(p => p.Apartment.Building.Complex.Name).Width(100);
columns.Bound(p => p.Apartment.Building.BuildingID).Width(100);
columns.Bound(p => p.Apartment.AptRate).Width(100);
})
.Pageable()
.Sortable()
I used FireBug to determine that the correct data is being posted( after selecting a element from my dropdownlist)
back to the Data collection in the GridModel class, but I do not understand why it is not updating the Grid with this new data?
I am very new to web development. Thanks for your help!
I've been wrestling with this too. take a look at the link below (bottom of comment), in which I asked the same type of question. In my case, I managed to get this working, but still have some questions about HOW I got it working. Anyway, I hope this helps ... Also, in my case, I'm using Razor views, which you might not be, based upon you use of the <% operators ... Telerik MVC Grid: How to use DropDownList in a column?