Convert aspx code to razor - asp.net-mvc

I am having a lot of trouble converting the following telerik aspx code to the razor view engine. The error I am getting is : 'CS1012: Too many characters in character literal' on the first input button.
<% Html.Telerik().Grid(Model)
.Name("Customers")
.DataKeys(dataKeys => dataKeys.Add(c => c.CustomerID))
.Columns(columns =>
{
columns.Bound(c => c.CustomerID).Width(130);
columns.Bound(c => c.CompanyName).Width(250);
columns.Bound(c => c.ContactName);
columns.Bound(c => c.Country).Width(200);
columns.Template(c => {
%> <input type='button' value='Edit' onclick="updateRecord('<%= c.CustomerID %>')" /> <%
%> <input type='button' value='Delete' onclick="deleteRecord('<%= c.CustomerID %>')" /> <%
}).Width(150);
})
.Pageable()
.Sortable()
.Render();
%>
My attempt is as follows:
#{ Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(dataKeys => dataKeys.Add(c => c.Id))
.Columns(columns =>
{
columns.Bound(o => o.PartNumber).Width(100);
columns.Template(c => {
} <input type='button' value='Edit' onclick="updateRecord('#c.Id')" /> #{
} <input type='button' value='Delete' onclick="deleteRecord('#c.Id')" /> #{
}).Width(150);
})
.Groupable()
.Sortable()
.Pageable()
.Filterable()
.Render();
}
Thanks
Ryan

You cannot put HTML in an expression like that in Razor.
Instead, use an inline template:
columns.Template(#<text>
<input type='button' value='Edit' onclick="updateRecord('#item.Id')" />
<input type='button' value='Delete' onclick="deleteRecord('#item.Id')" />
</text>)

Related

Kendo Grid MVC Compilation Error when loading cshtml file

