Kendo Parsing Date - parsing

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.

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 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>

Kendo UI Grid with Foreign Key Column Displaying Blank After Creation

Hi I have a grid with a kendo foreign key column and editing in popup mode. When I insert a new record and pulse sort or filter the foreign key columan shows blank until I press f5 on the browser
GRID
#(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
.Name("Usuarios")
.AutoBind(true)
.Columns(columns =>
{
columns.Bound(p => p.Id).Visible(false);
columns.Bound(p => p.Nombre).Width(300);
columns.Bound(p => p.Apellido1).Width(300);
columns.Bound(p => p.Apellido2).Width(300);
columns.Bound(p => p.Codusuario).Width(300);
columns.Bound(p => p.Fechacambiopassword).Width(300);
columns.Bound(p => p.Idperfil).Width(300);
columns.ForeignKey(p => p.Idperfil, (System.Collections.IEnumerable)ViewBag.Perfiles, "Id", "Descripcion").Width(300).EditorTemplateName("PerfilesDropDownList");
columns.Command(command => { command.Edit(); command.Custom("Eliminar").Click("grid_remove"); }).Width(200);
})
.ToolBar(commands => commands.Create())
.Sortable(s => s.SortMode(GridSortMode.SingleColumn))
.Filterable()
.Pageable()
.Scrollable(scroll => scroll.Height("auto"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false).TemplateName("UsuariosEdicion").Window(w => w.Title("Editar Usuario").Width(700)))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("Apellido1").Ascending())
.Model(model => model.Id(p => p.Id))
.Create(create => create.Action("InsertarUsuario", "Account"))
.Read(read => read.Action("ObtenerUsuarios", "Account").Data("getAdditionalData"))
.Update(update => update.Action("ModificarUsuario", "Account"))
.Destroy(destroy => destroy.Action("EliminarPerfil", "Account"))
.Events(e => e.RequestStart("grid_mostrarspinner").RequestEnd("grid_ocultarspinner").Error("error"))
.PageSize(5)
)
.Events(e => e.Remove("grid_remove").Edit("editar"))
)
Controller
public async Task<JsonResult> InsertarUsuario([DataSourceRequest] DataSourceRequest request, Usuarios usuario)
{
if (ModelState.IsValid)
{
Error error = await ServicioSeguridad.Current.InsertarUsuarioAsync(usuario);
}
return Json(new[] { usuario }.ToDataSourceResult(request, this.ModelState));
}
Editor Template
#using Ibermatica.Info33Plus.Modelos;
#model Usuarios
<div style="width:700px;">
<div class="editor-label col-md-4">
#Html.LabelFor(u => u.Nombre)
</div>
<div class="editor-field col-md-6">
#Html.TextBoxFor(u => u.Nombre, new { #class = "k-input k-textbox wide-full" })
</div>
<div class="editor-label col-md-4">
#Html.LabelFor(u => u.Apellido1)
</div>
<div class="editor-field col-md-6">
#Html.TextBoxFor(u => u.Apellido1, new { #class = "k-input k-textbox wide-full" })
</div>
<div class="editor-label col-md-4">
#Html.LabelFor(u => u.Apellido2)
</div>
<div class="editor-field col-md-6">
#Html.TextBoxFor(u => u.Apellido2, new { #class = "k-input k-textbox wide-full" })
</div>
<div class="editor-label col-md-4">
#Html.LabelFor(u => u.Codusuario)
</div>
<div class="editor-field col-md-6">
#Html.TextBoxFor(u => u.Codusuario, new { #class = "k-input k-textbox wide-full" })
</div>
<div class="editor-label col-md-4">
#Html.LabelFor(u => u.Password)
</div>
<div class="editor-field col-md-6">
#Html.PasswordFor(u => u.Password, new { #class = "k-input k-textbox wide-full" })
</div>
<div class="editor-label col-md-4">
#Html.LabelFor(u => u.Perfiles.Descripcion)
</div>
<div class="editor-field col-md-6">
#(Html.Kendo().DropDownList()
.HtmlAttributes(new { #class = "wide-full" })
.Name("Perfiles")
.DataValueField("Id")
.DataTextField("Descripcion")
.BindTo((System.Collections.IEnumerable)ViewBag.Perfiles)
.OptionLabel("Selecciona un perfil...")
)
</div>
<div class="editor-label col-md-4">
#Html.LabelFor(u => u.Email)
</div>
<div class="editor-field col-md-4">
#Html.TextBoxFor(u => u.Email, new { #class = "k-input k-textbox wide-full" })
#Html.ValidationMessageFor(u => u.Email)
</div>
</div>
you should read your data when a process occured.
.DataSource(ds => ds
.Events(events => events.Sync("sync_handler"))
)
function sync_handler(e) {
this.read();
}

Kendo widgets two level deep in Razor, inline markup blocks cannot be nested

I´m trying to implement Kendo widgets two level deep but the Razor engine keeps complaining: "Inline markup blocks (#Content) cannot be nested. Only one level of inline markup is allowed."
Is there a way for the Razor engine to render helpers two level deep?
My code example:
#(Html.Kendo().TabStrip()
.Name("tabStrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Strip1")
.Selected(true)
.Content(#<text>
#RenderPanelBar()
</text>);
tabstrip.Add().Text("Strip2")
.Content(#<text>
</text>);
})
)
#helper RenderPanelBar(){
#(Html.Kendo().PanelBar()
.Name("panelBar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar =>
{
panelbar.Add().Text("panel1")
.Expanded(true)
.Content(#<div>
<div>
#(Html.Kendo().Grid<GroupViewModel>()
.Name("GroupGrid")
.Columns(columns =>
{
columns.Bound(c => c.GroupID).Hidden();
columns.Bound(c => c.Name);
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Template(#<text>
#RenderDropDown() //<-- here the error occurs
</text>);
}
)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable(s => s.Enabled(false))
.Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Group_Grid_Read", "Home"))
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.GroupID))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(update => update.Action("EditingInline_Destroy", "Home"))
)
.Events(e => e.Change("onGroupGridChange").Save("GroupGrid_Save"))
)
</div>
</div>
</div>);
panelbar.Add().Text("panel2")
.Content(#<div>
//stuff abbreviated
</div>
);
})
)
}
#helper RenderDropDown(){
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
#(Html.Kendo().DropDownList()
.Name("categories")
.OptionLabel("All")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Categories", "Grid");
})
)
</div>
}
I think you probably need to use razor helper at any level. In your case, you probably need to put the grid in another RenderGrid() as shown below:
#(Html.Kendo().TabStrip()
.Name("tabStrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Strip1")
.Selected(true)
.Content(#<text>
#RenderPanelBar()
</text>);
tabstrip.Add().Text("Strip2")
.Content(#<text>
</text>);
})
)
#helper RenderPanelBar()
{
#(Html.Kendo().PanelBar()
.Name("panelBar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar =>
{
panelbar.Add().Text("panel1")
.Expanded(true)
.Content(#<text>
#RenderGrid()
</text>
);
panelbar.Add().Text("panel2")
.Content(#<div>
//stuff abbreviated
</div>
);
})
)
}
#helper RenderGrid()
{
#(Html.Kendo().Grid<UserModel>()
.Name("GroupGrid")
.Columns(columns =>
{
columns.Bound(c => c.GroupID).Hidden();
columns.Bound(c => c.Name);
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Template(#<text>
#RenderDropDown()
</text>);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable(s => s.Enabled(false))
.Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource.Ajax()
.Read(read => read.Action("Group_Grid_Read", "Home"))
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.GroupID))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(update => update.Action("EditingInline_Destroy", "Home")))
.Events(e => e.Change("onGroupGridChange").Save("GroupGrid_Save"))
)
}
#helper RenderDropDown()
{
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
#(Html.Kendo().DropDownList()
.Name("categories")
.OptionLabel("All")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.DataSource(ds => { ds.Read("ToolbarTemplate_Categories", "Grid"); })
)
</div>
}

Convert aspx code to razor

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>)

Resources