Telerik Forums
UI for ASP.NET MVC Forum
9 answers
604 views

I have 3 questions this time.

 

1) After some fiddling around I got my responsive panel working.  I then went and changed my default layout so that I have the content in div in the middle of the form, rather than all left aligned.  When I made the change the panel no longer hides.  Instead when it should be 'hidden' it is visible but on the left outside edge of the div.  When I click the button to make it appear it slides into the div correctly and appears where it should.  What do I need to do to get it to be hidden and not just on the outside of the div?

2) In my HTML I had the following button

<button name="Logout" tag="span" class="textButton" type="submit">Logout</button>

I thought it would be a simple change to make it a Kendo button:

<kendo-button name="Logout" tag="span" class="textButton" type="submit">Logout</kendo-button>

 

However once I did this, it no longer worked. I am sure it is something simple, but what did I miss?

 

3) The final question is a general use question.  My app will be in ASP Core.  I see a lot of examples that use the format of:

<kendo-object></kendo-object>

and some that are in the format of:

@(Html.Kendo().Object()
)

 

Which one is the 'correct' format?  Are there advantages to using one over the other?  If I use the 2nd option will all of my themes still apply to the objects?

Dimitar
Telerik team
 answered on 18 Mar 2019
3 answers
1.2K+ views

Hello,

I'm using Kendo grid (and other components) through the MVC wrapper. Recently, I started using sorting and filtering, in the following way:

.DataSource(dataSource => dataSource.Ajax()

.Read(read => read.Action(action name, controller name)

.Sort(blah blah)

.Filter(blah blah)

)

All sort/filter operations are server-side. (obviously, I'm not going to dump a million records into the browser and have javascript filter them...)

Questions:

1) Sort and Filter MVC calls take the view model fields, which eventually fill the DataSourceRequest. How exactly does that translate through the dynamic linq into sql? Does it rely on the assumption that the name of the field in the view model will be the same as in the data model?

I mean, if I use something like

dataSource.Filter(filter => filter.Add(viewModel => viewModel.MachineId).IsEqualTo(machineId));

and later the request object (with field names as strings) with those filters, sorts etc goes into .ToDataSourceResult(),

how does it know which field in the data model - in the Entity Framework entity, that is - does the viewModel.MachineId map to?

For myself, I use AutoMapper, so through the mapper configuration, I know which field is which... but Kendo MVC side doesn't have that knowledge.

And if it makes an assumption about data model and view model field names being the same, how do I pass it the actual data model field name in cases when they aren't the same?

 

2) Is there any advantage to using extra parameters in the controller call, to filter the data, versus using Filter(), so that all the filtering info ends up in one and the same object, the DataSourceRequest?

If I add extra parameters to the controller call, I need to implement a separate controller call for each combination of parameters. And, in each call, I have to add all the sql conditions myself. If I can just use Filter() in the grid definition, I can keep reusing the same controller call for all combinations.

And, theoretically, through dynamic linq, when the data request object is passed into .ToDataSourceResult, this should result in all the "where" conditions being correctly applied, and the filtering performed in sql, on the sql server side... or am I wrong here?

Yet, your code samples with master/detail grids (a master grid with a detail template which contains another grid) used a separate controller call with the parameter; is there a reason for it, if it could have been simply filtered by this field?

 

3) How would I use Filter() in a grid / data source defined in the detail template of another grid?

The problem here is that related operators, such as IsEqualTo(), expect me to know the value on the server side, at the time C# is executed.

However, in a grid detail template, for the detail grid construction, this value is only known on the client side.

A call like .IsEqualTo("#=template_field_here#")) won't work; the argument is obviously a string, yet the .IsEqualTo expects the argument to be of the same type as the field I'm filtering... which makes sense only if I knew it on the server, outside of the detail template.

Would I have to write the whole detail grid in jquery?

 

(Yes, I could - and I did - write a separate controller call, with extra parameters, to accomplish this; I'm just trying to remove that code, if I really don't have to do it that way... if it can work simply through filters in the DataSourceRequest)

 

 

 

Konstantin Dikov
Telerik team
 answered on 18 Mar 2019
1 answer
236 views

