Telerik Forums
UI for ASP.NET MVC Forum
7 answers
856 views
I'm currently having an issue with aggregates on child grids. For the system I am currently developing, we have a grid that shows our businesses different projects. Each row expands out using the "detail template" (kendo ui detail template demo) feature to show a tabset with each tab having a sub grid. The aggregate i am trying to implement is in the invoices tab's grid for a project, i would like to have a sum of the amount of each invoice generated. I have followed the tutorials exactly (kendo ui aggregate demo) but the rows will no longer expand out and the javascript console shows the error: "Uncaught ReferenceError: sum is not defined".

The exact same code used to do the aggregation on this grid will work on the parent grid fine. I'm very unsure as to why i'm getting this error. Below i've listed out the code for the grids and attached screenshots of the grids in action.

Any help will be appreciated.

Parent grid view code:
@(Html.Kendo().Grid<Central.Models.ProjectsModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.projectCode)
            .HeaderTemplate("Project Code");
        columns.Bound(p => p.protocolNo)
            .HeaderTemplate("Protocol")
            .ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(protocolNo !== null) {#<span title='#=protocolNo#'>#=protocolNo#</span>#}#</div>");
        columns.Bound(p => p.description)
            .HeaderTemplate("Description")
            .ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(description !== null) {#<span title='#=description#'>#=description#</span>#}#</div>");
        columns.Bound(p => p.typeCode)
            .HeaderTemplate("Type");
        columns.Bound(p => p.userCode)
            .HeaderTemplate("User");
        columns.Bound(p => p.contractValue)
            .ClientTemplate("<div style='text-align: right;'>#= kendo.toString(contractValue, \"n\")#$#=currency#   </div>")
            .HeaderTemplate("<div style='float: right; margin-right: 10px;'>Contract Value</div>");        
        columns.Command(c => { c.Edit(); c.Destroy(); })
            .HtmlAttributes(new { style = "display: none;" })
            .Width(1);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Projects_Read", "Projects"))
        .Create(create => create.Action("Projects_Create", "Projects"))
        .Update(update => update.Action("Projects_Update", "Projects"))
        .Destroy(destroy => destroy.Action("Projects_Destroy", "Projects"))
        .PageSize(30)
        .Model(model =>
        {
            model.Id(p => p.projectCode);
            model.Field(p => p.projectCode).DefaultValue("#=projectCode#");
        })      
    )
    .Pageable()
    .Filterable()
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .Selectable()
    .Scrollable((scr => scr.Height(500)))
    .ClientDetailTemplateId("projectsGridDetail")
    .ToolBar(t => { t.Create(); })
    .Editable(e => e.Mode(GridEditMode.PopUp))
    .Events(e =>
    {
        e.Edit(@<text>function(e) { onEdit(e); }</text>);
    })
)
 
<script id="projectsGridDetail" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=projectCode#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Project Details").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Details.cshtml")</text>);             
                items.Add().Text("Sites").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Sites.cshtml")</text>);
                items.Add().Text("Contact").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Contacts.cshtml")</text>);
                items.Add().Text("Invoices").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Invoices.cshtml")</text>);
            })
            .ToClientTemplate()
     )           
</script>
As you can see, it uses partial views to separate the code out for the sub grids.

