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');
Related
I am trying to bind a list of comments to a column, but it doesn't display anything. I am using an inline Client Template to quickly test it, but no luck. I know for sure there are Comments in the model, but it seems to think that the Comments is undefined or null. Below is my code:
#{
var grid = Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(l => l.Name);
columns.Bound(l => l.Description);
columns.Bound(l => l.Comments).ClientTemplate("# if(Comments) { for(var i=0; i<Comments.length; i++) {# #=Comments[i].Comment# #}}# ").Title("Comments");
})
.HtmlAttributes(new { style = "height: 850px;" })
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
);
grid.Render();
}
I suggest creating a JavaScript function and calling it in your client template. Also, it will be easier to debug.
function displayComments(data) {
return $.map(data.Comments, function (e) { return e.Comment; }).join(", ");
}
In your Grid:
columns.Bound(l => l.Comments).ClientTemplate("#= displayComments(data) #").Title("Comments");
I have an MVC razor form with a Kendo grid. The grid has an asynch image uploader.
#(Html.Kendo().Grid<CraftStore.Models.Catalog>()
.Name("CatalogGrid")
.Columns(columns =>
{
columns.Bound(p => p.CatalogName).Filterable(true).Width(240);
columns.Bound(p => p.CatalogDescription).Filterable(true).Width(340);
columns.Bound(p => p.ModelNumber).Filterable(true).Width(110);
columns.Bound(p => p.SerialNumber).Filterable(true).Width(110);
columns.Bound(p => p.InventoryCount).Filterable(true).Width(110);
columns.Bound(p => p.WebPrice).Title("Price").Format("{0:C}").EditorTemplateName("Currency").Width(110);
columns.Bound(p => p.ImagePath).ClientTemplate("<img height='80' src='" + Url.Content("~/Content/Images/catalog/Products/") + "#=data.ImagePath#' title='#=data.ImagePath#' alt='#=data.CatalogName#' />").EditorTemplateName("Image").Title("Picture").Width(300);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to"))
.ForNumber(num => num.Clear()
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.IsGreaterThan("Greater than")
.IsLessThan("Greater than"))
))
.Navigatable()
.Selectable(selectable => selectable.Type(GridSelectionType.Row))
.Scrollable(scrollable =>
{
scrollable.Virtual(true);
scrollable.Height(400);
})
.Events(events =>
{
events.Change("change");
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
}
)
.Events(events =>
{
events.Error("error_handler");
})
.Create("CatalogEditing_Create", "WebCatalog")
.Read("CatalogEditing_Read", "WebCatalog")
.Update("CatalogEditing_Update", "WebCatalog")
.Destroy("CatalogEditing_Destroy", "WebCatalog")
)
)
All work fine! - the image has a tooltip of the filename...
The upload and remove work great...
I have an edit template for image (image.cshtml in Views/Shared/EditorTemplates)
The template is:
#model string
<div style="width:100%">
<div class="section">
#Html.TextBoxFor(model => model, new {#class="k-textbox result-box" })
#(Html.Kendo().Upload()
.Name("files")
.Events(events=>events.Success("OnUploadSuccess"))
.Multiple(false)
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
)
)
</div>
</div>
The OnUploadSuccess js function (which is defined on the razor view) has the success function
<script type="text/javascript">
//file upload scripts
function getFileInfo(e) {
return $.map(e.files, function (file) {
var info = file.name;
// File size is not available in all browsers
if (file.size > 0) {
info += " (" + Math.ceil(file.size / 1024) + " KB)";
}
return info;
}).join(", ");
}
function OnUploadSuccess(e) {
$(".result-box").value = getFileInfo(e);
Model = getFileInfo(e);
}
all works fine - the variable 'Model' does get the correct filename.
Now...
How do I get that filename value returned by getFileInfo(e) to be the current value for the grid column???
I thought 'Model' would work, but it does not.
Model = getFileInfo(e);
//since this is in a template, I thought it would bind 'Model' to the column
Then, you can see above, in OnUploadSuccess, I also thought it could be done by using jQuery :
$(".result-box").value = getFileInfo(e);
The jQuery does find and set the value, but the row's member named ImagePath never gets the resulting value.
Neither work, and I'm not sure how to get the returned filename to be the column value.
Any help appreciated.
UPDATE:
Well, I've updated the OnUpdateSuccess js function:
var fn = getFileName(e);
$("#ImagePath").val(fn)
And this now updates the field - but this is not saving when you tab out of the field or immediately hit save. In either care, the old value is restored.
How do I get it to stay? I imagine this is where the MVVM binding will help?
After working with the amazing support from Telerik, I was right - it's a binding issue because the MVVM doesn't know about my change. To get it to know about my change I need to add a line after the script change above:
$("#ImagePath").trigger("change");
Now, it works perfectly!
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();
});
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.
I have a Telerik Grid on a MVC3 project with Razor layout engine with the popUp edit mode working fine. Here is the grid code:
#(Html.Telerik().Grid(Model)
.Name("grid-moedas")
.DataKeys(keys => keys.Add(m => m.ID))
.Columns(columns =>
{
columns.Bound(m => m.Nome);
columns.Bound(m => m.Simbolo);
columns.Bound(m => m.ExtensoNoSingular);
columns.Bound(m => m.ExtensoNoPlural);
columns.Command(commands =>
{
commands.Edit();
});
})
.DataBinding(dataBinding =>
{
dataBinding.Ajax().Select("AjaxGrid", "Moeda");
dataBinding.Ajax().Update("AjaxEdit", "Moeda");
})
.Sortable()
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Pageable(paging =>
paging.Style(GridPagerStyles.NextPreviousAndInput)
)
.Footer(true)
.ClientEvents(events => events
.OnRowSelect("onRowSelect")
)
.Selectable()
)
I wanna two things:
Hide the buttons generated for each row on the grid
Call the edit command on the OnRowSelect event, so the editing popUp form will be called in response to the user click on a row.
function onRowSelect(e) {
//how to call edit command for e.row???
return false;
}
You can try this:
<script>
function onRowSelect(e) {
var grid = $(this).data("tGrid");
grid.editRow($(e.row));
}
</script>
I can't easily try this (I don't have the Telerik controls), but is this of any use:
<script type="text/javascript">
function OnRowClick(sender, args) {
var masterTable = sender.get_masterTableView();
masterTable.fireCommand("Edit", args.get_itemIndexHierarchical())
}
</script>
Taken from here: http://www.telerik.com/community/forums/aspnet-ajax/grid/grid-edit-on-row-select.aspx#1405657