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

I have a field that can be a fairly long string. I wanted it to show as a textarea instead of as an input. How can this be accomplished?

I've found AJAX implementations but the same structures aren't working in the MVC context. 

Georgi
Telerik team
 answered on 20 Oct 2017
2 answers
568 views

I'm using the recommended approach to using Kendo Widgets in a grid Column ClientTemplate from here: https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template

PROBLEM: The DropDownList I am attempting to use only appears for the first row - all other rows simply show a textbox.  In addition, when I attempt to select an item in the DropDownList, I get a select menu, and a textbox above it with the value "0."

 

VIEW:

@(Html.Kendo().Grid(Model.ProjectViewModels)
    .Name("projectsGrid")
    .ToolBar(tools => tools.Create().Text("Add Project"))
    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden();
        columns.Bound(a => a.ProjectCategoryTypeId)
            .Title("High Level Category")
            .ClientTemplate(
                Html.Kendo().DropDownList()
                    .Name("ProjectCategoryTypeId")
                    .DataValueField("Value")
                    .DataTextField("Text")
                    .BindTo(Model.ProjectCategoryTypes)
                    .HtmlAttributes(new { @class = "templateCell" })
                    .ToClientTemplate()
                    .ToHtmlString())
            .Sortable(true);
 
 
 
        columns.Command(command => command.Destroy()).Width(100);
    })
    .Events(ev => ev.DataBound("initTemplates"))
    .DataSource(dataSource => dataSource
        .Ajax()
        //.Events(e => e.Change("initTemplates"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
        .ServerOperation(false)
    )
)

 

SCRIPT:

// this approach works, but only for the first row...
function initTemplates(e) {
    $(".templateCell").each(function () {
        eval($(this).children("script").last().html());
    });
}
Stefan
Telerik team
 answered on 20 Oct 2017
1 answer
126 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
333 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
84 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
943 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
997 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
488 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
339 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
694 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
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?