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

Short version:

In a line series chart I have tooltips. These show all the time when the mouse is nowhere near an actual point on the chart. Seems no matter where my mouse is on a like I will see the tooltip for the point that is closest to my mouse. I want to be required to actually hover over the real data point on the chart to get the tooltip, not the line itself.

 

Longer version:

Open to suggestions if there is a better way. In the attached photo, you can see a chart that shows my customer gains and losses for a given period. The period is filterable. The "Maximize" button in the upper right doubles the chart width, and uses JavaScript to recalculate the step if needed (i.e. if there are too many data points to see all at once) and redraws the chart. When the user hovers over a data metric, they see a customized tooltip that lets them investigate the data that created the chart. This is a new Kendo window that pops up and contains a Kendo grid. The grid contains the exact number of customers in the metric they clicked on.

The ultimate problem is that while trying to navigate my mouse to the "Customer List" link I end up getting a new tooltip before I get there. It's too tough to use. So I want to only show a tooltip when actually hovering over the data point circle. If there's a better way I would listen to suggestions.

Paul
Top achievements
Rank 1
 answered on 19 Feb 2018
1 answer
440 views

I've seen several somewhat related threads, but none have helped me. When I click edit and then cancel, the item is removed from the grid (not the database). What is different about this scenario is I am using a composite key EventId + NameId + LocationId where each record will have either a NameId or a LocationId, but not both.

When I step through the code, my popup is displayed and bound as expected. When I click the cancel button it removes my edited item from the grid. I've tried jumping into the datasource change and sync events and doing an e.preventDefault() when I know this is the cancel of an edit, but that does not work (record disappears after that). Is there any spot I can jump in and intercept the removal of the item? Or is there something special I need to configure when using a composite key where one part will be null or zero? I get it that kendo must be thinking I am cancelling an insert instead of an update and it is probably related to my composite key use. My other grids work fine. Thanks.

 

            @(Html.Kendo().Grid<ContactViewModel>().Name("contactGrid")
                  .Columns(column =>
                  {
                      column.Template(t => { }).Title("Edit").Width(10)
                          .ClientTemplate(@"<a class='btn btn-info btn-xs k-grid-edit' title='Edit this contact.'><i class='fa fa-edit'></i></a>");
                      column.Bound(p => p.IncidentID).Hidden(true);
                      column.Bound(p => p.NameID).Hidden(true);
                      column.Bound(p => p.LocationID).Hidden(true);

                      ...

                  })
                  .Editable(editable => editable.Mode(GridEditMode.PopUp)
                      .TemplateName("EventContact")
                  .Filterable().Sortable().Pageable().ColumnMenu()
                  .Events(ev =>
                  {
                      ev.Edit("onContactGridEdit");
                  })
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .PageSize(10)
                      .Model(m =>
                      {
                          m.Id(c => new { c.IncidentID, c.NameID, c.LocationID });
                          m.Field(c => c.IncidentID).DefaultValue(Model.IncidentID);
                      })
                      .Read(read => read.Action("Read", "Contact", new { incidentID = Model.IncidentID }))
                      .Create(update => update.Action("Create", "Contact"))
                      .Update(update => update.Action("Update", "Contact"))
                      .Destroy(update => update.Action("Delete", "Contact"))
                  .Events(events =>
                  {
                      events.Change("incidentUpdate.onDataSourceChange");
                  })  )  )

            function dataSourceChange(e) {

                if (e.action === "remove" && !e.items[0].ContactIsNew) {   // this is a field I set to determine if it is a create or update
                    e.preventDefault();
                }
            }

            function dataSourceSync(e) {

                if (e.action === "remove" && !e.items[0].ContactIsNew) {   // this is a field I set to determine if it is a create or update
                    e.preventDefault();
                }
            }

Steve
Top achievements
Rank 1
 answered on 19 Feb 2018
5 answers
656 views

Hello,

I have a Telerik MVC Ajax grid. One each coloumn there is a column menu with sorting and the multicheck filters. I would like the multicheck filters to be sorted a-z.

The ColumnMenuInit event is calling the following code found in another question:

    var filterMultiCheck = e.container.find(".k-filterable").data("kendoFilterMultiCheck");
    if (filterMultiCheck != undefined) {
        filterMultiCheck.container.empty();
        filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
        filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
        filterMultiCheck.createCheckBoxes();
    }

However, this isn't working. Any ideas?

Thank you

Lucy

Preslav
Telerik team
 answered on 19 Feb 2018
1 answer
329 views

Hello,
I have a Telerik MVC Ajax grid. I noticed that in the latest release you handle null values in the Multi check filter. It now shows 'null' in the filter. This is a very technical term and we would rather then word 'Blanks' to appear. Is there anyway I can achieve this?

Thank you
Lucy

Stefan
Telerik team
 answered on 19 Feb 2018
3 answers
905 views

We are using the below code for loading data in a Kendo dropdown inside a grid. The data is getting loaded, but after applying filter and selecting an item in the filter only the filter data is displayed in the dropdown. The dropdown is not getting refreshed to load the entire data. Please help

 

