get Selected RowID kendo grid - kendo-ui

I want to get the edit row ID on Edit button click on kendo grid.
When i click on the edit button i want to get "Document Type ID" which is shown in the grid and it has to be hidden in the original grid(primary key of datasource). I have shown it to clarify my issue.
below event fires on edit click but I have not been able to get the ID of that particular row.
$("#grid").data("kendoGrid").bind("edit", function (e) {
var grid = $("#grid").data("kendoGrid");
});
#(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Common.DocumentTypeModel>)Model.lst_DocumentType)
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.DocumentTypeID).Visible(false);
columns.Bound(o => o.DocumentType).Title("Document Type");
columns.Bound(o => o.DocumentTypeDescription).Title("Description");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(182);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))//.TemplateName("DocumentType_template"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.DocumentTypeID))
.Create(update => update.Action("EditingInline_Create", "DocumentType").Data("additionalInfo"))
.Read(read => read.Action("EditingInline_Read", "DocumentType").Data("additionalInfo"))
.Update(update => update.Action("EditingInline_Update", "DocumentType").Data("additionalInfo"))
.Destroy(update => update.Action("EditingInline_Destroy", "DocumentType").Data("additionalInfo"))
)
)

Inside the edit event of the Grid you can get reference to the row model via the arguments object.
function onEdit(e){
alert(e.model.DocumentTypeID);
}

Related

Kendo UI Custom Pop-up Editor in Hierarchical Grid

I have a Hierarchical grid and I'm trying to add a custom editor for pop-up editing. When I add the template to the child grid and click on the "edit" button, i get a invalid template error. If i add that same template to the parent, it works fine.
Here is the error in console:
Uncaught Error: Invalid template:'
Here is the code
#(Html.Kendo().Grid<ParentViewModel>()
.Name("GridAdjax")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Read", "controller"))
.Model(model =>
{
model.Id(c => c.Id);
})
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Events(events => events.RequestEnd("onRequestEnd"))
)
.Columns(columns =>
{
columns.Bound(p => p.CompanyName).Title("Company Name");
columns.Bound(p => p.CompanyDomain).Title("Company Domain");
columns.Bound(p => p.CompanySecurityRole).Title("Security Role");
columns.Bound(p => p.CompanySecurityGroup).Title("Security Group");
})
.ClientDetailTemplateId("template")
.Pageable()
.Sortable()
.Resizable(resize => resize.Columns(true))
.Events(e => e.DataBound("OnDataBound"))
.Deferred()
)
<CHILD>
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<ChildlViewModel>()
.Name("grid_#=CompanyId#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Update(update => update.Action("CompanyList_Update", "Administration"))
.Read(read => read.Action("Read", "Child", new { companyId = "#=CompanyId#" }))
.Model(model =>
{
model.Id(c => c.Id);
model.Field(c => c.CompanySoldTo).Editable(true);
model.Field(c => c.CompanyDistributionChannel).Editable(true);
model.Field(c => c.CompanyDivision).Editable(true);
model.Field(c => c.CompanyPlant).Editable(true);
model.Field(c => c.CompanySalesOrg).Editable(true);
})
)
.Columns(columns =>
{
columns.Bound(p => p.CompanySoldTo).Title("Sold To");
columns.Bound(p => p.CompanyDistributionChannel).Title("Dist. Chan.");
columns.Bound(p => p.CompanyPlant).Title("Plant");
columns.Bound(p => p.CompanySalesOrg).Title("Sales Org");
columns.Command(command => { command.Edit(); }).Title(("Edit SAP Info."));
})
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Detail"))
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
If anyone experiences this issue in the future, the problem was actually in my custom pop-up editor template. I had a data validation message on one of the input boxes set as "Please enter your account #". The "#" was being interpreted as a template by Kendo. I escaped the # and then was able to get it to successfully load.

MVVM pattern in Kendo Grid

I'm using the Kendo Grid control to display some data and it's working OK. This is the code:
#(Html.Kendo().Grid<MyModel>()
.Name("MyGrid")
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New Line").HtmlAttributes(new { #Class = "btn btn-primary" });
})
.Columns(columns =>
{
columns.Bound(p => p.Description).HtmlAttributes(new {style = "font-size: 9pt;"});
columns.Bound(p => p.Value);
columns.Command(cmd =>
{
cmd.Edit();
cmd.Destroy();
}).Width(200);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable(s => s.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
.DataSource(data => data
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.ServerOperation(false)
.Read(read => read.Action("ReadAction", "MyController"))
.Create(create => create.Action("CreateAction", "MyController"))
.Update(update => update.Action("UpdateAction", "MyController"))
.Destroy(delete => delete.Action("DeleteAction", "MyController"))
))
The code above is working without any problem. Now, what I'm trying to implement is to display the same data using the MVVM pattern. I mean, I would like to have the same operations (create, update, delete) in my viewmodel without calling the server actions of my controller as the code above does.
I have google it for a while but without any luck.
Any help would be very appreciate

Kendo Mvc Grid clienttemplate

I am using a Kendo MVC Grid and i want to have a dropdownlist in one of the cells.
here is my code:
#(Html.Kendo().Grid<RMS.Admin.ViewModel>()
.Name("ResourceGrid")
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).ClientTemplate("#=ResourceType#");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable()
.Sortable()
.HtmlAttributes(new { style = "height:800px" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(s => s.ResourceId);
model.Field(p => p.ResourceType).DefaultValue(ViewData["defResourceType"] as RMS.Admin.ViewModel.ResourceTypeId);
})
.Create(update => update.Action("CreateResource", "Home", new { resourceTypeId = "#=ResourceType.Id#" }))
.Read(read => read.Action("ReadResource", "Home"))
.Update(update => update.Action("UpdateResource", "Home"))
.Destroy(destroy => destroy.Action("RemoveResource", "Home"))
)
.Events(events => events.DataBound("dataBound"))
)
The problem is that i don't know what clienttemplate is so i don't know what to do with it.
If bound resourcetype with a clienttemplate i can't add new records to the grid, i get the error: Uncaught ReferenceError: ResourceType is not defined
If i remove clienttemplate i can add a record but when i try to save it it says it can't find the id of ResourceType.
basically if you want to use a dropdownlist within a kendo ui grid you have to define an editor template which includes a kendo dropdownlist widget. this means you have to declare the respective cell with the attribute .EditorTemplateName() like this:
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).EditorTemplateName("TemplateName");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
the editortemplate has to be stored within folder: Shared/EditorTemplates/TemplateName.cshtml
TemplateName.cshtml should look like this:
#model ModelName
#(Html.Kendo().DropDownList()
.OptionLabel("please select a value")
.Name("ResourceType") <-- the name needs to be equal to the grid cell name
.DataSource(source=>
{
source.Read( read =>
{
read.Action("ActionName", "ControllerName");
})
.ServerFiltering(true);
})
.DataTextField("Name") <-- displays the text of the object
.DataValueField("ID") <-- stores the id of the object
)
hope this will lead you into the right direction.
cheers,

