Telerik Forums
UI for ASP.NET MVC Forum
1 answer
224 views

Hello,

are there any examples on how to use the Breadcrumb control with MVC Actions, and maybe multiple root items to accomodate an application structure with views and sub-views?

So far we were not able to implement the Breadcrumb into out application, neither by BindToLocation nor by defining items explicitly; the navigation/routing always breaks in some part or another.

 

 

Kind regards.

 

 

Aleksandar
Telerik team
 answered on 14 Oct 2020
3 answers
9.8K+ views
Hi,

I would like to set Kendo UI MVC Grid Column width to auto size.

Anybody can please help me in this.

--Satish
Michael
Top achievements
Rank 1
 answered on 13 Oct 2020
3 answers
1.7K+ views

Hi Kendo Team,

We have the following issues with radio button/checkboxes in a Grid:

1) In our grids, we have radio buttons or checkboxes for selection of records. However, on sorting or filtering, the selections are lost. Please advise how to maintain selections.

2) We have a grid which has is a bound column with custom template of a checkbox like so:

columns.Bound(m => m.Indicator)
            .Title("Is Indicator")
            .Template(@<text></text>)       
.ClientTemplate(
                                            "<input name='Indicator-#=(Id)?Id:uid#' id='Indicator-#=(Id)?Id:uid#' type='checkbox' #= Indicator ? checked='checked':'' # class='k-checkbox bind-checkbox'  data-column-key='Indicator' />" +
                                            "<label class='k-checkbox-label' for='Indicator-#=(Id)?Id:uid#'></label>" +
                                            "<input name='view-value-#=(Id)?Id:uid#' type='hidden' value='#=Indicator#'>")
                                            .Width(80);

When this grid is in a full page, the filtering/sorting maintains the checkbox selection. However, when this grid is in a kendoWindow popup, the selections are not maintained. Please advise.

Thanks.

 

Eyup
Telerik team
 answered on 13 Oct 2020
2 answers
1.5K+ views

I am trying out fairly basic databinding with hard coded data using Kendo Grid using MVC - ASP.NET Core. The Grid renders fine and the .read method is called. It returns JSON however, the data does not display in the grid. I verified no errors related to aspnet-mvc.js script. The required scripts are listed only once and in the correct order. Help appreciated. I tried using JsonResult. No luck. 

 

@using Kendo.Mvc.UI
@model IEnumerable<GridPortal.Web.Models.Company>
 
  <script src="~/lib/kendo/2020.1.406/js/kendo.all.min.js"></script>
  <script src="~/lib/kendo/2020.1.406/js/kendo.web.min.js"></script>
  <script src="~/lib/kendo/2020.1.406/js/kendo.aspnetmvc.min.js"></script>
 
 
  <div style="width:100%;height:60%">
   @(Html.Kendo().Grid<GridPortal.Web.Models.Company>() .Name("BindGridUsingRead")
   .Columns(columns => {
   columns.Bound(p => p.Id).Width(15).Title("ID").Filterable(false);
   columns.Bound(p =>  p.Name).Title("Name").Width(30).Filterable(false);
   columns.Bound(p =>  p.CompanyId).Title("CompanyID").Width(15).Filterable(false);
   })
  .Scrollable()
  .Pageable()
  .Filterable(ftp => ftp.Mode(GridFilterMode.Row))
  .Resizable(resize => resize.Columns(true))
  .HtmlAttributes(new { style = "height: 100%" })
  .Selectable()
  .DataSource(dataSource => dataSource
  .Ajax()
  .Model(model => model.Id(p => p.Id))
  .ServerOperation(false)
  .Read(read => read.Action("BindGrid", "Home"))) )
  </div>
public ActionResult BindGrid([DataSourceRequest] DataSourceRequest request)
{
  var company = new List<Company>();
  company.Add(new Company
  {
    CompanyId = 102,
    Id = 1,
    Name = "John Smith"
  });
            
DataSourceResult result = company.ToDataSourceResult(request);
return Json(result);       
}

 

public void ConfigureServices(IServiceCollection services)
{
  services.AddControllersWithViews();
  services.AddKendo();
  services.AddMvc().AddNewtonsoftJson(o =>
  {
o.SerializerSettings.ReferenceLoopHandling =  ReferenceLoopHandling.Ignore;
            }).SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Version_3_0);
}
GalaxyDev
Top achievements
Rank 1
 answered on 12 Oct 2020
10 answers
1.5K+ views

Hi all.

I am looking for a way to pass filter criteria to my read method. E.g. the resource list, the startdate and the end date.
There is a thread solving this for a SignalR bound grid. But I don't see how to do it with the scheduler

Any ideas?

Kind regards

Bernd

Christine
Top achievements
Rank 1
Veteran
 answered on 09 Oct 2020
6 answers
1.4K+ views

Hi,

I am using a Telerik MVC Grid and I am trying to get multiple clickable icons in one column. Did manage to do this via

columns.Command(command => {
                 command.Custom("View").Click("view").IconClass("k-icon k-i-preview k-i-eye");     

                 command.Custom("Modify").Click("modify").IconClass("k-icon k-i-track-changes"); });

What I really want to achieve is to do this not via command, but in a normal column, using own icon with "onclick" event.

Did try this, but does not really work.

columns.Template(@<text><span class='viewicon' onclick='view'><span class='modifyicon' onclick='modify'></text>)

When I tried : columns.Template(@<text><span class='viewicon' onclick='view'></text>), the event does not get attached to the icon.

Maybe you have some useful input on the topic. 

Thanks a lot!

Yih Wern
Top achievements
Rank 1
Veteran
 answered on 09 Oct 2020
4 answers
581 views

Hi,

 

