How to open kendo window on click - kendo-ui

please go through the code below. In below grid, I've a column with hyperlink. I want to open a kendo window when i click on the particular link. How can i achieve this. Currently it is navigating to some other page.
#model IEnumerable<WeBOC.Support.Entities.ImportUnit>
#{
ViewBag.Title = "Import Units";
}
<h2>Import Units</h2>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.UnitNbr).Width(150).ClientTemplate(#Html.ActionLink("#=UnitNbr#", "UnitInspector", new { id = "#=UnitId#" }).ToHtmlString()).Title("Unit No.");
columns.Bound(p => p.VIRNbr).Width(150).Title("VIR No.");
columns.Bound(p => p.BLNbr).Width(150).Title("BL No.");
columns.Bound(p => p.IGMStatus).Width(80).Title("IGM Status");
columns.Bound(p => p.LineCode).Width(80).Title("Line Code");
columns.Bound(p => p.Arrived).Format("{0:dd/MM/yyyy HH:mm}").Width(150).Title("Arrived");
})
.Groupable()
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)

How to create hyperlinks, how to invoke javascript functions and how to pass parameters is all covered in this section of the documentation.

Why don't you change your client template to a simple html-element such as an a-element and assing a javascript function to this element which opens your window?
...
columns.Bound(p => p.UnitNbr).Width(150).ClientTemplate("<a id="myId>Unit No.</a>);
...
and then use jquery:
$("#myId").click(function() {
$("#kendoWindow").data("kendoWindow").open();
});

Adjust your template so the links have a css class:
columns.Bound(p => p.UnitNbr).Width(150).ClientTemplate(#Html.ActionLink("#=UnitNbr#", "UnitInspector", new { id = "#=UnitId#" }, new { #class="someclass" }).ToHtmlString()).Title("Unit No.");
Then use jQuery:
$(document).on("click", ".someclass", function (e) {
e.preventDefault();
var address = $(this).attr("href");
$("<div/>").kendoWindow({
content: address
}).data("kendoWindow").open();
});

Related

kendo datagrid update event is not fired when grouped on a column

I have a kendo data grid grouped default by a column and I want to edit the grid inline. I don't want the user to group by any other column. While the default grouping works fine, the update event is not fired and the control doesn't go the controller's inline update method. Can you please check where I'm going wrong. Below is the code:
#(Html.Kendo().Grid(Model)
.Name("grdTimesheets")
.Columns(columns =>
{
columns.Bound(p => p.EmployeeId).Hidden(true);
columns.Bound(p => p.FirstName);
columns.Bound(p => p.Monday.Hour).Title("Monday")
.EditorTemplateName("TimesheetMonday");
columns.Command(command =>
{
command.Edit();
command.Destroy();
command.Custom("Add").Text(" ").Click("AddNewTimesheet");
});
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Groupable(false)
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.EmployeeId);
model.Field(p => p.FirstName).Editable(false);
})
.PageSize(20)
.Update(update => update.Action("EditingInline_Update", "Timesheet"))
.Destroy(destroy => destroy.Action("EditingInline_Destroy", "Timesheet"))
.Group(d=>d.Add(f=>f.FirstName))
)
If I comment out the last line ".Group(d=>d.Add(f=>f.FirstName))", everything works fine but the default grouping goes off.
I know that its a bit late for an answer but I will just leave this here in case that anybody else is having the same problem. Once you group by any column the grid will not fire ".Update(update => update.Action("EditingInline_Update", "Timesheet"))". In order to fix this you would need to add OnEditEvent for the grid and in the javascript function to attach an event to the textbox/dropdown or whatever control you have there. Sample below:
.Events(events => events.Edit("grid_edit")) this is in the view
javascript:
function grid_edit(e) {
var grid = $('#grid').data('kendoGrid');
var cell = e.container;
var area = cell.find("textarea")
area.on("blur", function() {
// update ur entries here
var areaVal = cell.find("textarea").val(); // this is the new value
// call some ajax to update the value and in the success call grid.dataSource.sync(); to refresh the grid
});}
Also you would need to remove your .Update() for the DataSource because its no longer needed.

