Telerik Forums
UI for ASP.NET MVC Forum
2 answers
111 views

Hi,

I am trying to create logic to allow clicking in the Badge, based on the recommendations in https://www.telerik.com/forums/badge-click-to-execute-code-in-controller-class, to run code in the Controller but needs some direction. 

The Controller is called (using ajax call in example 1) when clicking on "Get total" (in example 2) but what to use in the badge to make it execute? Not the name of it, right? (already tried this and nothing happens...)

 

Please describe on how to invoke the ajax call from a badge or tell me if badges cannot  be used in this way. I would also like to know the rationale in not embedding native click logic to the badge. I mean, if showing an aggregated value of something, why wouldn't you want to link to the data the value is calculated from?

 

 

 

 

 

 

Example 1

<script>
    $("#badge-total").click(function () {
        $.ajax({
        url: '@Url.Action("ShowTotalGrid")', 
        dataType: "json", 
        type: "POST", 
        contentType: 'application/json; charset=utf-8', 
        cache: false, 
        data: {}, 
        success: function (data) {           
            if (data.success) {
                alert(data.message);
            }
        },
        error: function (xhr) {
            alert('error');
        }
    });
});
</script>

 

 

Example 2

<div id="badge-total">
    Get total
</div>

 

/Regards Anders

Anders
Top achievements
Rank 1
Iron
Veteran
Iron
 answered on 24 Feb 2021
7 answers
426 views

In this case I have a grid with a few locked/fixed columns, followed by a couple of groups of columns under one header. Something like this:

01.@(Html.Kendo().Grid<GradeBusinessLayer.ViewModels.Assets.ElectricalCableDetailViewModel>()
02.    .Name("grid")
03.    .Columns(columns =>
04.    {
05.        columns.Bound(d => d.Object).Width(200).Locked(true).Lockable(false);
06.        columns.Bound(d => d.Revision).Width(200).Locked(true).Lockable(false);
07. 
08.@* ==== BLOCK: Info ====*@
09.      columns.Group(grp4376 => grp4376
10.        .Title("Info")
11.        .HeaderTemplate("<div style='display:flex'><span class='k-link' style='text-overflow: ellipsis;white-space: nowrap;overflow: hidden;''>Info</span><span> <i class='fa fa-eye' onclick='hideGroup(this)' aria-hidden='true'></i></span></div>")
12.        .Columns(col4376 => {
13.          col4376.Bound(d => d.Alias).Width(200);
14.          col4376.Bound(d => d.SubClass1Name).Width(200);
15.          col4376.Bound(d => d.CheckedBy).Width(200);
16.          col4376.Bound(d => d.CheckedDate).Width(200);
17.          .
18.          .
19.          .

The column group should be collapsible. This is intended to be different from hiding the group, because the user should be able to uncollapse it again. I could not find a standard way to do this, so I devised my own, with which I'm partially satisfied.

How I did it: The group now has a caption, followed by an eye (from font-awesome, but this could of course by any glyph). When the eye is clicked, a javascript function replaces the eye with a slashed eye and hides all the columns, except for the first. This is that function:

01.function hideGroup(vis)
02.{
03.  vis = $(vis);
04.  var grd = $("#grid").data("kendoGrid");
05. 
06.  var cell = vis.closest("th");
07.  var row = cell.closest("tr");
08.  var grpIdx = $("th", row).index(cell);
09. 
10.  var grpCol = undefined;
11.  for (i=0; i<grd.columns.length; i++)
12.  {
13.    if (typeof grd.columns[i].columns !== "undefined")
14.    {
15.      if (grpIdx-- === 0)
16.      {
17.        grpCol = grd.columns[i];
18.        break;
19.      }
20.    }
21.  }
22. 
23.  if (typeof grpCol === "undefined")
24.    return;
25. 
26.  if (vis.hasClass("fa-eye"))
27.  {
28.    vis.removeClass("fa-eye");
29.    vis.addClass("fa-eye-slash");
30.    for (i=grpCol.columns.length-1; i>0; i--)
31.      grd.hideColumn(grpCol.columns[i]);
32.  }
33.  else
34.  {
35.    vis.removeClass("fa-eye-slash");
36.    vis.addClass("fa-eye");
37.    for (i=grpCol.columns.length-1; i>0; i--)
38.      grd.showColumn(grpCol.columns[i]);
39.  }
40.}

 

So first the header cell is discovered. Then the index of that header cell in the row. Then the columns are enumerated until the column with that index is found, not counting the columns that don't have subcolumns (those are the fixed columns and they are in a different <tr>, it turns out, so I cannot use the grpIdx straight away). When the column object has been identified, it can be used to iterate its columns to show/hide them as intended.

My questions:

  • Is there a standard or more proper way to do this? (If so I guess I want to use that instead, and the next questions are rendered irrelevant.)
  • Is there a better way to locate the group column? The way I do it now is very cumbersome, indirect and depending on the way the grid is rendered now.
  • When the eye is clicked, the header cell is first selected, before the onclick is fired. However, when the header is wide and partiallly invisable, it is scrolled into view. This moves the eye and apparently the onclick event is not fired. Is it possible to make the click happen before the select? Or instead make the group header not selectable, while maintaining the "eye functionality"?

Anton Mironov
Telerik team
 answered on 23 Feb 2021
5 answers
235 views

Hi,

 

I have Badges that display different sums of data. I would like to filter a Grid based on clicking a them.

Is it possible to execute code in Controller class when clicking on a Badge, or do I have to rethink this? Can you please point me in the right direction?

Regards, Anders

 

 

Anders
Top achievements
Rank 1
Iron
Veteran
Iron
 answered on 23 Feb 2021
10 answers
2.7K+ views
I have a Kendo Grid with pop-up editing. 

How do I specify that only some of the columns are editable?  Or that some are read-only?

I have tried this in the viewmodel, but it doesn't seem to affect the Edit Popup:

The Display annotation does work however.
          [Display(Name = "Type Id")]
       [Editable(false)]
       public int ReportTypeId { get; set; }

Tsvetomir
Telerik team
 answered on 22 Feb 2021
4 answers
118 views

hi.

when i copied a text from MsWord to Editor, the url of FootNote content changed and not working.

i attached a pic of rendered editor text.

plz help

thanks

 

Martin
Telerik team
 answered on 22 Feb 2021
5 answers
688 views

I'm new in the ASP.NET MVC development.

After I add the dataset under the model folder.

I create an empty Controller and want to add view inside Index() method.

I choose Template as Create, and error message come up

"There was an error running the selected code generator:

'an error occurred while retrieving package metadata for

'EntityFramework.6.1.3' from source 'nuget.telerik.com''"

Could you tell me how to add a view, if need more details, plz let me know!!

 

Neli
Telerik team
 answered on 22 Feb 2021
7 answers
591 views

HI

I have found the sub menu items will be hidden behind the container  while Menu was placed within PanelBar(overflow: auto). 
SplitterPane have the same unexpected situation too.

Why the Menu do not just popup the sub menu items as ContextMenu ? 

Menu / Context Menu

https://demos.telerik.com/aspnet-mvc/menu/context-menu
I hope the next (or next next) release will fix this elementary problem.

*z-index have no effects (because containers overflow: auto).
*containers autoflow: auto are required in my application (don't ask me use overflow: visible or larger width).

See attachment.

Best regards

Chris

 

 

 

Aleksandar
Telerik team
 answered on 22 Feb 2021
2 answers
112 views

I would like to add DateTimePicker into row dynamically while adding new row on the clicking event. Also While doing so previous data gets cleared.

 

Here is code below:

@(Html.Kendo().Grid(Model.InOutTimes)
                    .Name("InOutTimesGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.ID).Hidden();
                        columns.Bound(c => c.NoteID).Hidden();
                        columns.Bound(c => c.InDateTime).ClientTemplate(Html.Kendo().DateTimePicker()
                                                            .Name("InDateTime")
                                                            .Min(new System.DateTime(1970, 1, 1, 0, 0, 0)) // Epoch
                                                            .Format("MM-dd-yyyy HH:mm")
                                                            .TimeFormat("HH:mm")
                                                            .ToClientTemplate().ToString()

                                                        );
                        columns.Bound(c => c.OutDateTime).ClientTemplate(Html.Kendo().DateTimePicker()
                                                            .Name("OutDateTime")
                                                            .Min(new System.DateTime(1970, 1, 1, 0, 0, 0)) // Epoch
                                                            .Format("MM-dd-yyyy HH:mm")
                                                            .TimeFormat("HH:mm")
                                                            .ToClientTemplate().ToString()
                                                        );
                    })
                    .DataSource(datasource => datasource.Ajax().Read("InOutTimes_Read", "ClientNotesVirtual"))

 

Am I missing something. Please help!!.

Sagar
Top achievements
Rank 1
 answered on 19 Feb 2021
1 answer
87 views

I have been using MVC grids for quite some time now. Only recently noticed that the page number shows up between the paging buttons. It increases and decreases as paging buttons are clicked. Please see the attached image. Is this a bug or something wrong in my code. We are using the latest 2021.1.119

 

@(Html.Kendo().Grid<SampleProject.ViewModels.EmployeeViewModel>()
                        .Name("EmployeeGrid")
                        .Columns(col =>
                        {
                            col.Bound(o => o.NetworkID).Width(150);
                            col.Bound(o => o.Name).Width(400);
                            col.Bound(o => o.Role).Width(200);
                            col.Bound(o => o.Category);
                            col.Command(command => { command.Destroy(); }).Width(150);
                        })
                        .Pageable(a => a.PageSizes(new int[] { 10, 25, 50, 100 }))
                        .Sortable()
                        .Scrollable()
                        .Filterable(filterable => filterable
                        .Extra(false)
                        .Operators(operators => operators
                            .ForString(str => str.Clear()
                                .Contains("Contains")
                                .IsEqualTo("Is equal to")

                            )))
                        .HtmlAttributes(new { style = "height:700px;" })
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(100)
                        .Model(model =>
                        {
                            model.Id(p => p.ID);
                        })
                .Read(read => read.Action("Employee_Read", "Admin"))
                .Destroy(delete => delete.Action("Employee_Delete", "Admin"))
        )
    )

 

Martin
Telerik team
 answered on 19 Feb 2021
9 answers
7.6K+ views

Hey guys,

I have this code in my .cshtml:

<form>
    <div class="form-row col-12">
        <div class="form-group col-12">
            @Html.Label("Ersteller")
            @Html.Kendo().TextBox().Name("test").HtmlAttributes(new { @class = "form-control", @readonly = "readonly" }).Value("Daniel Sander")
        </div>
    </div>
</form>

 

When the view is rendered, I get a Textbox looking like attachement picture 1. Also, when using the textbox without the readonly attribute, you can see like the textbox is getting a wrong focus-area like in attachement picture 2.

<form>
    <div class="form-row col-12">
        <div class="form-group col-12">
            <label for="Ersteller">Ersteller</label>
            <span class="k-widget k-textbox form-control" style="">
                <input class="form-control k-input" id="test" name="test" value="Daniel Sander" data-role="textbox" aria-disabled="false" autocomplete="off" style="width: 100%;">
            </span>
            <script>kendo.syncReady(function(){jQuery("#test").kendoTextBox({"value":"Daniel Sander"});});</script>
        </div>
    </div>
</form>

I've realized, that my textbox is rendered in a span-element. However, in Kendo version 2020.1.219.545 this was definitely not the case. After the update to 2020.3.1021.545 a few weeks ago this "bug" happend. Today I've updated to 2020.3.1118.545 but still the same problem.

When analyzing the css, which causes the problem, you see:

.k-textbox.form-control {
    padding: .375rem .75rem;
}

 

The padding causes the space between the focus-area. So my question is now, did I have implemented something wrong now? Is this behaviour the way it should be? How is your recommendation for implementing a label with a textbox via MVC Razor syntax in the current kendo version without this padding-space?

Daniel
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 18 Feb 2021
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
Rating
ScrollView
ButtonGroup
CheckBoxGroup
Licensing
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
Iron
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
Iron
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?