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

Hi,

 

I would like to enable horizontal scrolling but disable vertical scrolling.  Is this possible?

Thanks.

Michael
Top achievements
Rank 2
Iron
 answered on 20 Oct 2017
4 answers
357 views

Hi all,

I have a grid with custom transport in an ASP.NET MVC application that calls a Web API by URL. I would like to hide the URL when a user views the page source. Does anyone know of any methods to do this?

 

Best,

Ruben

Alex Hajigeorgieva
Telerik team
 answered on 20 Oct 2017
1 answer
91 views

I am using Chrome 61.0.3163.100

Compare the menus at 

http://demos.telerik.com/aspnet-mvc/menu

to those at

http://demos.telerik.com/kendo-ui/menu/index

The Razor menu helper produces a menu with 'twist' triangles that are much closer to menu text and look pretty awful at that spacing.  Also, the MVC example does not properly specify the #megaStore background image -- This console shows "GET http://demos.telerik.com/content/web/menu/header.jpg 404 (Not Found)"

 

Question: Is there an option or setting to use in the Razor menu helper to make the rendering more like the kendoui one ?

Ivan Danchev
Telerik team
 answered on 19 Oct 2017
2 answers
955 views

Hello,

I'm currently searching for a smart way to display the number of selected rows in a Grid.

In my grid I have a select column to select items and a second column that shows the information:

columns.Select().Width(30);
columns.Bound(item => item.Name).ClientFooterTemplate("All items: #=count#");

 

This is the corresponding aggregate for the item counter:

.Aggregates(aggregates => aggregates.Add(item => item.Name).Count())

 

What I want to archive is that the footer template is also showing the number of selected items.

Pseudocode (which is obviously not working):

columns.Bound(item => item.Name).ClientFooterTemplate("All items: #=count#<br>Selected items: #=selectedCount#")

 

The only way I found to show the selected item count is to manipulate the DOM ($(".k-footer-template td:nth-child(2)")) when the grid change event is firing.

Does anybody have a smarter solution for my problem?

Any help is appreciated!

Regards

Raphael

Raphael
Top achievements
Rank 1
 answered on 19 Oct 2017
3 answers
1.0K+ views

Hi,

I have a grid with a detail template that contain a child grid.

I receive upfront data for main and child grids.

Foreach grid I need to have an inline ajax create and foreach row an inline ajax edit.

- After some research I follow the approach suggested on http://www.telerik.com/forums/grid-bind-a-clientdetailtemplate-to-a-collection-in-parent-row.

On DetailInit it populates right the data for the child, but after kendo hits "endRequest" event... delete entirely the data populated on detailInit.

- I follow this post: http://www.telerik.com/forums/clienttemplate-loaded-from-collection-in-parent-row---prevent-request.

but the add and edit features break with this approach.

In an Ideal scenario I want a grid and child grids binded upfront from the model. and be able to add or edit in an ajax way.

 

How can I solve this issue?

Preslav
Telerik team
 answered on 19 Oct 2017
8 answers
499 views

Hi there,I want to tab through a batch edit grid and i have certain columns that are non-editable (unamed column, Ministry Group, Age Category And Annual ( i use e.closeCell in javascript for the Annual column) ). Right now, i am able to Tab through the grid though partially. The problems i am running into is

1.) When i tab through the grouped section (People Reached) of the grid, it works fine but any thing past the first 3 rows and  tabbing no longer works.

So my question ultimately is how do i make it jump to the next grouped section(People Trained) and Tab through and so on and so forth.

 

Here is my code Index.cshtml

 

