how to get key row selected in kendo ui grid - asp.net-mvc

i write this code for create Grid with kendo Ui in asp.net mvc
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Groupable(false).Visible(false);
columns.Bound(p => p.BrandName);
columns.Bound(p => p.BrandAbbr);
columns.Bound(p => p.SrcImage);
columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
})
.ToolBar(toolbar =>
{
toolbar.Custom().Action("Create","Users").Text("add");
}
)
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new {style = "height:500px;"})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(item => item.Id))
))
i want when user click on ViewDetails alert BrandId value Column, please help me.thanks all

You just need to add javascript function.
<script type="text/javascript">
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert(dataItem.Id); //considering Id = BrandId
}
</script>
Here is the demo of Kendo Grid Custom Command

also I used this successfully :
<script type="text/javascript">
function showDetails(e)
{
e.preventDefaults();
var grid = $("#Grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
//you can get the value of any column after that
alert("Brand Id is : " + selectedItem.Id);
alert("Brand Name is: " + selectedItem.BrandName);
}
</script>

Related

How to add Checked Column in Kendo Grid

#model IEnumerable<Pardon.Models.ViewModel.StudendsShowCreatAddViewModel>
<h2>#ViewBag.Title</h2>
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.ISSelected).Template(#<text></text>).ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked':'' # class='chkbx' />");
//columns.Bound(model => model.ISSelected)///Bound(model => model.ISSelected)
//.ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked' : '' # disabled='enabled' ></input>");
columns.Bound(model => model.CoursesSystem_ID).Visible (false);
columns.Bound(model => model.per_Name);
columns.Bound(model => model.per_Family);
columns.Bound(model => model.stu_ID).Visible (false);
})
.ToolBar(toolbar =>
{
toolbar.Custom().Action("CreateStudents", "CoursesSystem", new {_StudendsShowCreatAddViewModel = #Model }).Text("ثبت");
}
)
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Server()
)
)
<script>
$(function() {
$('#grid').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#grid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('ISSelected', checked);
});
});
</script>
I tried the above column properties Boolean ==>Isselected to checked Column and Editable and it didn't work.
For example, such as Photo
You're trying to add a client template showing a checkbox. I take a slightly different approach setting CSS classes so that when the row is not being edited I'll show a tick or cross depending upon the underlying value, then when the cell is clicked to start editing the checkbox is displayed. Optionally you can add additional CSS so the tick is coloured green and the cross red.
columns.Bound(a => a.ISSelected)
.ClientTemplate("<i class='fa fa-lg #: ISSelected ? 'fa-check' : 'fa-times' #'></i>")
.HtmlAttributes(new { #class = "text-center" })
.Title("Is Selected");
The above is using Font Awesome classes by the way.

Redirect when Edit a Kendo UI grid with ASP .NET MVC

I want to add a redirection to another page when I click on the "Edit" button with a Kendo UI grid with ASP .NET MVC.
Here is the base code:
#(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.Id);
columns.Bound(x => x.Name);
columns.Bound(x => x.Field1);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
})
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(x => x.Id))
.Read(read => read.Action("Read", "Home"))
.Update(update => update.Action("Edit", "Home"))
.Destroy(destroy => destroy.Action("Destroy", "Home"))
)
)
I tried to use the HTML attributes but it doesn't work:
commands.Edit().HtmlAttributes(new { #class = "edit" });
Then, I tried to add a custom edit (via commands.Custom(...) but unfortunately it is just for .Server() data binding.
I can do it with a client template but I really would like to use the default button proposed by Kendo UI:
columns.Template(#<text></text>)
.ClientTemplate(
"<a href='" + Url.Action("Edit", "Home") + "/#=Id#'>Edit</a>");
Do you have any other idea?
Thanks in advance.
You should be able to use custom commands, even with an Ajax datasource. I just tested this locally with the following code to make sure it will still work.
Code from view:
<script type="text/javascript">
function redirectTest(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert(dataItem.Name);
}
</script>
#(Html.Kendo().Grid<ViewModel>()
.Name("testing")
.Columns(columns =>
{
columns.Bound(x => x.Id);
columns.Bound(x => x.Name);
columns.Command(command => command.Custom("Edit").Click("redirectTest"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadAction", "ControllerName"))
)
)
Source: Custom command demo
If you want to redirect to another page with accepts a parameter then use this method.
#(Html.Kendo().Grid<AGridViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Id)
columns.Bound(p => p.Name);
columns.Command(command => command.Custom("View Details").Click("showDetails"));
})
<script type="text/javascript">
function showDetails(e) {
e.preventDefault();
var d = this.dataItem($(e.currentTarget).closest("tr"));
//alert("Selected item ID is:" + d.Id);
window.location.href = "#Url.Action("action", "controller")?id=" + d.Id;
}
</script>
You could add a custom ClientTemplate on the Name column, instead, and remove your columns.Command button altogether, where they simply click the name to edit it, and you pass in your object's ID to the new page like this:
columns.Bound(x => x.Name).ClientTemplate("<a href=/SomeViewFolder/Index?id=${id} target=_blank>${Name}</a>");

Hierarchy Kendo Grid is not working properly in Mvc 4

I have created a kendo hierarchy grid in mvc 4. On execution of the grid, the hierarchy grid is expand automatically for the first row, but when i expand the another row then the new hierarchy grid comes up empty while the data of the earlier hierarchy grid (which comes up by default) was changed.
1. How can i make it to show data in the hierarchy grid for the
particular row only not in the default opened grid?
2. Also how can i prevent the default expansion of the row.
View:
#(Html.Kendo().Grid<KendoUI.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.name).Title("Name");
columns.Bound(p => p.gender).Title("Gender");
columns.Bound(p => p.designation).Title("Designation").Width("300px");
columns.Bound(p => p.department).Title("Department").Width("300px");
})
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax()
.Model(model =>
{
model.Id(x => x.id);
})
.Read(read => read.Action("Employee_Read", "Home")) // Set the action method which will return the data in JSON format
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<KendoUI.Models.EmployeeViewModel>()
.Name("grid_#id#")
.Columns(columns =>
{
columns.Bound(p => p.id).Width(70);
columns.Bound(p => p.name).Width(110);
columns.Bound(p => p.gender).Width(110);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("Department_Read", "Home", new { employeeID = "#=id#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
Controller:
public ActionResult Employee_Read([DataSourceRequest]DataSourceRequest request)
{
//code for grid
return Json(result, JsonRequestBehavior.AllowGet);
}
public ActionResult Department_Read(Int32 employeeID, [DataSourceRequest]DataSourceRequest request)
{
// Code for hierarchy grid detail
return Json(result, JsonRequestBehavior.AllowGet);
}
You made a mistake in your detail Template
you should use .Name("grid_#=id#") instead of .Name("grid_#id#") the '=' matters.Causing all of your hierarchy-grids to share the same id so only the first grid is refreshed everytime.
your databound() function is causing the expansion of the first by default (and everytime the grid is bound to it datasource.)

Why Is `data(“kendogrid”)` Undefined?

I'm a starter in kendo.ui, I've written this code to create kendo.ui.grid
#(Html.Kendo().Grid<BrandViewModel>(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.BrandName);
columns.Bound(p => p.BrandAbbr);
columns.Bound(p => p.SrcImage);
columns.Command(command => command.Custom("Edit").Click("editItem"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("CustomCommand_Read", "Brand"))
.Model(model => model.Id(p => p.Id))
)
)
When the user clicks the edit button in grid it will show Edit view in kendo.ui.window and the user can edit data.
#(Html.Kendo().Window().Name("Details")
.Title("Customer Details")
.Visible(false)
.Modal(true)
.Height(400)
.Draggable(true)
.Width(300)
.Events(events => events.Close("onClose"))
)
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<!-- this will be the content of the popup -->
BrandName: <input type='text' value='#= BrandName #' />
</div>
</script>
<script type="text/javascript">
var detailsTemplate = kendo.template($("#template").html());
var windowObject;
$(document).ready(function () {
windowObject = $("#Details").data("kendoWindow");
});
function editItem(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
windowObject.refresh({
url: "/Brand/Edit/" + dataItem.Id
});
windowObject.center().open();
}
function onClose(e) {
var grid = $("#Grid").data("kendoGrid").dataSource.read();
}
</script>
but in onClose method $("#Grid").data("kendoGrid") is Undefined, please help me, thanks all
try Window load event
$(window).load(function () {
var grid = $("#grid").data("kendoGrid");
this work for me.
var grid = $("#Grid").data("kendoGrid"); //call grid by Name of Grid you used in razor

the client detail template in kendo UI is not working

i have a kendo grid in an asp .net MVC application. Im following the demos on the kendoui website to build a detail template on my grid. I couldnt make it work. Here's my code.
#(Html.Kendo().Grid<KendoUIMvcApplication2.Models.GetCallDetailResult>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.contactCommunicationCallID).Title("CCCID").Width("20");
columns.Bound(p => p.LocalStartDateTime).Title("Date Time").Format("{0:M/d/yyyy}");
columns.Bound(p => p.LPEmployeeCode).Title("Employee Code").Width("50");
columns.Bound(p => p.AdSource).Title("Ad Source");
columns.Bound(p => p.Status);
columns.Bound(p => p.Duration).Title("Duration");
columns.Bound(p => p.TrackingPhoneNumber).Title("Tracking Number");
columns.Bound(p => p.CallerNumber).Title("Caller Number");
columns.Bound(p => p.RegionName).Title("Region Name");
columns.Bound(p => p.DistrictName).Title("District Name");
columns.Bound(p => p.CampaignName).Title("Campaign Name");
columns.Bound(p => p.AdSourceCategoryName).Title("Ad Source Category");
})
.Pageable(page => page.Enabled(true).PageSizes(new Int32[] { 5, 10, 20, 40 }))
.Sortable()
.HtmlAttributes(new { style = "height: 700px" })
.Scrollable()
.ClientDetailTemplateId("template")
.DataSource(datasource => datasource
.Ajax()
.PageSize(5)
.Read(read => read.Action("CallDetail", "Home"))
)
.Events(ev => ev.DataBound("dataBound"))
)
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=contactCommunicationCallID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Details").Content(#<text>
#(Html.Kendo().Grid<KendoUIMvcApplication2.Models.GetCallDetailResult>()
.Name("grid_#=contactCommunicationCallID#")
.Columns(columns =>
{
columns.Bound(p => p.contactCommunicationCallID).Title("ID").Width(56);
columns.Bound(p => p.SiteName).Width(110);
columns.Bound(p => p.LPFirstName);
columns.Bound(p => p.LPLastName).Width(190);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("ReportList", "Home", new { CCCID = "#=contactCommunicationCallID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</text>
);
items.Add().Text("Contact Information").Content(
"<div class='employee-details'>" +
"<ul>" +
"<li><label>Country:</label>#= contactCommunicationCallID #</li>" +
"<li><label>City:</label>#= SiteName #</li>" +
"<li><label>Address:</label>#= LPFirstName #</li>" +
"<li><label>Home Phone:</label>#= LPLastName #</li>" +
"</ul>" +
"</div>"
);
})
.ToClientTemplate())
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
Controller Action Methods:
public ActionResult CallDetail([DataSourceRequest] DataSourceRequest request)
{
var readcalldetails = new DataDataContext().GetCallDetail(1, 762, 1).ToList();
var result = readcalldetails.ToDataSourceResult(request);
return Json(result);
}
public ActionResult ReportList(int CCCID, [DataSourceRequest] DataSourceRequest request)
{
var readreportlist = new DataDataContext().GetCallDetail(1, 762, 1).ToList().Where(cd => cd.contactCommunicationCallID == CCCID);
var result = readreportlist.ToDataSourceResult(request);
return Json(result);
//.Where(cd => cd.ContactCommunicationCallID == CCCID)
}
Actually, I found out by trial and error that the only thing you need to remove from your web.config is the targetFramework="xx" portion from the httpRuntime - you can keep the encoderType portion!

Resources