Telerik mvc grid Ipad issue - asp.net-mvc

I am working in an MVC 3.0 application. In my project I used Telerk mvc grid for data listing. I made grid edit mode as "InCell". In my grid, there are two columns "Facts" & "Actions". When I press "Facts" column it changed into edit mode with textbox. Also in Ipad, keypad get displayed automatically. There after when I press "Actions" column, it changed into edit mode but Ipad keypad hides. If I am pressing same "Actions" column or any other column again, Ipad keypad get displayed. But in the online demo of telerik mvc grid batch editing (http://demos.telerik.com/aspnet-mvc/razor/grid/editingbatch) it seems working. I am using telerik version 2012.2.607 in my project. My code for grid listing looks like.
#(Html.Telerik().Grid<AnswerQuestionVM>()
.Name("GridQuestions")
.DataKeys(keys =>
{
keys.Add(p => p.QuestionID);
})
.Columns(columns =>
{
columns.Bound(p => p.QuestionNumber).Format("{0:0.00}").HtmlAttributes(new { style = "text-align:center;" }).Title("#").Width("5%").ReadOnly();
columns.Bound(p => p.QuestionName).Title("Question Name").Width("43%").ReadOnly();
columns.Bound(p => p.Facts).Width("8%");
columns.Template(#<text></text>).ClientTemplate("<img src='" + #Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=FactOptions#>' />");
columns.Bound(p => p.Actions).Width("8%");
columns.Template(#<text></text>).Width("2%").ClientTemplate("<img src='" + #Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=ActionOptions#>' />");
columns.Template(#<text></text>).Title("Skip").Width("3%").ClientTemplate(
"<# if(Skip==false) {#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' />" +
"<#} else{#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' checked='checked' />" +
"<# } #>"
);
columns.Bound(p => p.Note).Title("Note").Width("26%");
})
.Editable(editing => editing.Mode(Telerik.Web.Mvc.UI.GridEditMode.InCell))
.KeyboardNavigation( navigation => navigation.EditOnTab(true))
.ClientEvents(e => e.OnSave("OnSave"))
.DataBinding(dataBinding =>
{
dataBinding.Ajax().Select("GetQuestion", "AnswerQuestion", new { Area = "question", ajax = true }).Enabled(true);
})
.Scrollable(scrolling => scrolling.Enabled(false))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(false))
.Footer(true)
)
Please tell what I am missing in my code. Any help will be appreciated.

Related

Kendo UI grid ClientTemplate ternary condition

I am trying to add a condition in ClientTemplate method in Kendo UI. The If else statement works fine, but when trying to use ternary operator HTMl does not render.
Working code:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.direction).ClientTemplate("# if(Clients==''){ # - #}else{# #: Clients # #}#")
})
);
Not working:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.direction).ClientTemplate("# Clients=='' ? '-' : #: Clients # #")
})
);
Using htmlEncode
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.Clients).ClientTemplate("# (Clients=='' ? '-' : kendo.htmlEncode(Clients) ) #")
})
);
Solution using ternary operator:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.Clients).ClientTemplate("#: Clients=='' ? '-' : Clients #")
})
);

change group header dynamically in kendo ui mvc

