I have a kendo grid in an mvc view that I'm using check boxes to select multiple records. I need to add a "Select All" label to the checkbox in the header that is used for selecting all records. Is there a header template that I can use to accomplish that or is this only able to be done through javascript and dom manipulation? Here's my grid:
@(Html.Kendo().Grid(Model.ResultFiles)
.Name("ResultsGrid")
.Columns(columns => {
columns.Select().Width(50);
columns.Bound(r => r.Id).Hidden();
columns.Bound(r => r.SomeNumber).Title("Some Number").Filterable(f => f.Cell(cell => cell.ShowOperators(false))).ClientTemplate("#= SomeNumber# # if(!Viewed) { # <
span
id
=
'unread-#= Id #'
class
=
'badge new-results'
>New</
span
> # } #");
columns.Bound(r => r.Name).Title("Person").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.DateOfBirth).Title("Date of Birth")
.ClientTemplate("#= DateOfBirthAsString#")
.Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.CompanyName).Hidden();
columns.Bound(r => r.SomeOtherName).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.DisplayName).Title("Clinic").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.EntryDateAsString).Title("Collection Date").Filterable(false);
columns.Bound(r => r.ReportGuid).Hidden(true);
})
.ToolBar(t => t.Template(@<
text
><
label
>Search By Collection Date Range:</
label
> <
div
class
=
"row"
> <
div
class
=
"col-md-3"
>@Html.Kendo().DatePicker().Name("startSearch").HtmlAttributes(new { PlaceHolder = "Start Date..." })</
div
> <
div
class
=
"col-md-3"
>@Html.Kendo().DatePicker().Name("endSearch").HtmlAttributes(new { PlaceHolder = "End Date..." })</
div
> <
div
class
=
"col-md-1"
><
button
class
=
"k-button"
type
=
"button"
onclick
=
"filterGrid()"
style
=
"width: 100%"
>Search</
button
></
div
> <
div
class
=
"col-md-1"
><
button
class
=
"k-button"
type
=
"button"
onclick
=
"resetFilter()"
style
=
"width: 100%"
>Reset</
button
></
div
> <
div
class
=
"col-md-1"
><
button
class
=
"k-button"
type
=
"button"
onclick
=
"downloadFiles()"
style
=
"width: 100%"
>Download</
button
></
div
> </
div
></
text
>))
.Pageable(p => p.PageSizes(new int[] { 10, 25, 50, 100 }))
//.Selectable(p => p // .Mode(GridSelectionMode.Multiple) // .Type(GridSelectionType.Cell)) .Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row)
.Operators(o => o
.ForString(str => str.Clear()
.Contains("Contains")
)
)
)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("EntryDate").Descending())
.Read(read => read.Action("Search", "Reports"))
.PageSize(10)
.Model(model=>model.Id(p=>p.ReportGuid))
)
.PersistSelection()
.Events(e => e
.DataBound("onDataBound")
)
)
Hi,
I'm using the Telerik spreadsheet with the MVC wrappers and am trying to add a custom cell editor, (actually an auto complete) but similar to the custom color editor shown in the third example on the Kendo UI demos https://demos.telerik.com/kendo-ui/spreadsheet/custom-editors. However this example is missing from the MVC demos https://demos.telerik.com/aspnet-mvc/spreadsheet/custom-editors and there is no Editor method on the SpreadsheetSheetRowCellBuilder object.
This example https://docs.telerik.com/kendo-ui/knowledge-base/spreadsheet-open-autocomplete-editor-on-cell-click suggests a way that I could use the Select event to achieve the editor in a popup but I would like to add it in cell.
I realize this won't be available out of the box with the MVC wrappers, but would be very grateful if you could suggest how I might create a workaround for it.
Regards
Michael
I have a Kendo DropdownList as follows:
<div id="dropDownList" class="col-xs-6">
@(Html.Kendo().DropDownListFor(m => m)
.Name("DealerBoothDropDown")
.DataTextField("DropDownText")
.DataValueField("BoothDetailRowId")
.OptionLabel("Select Dealer and Booth...")
.AutoBind(false)
.Filter("contains")
.HtmlAttributes(new { style = "width:500px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDealersBoothsForDropDown", "DealerAccounting");
})
.ServerFiltering(true); // Let's do server side filtering
})
.Events(e => {
e.Select("onSelect");
})
)
</div>
When the page loads, I would like to execute some JS that sets a default value in the Dropdown. Can you show me how I might do this.
Hello,
I have a project with the latest version of Kendo UI ASP.NET MVC.
In my bundle config i am loading the 2 .css files
kendo.common-material.min.css
kendo.material.min.css
Everything runsand looks as expected with the blue material theme. I want to be able to override the accent/primary color in the theme.
I've tried downloading and using the npm package @progress/kendo-theme-material, overriding the scss variables and recompiling the .css.
when i add this file into the bundle config it completely messes up the controls, padding, margin, spacing and the actual look of the controls is wrong.
How do i customise the material theme?
Cheers
Mike
Hello,
I have a view with a treelist in batch / cell editing. When I use the update method to post my treelist I also send additional datas.
But if I have no modifications on my treelist, I can't post modifications on additional datas.
Is there a way to enable the update post even if there is no modifications on treelist ?
This is my view:
@Html.HiddenFor(x => x.Id)
@(Html.HiddenFor(m => m.UserCreation, new { Value = User.Identity.Name.Split('\\')[1] }))
<
div
class
=
"synchroDiv"
>
<
div
>
@Html.LabelFor(m => m.Nom)
@(Html.Kendo().TextBoxFor(m => m.Nom))
</
div
>
@Html.ValidationMessageFor(x => x.Nom)
</
div
>
<
div
class
=
"synchroDiv"
>
<
div
>
@Html.LabelFor(m => m.PctMargeDefaut)
@(Html.Kendo().NumericTextBoxFor(m => m.PctMargeDefaut)
.Culture("fr-FR")
.Min(0)
.Max(15)
.Step(0.5))
</
div
>
@Html.ValidationMessageFor(x => x.PctMargeDefaut)
</
div
>
<
div
class
=
"synchroDiv"
>
<
div
>
<
input
checked
=
"@Model.EnableCategories"
style
=
"width: 0;"
type
=
"checkbox"
class
=
"switch switch-lg"
id
=
"chkCategories"
onchange
=
"changeCategoriesVisibility();"
>
<
label
for
=
"chkCategories"
>Personnaliser les marges des catégories Web</
label
>
</
div
>
</
div
>
<
div
id
=
"categories"
>
@(Html.Kendo().TreeList(Model.Categories)
.Name("profilMargeTreelist")
.Toolbar(toolbar =>
{
toolbar.Save().Text("Enregistrer");
toolbar.Cancel().Text("Annuler");
})
.HtmlAttributes(new { style = "height:100%" })
.Columns(columns =>
{
columns.Add().Field(e => e.Libelle);
columns.Add().Field(e => e.Code);
columns.Add().Field(e => e.PctMarge).Template("# if ( PctMarge === null ) {# #=''# #} else {# #= PctMarge # %#} #");
})
.Editable(e => e.Mode(TreeListEditMode.InCell).Move(false))
.DataSource(dataSource => dataSource
.Batch(true)
.Update(update => update.Action("UpdateMargeProfil", "ProfilMarge").Data("addData"))
.Model(m =>
{
m.Id(f => f.Code);
m.ParentId(f => f.CodeParent).Editable(false);
m.Field(f => f.Code).Editable(false);
m.Field(f => f.Libelle).Editable(false);
m.Field(f => f.PctMarge);
m.Expanded(false);
})
).Height(800))
</
div
>
Thank you in advance, I hope everything is clear.
Julien
My editor seems to be ignoring the minimum on height.
<div class="col-6">
<label>Notes:</label>
@(Html.Kendo().Editor()
.Name("RMIComment")
.HtmlAttributes(new { style = "height:80px" })
.Resizable(resizable => resizable.Content(true).Min(80))
.Tools(tools => tools.Clear())
)
</div>
<br />
It appears to always draw on the screen around 200px. I want it smaller.
Thanks
Lee
Hi there,
I got 2 EF Code first tables
public
class
ActionGES
{
public
int
ActionGESID {
get
;
set
; }
[MaxLength(250)]
public
string
TitreAL {
get
;
set
; }
[Required]
public
string
Description {
get
;
set
; }
//FK
public
ICollection<IndicateurAction> Indicateurs {
get
;
set
; }
}
public
class
IndicateurAction
{
public
int
IndicateurActionID {
get
;
set
; }
[Required]
public
int
Indicateur {
get
;
set
; }
[Required]
public
int
Annee {
get
;
set
; }
public
bool
ApprouveEA {
get
;
set
; }
//FK Key
public
int
ActionGESId {
get
;
set
; }
[ScriptIgnore]
public
ActionGES ActionGES {
get
;
set
; }
}
work good with LINQ with .include
My question is: it is normal that when I call Destroy on my grid, I ActionGES object are created in the controller action with FK Indicateurs collection count = 1 but with en [0] item = null...
My Controller action
//POST: Actions_Destroy
[Authorize]
[AcceptVerbs(HttpVerbs.Post)]
public
ActionResult Actions_Destroy([DataSourceRequest] DataSourceRequest request, ActionGES act)
{
if
(act !=
null
&& ModelState.IsValid)
{
this
.actionService.DeleteAction(act);
}
return
Json(
new
[] { act }.ToDataSourceResult(request, ModelState));
}
The "act" variable contain a Indicator with a null item. Look the picture.
Hi, I work with the sample GridCustomPopupTemplate but in the sample you do not show how to add an dropdownList for an ForeignKey column. In Inline mode editing all work good. But how to do it in an custom popup template?
My template for now:
@model PortailGES.Models.ActionGES
<
div
class
=
"editor-label"
>
@Html.LabelFor(model => model.SecteurId, "Secteur")
</
div
>
<
div
class
=
"editor-field"
>
@Html.Kendo().DropDownListFor(m => m.SecteurId)
</
div
>
<
div
class
=
"editor-label"
>
@Html.LabelFor(model => model.Titre)
</
div
>
<
div
class
=
"editor-field"
>
@Html.EditorFor(model => model.Titre)
@Html.ValidationMessageFor(model => model.Titre)
</
div
>
The DropDownListis empty. I see that in the ViewData.Values[0].Items I got the source items for Secteur but how to make the link with the DropDownList DataSource?
Thanks
Wondering is there a way I can add textbox and a button so on click of a button reads textbox value and calls javascript?
Right now I am showing two buttons using following code:
.ColumnMenu(i => i.Columns(false))
.ToolBar(toolbar => Model.ConfigureToolbar(toolbar, toolbar2 =>
{
if (Model.CanCreate && Model.SourceId > 0)
{
var caption = string.Format("Copy Items From Source ({0} {1})", OrderHelper.GetEntityLabel(Model.SourceIsQuote),
Model.SourceId);
var show = new OrderItemGridCopyFromSourceLaunchInfo
{
StateKey = Model.StateKey,
Title = caption
};
Model.CopySourceInfoTo(show);
toolbar2.Custom().Text(caption + "...").Url(string.Format("javascript: order.showItemGridCopyFromSourceForm({0});", JsonConvert.SerializeObject(show)));
}
}))
public static void ConfigureToolbar<T>(this IDialogStartInfo info, GridToolBarCommandFactory<T> toolbar,
Action<GridToolBarCommandFactory<T>> additional) where T : class
{
if (info.CanCreate)
{
toolbar.Custom()
.Text(string.Format("Add {0}", info.Subject))
.HtmlAttributes(new {href = string.Format("javascript:{0}();", info.AddDialogFunction)});
}
if (additional != null)
{
additional(toolbar);
}
}
I have a Kendo Grid in an MVC view. I've enabled paging, and added a check box to select the records. Everything seems to work, however when I select all items on 1 page, for some reason, all items get selected across all pages instead of just on the 1 page. If I select all items only on 1 page - all items in all subsequent pages should not be checked. Any ideas?
@(Html.Kendo().Grid(Model.ResultFiles)
.Name("Grid")
.Columns(columns => {
columns.Select().Width(50);
columns.Bound(r => r.Id).Hidden();
columns.Bound(r => r.SomeNumber).Title("Number").Filterable(f => f.Cell(cell => cell.ShowOperators(false))).ClientTemplate("#= SomeNumber# # if(!Viewed) { # <
span
id
=
'unread-#= Id #'
class
=
'badge new-results'
>New</
span
> # } #");
columns.Bound(r => r.Name).Title("Person").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.DateOfBirth).Title("Date of Birth")
.ClientTemplate("#= DateOfBirthAsString#")
.Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.CompanyName).Hidden();
columns.Bound(r => r.SomeOtherName).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.DisplayName).Title("Place").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
columns.Bound(r => r.EntryDateAsString).Title("Collection Date").Filterable(false);
columns.Bound(r => r.ReportGuid).Hidden(true);
})
.ToolBar(t => t.Template(@<
text
><
label
>Search By Entry Date Range:</
label
> <
div
class
=
"row"
> <
div
class
=
"col-md-3"
>@(Html.Kendo().DatePicker().Name("startSearch").HtmlAttributes(new { PlaceHolder = "Start Date..." }))</
div
> <
div
class
=
"col-md-3"
>@(Html.Kendo().DatePicker().Name("endSearch").HtmlAttributes(new { PlaceHolder = "End Date..." }))</
div
> <
div
class
=
"col-md-1"
><
button
class
=
"k-button"
type
=
"button"
onclick
=
"filterGrid()"
style
=
"width: 100%"
>Search</
button
></
div
> <
div
class
=
"col-md-1"
><
button
class
=
"k-button"
type
=
"button"
onclick
=
"resetFilter()"
style
=
"width: 100%"
>Reset</
button
></
div
> <
div
class
=
"col-md-1"
><
button
class
=
"k-button"
type
=
"button"
onclick
=
"downloadFiles()"
style
=
"width: 100%"
>Download</
button
></
div
> </
div
></
text
>))
.Pageable(p => p.PageSizes(new int[] { 10, 25, 50, 100 }))
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row)
.Operators(o => o
.ForString(str => str.Clear()
.Contains("Contains")
)
)
)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("EntryDate").Descending())
.Read(read => read.Action("Search", "Reports"))
.PageSize(10)
)
.PersistSelection()
)