Telerik Forums
UI for ASP.NET MVC Forum
23 answers
1.9K+ views

I have a grid which displays a summary of data along with totals and subtotals.

Each cell value has a link that enables a user to 'drill-down' to the individual records , by making a JavaScript call via a ClientTemplate.

I want to add this drill-down functionality to the sub-total rows, but I need to pass the value of the aggregating field (in my case the patient class field). However, I'm not able to reference this field in the ClientGroupFooterTemplate.

The ClientTemplate:-

 

ClientTemplate("<a href='javascript:showData(\"#= PATCLASS #\",\"#= CONSPEF #\",\"p4p\")'> #= _4p #</a>")

 

The ClientGroopFooterTemplate:-

ClientGroupFooterTemplate("<a href='javascript:showData(\"-X-\",\"-X-\",\"-X-\")'>#= sum  #</a>")

This works passing a string ("-X-" - which shows all values), but I need to pass the patient class value relating to the sub-total.  How can I do this?

Thanks

Vinod
Top achievements
Rank 1
 answered on 18 Sep 2018
9 answers
1.2K+ views

I am opening a template via the Popup Editor on a Kendo Grid.  I would like to be able to access the Model to conditionally render markup depending on the value of a property. 

Here is a partial view of the html in the template:

@Html.HiddenFor(m => m.IsCopy)
 
    <table>
        <tr><td colspan="2" align="center"><h4 class="text-info"> Pipe Details
            @{if (Model.IsCopy == true)
                {
            @Html.Label("Copy", new { id = "lblCopy", style = "display:none; color:red" })
                    }
                }
              </h4></td></tr>

</table>

When I inspect in the browser, the hidden field IsCopy is true:

<input name="IsCopy" id="IsCopy" type="hidden" value="true" data-val-required="The IsCopy field is required." data-val="true" data-bind="value:IsCopy">

But the html for Label "Copy does not render.

Carolyn
Top achievements
Rank 1
 answered on 17 Sep 2018
1 answer
210 views

I found an example using an older code base of kendo that allows for HTML content inside of a diagram but seems to have been removed under current release (see link below).  Is there a way to add HTML content to a diagram? 

https://jsfiddle.net/Orbifold/mfcar358/

Second question I have is how to do a newline character inside content to split text on two rows?  I tried \r\n, etc. but nothing works.

 

var diagram = $('#diagram')
            .kendoDiagram({
                shapes: [{
                    width: 150,
                    height: 100,
                    content:{
                        text:"I want to split this\r\n into two rows",
                        align: "center middle"
                    }
                }]
            })
            .getKendoDiagram();
Tsvetina
Telerik team
 answered on 17 Sep 2018
2 answers
7.0K+ views
When rendering a grid using the HTML helper, the grid (k-grid-content) has a style height attribute of 200px. This only seems to occur when the grid is scrollable and or when grouping is allowed. How do I set the height to a custom value? I have tried adding a custom.css with the class k-grid-content set to a custom height, but this does is overridden by the inline style. I cannot find where this style is being set. The container div for the grid is set to 500 px.
Dimo
Telerik team
 answered on 17 Sep 2018
4 answers
1.4K+ views

 i have a Telerik grid with the following code.

@(
            Html.Kendo().Grid<IMCC.PAS.Models.ProjectViewModel>()
            .Name("ProjectsGrid")
            .Scrollable(scr => scr.Height("auto"))
            .Columns(columns =>
            {
                columns.Template(t => { }).Title("S No").ClientTemplate("#=renderNumber()#").Width("60px");
                columns.Bound(c => c.project_no).Width(100);
                columns.Bound(c => c.title);
                columns.Bound(c => c.start_date).Width(120);
                columns.Bound(c => c.finish_date).Width(120);
                columns.Bound(c => c.project_status).Width(100);
                columns.Bound(c => c.project_type).Width(130);
                columns.Bound(c => c.project_manager).Width(120);
 
     
                columns.Command(command => { command.Custom("EditClientsOfProject").Click("EditClientsOfProject").Text("Clients"); }).Width(90);
                columns.Command(command => { command.Custom("editProject").Click("EditProject").Text("Edit"); command.Destroy().Text("Del"); }).Width(160);
            })
            .Events(ev => ev.DataBinding("onDataBinding"))
            .ToolBar(toolbar =>
            {
                toolbar.Custom().HtmlAttributes(new { id = "RegisterProject", title = "Register" });
            })
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.id))
                .Read(read => read.Action("Projects_Read", "Projects"))
                .Destroy(destroy => destroy.Action("Project_Destroy", "Projects"))
            )
        )

 

and I have linked a context menu with this grid like below.

@(
            Html.Kendo().ContextMenu()
            .Name("menu")
            .Target("#ProjectsGrid")
            .Events(ev => { ev.Select("onSelect"); })
            .Orientation(ContextMenuOrientation.Vertical)
            .Animation(animation =>
            {
                animation.Open(open =>
                {
                    open.Fade(FadeDirection.In);
                    open.Duration(500);
                });
            })
            .Items(items =>
            {
                items.Add().Text("Show Clients");
                items.Add().Text("Edit");
                items.Add().Text("Delete");
            })
        )

I want to capture the click of the context menu items like below.