I am using kendo ui with asp.net mvc. I want to change the group header coloumn dynamically. Please suggest solution.My code is shown below.
<div id="dvPayrollReportGrid" class="kendo-responsive-grid-content">
#(Html.Kendo().Grid<CyberPayBO.Models.PayrollReportModel>()
.Name("gridpayrollreport")
.Columns(columns =>
{
columns.Bound(payroll => payroll.CompanyCode).Title("").Hidden(true).Filterable(false).ClientTemplate("<input type='hidden' id='hdnCompanyCode' value='#=CompanyCode#'>");
columns.Bound(payroll => payroll.CompanyCode).Title("Action").Filterable(false).ClientTemplate("View || <span class='CompanyNameLink DeleteLink' onclick='DeletePayrollReport(this.id)' id='#=ID#'>Del</span> | <img src='../Images/pdf.gif' id='PayrollImage'/>").Sortable(false);
columns.Bound(payroll => payroll.CheckDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.FromDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.ToDate).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.StoredFile).ClientTemplate("#if (StoredFile.toLowerCase().indexOf('.pdf')>-1) {#"
+ " "
+ "#} else { #" + ""
+ "# } #" + "#=StoredFile#");
columns.Bound(payroll => payroll.CheckDate).Title("Payroll Reports").Hidden(Convert.ToBoolean(PayrollReportColumn)).ClientTemplate("<span style='color:red'>Payroll Report</span>");
columns.Bound(payroll => payroll.CreatedDate).Title("Created At").Format("{0:dd/MM/yyyy HH:mm tt}");
})
.Pageable(pageable => pageable
.Messages(messages => messages.Display("Payroll Reports {0} - {1} of {2}"))
)
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(PageSize)
.Read(read => read.Action("PayrollReport_Read", "PayrollReport"))
.Group(groups =>
{
groups.Add(payroll => payroll.CompanyName);
})
)
)
</div>
i am grouping by the company name, and by default it is giving me company name as header in result. I want the header to be dynamic and display the company code instead.I am getting ouput as CompanyName: AAA TEST 1 in header, but i want ouput as 004:AAA Test 1., where 004 is company code.
I found the solution to it by using ClientGroupHeader Template
columns.Bound(payroll => payroll.Company).ClientGroupHeaderTemplate("#=value#").Hidden(true);
Here company is combination of CompanyCode and CompanyName and which i bind from repository. Finally grouping on Company gives me the desired result.
To Achieve this you need to return a new column in your backend With the class of the data you want to group by since Kendo doesn't let you group by anonymous type yet. the End the end of your Action will look something like this
...
var query = db.PayrollReportModel.Select(payroll=> new PayrollReportModel()
{
payroll.CompanyCode
...
grouper = new GrouperClass()
{
CompanyCode = payroll.CompanyCode,
CompanyName = payroll.CompanyName
}
});
DataSourceResult result = await query.ToDataSourceResultAsync(request);
}
For your View
<div id="dvPayrollReportGrid" class="kendo-responsive-grid-content">
#(Html.Kendo().Grid<CyberPayBO.Models.PayrollReportModel>()
.Name("gridpayrollreport")
.Columns(columns =>
{
columns.Bound(payroll => payroll.grouper).Hidden(true).ClientGroupHeaderTemplate("#=value.CompanyCode#-#=value.CompanyName#");
columns.Bound(payroll => payroll.CompanyCode).Title("Action").Filterable(false).ClientTemplate("View || <span class='CompanyNameLink DeleteLink' onclick='DeletePayrollReport(this.id)' id='#=ID#'>Del</span> | <img src='../Images/pdf.gif' id='PayrollImage'/>").Sortable(false);
columns.Bound(payroll => payroll.CheckDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.FromDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.ToDate).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.StoredFile).ClientTemplate("#if (StoredFile.toLowerCase().indexOf('.pdf')>-1) {#"
+ " " + "#} else { #" + "" + "# } #" + "#=StoredFile#");
columns.Bound(payroll => payroll.CheckDate).Title("Payroll Reports").Hidden(Convert.ToBoolean(PayrollReportColumn)).ClientTemplate("<span style='color:red'>Payroll Report</span>");
columns.Bound(payroll => payroll.CreatedDate).Title("Created At").Format("{0:dd/MM/yyyy HH:mm tt}");
})
.Pageable(pageable => pageable
.Messages(messages => messages.Display("Payroll Reports {0} - {1} of{2}"))
)
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(PageSize)
.Read(read => read.Action("PayrollReport_Read", "PayrollReport"))
.Group(groups =>
{
groups.Add(payroll => payroll.grouper);
})
)
)
</div>
Hope this helps