01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanPeopleVM>()
02.    .Name("PlanPepole")
03.    .Columns(columns =>
04.    {
05.        columns.Bound(e => e.PeopleCategoryName).Title("").Width(154).ClientGroupFooterTemplate("Total");
06.        columns.Bound(e => e.MinistryGroupCategoryName).Title("Ministry Group").Width(2);
07.        columns.Bound(e => e.AgeCategoryName).Title("Age Category").Width(2);
08.        columns.Bound(e => e.PeopleQ1).Title("Q1").Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
09.        columns.Bound(e => e.PeopleQ2).Title("Q2").Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
10.        columns.Bound(e => e.PeopleQ3).Title("Q3").Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
11.        columns.Bound(e => e.PeopleQ4).Title("Q4").Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
12.        columns.Bound(e => e.Annual).Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
13.    })
14.    .ToolBar(toolbar =>
15.    {
16.        toolbar.Save();
17.    })
18.    .Editable(editable => editable.Mode(GridEditMode.InCell))
19.    //.Navigatable()
20.    .Events(events =>
21.    {
22.        events.DataBound("Ppg_Uneditable_ColandRow");
23.        events.SaveChanges("disableBeforeUnload");
24.        events.Edit("onEditPlanPepole");
25.    })
26.    .DataSource(dataSource => dataSource
27.        .Ajax()
28.        .ServerOperation(false)
29.        .Aggregates(aggregates =>
30.        {
31.            aggregates.Add(p => p.PeopleCategoryName).Count();
32.            aggregates.Add(p => p.PeopleQ1).Sum();
33.            aggregates.Add(p => p.PeopleQ2).Sum();
34.            aggregates.Add(p => p.PeopleQ3).Sum();
35.            aggregates.Add(p => p.PeopleQ4).Sum();
36.            aggregates.Add(p => p.Annual).Sum();
37.        })
38.        .Batch(true)
39.        .Model(model =>
40.        {
41.            model.Id(p => p.PlanPeopleID);
42.            model.Field(p => p.PeopleCategoryName).Editable(false);
43.            model.Field(p => p.MinistryGroupCategoryName).Editable(false);
44.            model.Field(p => p.AgeCategoryName).Editable(false);
45.        })
46.        .PageSize(30)
47.        .Group(groups => groups.Add(p => p.PeopleCategoryID))
48.        .Read(read => read.Action("People_Read", "PlanPeople"))
49.    )
50.)

 

JavaScrpt

01.$(function () {
02. 
03.    var grid = $('#PlanPepole').data('kendoGrid');
04. 
05.    grid.table.on('keydown', function (e) {
06.        if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {
07.            e.preventDefault();
08.            var currentNumberOfItems = grid.dataSource.view().length;
09.            var row = $(e.target).closest('tr').index();
10. 
11. 
12.            var dataItem = grid.dataItem($(e.target).closest('tr'));
13.            var field = grid.columns[col].field;
14.            var value = $(e.target).val();
15.            dataItem.set(field, value);
16.            var nextCellCol = 3;
17. 
18.            if (row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {
19.                console.log("this is col:", col);
20.                var nextCellRow;
21.                if (col === 3) {
22.                    nextCellCol = 5;
23.                }
24.                else if (col === 4) {
25.                    nextCellCol = 6;
26.                }
27.                else if (col === 5) {
28.                    nextCellCol = 7;
29.                }
30.                else if (col === 6) {
31.                    nextCellCol = 4;
32.                }
33. 
34.                if (e.shiftKey) {
35.                    nextCellRow = nextCellCol === 4 ? row : row - 1;
36.                } else {
37.                    nextCellRow = nextCellCol === 4 ? row + 1 : row;
38.                }
39. 
40.                if (nextCellRow >= currentNumberOfItems || nextCellRow < 0) {
41.                    return;
42.                }
43. 
44.                // wait for cell to close and Grid to rebind when changes have been made
45.                setTimeout(function () {
46.                    grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));
47.                });
48.            }
49.        }
50.    });
51. 
52.})

 

And i also attached an image of the grid

Thank you.

 

Preslav
Telerik team
 answered on 18 Oct 2017
7 answers
364 views

Hi!

I have the following lines in my _Layout.cshtml:

@Html.Kendo().AutoComplete().Name("search").DataTextField("Name").MinLength(3).Placeholder("Search...").DataSource(source => source.Read(read => read.Action("GetSiteInfos", "SiteInfo"))).AutoWidth(true).HtmlAttributes(new { style = "width: 50%;" }).Events(ev => ev.Select("onSiteSelect"))

and the Javascript for the selection is:

<script type="text/javascript">
        function onSiteSelect(e) {
            var selected = this.dataItem($(e.item));
            var id = selected.Id;

            $("#selectedSiteId").val(id);
        }
</script>

It's working perfectly: the value of the field 'id' is stored in a HiddenField:

@Html.Hidden("selectedSiteId")

 

Now my problem is, that I have a TabStrip in this _Layout.cshtml and I would like to show some database results for the selected Id depending on the page I choose in the TabStrip.

@Html.Kendo().TabStrip().Name("siteTabStrip").Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In))).Items(tabstrip =>
            {
                tabstrip.Add().Text("First page").Content(@Html.Partial("_FirstPartial").ToHtmlString());
                tabstrip.Add().Text("Second page").Selected(true).Content(@Html.Partial("_SecondPartial").ToHtmlString());
            }).HtmlAttributes(new { @class = "k-state-active" })

