I have a Kendo Grid in MVC4 that is working fine:
Html.Kendo().Grid<SearchUserResultViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.UserLoginId);
columns.Bound(p => p.AppUserName);
columns.Bound(p => p.AppUserStatus);
columns.Bound(p => p.AppUserGUID).ClientTemplate(
"Modify");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("SearchUser_Read", "Search").Data("parentModel"))
)
.Pageable()
However, I wish to user to cause a Post, not a Get when the field AppUserGUID is clicked. Is that possible?
change column client template as following :
<form action="#Url.Action("EditUser", "Edit")">
Html.Kendo().Grid<SearchUserResultViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.UserLoginId);
columns.Bound(p => p.AppUserName);
columns.Bound(p => p.AppUserStatus);
columns.Bound(p => p.AppUserGUID).ClientTemplate(
"<input type="submit" value="Modify"/>");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("SearchUser_Read", "Search").Data("parentModel"))
)
.Pageable()
</form>
you must wrap the grid with a from tag as well.
Related
The grid in my detail template is not binding the data properly. If I expand one by one from top to bottom, it only binds the data for the first row and the grid inside all other rows are empty. If I expand them from bottom to top, it binds the data properly for all the rows. Any idea why it's doing this?
#(Html.Kendo().Grid<EmailInvitationViewModel>()
.Name("EmailInviteeGrid")
.Columns(columns =>
{
columns.Bound(e => e.EmailInviteID).Hidden(true);
columns.Bound(e => e.InvitationDate).Title("Invited On").Hidden(false);
columns.Bound(e => e.ClassDetails)
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
.Title("Class Details");
})
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllInvitedEvents", "Controller", new { Model.EventID }))
)
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<EmailInvitationViewModel>()
.Name("grid_#=EmailInviteID#")
.Columns(columns =>
{
columns.Bound(o => o.GridInviteeEmail);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllInviteeEmailsByEvent", "DataSource", new { EventID = "#=EventID#", EmailInviteID = "#=EmailInviteID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
I'm trying to create a column to show row number using Kendo UI MVC with datasource from server. I've tried several ways, but the number column doesn't show anything, it's just plain empty
here is some of ways that i've tried
First Attempt, using databound
#{var counter = 1;}
<div id="roleContainer">
#(Html.Kendo().Grid(Model)
.Name("RoleGrid")
.Columns(columns =>
{
columns.Template(t => { }).ClientTemplate(#<text><span class="row-number"></span></text>).Title("No");
columns.Bound(p => p.RoleName).Title("User Role");
columns.Bound(p => p.RoleDescription).Title("Description");
columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group");
columns.Command(command =>
{
command.Custom("View Details").Click("showDetails");
command.Custom("Edit").Click("edit");
command.Destroy();
}).Title("Actions");
})
.Events(events => events.DataBound(
#<text>
function(e){
var rows = this.items();
$(rows).each(function(){
var index = $(this).index() + 1;
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(index);
})
}
</text>
))
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.UserId))
.PageSize(20)
.Destroy(update => update.Action("Delete", "Role"))
.ServerOperation(false)
)
)
Second attempt using template
#{var counter = 1;}
<div id="roleContainer">
#(Html.Kendo().Grid(Model)
.Name("RoleGrid")
.Columns(columns =>
{
columns.Template(#<text>#counter #{#counter++;}).Title("No");
columns.Bound(p => p.RoleName).Title("User Role");
columns.Bound(p => p.RoleDescription).Title("Description");
columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group");
columns.Command(command =>
{
command.Custom("View Details").Click("showDetails");
command.Custom("Edit").Click("edit");
command.Destroy();
}).Title("Actions");
})
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.UserId))
.PageSize(20)
.Destroy(update => update.Action("Delete", "Role"))
.ServerOperation(false)
)
)
</div>
Third Attempt, using client template
#{var counter = 1;}
<div id="roleContainer">
#(Html.Kendo().Grid(Model)
.Name("RoleGrid")
.Columns(columns =>
{
columns.Template(t => { }).ClientTemplate(" #= counter++ #").Title("No");
columns.Bound(p => p.RoleName).Title("User Role");
columns.Bound(p => p.RoleDescription).Title("Description");
columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group");
columns.Command(command =>
{
command.Custom("View Details").Click("showDetails");
command.Custom("Edit").Click("edit");
command.Destroy();
}).Title("Actions");
})
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.UserId))
.PageSize(20)
.Destroy(update => update.Action("Delete", "Role"))
.ServerOperation(false)
)
)
</div>
And not even one of them show something in html, it's empty
Any suggestions?
In sortable and pageable grid, row numbers kinda don't make sense. But if you insist, Kendo does not really have a way to do row-numbers. I've tried.
If you only need client-side display, you can do this with css and javascript.
May I ask you why do you need this?
I'm trying to get a custom popup editor working in our Grid using MVC wrappers.
The MVC wrapper is
Html.Kendo().Grid(#Model.ReferralCommentsViewModel.ReferralComments)
.Name("gridComment")
.Columns(columns =>
{
columns.Bound(p => p.CommentValue).Title("Comment").Encoded(false).Width(450);
columns.Bound(p => p.CreatedBy).Title("Created By").ClientTemplate("#= kendo.toString(CreatedBy) #").Width(100);
columns.Bound(p => p.CreatedDate).Title("Create Date").ClientTemplate("#= kendo.toString(CreatedDate, \"MM/dd/yyyy\") #").Width(70);
columns.Command(command => { command.Edit().Text(" "); }).Title("Edit").Width(20);
columns.Command(command => { command.Destroy().Text(" "); }).Title("Delete").Width(20);
})
.ToolBar(toolbar => toolbar.Create().Text("Add new Comment"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("popupEditorTemplate").Window(w=>w.Title("Add/Edit Comment")))
.Resizable(resize => resize.Columns(true))
.Sortable()
.Selectable()
.HtmlAttributes(new { style = "height:165px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.AutoSync(false)
.Batch(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.CommentID))
.Create(update => update.Action("EditingPopup_Create", "Referral"))
.Read(read => read.Action("EditingPopup_Read", "Referral"))
.Update(update => update.Action("EditingPopup_Update", "Referral"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Referral"))
)
The editor template is -
<script id="popupEditorTemplate" type="text/x-kendo-template">
<label for="Created Date">Created Date:</label><Input data-bind= "value: CreatedDate" readonly="true" />
<label for="Created By">CreatedBy:</label><Input data-bind= "value:CreatedBy" readonly="true" />
<label for="Created By">Comments:</label>
<textarea data-role="editor"
data-bind="value: CommentValue"
style="width: 280px"></textarea>
</script>
No matter what options I use, I cannot get the custom edit template to display in the popup. Only the default popup is displayed. Is there something obvious missing?
Project - VS2012, MVC4
TemplateName should specify the name of the view which is a cshtml in the EditorsTemplate folders which MVC searches automatically.
It should not be the name of a html element which holds a Kendo template (like you did). More info about MVC EditorTemplates can be found here.
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!
I'm currently using the MVC Kendo Grid with Hierarchy view to display child accounts.
Here is my main grid (child below) For this grid I have set up the change event (also below). My question is, how do I set up the same change functionality with the child grid? Each will have a different ID so I'm not currently able to properly select it.
EDIT: I ONLY NEED THE ID OF THE ACCOUNT FROM THE SELECTED CHILD ROW
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.ClientDetailTemplateId("ChildAccounts")
.DataSource(dataSource => dataSource
.Ajax() // Specify that the data source is of ajax type
.Model(model => model.Id(a => a.ID))
.Events(events => events.Error("error"))
.Read(read => read.Action("ReadAccounts", "Accounts")) // Specify the action method and controller name
.Destroy(destroy => destroy.Action("DeleteAccount", "Accounts"))
.PageSize(50)
)
.Pageable()
.Filterable()
.Selectable()
.Scrollable()
.Sortable()
.Events(events => events.Change("gridChange"))
.Events(events => events.DataBound("dataBound"))
.ToolBar(toolbar => toolbar.Template(
#<text>
<div class="toolbar">
<select id="FilterCategory"></select>
<input type="search" id="Search" style="width: 230px" />
</div>
</text>
))
)
Child Grid:
<script id="ChildAccounts" type="text/kendo-tmpl">
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("SubAccounts_#=ID#")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
)
.Pageable()
.Sortable()
.Selectable()
.ToClientTemplate()
)
</script>
function dataBound() {
// this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Here is the GridChange function (shortened for brevity)
function gridChange(e) {
//Enable all button -Prakash Date-07/27/2012
accountsButtons.button({ disabled: false });
$("#nodeList").html('');
$("#updateMessage").html('');
$("#noteMessage").html('');
$("#Note_Description").val('');
kdata = this;
You have absolutely no problem to declare the same event into the child Grid.
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("SubAccounts_#=ID#")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.Events(ev=>ev.Change("detailGridChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
)
.Pageable()
.Sortable()
.Selectable()
.ToClientTemplate()
)
<script>
function detailGridChange(e){
var parentDataItem = $('#Grid').data().kendoGrid.dataItem($(this.element).closest('.k-detail-row').prev('.k-master-row'));
alert(parentDataItem.ID);
}
</script>