Telerik Grid MVC not displaying data on read

So I've got a grid that I believe is all set up correctly. I've confirmed that the data is coming through, and I've even checked that the AJAX call returns a success with the "ToDataSourceResult" JSON data.
​
Unfortunately, the only problem is that the data doesn't display. This seems to only be an issue on read, as update, create and delete all work. Just can't retrieve the list of all items afterwards.
​
My controller action looks like this:
public IActionResult Blog_Read([DataSourceRequest] DataSourceRequest request)
{
var blogs = _blogService.GetPosts().Select(post => new BlogPostModel
{
Id = post.Id,
Title = post.Title,
Author = post.Author,
ShortDescription = post.ShortDescription,
Contents = post.Contents,
LastSaved = post.LastSaved,
Published = post.Published,
PublishedOn = post.PublishedOn
});
var result = blogs.ToDataSourceResult(request);
return Json(result);
}
​
And my Grid View looks like this:
#(Html.Kendo().Grid<BlogPostModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Title);
columns.Bound(p => p.Author).Width(120);
columns.Bound(p => p.LastSaved).Width(120);
columns.Bound(p => p.Published).Width(120);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style= "height:600px;"})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("Blog_Create", "BlogAdmin"))
.Read(read => read.Action("Blog_Read", "BlogAdmin"))
.Update(update => update.Action("Blog_Update", "BlogAdmin"))
.Destroy(update => update.Action("Blog_Delete", "BlogAdmin"))
)
.Deferred()
)
​
The correct JSON is returned, no javascript errors in the console, so I'm a little confused as to what this could be. Any help would be greatly appreciated.
I solved this by adding
services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
to my Startup.cs ConfigureServices method.

kendo ui grid selecting row ID

I can't get the Kendo UI grid to work properly. All I am trying to do is, when it is double clicked, I want it to redirect to action.
<div class="Grid" id="Grid">
#(Html.Kendo().Grid(Model)
.Name("grdWorkFlow")
.Columns(columns =>
{
columns.Bound(p => p.SablonWorkflowID).Visible(false);
columns.Bound(p => p.Name);
columns.Bound(p => p.Description);
columns.Bound(p => p.DateAdded);
columns.Bound(p => p.Active);
}).Events(events => events.Change("grid_selected"))
.Selectable(p => p.Type(GridSelectionType.Row))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource.Server().Model(model => model.Id(p => p.SablonWorkflowID))
.Create("Yeni", "Workflow")
)
)
<script type="text/javascript">
function grid_selected(e) {
var grid = $('#Grid').data('grdWorkFlow');
alert('1');
var record = grid.dataItem(grid.select());
alert('2');
var WID = record.SablonWorkflowID;
window.location.href = "#Url.Action("Edit","Workflow",new { wID = 'WID' })";
}
$("#grdWorkFlow").on("dblclick", "tr.k-state-selected", function (e) {
// do something
});
This is my code. I don't get to alert('2'). I have tried various versions of this, using all types of different stuff from the net.
What am i doing wrong here?
You should define grid as:
var grid = $('#grdWorkFlow').data('kendoGrid');

Kendo grid in edit mode doesn't fire push event