Invoices grid view code:
@using Kendo.Mvc.UI
 
 
<div>
    @(Html.Kendo().Grid<Central.Models.ProjectsInvoiceModel>()
        .Name("Invoices_#=projectCode#")
        .Columns(columns =>
        {
            columns.Bound(p => p.description)
                .HeaderTemplate("Description");
            columns.Bound(p => p.amount)
                .HeaderTemplate("Amount")
                .ClientFooterTemplate("Sum: #=sum# ");
            columns.Bound(p => p.ubcAmount)
                .HeaderTemplate("UBC Amount");
            columns.Command(p => { p.Edit(); p.Destroy(); })
                .Width(158);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Aggregates(aggregates => {
                aggregates.Add(p => p.amount).Sum();
            })
            .Read(read => read.Action("Invoice_Read", "ProjectsInvoice", new { projectCode = "#=projectCode#" })) // Specify the action method and controller name
            .Create(create => create.Action("Invoice_Create", "ProjectsInvoice"))
            .Destroy(destroy => destroy.Action("Invoice_Destroy", "ProjectsInvoice"))
            .Update(update => update.Action("Invoice_Update", "ProjectsInvoice"))
            .PageSize(30)
            .Model(model =>
            {
                 model.Id(p => p.projectInvoiceId);
                 model.Field(p => p.projectCode).DefaultValue("#=projectCode#");
            })          
             
        )
        .ToolBar(toolbar =>
        {
            toolbar.Create();
        })
        .Pageable()
        .HtmlAttributes(new { style = "margin: 7px 0px;" })
        .Scrollable(scr => scr.Height(200))
        .Filterable()
        .Sortable()
        .Editable(edit => {
            edit.Mode(GridEditMode.PopUp);
        })
        .ToClientTemplate()
    )
</div>
Attached files:
1. The grid when trying to expand rows while #=sum# is in the client footer template for the aggregate column.
2. The grid expanding normally without #=sum# used.
Rosen
Telerik team
 answered on 09 Dec 2016
1 answer
111 views

I have a grid that is sourced by a List of Objects within my model (local binding).  I need to have the editor for the Name column (the only column in the grid) to be a ComboxBox where they can choose from a specified list.  I got that part working, however, whenever I leave the combobox, it sets the column to the default value for the name field instead of the chosen item from the combobox.  I can not figure out what I am doing wrong.

Here is my grid:

@(Html.Kendo().Grid(Model.Locations)
    .Name("LocationsGrid")
    .ToolBar(toolbar => { toolbar.Create().Text("Add Location"); })
    .HtmlAttributes(new { style = "height: 150px;" })
    .Columns(columns =>
    {
        columns.Bound(l => l.Name);
        columns.Command(cmd => cmd.Destroy().Text("<i class='fa fa-trash-o'></i>")).Width(50);
    })
    .Scrollable()
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .DataSource(ds =>
        ds.Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Model(model => { model.Id(p => p.Id); model.Field(l => l.Name).DefaultValue("Select a Location"); })
            .Create(create => create.Action("AddLocationToProcess", "ProjectConfiguration"))
            .Destroy(destroy => destroy.Action("RemoveLocationFromProcess", "ProjectConfiguration"))
        )
        .Events(events => events.Edit("LocationsGrid_edit"))
    )

 

Here is my Editor:

@model int?
@(Html.Kendo().ComboBoxFor(model => model)
    .Name("SweepTriggeredLocationCB_" + new Random().Next())
    .DataTextField("Name")
    .DataValueField("Id")
    .Placeholder("Select Location...")
    .Suggest(true)
    .Filter(FilterType.StartsWith)
    .DataSource(ds =>
    {
        ds.Read(read => read.Action("GetAddProcessLocations", "ProjectConfiguration").Data("GetAddLocationData"));
    })
    .Value(Model.HasValue ? Model.Value.ToString() : null)
    .Events(events => events.Change("StandardComboBox_change"))
)

 

Here is the portion of my Model showing the UIHint for the Editor:

[Required(ErrorMessage = "{0} is required.")]
[NoWhiteSpace(ErrorMessage = "{0} cannot begin or end with a space.")]
[UIHint("SweepTriggeredLocationEditor")]
public string Name { get; set; }

Konstantin Dikov
Telerik team
 answered on 09 Dec 2016
1 answer
850 views

My grid has 2 aggregate Sum()  columns which display and work properly - except for when the user updates the grid amount I want the sum to dynamically update when users tab out of the cell they're editing.

I have tried a myGrid.refresh() on the grid Save event and on the grid datasource Change event. I believe its refreshing the grid but not the sums.

 

The aggregate is added with this code:

  .Aggregates(aggregates =>
          {
              aggregates.Add(expense => expense.allowedamt).Sum();
              aggregates.Add(expense => expense.expenseamt).Sum();
          }

 

and the column and clientFooterTemplates are added with this code:

columns.Bound(expense => expense.expenseamt).HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" }).Width(50)
            .ClientFooterTemplate("#= kendo.toString(sum, 'C') #").FooterHtmlAttributes(new { style = "text-align:right;" });
          columns.Bound(expense => expense.allowedamt).HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" }).Width(50)
            .ClientFooterTemplate("#= kendo.toString(sum, 'C') #").FooterHtmlAttributes(new { style = "text-align:right;" });

 

Any ideas how to get the Grid summary row values to dynamically update ?

Kostadin
Telerik team
 answered on 09 Dec 2016
2 answers
270 views

Hello

I'm using a kendo dropdownlistfor() inside a scheduler edit template, if I use just the basic dropdown everything works as expected, but if I try to use the templates for the dropdown all I get is undefined when I click to see the options of the dropdown. If I use the same dropdown directly on the page instead of in a template everything works ok with the dropdown template. Why are they not displaying correct in the scheduler edit template.

So the problem is not with the datasource, I get all values from the db, and the code should be fine since it works directly on the page. I guess the only thing wrong with then code is "data.name" when used inside a template since this gives the undefined. What should it be when used inside a template?

Code:

@(Html.Kendo().DropDownListFor(model => model.equipmentId)
                    .HtmlAttributes(new { style = "width: 240px", @class = "showOpsDiv" })
                    .DataTextField("name")
                    .DataValueField("id")
                    .OptionLabel("Välj Utrustning...")
                    .Value("-1")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetEquipment", "Home");
                        })         
                    .ServerFiltering(true);
                    })
                   .Template("<span class=\"k-state-default\"></span><span class=\"k-state-default\"><h3>#= data.name #</h3></span>")
                   .HtmlAttributes(new { data_value_primitive = "true" })
                 )     