Hide and show kendo ui grid column

Is there any way to display and hide coloumn onEdit and Add mode. As display in the sample code. I want to display Unit Price on add and edit mode and hide in view mode. Please advise. But the following will shrink the grid. i want to make it still 100%. What event should i use if the user click cancel.
#model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
.Events(ev => ev.DataBound("onDataBound").Edit("onEdit"))
)
<script type="text/javascript">
function onEdit(e) {
var grid = $('#Product').data('kendoGrid');
if (!e.model.isNew()) {
grid.showColumn(2);
}
else
{
grid.showColumn(2);
}
function onDataBound(e) {
var grid = $('#Product').data('kendoGrid');
grid.hideColumn(2);
</script>
Actually in popup mode hidden columns of the original grid are not hidden. If you remove your onEdit function it should be enough. You might even remove the dataBound and set it to hidden in the column initialization:
#model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Hidden( true );
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
)
Check in http://jsfiddle.net/OnaBai/B2Ses/ how the column Freight is hidden in column mode but visible on popup (both for editing and creation).
For other grid properties (toolbar etc.) with .HtmlAttributes function you can use:
.ToolBar(toolbar => toolbar.Custom().Name("New item").HtmlAttributes(style = ViewData["isThisPropertyAllowed"] }))
And in Controller use for example:
ViewData["isThisPropertyAllowed"] = (User.IsInRole("ADMIN")?"":"display:none");

How can i achieve this in Kendo MVC Grid?

I was just using Kendo UI Hierarchy Grid in my MVC3 project. The hierarchy is about 2 levels. I need to customize the 2nd level hierarchy with my own custom actionlink for adding the details.
The flow of execution is something simple. The Kendo Grid will populate with default records. If the user is selecting to view inner detail of any of the records it should show another hierarchy grid with actionlink for adding new record.
Here is my child grid code:
<script id="pordersTemplate" type="text/kendo-tmpl">
#Html.ActionLink("Create PoDetails", "Create", "PoDetails", new { id = "#=Id#" }, null)
// Here i need to get the current selected ID to use it on the create page.
#(Html.Kendo().Grid<Models>()
.Name("PoDetails_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Copies).Width(140).ClientTemplate(Html.ActionLink("\\#=Copies\\#", "Edit", "PoDetails", new { Id = "id" }, null).ToHtmlString().Replace("id", "\\#=Id\\#"));
columns.Bound(o => o.Title).Width(150);
columns.Bound(o => o.UnitPrice).Width(200);
columns.Bound(o => o.Account).Width(200);
columns.Bound(o => o.Status).Width(200);
columns.Command(command => command.Destroy()).Width(110).Title("Action");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("HierarchyBinding_PoDetails", "Porders", new { PoId = "#=Id#" }))
.Batch(false)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Destroy("Delete", "PoDetails")
)
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.ToClientTemplate()
)
Plase tell me some suggestions to add this actionlink with the grid.
Thanks,
Why don't you use a toolbar :
#(Html.Kendo().Grid<Models>()
.Name("PoDetails_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Copies).Width(140).ClientTemplate(Html.ActionLink("\\#=Copies\\#", "Edit", "PoDetails", new { Id = "id" }, null).ToHtmlString().Replace("id", "\\#=Id\\#"));
columns.Bound(o => o.Title).Width(150);
columns.Bound(o => o.UnitPrice).Width(200);
columns.Bound(o => o.Account).Width(200);
columns.Bound(o => o.Status).Width(200);
columns.Command(command => command.Destroy()).Width(110).Title("Action");
})
.ToolBar(t => t.Create().Text("Create PoDetails")) // <-- add here the toolbar
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("HierarchyBinding_PoDetails", "Porders", new { PoId = "#=Id#" }))
// and here map the create event with your custom action
.Create(c => c.Action("Create", "PoDetails", new { id = "#=Id#" }))
.Batch(false)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Destroy("Delete", "PoDetails")
)
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.ToClientTemplate()
)

Resources