@(Html.Kendo().DropDownList()
            .Name("VehicleSegment") // The name of the widget should be the same as the name of the property.
            .DataValueField("VehicleSegmentID") // The value of the dropdown is taken from the ID property.
            .DataTextField("VehicleSegmentName") // The text of the items is taken from the EmployeeName property.
           .MinLength(3)
           //.OptionLabel("---Select Vehicle Segment ---")
          .HtmlAttributes(new { style = "width:100%" })
         .Template("#= VehicleSegmentID # | For: #= VehicleSegmentName #")
          .Height(290)
           //.Filter(FilterType.Contains)
           .Filter("contains")
          .DataSource(source =>
          {
              source.Custom()
                  .ServerFiltering(true)
                  .ServerPaging(true)
                  .PageSize(80)
                  .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                  .Transport(transport =>
                  {
                      transport.Read("Virtualization_Read", "Program");
                  })
                  .Schema(schema =>
                  {
                      schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                            .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                  });
          })
          .Virtual(v => v.ItemHeight(20).ValueMapper("valueMapper"))

Dimitar
Telerik team
 answered on 19 Feb 2018
1 answer
281 views

I have a Tooltip setup to display a grid of data when a span is clicked.  The span has 'data' elements which contain the parameters to be passed to the Action method on the Controller.  This all works pefertly fine in my development environment, however when I deploy to test or production the parameters being passed to the Action method are null.

My implementation follows this example:

https://demos.telerik.com/aspnet-mvc/tooltip/ajax#

When I try the demo at this link, it also does not display the content of the tooltip, just a blank tooltip.

So my question is why does this work for in my development environment but not my test or production environment?  Also, does the example on the demo site not work?

My code is as follows:

.CSHTML content
This is partial content, but enough to show what is setup:

            <div class="row skills-border skills-border-bottom">

                <h3>CMRP <span class="small" style="font-size: .5em">(Click on # for detail)</span></h3>


                <div class="col-md-6 col-lg-6">
                    @{
                        string cmrpValidClass = item.CMRPValidCount == 0 ? "label-danger" : "label-success";
                        string cmrpValidTextClass = item.CMRPValidCount == 0 ? "text-danger": "text-success" ;
                    }
                    <span class="label cmrpDetail @cmrpValidClass" data-group="@item.Category~~true" data-validcmrp="true">@Html.DisplayFor(x => item.CMRPValidCount)</span>

                    <h5 class="@cmrpValidTextClass"> @Html.DisplayNameFor(x => x.CMRPValidCount) </h5>

                </div>

                <div class="col-md-6 col-lg-6">
                    @{
                        string cmrpNotValidClass = item.CMRPNotValidCount == 0 ? "label-success" : "label-danger";
                        string cmrpNotValidTextClass = item.CMRPNotValidCount == 0 ? "text-success" : "text-danger";
                    }
                    <span class="label cmrpDetail @cmrpNotValidClass" data-group="@item.Category~~false" data-validcmrp="false">@Html.DisplayFor(x => item.CMRPNotValidCount)</span>

                    <h5 class="@cmrpNotValidTextClass hasTooltip" title="@cmrpNotValid"> @Html.DisplayNameFor(x => x.CMRPNotValidCount) </h5>

                </div>
            </div>
        </div>
    }
</div>
@(Html.Kendo().Tooltip()
      .For(".cmrpDetail")
      .ShowOn(TooltipShowOnEvent.Click)
      .LoadContentFrom("CMRPDetail", "CenterOfExcellence")
      .Position(TooltipPosition.Top)
      .Width(700)
      .Height(500)
      .Events(events =>
      {
          events.RequestStart("requestStart");
          events.Show("show");
      }))

 

<script>
    function show() {
        this.refresh();
    }
    function requestStart(e) {
        e.options.data = {
            id: e.target.data("group")
        }
    }

</script>

From CenterOfExcellenceController

        public ActionResult CMRPDetail(string id)
        {
            string[] parameters = id.Split(new []{"~~"}, StringSplitOptions.None);

            IEnumerable<CMRPDetailEntity> result = _mPractSkillsBo.GetCMRPDetailByGroup(parameters[0], bool.Parse(parameters[1]));

            return PartialView("CMRPDetail", result);
        }

 

The Routes

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");


            routes.MapRoute("Default", "{controller}/{action}/{id}",
                new {controller = "Home", action = "Index", id = UrlParameter.Optional}
                );

            routes.MapRoute(
                "DeleteUser",
                "{controller}/{action}/{id}/{guid}",
                new {controller = "Account", action = "Delete"});

        }

Ianko
Telerik team
 answered on 19 Feb 2018
2 answers
238 views

Hey

 

DropDownList component don't fire the change event when using keyboard enter after the list is filtered.

 

Reproducible here: https://demos.telerik.com/aspnet-mvc/dropdownlist/events

1. Click on the dropwdown list to access filter input

2. Search for "Item"

3. use keyboard arrow down to select Item 2

4. hit keyboard enter.

The change event is not fired.

 

If you do the same, but skip step 2, the change event is fired.

Dan-Petter
Top achievements
Rank 1
 answered on 19 Feb 2018
3 answers
259 views
Does the capability exist to only have a hierarchy grid available for specific records.  Basically is there a way to dynamically set the .ClientDetailTemplateId?
Eduardo Serra
Telerik team
 answered on 16 Feb 2018
1 answer
103 views

I have a 10 column grid with a hierarchy grid consisting of only 2 columns. By default it seems the hierarchy grids fills the space of the parent grid and thus the 2 columns are stretched across the entire width.

I have tried explicitly setting a width for each column of the hierarchy grid but they do not seem to have any effect whatsoever. 

Is there a way to set hierarchy grid total width or be able to set column widths of the hierarchy grid?

Viktor Tachev
Telerik team
 answered on 16 Feb 2018
2 answers
108 views
How can I set aggregates values in header mvc grid for every column like on a the picture? Thanks
Olexandr
Top achievements
Rank 1
 answered on 16 Feb 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?