Jonas
Top achievements
Rank 1
 answered on 08 Dec 2016
4 answers
7.0K+ views

Hi,

I have read the following in the docs:

Kendo UI Grid Integrates a responsive pager, which automatically adjusts to different screen widths and provides the ability to define which columns to be hidden on small view ports. This makes them more flexible for mobile web usage.

  • How to define a specific column to be hidden on small view ports?

I use MVC Core Version of the grid and cannot find a property for the columns to set this?

robert

Rumen
Telerik team
 answered on 08 Dec 2016
1 answer
283 views

The text on the Cancel Changes button on an InCell batch editing toolbar changes to a blue color and it is underlined, much like a visited <a> when the text-decoration is not set to none.  See attached screenshot.

How can I overwrite this in a stylesheet so that when I move move the mouse off of the button it returns back to its original styling (like the Save Button in the screenshot)?

Thanks,

Shawn

Shawn
Top achievements
Rank 1
 answered on 08 Dec 2016
1 answer
125 views

I'm evaluating the spreadsheet component for possible use and I ran into an issue with saving changes to sorted data in the spreadsheet.  I'm binding a datasource into a sheet with CRUD references to the controller.  When the data is sorted and a user edits a row, on saving the update, the wrong row in the datasource is updated/sent to the controller.  Is this a known issue?  If so, do you know when this will be corrected?

Thanks.

Scott

 

Veselin Tsvetanov
Telerik team
 answered on 08 Dec 2016
1 answer
798 views

Enum class

public class Voltage
  {
      public int Id{ get; set; }
      public string RefNo { get; set; }
      public VoltageLevel VoltageLevel { get; set; }
  }
  public enum VoltageLevel
  {
      LV = 1,
      MV = 2,
      HV = 3  
}

 

Controller

public ActionResult Voltage_Read([DataSourceRequest]DataSourceRequest request)
     {
         IQueryable<Voltage> voltage= db.Voltage;
         DataSourceResult result = voltage.ToDataSourceResult(request, voltage=> new {
             Id = voltage.Id,
             RefNo = voltage.RefNo,
             VoltageLevel = voltage.VoltageLevel,
         });
         return Json(result);
     }

 

View

@(Html.Kendo().Grid<entities.voltage>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.RefNo);
columns.Bound(c => c.VoltageLevel); //here the voltagelevel didnt show.
})

 

 

Marin Bratanov
Telerik team
 answered on 08 Dec 2016
1 answer
112 views

Kendo Grid creates some dynamic id like 90gaedac-c800-4582-b530-4f7145383554 and they sometimes start with a number, which is against the standard.

https://css-tricks.com/ids-cannot-start-with-a-number/

Is there a way to fix this behaviour?

Konstantin Dikov
Telerik team
 answered on 08 Dec 2016
3 answers
327 views

Hello, I'm using a cascading combobox in an editor template.  The Id is set dynamically to avoid conflict with multiple instances of the editor on the same page.  So for example I might setup the editor like this:

 

@Html.EditorFor(o => o.MatterNum, "MatterComboBox", new { ControlId = "upload_Matter" })

 

It sets the Id dynamically and that works great ( see below ). The problem I'm having is with cascading, because the parent combobox is also dynamic, so I don't know what the ID will be in my additional data method.  I need to be able to somehow pass the ID of the parent combobox when setting up the child.  Here is how my child combo is defined (the parent is very similar):

 

@(Html.Kendo().ComboBoxFor(o => o)
          .DataTextField("MatterNumName")
          .DataValueField("MatterNum")
          .Placeholder("Select Matter")
          .HtmlAttributes(new { id = @ViewData["ControlId"], style = "width: 100%" })  
          .Filter("contains")
          .AutoBind(true)
          .MinLength(1)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetFilteredMatters", "ClientMatter")
                      .Data("onAdditionalMatterData");
              })
                  .ServerFiltering(true);
          })
)

 

I've come at this from a few angles but coming up short each time. 

1. I can set the child/parent IDs to be similar so I could just infer the parent Id from the child.  However I haven't found a way to get the child combobox Id inside the onAdditionalMatterData js function, it seems to only contain the filter data (which I also need). If there was a way to get the sending control information out of that fitler object I think it would solve my issue.

2. I thought maybe I could pass the Id along from the template view to the onAdditionalMatterData function, something like this:

 .Data("eBillReady.ClientMatterLookups.onAdditionalMatterData('parentId')");

but I'm not sure how to do that without losing the filter data which is then no longer passed, also I would obviously need the name to populate dynamically perhaps from the viewdata.

3. I think if I dynamically set "CascadeFrom", then that may cause the Id to be part of that filters object passed to onAdditionalMatterData but I didn't get anywhere with that.  Maybe setting that manually in the page load would work?

 

 

Ivan Danchev
Telerik team
 answered on 07 Dec 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?