I'm getting the following error when trying to load my .cshtml file:
Compiler Error Message: CS1026: ) expected
Source Error (Line 81):
Line 79: .AutoBind(true)
Line 80:
Line 81: .DataSource(dat​asource => datasource
Line 82: .Ajax()
Line 83: .Model(model =>
I have tried refreshing the cache and removing elements from the grid but it is still not working.
cshtml page code:
#{
var guid = Guid.NewGuid();
var layoutId = guid + "page-layout";
var partialModel = new Kendo_UI_Bootstrap_Integration.ViewModels.ReportLayoutViewModel();
partialModel.Title = "Report";
partialModel.ReportHeaderData = string.Format("<span id='{0}-start-date'>Start Date:</span><br/><span id='{0}-end-date'>End Date</span>", guid);
partialModel.Id = layoutId;
}
#Html.Partial(MVC.Reports.Views.ViewNames._ReportLayout, partialModel)
<input id="GuidInput" type="hidden" value="#guid" />
<table>
<tbody>
<tr>
<td>
<span>Start Date: </span>
#(Html.Kendo().DatePicker().Name(guid + "StartDate").Footer(false))
</td>
<td style="padding-left: 10px;">
<span>End Date: </span>
#(Html.Kendo().DatePicker().Name(guid + "EndDate").Footer(false))
</td>
#if (User.IsInRole("RearingUnitRearingManager") || User.IsInRole("BackOfficeSuperUser"))
{
<td style="padding-left: 10px;">
#(Html.Kendo().DropDownListFor(m => m)
.Name("dropdown")
.DataTextField("name")
.DataValueField("nameguid")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action(MVC.ControllerName.ActionNames.Action, MVC.Controller.Name))
.ServerFiltering(true);
})
.HtmlAttributes(new { style = "width: 306px;" })
)
</td>
}
<td style="padding-left: 10px;">
#(Html.Kendo().Button().Name("Submit").Content("Submit").Events(events => events.Click("submitbutton")))
</td>
</tr>
</tbody>
</table>
<br />
#(Html.Kendo().Grid<Kendo_UI_Bootstrap_Integration.Models.DTO.dto>()
.Name("gridname")
.ToolBar(tools => { tools.Pdf(); tools.Excel(); })
.Pdf(pdf => pdf
.AllPages()
.AvoidLinks()
.Landscape()
.TemplateId(layoutId)
.PaperSize("A4")
.Scale(0.6)
.RepeatHeaders()
.Margin("7cm", "1cm", "3cm", "1cm")
.FileName("pdf.pdf")
)
.Excel(excel => excel
.AllPages(true)
.FileName("excel.xlsx"))
.EnableCustomBinding(true)
.Columns(
columns =>
{
columns.Bound(c => c.item1).Hidden();
columns.Bound(c => c.item2);
columns.Bound(c => c.item3);
columns.Bound(c => c.item4);
columns.Bound(c => c.item5);
columns.Bound(c => c.item6);
}
)
.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
.AutoBind(true)
.DataSource(dat​asource => datasource
.Ajax()
.Model(model =>
{
model.Field(m => m.item1).Editable(false);
model.Field(m => m.item2).Editable(false);
model.Field(m => m.item3).Editable(false);
model.Field(m => m.item4).Editable(false);
model.Field(m => m.item5).Editable(false);
model.Field(m => m.item6).Editable(false);
})
.Group(group => group.Add(w => w.item1))
.Read(read => read.Action(MVC.Controller.ActionNames.Actionname_Read, MVC.Controller.Name).Data("function"))
.PageSize(100)
.Batch(true)
)
.Events(ev => ev.PdfExport("ProcessPdf").ExcelExport("SetExcelFileName"))
.HtmlAttributes(new { style = "z-index: 1000; position: relative;", #class = "report-grid", report_guid = guid })
)
When I tried to double click the word 'datasource' it only highlighted half of the word, so I re-typed it and added a model.Id to the model definition and it worked.
I have no idea what happened here.

Kendo Parsing Date

I have custom popup window and it works. Also I am retrieving data from database correctly and binding data. While editing these records from popup whenever date or month is over 12 , there is an error on localhost and says that for example" 12/08/'2011 is not a valid date.
Here is my codes, please help me..
#model xxxx.Il
<h3>Customized Il</h3>
<br />
#Html.HiddenFor(model => model.Id)
#Html.HiddenFor(model => model.CustId)
#Html.HiddenFor(model => model.DegistirenKullanici)
#Html.HiddenFor(model => model.DegistirmeTarihi)
#Html.HiddenFor(model => model.KayitKullanici)
<div>
#Html.LabelFor(model => model.IlAdi)
#Html.EditorFor(model => model.IlAdi)
#Html.ValidationMessageFor(model => model.IlAdi)
</div>
<div>
#Html.LabelFor(model => model.KayitTarihi)
#Html.Kendo().DatePickerFor(model => model.KayitTarihi).Format("dd/mm/yyyy")
#Html.ValidationMessageFor(model => model.KayitTarihi)
</div>
<script>
kendo.culture("en-GB");
</script>
And here is my view cshtml codes;
#using Kendo.Mvc.UI;
#model xxxxx.Il
<section id="gallery">
<h2 class="ra-well-title">Iller</h2>
<div>
<input id='txtIlId' value="" style="width:100%; text-align:center;" class="k-textbox" placeholder="Id'ye göre Arama'" />
<br>
<br />
<input id='txtIlAdi' value="" style="width:100%; text-align:center;" class="k-textbox" placeholder="Ada göre Arama'" />
<br>
<br />
</div>
<script>
kendo.culture("en-GB");
</script>
#(Html.Kendo().Grid<xxxx.Il>().Name("Iller")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.IlAdi);
columns.Bound(p => p.DegistirenKullanici);
columns.Bound(p => p.DegistirmeTarihi);
columns.Bound(p => p.KayitKullanici);
columns.Bound(p => p.KayitTarihi).Format("{0:dd/mm/yyyy}");
columns.Command(command => { command.Edit(); }).Width(250);
})
.Pageable(pageable => pageable.Refresh(true))
.Sortable()
.AutoBind(true)
.Selectable()
.Navigatable()
.Filterable()
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("IlModel").Window(w => w.Width(450)).Window(w => w.Title("Düzenle")))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Il_Read", "Tanimlar").Data("getAdditionalData"))
.Update(update => update.Action("Il_Guncelle", "Tanimlar"))
)
)
</section>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function onClickBul(e) {
//kendoConsole.log("event :: click (" + $(e.event.target).closest(".k-button").attr("id") + ")");
$('#Iller').data('kendoGrid').dataSource.read();
}
$('#txtIlAdi').keyup(function () {
$('#Iller').data('kendoGrid').dataSource.read();
});
function getAdditionalData(e) {
return {
//iMrpId: 2
Iladi: $('#txtIlAdi').val()
};
}
</script>
This is the way how I get a kendo calendar date.
var selectedDate = kendo.toString(kendo.parseDate($("#diningCalendar").data("kendoCalendar").current()), 'MM/dd/yyyy')
use kendo.toString(kendo.parseDate())
Hope this helps.