kendoui ClientTemplate in Grid not working in asp.net mvc 4

I have been looking all over for the answer and think I am missing something simple. I have a kendo grid where I want one of the columns to be a link to another page with the id as a route parameter. However, the value in the column cells are the bound values and are unchanged by my template. Any insights to this will be appreciated.
#(Html.Kendo().Grid((IEnumerable<ProviderAccess>)Model.Providers)
.Name("grants-grid")
.Columns(columns =>
{
columns.Bound(a => a.ProviderName);
columns.Bound(a => a.HasAccess);
columns.Bound(a => a.ProviderId).ClientTemplate("#= toggleLink(data) #");
})
.Scrollable()
)
<script>
function toggleLink(access) {
var action = '#Url.Action("Toggle", "Access")';
var html = kendo.format("<a href='{0}/{1}'>Toggle...</a>",
action,
access.ProviderId
);
return html;
}
</script>
ClientTemplate isn't using when Kendo Grid is binded to a dataSource on server side like your code.
You should use Template method of columns like below
columns.Template(p => "<a href='..../Toggle/Access/" + p.ProviderId + "'>Click</a>");
dataSource.Server() will let you use a custom.template
dataSource.Ajax() will let you use ClientTemplate
Figuring that out was really frustrating... They are not interchangeable one of the other will work depending on ajax or Server
<%: Html.Kendo().Grid((List<RadCarePlus.V2.Web.Models.GetMeSomeData>) ViewData["Mydata"])
.Name("Grid")
.Columns(columns =>
{
columns.Template(c => "<a href='ImplementationDetails?EpisodeID=" + c.EpisodeID + "'>" + c.EpisodeID + "</a>").Title("Testing").Width(140);
//columns.Bound(c => c.EpisodeID).Width(140);
columns.Bound(c => c.AuthStatus).Width(190);
columns.Bound(c => c.CPTCode).Width(100);
columns.Bound(c => c.inscarrier).Width(110);
columns.Bound(c => c.CreatedOn).Width(160);
//columns.Template(c => "<a href='ImplementationDetails?EpisodeID=" + c.EpisodeID + "'>" + c.EpisodeID + "</a>");
//columns.Template(c => c.EpisodeID).Title("Testing").ClientTemplate("<a href='ImplementationDetails?EpisodeID=#= EpisodeID#'>#= EpisodeID #</a>");
})
.Pageable(pageable=> pageable.ButtonCount(5))
.Sortable(sortable => sortable.AllowUnsort(false))
.DataSource(dataSource => dataSource.Server().PageSize(5)
)
%>

Kendo UI grid ClientTemplate

I'm binding client templates to columns in my kendo ui grid as you see below:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.direction).ClientTemplate(
"# if (direction==1) {#" +
"▲" +
"#}#" +
"# if (direction==0) {#" +
"▼" +
"#}#"
).Title("").Width(30);
columns.Bound(p => p.symbol).ClientTemplate("<a href='javascript:selectSymbol('" + "#: symbol #" +"')'>#: symbol #</a>"); ;
columns.Bound(p => p.bid);
columns.Bound(p => p.ask);
})
.Scrollable()
)
The following template does not work:
columns.Bound(p => p.symbol).ClientTemplate("<a href='javascript:selectSymbol('" + "#: symbol #" +"')'>#: symbol #</a>"); ;
I'm getting Javascript syntax error. How can I fix this?
I changed my template to:
columns.Bound(p => p.symbol).ClientTemplate("<a href=javascript:selectSymbol(\'" + "#: symbol #" +"\')>#: symbol #</a>");
It works fine now.

Telerik mvc grid tab order issue

