Kendo Grid MVC Compilation Error when loading cshtml file - asp.net-mvc

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.

Related

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

Update is not working in my mvc project

hello everyone i am tring to update the database. but update is not working in my project. i used a single action to create and update.And i am using kendo grid control in this project and edit the popup template. so please check this and suggest me something why update is not working.
this is my code.
public class ImageController : Controller
{
ShoppingContext db = new ShoppingContext();
string imagename;
string path;
// GET: /Image/
public ActionResult Index()
{
return View();
}
public JsonResult GetData([DataSourceRequest] DataSourceRequest request)
{
var list = db.ImageModels.ToList();
return Json(list.ToDataSourceResult(request));
}
public ActionResult Create(IEnumerable<HttpPostedFileBase> files, ImageModel imageModel)
{
foreach (var image in files)
{
imagename = Path.GetFileName(image.FileName);
path = "~/Images/" + imagename;
var projectpath = Path.Combine(Server.MapPath("~/Images"), imagename);
image.SaveAs(projectpath);
}
var id = imageModel.Imageid;
if (id > 0)
{
imageModel.ImageName = imagename;
imageModel.ImageUrl = path;
db.SaveChanges();
}
else
{
imageModel.ImageName = imagename;
imageModel.ImageUrl = path;
db.ImageModels.Add(imageModel);
db.SaveChanges();
}
return RedirectToAction("Index");
}
}
My view
#(Html.Kendo().Grid<TelerikMVCImageProject.Models.ImageModel>()
.Name("grdImage")
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p=>p.Imageid))
.Create(create => create.Action("Create", "Image"))
.Update(update => update.Action("Create", "Image"))
.Destroy(delete => delete.Action("Delete", "Image"))
.Read(read => read.Action("GetData", "Image"))
.ServerOperation(false)
.Model(model =>
{
model.Field(p => p.Imageid).Editable(true);
model.Id(p => p.Imageid);
// model.Field(p => p.isenabled).DefaultValue(true);
})
)
.Columns(columns =>
{
//columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID# />").Width(50);
columns.Bound(c => c.ProductName).Width(140).Title("Product Name");
columns.Bound(c => c.ProductDesc).Title("Product Desc");
columns.Bound(c => c.ImageName).Title("Image Name");
columns.Bound(c => c.ImageUrl).Title("Image Url");
columns.Command(command =>
{
command.Edit();
command.Destroy();
//command.Custom("Edit").Action("Update", "Imagetest").Text("Edit");
});
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ImageModel"))
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5)
)
)
My Editor Templates
#model TelerikMVCImageProject.Models.ImageModel
<style>
.k-state-default {
visibility:hidden;
}
</style>
<script>
function onSelect(e) {
alert("Select");
$demo = $("#files").val();
var filename = $demo.substr(12);
var path = "~/Images/" + filename;
$("#divimage").append('<img src = "#Url.Content("~/Images/")' + filename + '">');
alert(path);
}
function onRemove(e) {
alert("Remove");
$("#divimage").empty();
}
</script>
<form method="post" action="#Url.Action("Create")">
<table>
<tr>
#Html.HiddenFor(m=>m.Imageid)
</tr>
<tr>
<td>#Html.Label("Product Name")</td>
<td>#Html.TextBoxFor(m=>m.ProductName)</td>
</tr>
<tr>
<td>#Html.Label("Product Desc")</td>
<td>#Html.TextBoxFor(m=>m.ProductDesc)</td>
</tr>
<tr>
<td>#Html.Label("Image Desc")</td>
<td>#(Html.Kendo().Upload()
.Name("files")
.Multiple(false)
.Messages(msg => msg.Select("Browser"))
//.Async(a=>a.AutoUpload(false).Save("Save","Imagetest"))
.Events(e=>e.Select("onSelect").Remove("onRemove"))
)</td>
</tr>
<tr>
<td></td>
<td><div id="divimage" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Save" /></td>
</tr>
</table>
</form>
This is because you are receiving the model from the user and not "attaching" it to the EF db context. You need to attach it before saving changes.
Try the following (in ImageController):
if (id > 0)
{
db.ImageModels.Attach(imageModel);
imageModel.ImageName = imagename;
imageModel.ImageUrl = path;
db.SaveChanges();
}

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

Multiple Kendo Grids in a Razor View

I'm looping through my Model in a Razor View and wanted to display multiple Kendo Grids. However I'm getting all empty grids even though the Item_Read is being executed when the loop happens.
Any ideas?
Source:
#foreach (var itemM in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => itemM.id)
</td>
<td>
#(Html.Kendo().Grid<SomeOtherModel>()
.Name("KendoGrid" + itemM.id)
.Columns(columns =>
{
columns.Bound(p => p.title);
columns.Bound(p => p.details);
})
.AutoBind(true)
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.itemId);
model.Field(p => p.itemId).Editable(false);
})
.Read(read => read.Action("Item_Read", "Controller", new { id = itemM.id }))
)
)
</td>
</tr>
}
The problem was my ViewModel, one of the properties was null.

Resources