How to get selected row value in the KendoUI without javascript

I have the following kendoUI grid:
<div class="row">
<div class="col-md-12">
<h4>List of SSF Pension Subscription</h4>
<p>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.HtmlAttributes(new { style = "border: 0;" })
.Columns(columns =>
{
columns.Bound(s => s.PensionNumber);
columns.Bound(s => s.FirstName);
columns.Bound(s => s.FatherName);
columns.Bound(s => s.GrandName);
columns.Bound(s => s.FamilyName);
columns.Bound(s => s.BankLookup.BankName);
})
.Sortable()
.Navigatable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource.Server()
.Model(model => model.Id(s => s.MemberID)))
)
</p>
#Html.ActionLink("Edit", "Edit", null, new { id = ???????}, new { #class = "btn btn-default" })
</div>
I want to get the selected row id after clicking on the edit button and pass that id to the action method.
Thanks in advance

Kendo grid invokes read method on empty grid when column is clicked in ASP.NET MVC

I have a grid which loads data after search button is clicked. However i am running into the issue where when the user clicks on any of the column, it tends to call datasource read function.
Is there anyway to stop invoking read method when the column is clicked and only call the read function when search button is clicked?
Razor:
<div class="col-sm-6">
<div class="form-group">
#Html.LabelFor(model => model.EmployeeName, new { #class = "col-sm-4 control-label" })
<div class="col-sm-8">
#Html.TextBoxFor(model => model.EmployeeName, new { #class = "form-control"})
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<input id="btnSearch" type="submit" value="Search" class="btn" />
</div>
</div>
</div>
#(Html.Kendo().Grid<Portal.EmployeeViewModel>()
.Name("GridEmployeeInvitation")
.Columns(columns =>
{
columns.Bound(e => e.EmployeeNumber).Width("160px");
columns.Bound(e => e.EmployeeName).Width("180px");
})
.Excel(excel => excel
.FileName("File.xlsx")
.ProxyURL(Url.Action("Excel_Export_Save", "Shared"))
.AllPages(true)
)
.Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))
.Reorderable(reorder => reorder.Columns(true))
.AutoBind(false)
.Selectable()
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.Scrollable(scr => scr.Height(322))
.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"))))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
.Read(read => read.Action("GetEmployees", "Admin").Data("GetSearchParameters"))
)
)
<script type="text/javascript">
$('#btnSearch').click(function (e) {
('#GridEmployeeInvitation').data('kendoGrid').dataSource.read();
});
function GetSearchParameters() {
return { employeeName: $("#EmployeeName").val()
};
}
</script>

How to "Data and a button in same column with kendo grid"

Is it possible? I tried with custom column, but I failed, can anyone give a simple example for it with razor ?
Paint work :)
I want something like that, column include data and a button( with onclick )
//---Not Worked 1---
columns.Command(command =>
{
command.Custom("Telefonları Göster").Click("telefonlariGoster");
columns.Bound(x => x.Adres);
}).Width(580);
....
//---Not worked 2---
columns.Template(#<text>
<label>#item.Adres</label>
<input type="button" name="AdresGuncelle" value="AdresGuncelle" onclick="telefonlariGoster()" />
</text>);
//Worked
columns.Bound(x => x.Adres)
.ClientTemplate("#=Adres#" +
"<input type='button' class='telefonlariGoster' style='float: right;' name='telefonlariGoster' value='Telefonları Güncelle' onclick='telefonlariGoster()'/>");
Try to use ClientTemplate of column where you want display your custom column display.
For example:
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.Name)
.ClientTemplate("#=Name#" +
"<input type='button' class='className' style='float: right;' name='buttonName' value='Click here' onclick='ButtonClick(\"#=Name#\", this)'/>");
columns.Bound(x => x.Id);
})
.DataSource(dataSource => dataSource
.Ajax()
.Total(10)
.ServerOperation(false)
)
)
in script button click function
function ButtonClick(name, button) {
alert(name);
}

Resources