Wondering if you have code samples regarding validating different sections of the recurrence editor. For instance if the user selects a daily recurrence then deletes (using keyboard) the value in the "After" spinner or the "On" date/time picker. Or they do something similar with a Weekly recurrence and perhaps check none of "Repeat on" checkboxes and delete values for "After" or "On". 

I see there is some reasonable default saved for RecurrenceRule in the database - is that by design as a way to avoid exhaustive validation? I can see this being a difficult ask, but it only takes one user to enter a recurring event incorrectly and it leads to a lot of confusion and questions. Is this a validation rabbit hole best avoided?

 

Ianko
Telerik team
 answered on 15 Mar 2019
1 answer
199 views

For my data in the following class:

public class MyModel
{
    public double Value { get; set; }
    public DateTime Date { get; set; }
}

I have a chart with the following configuration:

@(Html.Kendo().Chart<MyModel>()
    .Name("MyChart")
    .Series(series =>
    {
        series.ScatterLine(MyIEnumerableData)
            .Fields("Date", "Value")
            .Style(ChartScatterLineStyle.Smooth)
            .Markers(m => m.Visible(false))
            .Highlight(h => h.Visible(false))
            .Labels(false)
            .Name("Series1");
    })
    .XAxis(x => x
        .Date()
        .Title(title => title.Text("Date"))
    )
    .YAxis(y => y
        .Numeric()
        .Title(title => title.Text("Value"))
    )
)

The axis range is correct, but the line is not displayed.

Examining the data contained in the widget on the page, the Date field is populated with (example): "/Date(1156934074549)/" instead of correctly-formed datetimes.

If I change my model to use a string instead of a datetime, and convert the datetime with .toString("yyyy-MM-dd HH:mm:ss"), the kendo widget appears to understand the data correctly, and it draws the line. This is fine as a workaround, but I should not need to convert the data like this.

Why does the kendo widget not understand datetime data? There is no override when specifying the fields to indicate the data type, and there is no method in the series definition to do this, either.

Tsvetina
Telerik team
 answered on 15 Mar 2019
1 answer
117 views
Is there anyway at all to add an image to a cell? We need a logo in the header. If that is not possible if we import one from the server is there a way to keep the image in place that is already there?
Ivan Danchev
Telerik team
 answered on 12 Mar 2019
6 answers
1.0K+ views
I have a Grid with Ajax binding. One of the columns uses a client template with a ListView. Looks like that list view does not get initialized and bound, the grid cell where the ListView should be is rendered empty. The code for ListView is there it just does not get executed apparently. It does work with server-bound grid.
@(
    Html.Kendo().Grid<CollegeAnnouncement>().Name("ItemsList2")
        .Columns(col =>
        {
            col.Bound(i => i).ClientTemplate("<input type='checkbox' #if(Active){#checked='checked'#}# />").Title("Active?");
            col.Bound(i => i.Heading).Encoded(false);
            col.Bound(i => i.StartDate).Format("{0:MM/dd/yyyy}");
            col.Bound(i => i.EndDate).Format("{0:MM/dd/yyyy}");
            col.Bound(i => i).ClientTemplate(Html.Kendo().ListView<string>()
                .Name("ItemRoles#=CollegeAnnouncementID#")
                .TagName("div")
                .HtmlAttributes(new { @class = "itemRolesList" })
                .DataSource(ds => ds.Read(read => read.Action("ItemRolesGet", "CollegeAnnouncements")
                .Data("{itemID: #=CollegeAnnouncementID#}"))).ClientTemplateId("roleItemTemplate")
                .ToClientTemplate().ToHtmlString());
            col.Bound(i => i).ClientTemplate("<a href='" + Url.Action("ItemDelete", new { itemID = "#=CollegeAnnouncementID#" }) + "'>Delete</a>");
        })
    .DataSource(ds => ds.Ajax().Read(read => read.Action("CollegeAnnouncementsList", "CollegeAnnouncements")).Model(m => m.Id("CollegeAnnouncementID")))
    .Pageable()
 
)
Alex Hajigeorgieva
Telerik team
 answered on 12 Mar 2019
5 answers
1.6K+ views