I currently have a scheduler setup that is loaded within a template.
The problem is if I try to add a EventTemplateId to the scheduler within the template with the fluent interface, it will break because the prefixed hash is not escaped. Normally this is not a problem but it's my understanding that within templates if using Ids for selectors the hash needs to be escaped
I've attached a screenshot of the error I receive in the console that should hopefully make things clearer.

 

Please let me know if i can help any further

 

Thanks 

Thomas 

 

Here is how my scheduler is configured

01.@(Html.Kendo().Scheduler<TelerikScheduleViewModel>()
02.      .Name("staffAvailability")
03.      .Height(300)
04.      .HtmlAttributes(new { data_bind = "bindDate:start, filterBy:Staff, visible:Staff.length" })
05.      .Timezone("Europe/London")
06.      .Mobile(MobileMode.Auto)
07.      .MajorTick(120)
08.      .Editable(false)
09.      .ShowWorkHours(true)
10.      .Footer(false)
11.      .AutoBind(false)
12.      .Views(views =>
13.      {
14.          views.TimelineView(timeline =>
15.          {
16.              timeline.Footer(false);
17.              timeline.Groups(group => group.Resources("StaffResources").Orientation(SchedulerGroupOrientation.Vertical));
18.              timeline.EventTemplateId("some-event-template");
19.          });
20. 
21.      })
22.      .DataSource(dataSource => dataSource
23.                      .ServerOperation(false)
24.                      .Events(e => e.Change("staffOnChange").RequestStart("staffRequestStart"))
25.                      .Read(read => read.Action("ListStaffSessions", "Calendar").Data("getStaffAttendance"))
26.      ).Events(e => e.DataBound("dataBoundAttendanceControl").DataBinding("dataBindingAttendanceControl"))
27.    )
Veselin Tsvetanov
Telerik team
 answered on 09 Oct 2020
1 answer
884 views

I have a requirement to show total of column value on footer of the grid. I have created method to calculate total for each column and calling the same method on grid data bound.

I have applied paging in kendo grid, so while changing page the total value also getting changed, means the total in footer showing only for particular page records.

But i have requirement to show total value of column for all records in footer even if paging is there.

function CalculateTotal() {

        var currentDataItem = $("#gridLiabilitySchedules").data("kendoGrid").dataItem($(this).closest("tr"));
        for (var i = 0; i < grid.dataSource._data.length; i++) {
            totalOriginalBudget = totalOriginalBudget + grid.dataSource._data[i]["OriginalBudget"];
            totalAwardValue = totalAwardValue + grid.dataSource._data[i]["AwardValue"];
            totalBuyingGainLoss = totalBuyingGainLoss + grid.dataSource._data[i]["BuyingGainLoss"];
            totalCurrentBudget = totalCurrentBudget + grid.dataSource._data[i]["CurrentBudget"];}}

 

    function LiabilitySchedulesGrid_DataBound(e) {
        $('#hdnLiabilitySchedulesremovedata').val(false);
        CalculateTotal();
        $('#hdnLiabilitySchedulesGridValCount').val($('#gridLiabilitySchedules').data('kendoGrid').dataSource.total() == 0 ? "" : "1");
    }

 

Please provide me a solution to show total of column value for all records in footer of grid with paging.

 

Thanks

 

Alex Hajigeorgieva
Telerik team
 answered on 08 Oct 2020
2 answers
508 views

I have two dropdowns, the second "cascading" from the first.  This works fine except that when the user first goes into the page, the model has the values for the first and second dropdowns (Model.ProgramID and Model.StrategyID).  The first dropdown selects the correct item in the list, but the second dropdown (the cascade one) does not automatically select the item equal to the value from the model, it just selects the first item in the list.  If I turn cascading "off" and just load them without cascading stuff set, they both get set to the correct selected items in their respective dropdowns based on the values in the model.

<div class="form-input-group">
    <label>Program</label>
    @(Html.Kendo().DropDownList()
    .Name("ProgramID")
    .DataTextField("Display")
    .DataValueField("Value")
    .HtmlAttributes(new { style = "width:100%" })
    .OptionLabel("Select")
    .DataSource(s =>
    {
        s.Read(r =>
        {
            r.Action("RemoteDataSource_GetFirmPrograms", "DropDownList", new { userAccountID = Model.UserAccountID, firmID = Model.FirmID });
        });
    })
    .Height(290)
)
</div>
 
<div class="form-input-group">
    <label>Strategy</label>
    @(Html.Kendo().DropDownList()
    .Name("StrategyID")
    .DataTextField("Display")
    .DataValueField("Value")
    .HtmlAttributes(new { style = "width:100%" })
    .OptionLabel("Select")
    .DataSource(s =>
    {
        s.Read(r =>
        {
            r.Action("RemoteDataSource_GetFirmStrategies", "DropDownList").Data("filterStrategies");
        })
       .ServerFiltering(true);
    })
    .Height(290)
    .AutoBind(true)
    .CascadeFrom("ProgramID")
)
</div>
Robert
Top achievements
Rank 1
Veteran
 answered on 08 Oct 2020
8 answers
1.9K+ views
When starting or converting a project to a Kendo MVC project, the css and js are copied into a "kendo/(build#)" folder within the "Content" and "Scripts" folders respectively.

Your documentation on using MVC bundling with Kendo works just fine. My only issue is it requires the css/js to be in the root "Content" and "Scripts" folders and not where they are put by default.

I'm just trying to understand this because the project layout conflicts with your documentation. I have tried the bundling when the files are where the wizard puts them and I could not get it to work. Are we supposed to just manually copy/dupe the content each release?

Ideally a nuget package for the MVC wrappers would be used, but I just want to know how to best work around the way it currently is.
Dimitar
Telerik team
 answered on 08 Oct 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?