Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.1K+ views

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")
               
          )
          )
Tsvetomir
Telerik team
 answered on 03 Oct 2018
2 answers
152 views

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

 

 

Michael
Top achievements
Rank 1
 answered on 02 Oct 2018
1 answer
9.0K+ views

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.

Ianko
Telerik team
 answered on 02 Oct 2018
1 answer
204 views

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

 

 

Preslav
Telerik team
 answered on 01 Oct 2018
3 answers
124 views

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

Viktor Tachev
Telerik team
 answered on 01 Oct 2018
3 answers
457 views

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

Rumen
Telerik team
 answered on 01 Oct 2018
1 answer
109 views

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.

 

Konstantin Dikov
Telerik team
 answered on 01 Oct 2018
4 answers
1.1K+ views

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

Georgi
Telerik team
 answered on 01 Oct 2018
4 answers
1.6K+ views

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

 

Stefan
Telerik team
 answered on 01 Oct 2018
3 answers
399 views

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()
                        )
Jason
Top achievements
Rank 1
 answered on 28 Sep 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?