We are experiencing an issue with our MVC SiteFinity application. When editing a grid inline having a foreign key dropdown column set as the first column displayed in the grid its necessary to click the grid confirm button twice to display all validation messages when the row has no data entered. The first click displays the validation message for the foreign key dropdown column and the second click then displays all subsequent column validation messages. The css code listed below is used to prevent another issue that was causing the validation message tool-tip for the dropdown foreign key column to be displayed underneath the subsequent row of the grid. If the foreign key dropdown column is not set as the first column in the grid on click of the confirm button then the validation messages all get displayed correctly when no data is entered.
// Gridview
<
div
class
=
"row"
id
=
"divGridApplicationStatuts"
style
=
"padding-top: 0px;"
>
@(Html.Kendo().Grid<
SitefinityWebApp.Mvc.Models.TypeActiviteReglementModel
>()
.Name("GridTypeActiviteReglements")
.Columns(columns =>
{
columns.Bound(p => p.Id).Title("No.").Width(25).Filterable(false).Sortable(true);
columns.ForeignKey(p => p.BeneficierId, (System.Collections.IEnumerable)ViewBag.Beneficiers, dataFieldValue: "BeneficierId", dataFieldText: "BeneficierName").Title("Bénéficier").Width(85).Filterable(true).Sortable(true).EditorTemplateName("TypesActivitesReglementsBeneficierEditor");
columns.Bound(p => p.Nom).Title("Type d'activité").Width(300).Filterable(false).Sortable(true);
columns.Command(command =>
{
command.Edit().Text("Éditer").UpdateText("Confirmer").CancelText("Annuler").HtmlAttributes(new { style = "padding:3px" });
command.Destroy().Text("Supprimer").HtmlAttributes(new { style = "padding:3px" });
}).Width(90);
})
.ToolBar(toolbar => toolbar.Create().Text("Ajouter"))
.Scrollable(scr => scr.Height(570))
.Sortable()
.Pageable()
.Filterable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.HtmlAttributes(new { style = "width:1048px" })
.Events(ev => ev.Edit("onEdit").Save("onSave"))
.DataSource(dataSource => dataSource
.Ajax()
.AutoSync(false)
.Events(e => e.RequestEnd("onRequestEnd"))
.Model(model =>
{
model.Id(p => p.Id);
})
.Sort(s => s.Add("Id").Ascending())
.PageSize(12)
.Events(events => events.Error("error"))
.Read(read => read.Url("/tar/TypesActivitesReglements/TypesActivitesReglementsRead").Data("sendAntiForgeryToken"))
.Create(create => create.Url("/tar/TypesActivitesReglements/TypesActivitesReglementsCreate").Data("sendAntiForgeryToken"))
.Update(update => update.Url("/tar/TypesActivitesReglements/TypesActivitesReglementsUpdate").Data("sendAntiForgeryToken"))
.Destroy(destroy => destroy.Url("/tar/TypesActivitesReglements/TypesActivitesReglementsDestroy").Data("sendAntiForgeryToken"))
.ServerOperation(true)
)
)
</
div
>
// Dropdown foreign key template
@(Html.Kendo().DropDownListFor(model => model)
.OptionLabel("- Sélectionnez - ")
.Name("BeneficierList")
.DataValueField("BeneficierId")
.DataTextField("BeneficierName")
.BindTo((IEnumerable)ViewBag.Beneficiers)
)
// Style fix
<
style
>
.k-tooltip {
/*height: 25px;*/
position: static;
white-space: normal;
}
.k-tooltip-validation .k-invalid-msg {
display: block;
}
.k-invalid-msg .k-callout {
display: block;
}
</
style
>
Hi,
Q.1) I am using the detailed template for the MVC grid. I am trying to lock the column of main grid but it showing the error detailed template can not have locked column.
Please let me know if there is any work around to do that.
Q.2) I want to show/hide the detailed template for the grid on the selection and deselection of the check box. Any idea how do I achieve this at run time.
Hi
I want to display 3 level grid in Kendo, i.e. after clicking arrow on 1st grid row, it opens 2nd grid, and after clicking arrow on 2nd grid row, it opens 3rd grid. I use ClientDetailTemplateId to do it. Here is the code:
1st Kendo Grid
<% Html.Kendo().Grid<MaintenanceSportsGridSportViewModel>()
.Name("Sports")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(a => a.SportId))
.ServerOperation(true)
.Read(read => read.Action("MaintenanceSportsAjax", "Maintenance"))
.Update(update => update.Action("UpdateMaintenanceSports", "Maintenance").Data("onUpdateMaintenanceSports"))
.Events(a => a.RequestEnd("onMaintenanceSportsGridRequestEnd"))
)
...
.ClientDetailTemplateId("DisciplinesTemplate")
.Columns(columns =>
{
columns.Bound(s => s.SportCode).Width(70);
...
}).Render();
%>
2nd Grid
<%: Html.Kendo().Grid<MaintenanceSportsGridDisciplineViewModel>()
.Name("Disciplines_#=SportId#")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(a => a.DisciplineId))
.ServerOperation(false)
.Events(e => e.RequestEnd("onMaintenanceDisciplinesRequestEnd"))
.Create(create => create.Action("InsertMaintenanceDisciplines", "Maintenance", new { parentSportId = "#=SportId#" }))
.Read(read => read.Action("MaintenanceDisciplinesAjax", "Maintenance", new { sportId = "#=SportId#" }))
.Update(update => update.Action("UpdateMaintenanceDisciplines", "Maintenance").Data("onUpdateMaintenanceDisciplines"))
.Destroy(destroy => destroy.Action("DeleteMaintenanceDisciplines", "Maintenance").Data("onUpdateMaintenanceDisciplines"))
)
...
.ClientDetailTemplateId("EventsTemplate")
.Columns(columns =>
{
columns.Bound(b => b.SportCode)
.Width(70);
...
})
.ToClientTemplate()
%>
3rd grid
<%: Html.Kendo().Grid<MaintenanceSportsGridEventViewModel>()
.Name("Events_#=DisciplineId#")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(a => a.EventId))
.ServerOperation(false)
.Events(e => e.RequestEnd("onMaintenanceEventsRequestEnd"))
.Create(create => create.Action("InsertMaintenanceEvents", "Maintenance", new { parentDisciplineId = "#=DisciplineId#" }))
.Read(read => read.Action("MaintenanceEventsAjax", "Maintenance", new { disciplineId = "#=DisciplineId#" }))
.Update(update => update.Action("UpdateMaintenanceEvents", "Maintenance").Data("onUpdateMaintenanceEvents"))
.Destroy(destroy => destroy.Action("DeleteMaintenanceEvents", "Maintenance").Data("onUpdateMaintenanceEvents"))
)
...
.Columns(columns =>
{
columns.Bound(b => b.SportCode)
.Width(60);
...
})
.ToClientTemplate()
%>
But the problem is that I can not open the 3rd grid. 2nd grid works fine. I need help on this.
I am running into an issue when trying to bind a detail grid.
It works fine on my dev machine, but when I publish the project and run it on the production environment, I get the attached error.
The only difference I can think of is the size of the data that is coming across. Obviously production has a lot more data than my dev machine does. Any Ideas?
I am not able to bind search results to the ListView. The ListView always returns 0.
I only wants the bind to happened when the search button is clicked. How to do it?
Code:
@{
ViewBag.Title = "Search";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="col-sm-12">
@using (Html.BeginForm("excSearch", "Search", FormMethod.Post))
{
<div class="col-sm-12" role="form" style="text-align: center;">
<div>
<span style="font-size:40px;">Search</span>
</div>
<div style="padding: 15px; background: rgba(240,240,240,.9)">
<div class="input-group form-group" style="margin-bottom: 0px !important;">
<input type="text" name="search_keyword" placeholder="Enter Keyword..." required="required" class="searchTxtInputs" />
<span class="input-group-addon" style="padding: 0px 8px 0px 8px;"><i class="fa fa-search"></i></span>
</div>
<br />
<div style="text-align: right;">
<div style="padding: 5px; display: inline-block;">
@(Html.Kendo().Button()
.Name("btnSearch")
.Content("Search")
.HtmlAttributes(new { @class = "btn-primary", type = "submit" })
.Events(e => e.Click("execButtonSearch"))
)
</div>
</div>
</div>
</div>
<div class="col-sm-9" style="padding:0px 0px 40px 35px;">
</div>
<div class="articleContainer col-sm-12">
<script type="text/x-kendo-template" id="template">
<div class="row departmentArticleListRow">
#if(MainImage !== null && MainImage !== ""){#
<div class="col-lg-2 departmentArticleListImage Style_1">
#= htmlDecode(MainImage) #
</div>
<div class="col-lg-10 departmentArticleList">
#if(SEO !== null){#
<a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(SEO))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${SEO}</span></a><br /><br />
#}else{#
<a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(Title))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${Title}</span></a><br /><br />
#}#
<span class="departmentArticleListBlurb"> #= htmlDecode(Blurb) #</span><br /><br />
<span class="departmentArticleListIssue">${IssueMonth} </span><span class="departmentArticleListIssue"> ${IssueYear}</span>
</div>
#}else{#
<div class="col-lg-12 departmentArticleList">
#if(SEO !== null){#
<a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(SEO))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${SEO}</span></a><br /><br />
#}else{#
<a href="@Url.RouteUrl("Article", new { departmentName = "SectionName".Replace(' ', '-'), articleName = "articleName", articleID = "articleID" }).Replace("articleName", "#= kendo.toString(replaceString(Title))#").Replace("articleID", "${Article_ID}").Replace("SectionName", "${SectionName}")"><span class="mediumHeadline">${Title}</span></a><br /><br />
#}#
<span class="departmentArticleListBlurb"> #= htmlDecode(Blurb) #</span><br /><br />
<span class="departmentArticleListIssue">${IssueMonth} </span><span class="departmentArticleListIssue"> ${IssueYear}</span>
</div>
#}#
</div>
</script>
<script type="text/javascript">
function replaceString(value) {
if (value)
return value.replace(/\s+/g, "-");
}
</script>
<script type="text/javascript">
function htmlDecode(value) {
if (value) {
if (value.length >= 200) {
var i = 200;
if (value.charAt(i) === ' ') {
value = value.substring(0, i).trim() + "...";
}
else {
while (value.charAt(i) !== ' ') {
value = value.substring(0, i);
i--;
}
value = value.trim() + "...";
}
}
return value.replace(/</g, "<").replace(/>/g, ">").trim();
}
}
</script>
@(Html.Kendo().ListView<DAL_NEW.Article>()
.Name("SearchArticlesList")
.ClientTemplateId("template")
.TagName("div")
.DataSource(datasource =>
{
datasource.Model(model =>
{
model.Id(p => p.Article_ID);
model.Field(p => p.Title);
});
datasource.Read(read => read.Action("excSearch", "Search"));
datasource.PageSize(10);
})
.Pageable()
.HtmlAttributes(new { @class = "departmentListView" })
)
</div>
<script>
function execButtonSearch() {
$("#btnSearch")
.button()
.click(function (event) {
$("#SearchArticlesList").data("kendoListView").dataSource.read();
});
}
</script>
}
</div>
public ActionResult excSearch([DataSourceRequest]DataSourceRequest request, string search_keyword)
{
GetSearchArticles(request, search_keyword);
return View("Search", this);
}
public ActionResult GetSearchArticles([DataSourceRequest]DataSourceRequest request, string search_keyword)
{
List<proc_SearchNewObject> articleList = db.Proc_Search_New(Pub.Pub_ID, "*", search_keyword, null, null, null, null, null).ToList();
return Json(articleList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
Html.Kendo().MultiSelect fails WCGA validation giving error message of missing label. This is caused by the extra <input class="k-input k-valid"> that the control generates which has no Id associated with it.
Please share what need to be done to correct this error for WCGA check?
Hi,
I have 2 tier grids that need to pass 2 parameters from 1st grid to 2nd grid.
1st grid is like:
<% Html.Kendo().Grid<EvaluationsQuestionsEvaluationPillarsGridViewModel>()
.Name("Pillars")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(a => a.EvaluationMasterPillarId))
.ServerOperation(true)
.Read(read => read.Action("LoadEvaluationsQuestionsEvaluationPillarsGridAjax", "Evaluations", new { showDeleted = false }))
...
2nd
grid is like:
<%: Html.Kendo().Grid<EvaluationsQuestionsEvaluationPillarQuestionsGridViewModel>()
.Name("Pillars_#=EvaluationMasterPillarId#")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(a => a.EvaluationVersionQuestionId))
.ServerOperation(false)
.Create(create =>
create.Action("InsertEvaluationVersionQuestion", "Evaluations", new {
prevEvaluationVersionId = "#=EvaluationVersionId#",
prevEvaluationMasterPillarId = "#=EvaluationMasterPillarId#" }))
.Read(read =>
read.Action("LoadEvaluationsQuestionsEvaluationPillarQuestionsGridAjax",
"Evaluations", new { evaluationVersionId = "#=EvaluationVersionId#",
evaluationMasterPillarId = "#=EvaluationMasterPillarId#", showDeleted =
false }))
...
This is not working for only EvaluationMasterPillarId is passed. So I
think we need to pass EvaluationVersionId too. How to do it?
Thanks.
Hello,
I'm having some problems with data validation with the kendo grid. I've set up the Grid to use a model that has several fields. I'm most interested in the DateTime field for which I've set up data annotations to help with validation. I've labeled the field to be Required, to use a regular RegularExpression, and I've also specified an EditorTemplate called "BeginDateEditor". The editing mode is set up to be InLine. The problem occurs when I actually try to edit the field. The data validation doesn't seem to work. The editing will allow the user to close the cell with no value where in fact it should notify the user that there is a problem and keep the cell open for editing. I've attached a sample project to illustrate the problem.
Thank you.
Hello,
I'm having problem with serverside filtering using autocomplete. Due to fact that Autocomplete is still unavailable at MVC Wrapper for ASP.NET 5 MVC 6, im using following code to initialize autocomplete:
<
script
>
var dataSource = new kendo.data.DataSource({
serverFiltering: true,
serverOperation: true,
type: "aspnetmvc-ajax",
transport: {
read: {
url: "@Url.Content("~/api/Get")",
type: "GET"
}
},
schema: {
data: "Data",
total: "Total"
}
})
$("#@Model.Name").kendoAutoComplete({
placeholder: "@Model.Watermark",
minLength: 3,
filter: "contains",
dataSource: dataSource
});
</
script
>
As the result Query string that is send to server always looks like this : ?sort=&group=&filter= and because of that mapping to DataSourceRequest on serverside always results with empty filters