How can I pass the hidden field value to the TabStrip item? Every TabStrip page will show a partial view. These partial views should call an action with the Id as a parameter and will show us different results from database. But this TabStrip will be rendered as soon as I load the page and before using the AutoComplete!

Thanks for your help.

Ivan Danchev
Telerik team
 answered on 18 Oct 2017
3 answers
705 views
multiple custom group footer template names
   
   
   

I have my grid.

<div class="grid-scrollable">
   <div>
    @(Html.Kendo().Grid<ViewModels.Payment.BhFormExpenseRRViewModel>()
    .Name("BHFormPATHRRGrid")
    .Events(e => e.DataBound("dataBoundpath"))
    .Events(e => e.Save("onBhFormpathModelGridSave"))
    .Events(e => e.Edit("onBhFormpathModelGridEdit"))
    .Columns(columns =>
    {
     columns.Bound(p => p.Id).Hidden(true);
     columns.Bound(p => p.ECId).Hidden(true);
     columns.Bound(p => p.ExpenseCategory).ClientFooterTemplate("Total Payment Requested")
     .ClientGroupFooterTemplate("Total Expenses").EditorTemplateName("Decimal").Format("{0:c}");
     columns.Group(g => g.Title("Current Month Expenses")
      .Columns(a =>
     {
      a.Bound(c => c.ThisMonthPath).EditorTemplateName("Decimal").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
     .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
      a.Bound(c => c.ThisMonthMatch).EditorTemplateName("Decimal").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
     .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
      
     }));
     columns.Group(g => g.Title("Reduced Monthly Expenses")
      .Columns(a =>
     {
      a.Bound(c => c.ReduceExpensesBy).EditorTemplateName("Decimal").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
      .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
      a.Bound(c => c.CurrentMonthExpensesSubmitted).EditorTemplateName("Decimal").Title("AdjustedPathAmount").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
      .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
     }));
     columns.Group(g => g.Title("Prior Month Expenses")
      .Columns(a =>
     {
      a.Bound(c => c.PriorMonthMatch).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
     .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
      a.Bound(c => c.PriorMonthPath).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
     .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
     }));
     columns.Group(g => g.Title("Cumulative Expenses YTD")
      .Columns(a =>
     {
      a.Bound(c => c.YtdMonthMatch).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
     .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
      a.Bound(c => c.YtdMonthPath).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
     .ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
     }));
     columns.Command(command =>
     {
      command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });
     }).Width(200);
    })
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
    .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
    .Sortable()
    .Filterable(f => f.Operators(o => o.ForString(s => s.Clear()
     .Contains("Contains")
     .DoesNotContain("Does not contain")
     .IsEqualTo("Is equal to")
     .IsNotEqualTo("Is not equal to")
     .StartsWith("Starts with")
     .EndsWith("Ends with "))))
    .Selectable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource.Ajax().PageSize(20).Model(model => model.Id(p => p.ECId)).Model(model => model.Field(p => p.TotalProirExpensesBilled).Editable(false)).Model(model => model.Field(p => p.CurrentMonthExpensesSubmitted).Editable(false)).Model(model => model.Field(p => p.TotalExpensesYtd).Editable(false)).Model(model => model.Field(p => p.ExpenseCategory).Editable(false))
    .Model(model => model.Field(p => p.PriorMonthMatch).Editable(false)).Model(model => model.Field(p => p.PriorMonthPath).Editable(false)).Model(model => model.Field(p => p.YtdMonthMatch).Editable(false)).Model(model => model.Field(p => p.YtdMonthPath).Editable(false))
    .Aggregates(aggregates =>
    {
     aggregates.Add(p => p.ThisMonthMatch).Sum();
     aggregates.Add(p => p.ThisMonthPath).Sum();
     aggregates.Add(p => p.PriorMonthMatch).Sum();
     aggregates.Add(p => p.PriorMonthPath).Sum();
     aggregates.Add(p => p.YtdMonthMatch).Sum();
     aggregates.Add(p => p.YtdMonthPath).Sum();
     aggregates.Add(p => p.ReduceExpensesBy).Sum();
     aggregates.Add(p => p.CurrentMonthExpensesSubmitted).Sum();
    })
    .Update(update => update.Action("EditBHFormRR", "ReimbursementRequestProvider").Data("additionalInfoPath"))
    .Events(events => events.Error("errorpath"))
    .Group(groups => groups.Add(p => p.ExpenseTypeId))
    .Read(read => read.Action("BHFromExpenseGridRead", "ReimbursementRequestProvider", new { bhFormName = Model.BHFormsName, reimbursementEbsId = Model.ReimbursementEbsId, prrId = Model.PrrId, rrState = @ViewBag.RRStateRequest, serviceMonth = Model.ServiceMonth }))
    )
    )
   </div>
  </div>

 