I am working in an MVC 3.0 application. In my project I used Telerk mvc grid for data listing. I made grid edit model as "InCell" and provided key board navigation in my question answer area. Each question will have 2 answer options such as "Facts" and "Actions" and will be numeric value. I have used "integer" editor template for this purpose. My requirement is that when the user presses tab key from "Facts" integer textbook, focus will move it to "Actions" integer textbox and if the user presses tab from "Actions" it will move to next row "Facts" text box. But currently key board navigation goes through all cells in the grid. There are few columns between "Facts" and "Actions". My code for grid listing looks like.
#(Html.Telerik().Grid<AnswerQuestionVM>()
.Name("GridQuestions")
.DataKeys(keys =>
{
keys.Add(p => p.QuestionID);
})
.Columns(columns =>
{
columns.Bound(p => p.QuestionNumber).Format("{0:0.00}").HtmlAttributes(new { style = "text-align:center;" }).Title("#").Width("5%").ReadOnly();
columns.Bound(p => p.QuestionName).Title("Question Name").Width("43%").ReadOnly();
columns.Bound(p => p.Facts).Width("8%");
columns.Template(#<text></text>).ClientTemplate("<img src='" + #Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=FactOptions#>' />");
columns.Bound(p => p.Actions).Width("8%");
columns.Template(#<text></text>).Width("2%").ClientTemplate("<img src='" + #Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=ActionOptions#>' />");
columns.Template(#<text></text>).Title("Skip").Width("3%").ClientTemplate(
"<# if(Skip==false) {#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' />" +
"<#} else{#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' checked='checked' />" +
"<# } #>"
);
columns.Bound(p => p.Note).Title("Note").Width("26%");
})
.Editable(editing => editing.Mode(Telerik.Web.Mvc.UI.GridEditMode.InCell))
.KeyboardNavigation( navigation => navigation.EditOnTab(true))
.ClientEvents(e => e.OnSave("OnSave"))
.DataBinding(dataBinding =>
{
dataBinding.Ajax().Select("GetQuestion", "AnswerQuestion", new { Area = "question", ajax = true }).Enabled(true);
})
.Scrollable(scrolling => scrolling.Enabled(false))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(false))
.Footer(true)
)
Code for Integer editor template for "Facts" & "Actions" columns bellow.
#(Html.Telerik().IntegerTextBox()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.InputHtmlAttributes(new { style = "width:100%", pattern = "[0-9]*" })
.MinValue(1)
.MaxValue(5)
.Value(Model)
)
Please provide a solution. Any help is appreciated.
Here is what I can suggest you as a work-around because your goal is not supported out of the box.
Feel free to optimize/change the implementation or to make it more generic (e.g. use classes to find cells and not to rely on indexes)
$(function () {
$('#persons tbody').on('keydown', function (e) {
if (e.keyCode == 9) {
var currentCell = $(e.target).closest('td');
var cellIndex = currentCell.index();
if (cellIndex == 2 || cellIndex == 4) { //if editing cell in third or fifth column, use different indexes if needed
e.stopPropagation();
e.preventDefault();
var grid = $('#persons').data().kendoGrid;
if (cellIndex == 2) {
var cellToEdit = currentCell.parent().find('td:eq(4)');
grid._handleEditing(currentCell, cellToEdit);
}
if (cellIndex == 4) {
var cellToEdit = currentCell.parent().find('td:eq(2)');
grid._handleEditing(currentCell, cellToEdit);
}
setTimeout(function () {
cellToEdit.find('input').focus();
})
}
}
})
})
I´m not really sure how to do this, but have you tried using something like tabindex, perhaps by using it within the htmlAttributes? Anyway, I have never done anything like this but maybe you can try something in that area:
columns.Bound(p => p.Facts).Width("8%").HtmlAttributes(new { tabindex = 1 });
columns.Bound(p => p.Actions).Title("Practice").Width("8%").HtmlAttributes(new { tabindex = 2 });
Since you are using Telerik Grid, you might have to mix this somehow within each item. Then again, maybe I´m misunderstanding your point (I´ve been known to do that) :)

Resources