I have a grid, with several columns with headings that are much too long to display.  I have overcome this, by using a header template, with a bootstrap tooltip on it.
This works fine, however, if the column is made filterable, the filter icon is displayed in the wrong place, and is also the wrong colour.

col.Bound(o => o.Referral24HrsMedFit).ClientTemplate("#=Referral24HrsMedFit_Glyph#").HeaderTemplate("<span data-toggle='tooltip' data-placement='top' title='Referral to all agencies within 24hrs of being medically fit'>Ref..</span>");


Is there any way to prevent this?

Tsvetomir
Telerik team
 answered on 12 Mar 2019
1 answer
114 views

Current I have something like

 

.ToolBar(tools =>
{
tools.Excel(); 
tools.Template(
@<text>
  <div class="show-declined-checkbox-group">
  <input class="k-checkbox" id="ShowDeclinedItemsCheckBox" name="ShowDeclinedItemsCheckBox" type="checkbox">
  <label class="k-checkbox-label" for="ShowDeclinedItemsCheckBox">Show Declined Items</label>
  </div>
  <div class="show-appoved-checkbox-group">
  <input class="k-checkbox" id="ShowApprovedItemsCheckBox" name="ShowApprovedItemsCheckBox" type="checkbox">
  <label class="k-checkbox-label" for="ShowApprovedItemsCheckBox">Items to be Approved</label>
            <span id="needs-approval-span" class="badge badge-light"></span>
  </div>
  </text>
); 
})

But I don't see the 'Export to Excel' button. Is the template somehow overriding the Excel button? How do I have both the Excel button and a "custom" toolbar?

 

Thank you

Tsvetina
Telerik team
 answered on 12 Mar 2019
6 answers
190 views

Working on upgrading to version 2019.1.115. On upgrade it appears that the Table Editor tool is functioning, but the quick select buttons are all disabled (see attached). This also appears to be the case in the demo version on https://demos.telerik.com/aspnet-mvc/editor/all-tools (image also attached). Is there any way to fix this? Is it a known issue? Thanks!

Dimitar
Telerik team
 answered on 12 Mar 2019
7 answers
374 views
Hi there,

I would like to disable or remove the <li> containing the "never" radiobutton, to force the user to set an end for the task. I managed to do this on the edit-event, but only for existing tasks. When I tried to hook the "change"-event of the recurrenceEditor, I couldn't get the selector $(':radio[value="never"]') to work. This part is undocumented, and a bit hard to "guess". Anyone got a hint?

Some example code:
01.<div data-container-for="recurrenceRule" class="k-edit-field">
02.    <div data-bind="value:recurrenceRule" id="recurrenceEditorDiv"></div>
03.    <script>
04.        $(function() {
05.            $("\#recurrenceEditorDiv").kendoRecurrenceEditor(
06.            {
07.                frequencies: ["never", "weekly"],
08.                change: function(e) {
09.                    // This would be nice if it worked
10.                    var rb = e.container.find(".k-recur-end-never");
11.                    rb.attr('disabled', 'disabled');
12. 
13.                    // Or this. This works in the grid's "edit"-event
14.                    var li = e.container.find(".k-recur-end-never")
15.                                        .parent()
16.                                        .parent();
17.                    li.remove();
18.                },
19.                messages: {
20.                    end: {
21.                        after: " efter ",
22.                        occurrence: " händelse(r)",
23.                        label: "Slut",
24.                        never: " aldrig",
25.                        on: " pÃ¥ "
26.                    },
27.                    frequencies: {
28.                        weekly: "per vecka",
29.                        never: "aldrig",
30.                    },
31.                    offsetPositions: {
32.                        first: "första",
33.                        second: "andra",
34.                        third: "tredje",
35.                        fourth: "fjärde",
36.                        last: "sista"
37.                    },
38.                    weekly: {
39.                        interval: " vecka(or)",
40.                        repeatEvery: "Intervall",
41.                        repeatOn: "Dagar "
42.                    },
43.                    weekdays: {
44.                        day: "Dag",
45.                        weekday: "Veckodag",
46.                        weekend: "Helgdag"
47.                    }
48.                }
49.            });
50.        });
51.    <\/script>
52.</div>
Dimitar
Telerik team
 answered on 12 Mar 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?