my requirement is
change group client footer of group 1 to "Total Payment Requested" instead of "Total Expenses"
change group client footer of group 2 to "Total Match Claimed" instead of "Total Expenses"
TOTAL OF TOTAL AS "Total Billing Submitted" instead of "Total Payment Requested"

 

the issue is I have name the group client footer on custom basis.

example group 1 sum footer name should be something different than group 2 sum footer name.

 

can any one help me on this please?











Stefan
Telerik team
 answered on 18 Oct 2017
1 answer
1.6K+ views

Hi Team ,

I am trying to add Kendo dropdownlist as part of Grid one grid column using EditorTemplates  and it was successfully added but it was not binded to model and it was not  reflect in cell  which is selected from kendo dropdownlist.

 

I am usinh MVC5 and Kendo version 2015.1.429

Here is my code

.Grid<TEData.Model.Gen_Lists>().Deferred()
.Name("grdGen")
.Columns(cl =>
{
cl.Bound(u => u.TED_ENT_DATA_DAY_GEN_ID).Hidden(true);
cl.Bound(u => u.hourEnding).Width("10ex");
cl.Bound(u => u.actual).Width("10ex").Title("Actual");
//cl.Bound(u => u.Actual_Reason.reasonName).Title("Reason").EditorTemplateName("ReasonEditor").ClientTemplate("#:Actual_Reason.reasonName #");
cl.Bound(u => u.Actual_Reason).Title("Reason").ClientTemplate("#:Actual_Reason.reasonName #");
cl.Bound(u => u.actual_Reason_Notes).Title("Notes");
cl.Bound(u => u.totalCapacity).Title("Total Capacity").Width("10ex");
cl.Bound(u => u.totalCapacity_Reason.reasonName).Title("Reason").EditorTemplateName("ReasonEditor").ClientTemplate("#:totalCapacity_Reason.reasonName #");
cl.Bound(u => u.totalCapacity_Reason_Notes).Title("Notes");
cl.Bound(u => u.runState).Title("Run State").Width("10ex");
cl.Bound(u => u.runState_Reason.reasonName).Title("Reason").EditorTemplateName("ReasonEditor").ClientTemplate("#:runState_Reason.reasonName #");
cl.Bound(u => u.runState_Reason_Notes).Title("Notes");
//cl.Bound(u => u.reasonlist).ClientTemplate("#: reasonlist.reasonName#");
//cl.Bound(u => u.reasonlist.reasonCode).EditorTemplateName("ReasonEditor").ClientTemplate("#:reasonlist.reasonName #");
})
.Sortable()
//.Scrollable()
.Editable(ed => ed.Mode(GridEditMode.InCell))
.DataSource(ds =>
{
ds.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(
m => {
m.Id(u => u.TED_ENT_DATA_DAY_GEN_ID);
m.Field(u => u.hourEnding).Editable(false);
//m.Field(u => u.reasonlist).DefaultValue(ViewData["defaultReason"] as TEData.Model.Gen_Lists);
}
)
.Read(rd => rd.Action("Get_Data", "TECommon")
.Data("userInput")
);
})

 

EditorTemplates Code

@model TEData.Model.ReasonCode_Lists
@(Html.Kendo()
.DropDownListFor(m => m.reasonName)
.Name("ddlEditor")
.DataTextField("reasonName")
.DataValueField("reasonCode")
.DataSource(d=>d.Read(r=>r.Action("Get_Reason_Codes", "TECommon")))
)

I have tried some sample from  telerik and it was not helped me. Please help me

http://demos.telerik.com/aspnet-mvc/grid/editing-custom

Thanks,

Vetri.

 

 

 

 

 

Viktor Tachev
Telerik team
 answered on 18 Oct 2017
1 answer
154 views
Why virtualization of DropDownList does not work properly?

Step by step instructions on how to reproduce the problem:
1. Open DropDownList.
2. Start writing the keyword.
3. Select option.
4. Close DropDownList.
5. Open again DropDownList.
6. Start writing another keyword.
Result: From the server I get the right response. DropDwonList does not show new result. It still shows the previous.
The same propblem is on your page with example -> https://demos.telerik.com/aspnet-mvc/dropdownlist/virtualization

Nencho
Telerik team
 answered on 17 Oct 2017
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?