My grid is build like this:
#(Html.Kendo().Grid<MyProject.Models.DataObjects.MyObject>()
.Name("my-object-grid")
.Columns(columns =>
{
columns.Bound(p => p.ID).Hidden();
columns.Bound(p => p.Name).Width(300);
columns.Command(command =>
{
command.Edit().Text("Modify")
.UpdateText("Save")
.CancelText("Cancel")
.HtmlAttributes(new { style = "width:90px;height:30px;font-size:12px;" });
command.Destroy().Text("Delete").HtmlAttributes(new { style = "width:90px;height:30px;font-size:12px;" });
}).Width(220);
})
.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { style = "width:120px;height:30px;float:left;" }))
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.Window(win => win.Title("MyObject")).TemplateName("MyObject"))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(p => p.ID);
})
.Create(update => update.Action("MyObject_Create", "MyObject"))
.Read(read => read.Action("MyObject_Read", "MyObject"))
.Update(update => update.Action("MyObject_Update", "MyObject"))
.Destroy(update => update.Action("MyObject_Delete", "MyObject"))
.Events(evt => evt.Push("myObjectGridDataSource_push").Error("myObjectGridDataSource_error"))
)
)
And the foolwingo javacript handlers are defined after:
<script type="text/javascript">
function myObjectGridDataSource_push(e) {
alert(e.type);
}
function myObjectGridDataSource_error(e) {
alert(e.status);
}
</script>
The javascript generated by the helper seems to be ok, but the event handlers are never fired when I add/edit/remove some item of the grid. But the requests to the controller are working fine.
Could be this related to the edit mode of the grid (using popup)?
I can't find what I am doing wrong...
Push is invoked during dataSource transport initialization which sets up push notifications. The data source will call this function only once and provide callbacks which will handle push notifications (data pushed from the server).
Push event Detailed information
If you can tell what exactly you are trying to achieve then I can be of a bit more help. Also if you want to catch the event before the record id being udpated or inserted or deleted then push won't do it. You will need to implement the sync event of the grid.

I understand how to use template with script but not with server controls

Now what I am trying to do is a hybrid or server controls and javascript. I think kendo server controls are elegant.
As you can see I am desparately trying to find how to access editable property in the grid but have no luck.I thought it would be
var grid = $("#Grid").data("kendoGrid");
grid.editable.template = function () { kendo.template($("#MyTemplate").html()) };
The idea is that when a user click on the edit button they get to see #MyTemplate instead of kendo default html version of it. Perhaps, I need to go in a different direction please guide me.
Here is my full code just for reference.
#model IEnumerable<Msh.Intranet.Models.ApiAdFileDisplayGridModel>
<script type="text/x-kendo-template" id="myTemplate">
<input data-bind="value: Id" name="Id"/>
</script>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Visible(false);
columns.Bound(p => p.FileName).Visible(false);
columns.Bound(p => p.FormNumber);
columns.Bound(p => p.FormTitle);
columns.Bound(p => p.Class);
columns.Bound(p => p.SecondaryCategory).Title("Category") ;
columns.Bound(p => p.RevisionDate).Format("{0:MM/dd/yyyy}");
columns.Command(c =>
{
c.Edit();
c.Destroy();
});
})
.Selectable()
.Groupable()
.Pageable()
.Filterable()
//.Sortable()
.ToolBar(tools =>
{
tools.Create();
})
.Editable(editor => editor.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
//this tells kendo I am the primary key
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.RevisionDate);
})
.Read(read => read.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Get))
.Create(create=>create.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Post))
.Update(update=>update.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Put))
.Destroy(destroy=>destroy.Url(#Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Delete))
)
)
<script type="text/javascript">
$(function () {
var grid = $("#Grid").data("kendoGrid");
//grid.bind("change", function () {
// alert("Change ");
//});
grid.bind("dataBound", function (data) {
alert("dataBound");
});
grid.bind("edit", function (e) {
if (e.model.isNew()) {
//create
alert("new");
} else {
//edit
alert("edit");
}
})
// WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Product/80
grid.dataSource.transport.options.update.url = function (data) {
var baseUrl = "#Url.Content("~/api/ApiAdFileDisplayGrid/")" +data.Id;
return baseUrl;
}
// WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Product/80
grid.dataSource.transport.options.destroy.url = function(data) {
var baseUrl = "#Url.Content("~/api/ApiAdFileDisplayGrid/")" + data.Id;
return baseUrl;
}
grid.editable.template = function () { kendo.template($("#MyTemplate").html()) };
});
</script>
To customize the editor you should use the MVC Editor templates engine. Follow the approach in this code library.
I found this thread in kendo site which give me an alternative to my method of doing templates:
http://www.kendoui.com/forums/mvc/grid/new-client-details-template.aspx#2427170
However, it would be interesting to see how to interact with the javascript objects the kendo html helpers create.

Resources