function onSelect(e) {
        if (e.item.textContent == "Show Clients") {
            EditClientsOfProject(e.target);
        }
        else if (e.item.textContent == "Edit") {
            alert("Edit");
        }
        else if (e.item.textContent == "Delete") {
            alert("Delete");
        }
    }

EditClientsOfProject function is supposed to work on the grid row for which user selected the "Show Clients" option. How do I pass the current row in "e" as argument to EditClientsOfProject function from onSelect event handler? 

 

Eyup
Telerik team
 answered on 17 Sep 2018
1 answer
134 views

Hi,

 

I started updating the Telerik.UI.for.AspNet.Mvc5 nuget package today and it takes forever. The problem is that I have a very slow connection to our source repository and the package contains a huge amount of files that needs to be added to source control. The majority of these files are files that we are not using in our application since we are not offering the option of switching theme but has defined our own. Would it be possible to move the source and theme files to separate packages and only keep the core files and the default theme in the main package?

 

That would help me a lot.

 

Regards,

Emil

Veselin Tsvetanov
Telerik team
 answered on 14 Sep 2018
1 answer
102 views

I'm having an issue with the ASP.Net MVC wrappers for Kendo. 

 

I'm using "@progress/kendo-ui": "2018.2.806" via npm, and the Visual Studio MVC Plugin version 2018.1.221.

I'm also using the SASS theme via "@progress/kendo-theme-default": "2.54.1".

This is a change from using older versions of the library and the LESS themes. An issue I'm running into is paged grids that used to auto-size to full height are not. (These grids are also scrollable to facilitate horizontal scrolling). 

I've tried combinations of HtmlAttributes(new {style = "height: auto"}) and Scrollable(s => s.Height("auto")) but the k-grid-content section keeps having an element specific style set on it specifying the height at a fixed value. This is a problem if the grid loads in a filtered view with fewer rows (the height gets set to the max height of three rows) then a filter is removed and more data loads (the grid remains at a height of three rows).

Is there anything I'm missing to try? I don't want to have to write custom js for each grid to remove that style and set it to `auto`.

IT Dept
Top achievements
Rank 1
 answered on 14 Sep 2018
6 answers
798 views

How can I change the info text on the pager bar so instead of saying 1 - 10 of 219 items it says Page 1 of 21"

The documentation seems to suggest this is possible via the "Of" property, but I can only make it show the row count or nothing.

-------------------

The Messages method configures all messages displayed by the pager. Use this setting to override the default messages or to localize the pager.

The available messages are:
Display
Empty
First
ItemsPerPage
Last
Next
Of
Page
Previous
Refresh
Display
The Display method sets the pager info message. By default, it is set to "{0} - {1} of {2} items". The placeholders represent the first item in the page, the last item in the page, and the total number of items in the Grid.
The following example demonstrates how to set the display message.

Michael
Top achievements
Rank 1
 answered on 14 Sep 2018
3 answers
82 views

Is there a way to simply bind a clienttemplate [String] to a model? I'm not talking about any particular control.

@Html.Kendo.Bind("<a href='/Foo/# =ID #'>link</a>", Model);

Neli
Telerik team
 answered on 14 Sep 2018
3 answers
317 views

     Hi, here is the problem. I have mvc chart set in razor view. Here is the definition:

    <div class="demo-section k-content wide">
                @(Html.Kendo().Chart<List<Novolyze.VOD.WebUI.Models.ChartSource>>()
                .AutoBind(false)
                .DataSource(dataSource => dataSource            
                .Read(read => read
                    .Action("DailyStatisticJson", "Production")
                    //.Data("getFilterParams")
                )
                .Group(group => group
                    .Add<string>("SeriesName"))
            
                )           
                .Name("dailyStatisticChart")
                .Title("Daily Statistic")
                .Zoomable(zoomable => zoomable
                    .Mousewheel(mousewheel => mousewheel
                        .Lock(ChartAxisLock.Y))
                    .Selection(selection => selection
                        .Lock(ChartAxisLock.Y)))
                .Pannable(pannable => pannable
                    .Lock(ChartAxisLock.Y))
                .Legend(legend => legend
                    .Visible(false)
                )
                .SeriesDefaults(seriesDefaults => seriesDefaults
                    .Column()
                .Stack(true)
                )
                .Series(series => series
                    .Column(model => model).Field("Value").CategoryField("Category").ColorField("ColorName")
                )                    
                .CategoryAxis(axis => axis
                    .Date()
                    .BaseUnit(ChartAxisBaseUnit.Days)
                    .Labels(labels => labels
                        .Rotation("auto"))
                )                    
            )

I also have contlroler method:

public ActionResult DailyStatisticJson([DataSourceRequest] DataSourceRequest request)
{    

  //Some logic and return datasource JSON, that works well

}

I want to refresh the chart with new data based on some external filtering. I have the following Javascript code that should do the trick, but it doesn't

 function executeFilter(filters) {  
        var chart = $("#dailyStatisticChart").data("kendoChart");
        if (chart) {
            chart.dataSource.filter(filters);
            //chart.dataSource.read();                   
        }
    }    

The point is: if I call just filter() and not the read(), chart data disappear, controller is not called. If I uncomment read(), then controller is called, but filter property is empty in the controller parameter. I can find the workaround to pass additional data with uncommenting Data to datasource definition but then I will use another param in controller, not DatasourceRequest, which will be uglier. Is there a solution with filter?

Tsvetina
Telerik team
 answered on 13 Sep 2018
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
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?