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
Related
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(datasource => 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(datasource => 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.
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.
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>
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();
}
I use kendo grid inside a partial view, I take the datasource through read action, fiddler shows that the data is coming but cannot be seen on the grid. Code:
#model AAS.Management.Models.AdvertisementModel
#using (#Html.BeginForm()) {
#*some other divs*#
<div class="InfoRow">
<div class="display-label">
#AAS.Management.Resources.Names.DeleteDate
</div>
<div class="display-field">
#(Html.Kendo().DatePicker()
.Name("DeleteDate")
.Format("dd.MM.yyyy")
.Value(Model.DeleteDate)
.HtmlAttributes(new { style = "width:150px" })
)
</div>
<div>
<button name="btnUpdate" type="submit"> Update</button>
</div>
<div>
#(Html.Kendo().Grid<AAS.Management.Models.AdvertisementContentModel>()
.Name("gridAdvertisementContent")
.AutoBind(true)
.Columns(c =>
{
c.Bound(p => p.ID).Hidden();
c.Bound(p => p.ContentURL).Title(AAS.Management.Resources.Names.AdvertisementContent_ContentURL);
c.Bound(p => p.DeviceID).Title(AAS.Management.Resources.Names.Device);
c.Bound(p => p.PlatformID).Title(AAS.Management.Resources.Names.Platform);
c.Bound(p => p.State).Title(AAS.Management.Resources.Names.AdvertisementContent_State);
})
.DataSource(d => d
.Ajax()
.Model(m => m.Id(p => p.ID))
.Read(r => r.Action("AdvertisementContentRead", "Customer", new { AdvertisementID = Model.ID }).Type(HttpVerbs.Get))
)
)
</div>
</div>
}
public JsonResult AdvertisementContentRead( long AdvertisementID)
{
return Json(AdvertisementContentService.GetAll(AdvertisementID).result,JsonRequestBehavior.AllowGet);
}
I load this partial view inside a popup on a button click. What is the problem here? I am new in mvc and kendo, probably there is a logical mistake, can I use another approach to fill this partial view when the popup is populated?
I solved this by passing two models together:
#model Tuple< AAS.Management.Models.AdvertisementModel,IEnumerable< AAS.Management.Models.AdvertisementContentModel>>
#using (#Html.BeginForm()) {
#*divs for first model*#
#(Html.Kendo().Grid(Model.Item2)
.Name("gridAdvertisementContent")
.Columns(c =>
{
c.Bound(p => p.ID).Hidden();
c.Bound(p => p.ContentURL).Title(AAS.Management.Resources.Names.AdvertisementContent_ContentURL);
c.Bound(p => p.DeviceID).Title(AAS.Management.Resources.Names.Device);
c.Bound(p => p.PlatformID).Title(AAS.Management.Resources.Names.Platform);
c.Bound(p => p.State).Title(AAS.Management.Resources.Names.AdvertisementContent_State);
})
)}