Telerik Forums
UI for ASP.NET MVC Forum
5 answers
2.2K+ views

I have an MVC grid with inline editing set and the user is able to select an entire row. I've managed to change the hover background color of a non-selected row by changing some CSS. When the user selects a row I'm also able to change the background color of the selected row. However, what I cannot seem to change is the hover color of the selected row. It's a deep blue and I'm unable to change it. 

This is the CSS code I've created:

.k-grid .k-state-selected {<br>    background-color: #C4FAEC;<br>    color: #000000;<br>}<br>

 

.k-grid .k-state-selected:hover {<br>    background-color: #C4FAEC;<br>    color: #000000;<br>}<br>

 

.k-grid td.k-state-selected:hover, .k-grid tr:hover {<br>    color: #000000;<br>    background-color: #C4FAEC;<br>}<br>

 

Randy
Top achievements
Rank 1
 answered on 13 Nov 2019
1 answer
891 views

Hi.

I'd like to display a checkbox with a label that contains HTML.

 

For example:

 

Model:

 

[Display(Name = "I agree to the <a href=\"{0}\">Terms and Conditions</a>")]

public bool IAgreeToTheTermsAndConditions { get; set; }

 

View:

 

@Html.Kendo().CheckBoxFor(model => model.IAgreeToTheTermsAndConditions).Label(

                            string.Format(

                                Html.DisplayNameFor(model2 => model2.IAgreeToTheTermsAndConditions).ToString(),                                 @Url.Action("TermsAndConditions", null)))

 

However, the label is rendered with the HTML encoded:

I have agree to the &amp;lt;a href=&amp;quot;/TermsAndConditions&amp;quot;&amp;gt;Terms and Conditions&amp;lt;/a&amp;gt;

 

How can I pass raw HTML to the Label?

 

Thank you.

Nikolay
Telerik team
 answered on 12 Nov 2019
6 answers
1.0K+ views

When i am follow the guide for show the pdf file, i am getting the error 'Cannot read property 'GlobalWorkerOptions' of undefined' ..

 

Am i missing some stuff in the code, to make it work?

 

Vladimir
Top achievements
Rank 1
 answered on 12 Nov 2019
9 answers
1.7K+ views

Hi.

The problem is about sorting.

It does not create a query by my own method.

I want to understand why. Because it doesn't make sense to me. This is very easy sample;

var db = new TicketSystemEntities();
var issues = (from a in db.testTable
                    //orderby a.name ascending
              select new
              {
                  a.name,
                  a.guid,
              }).OrderByDescending(f => f.name);
//issues = issues.OrderByDescending(k => k.name);
return Json(Test().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

 

Three ordering types not ordering.. Sql profiling result is;

ORDER BY row_number() OVER (ORDER BY [xxxx].[name] ASC)

 

So.. OrderByDescending not used.. When i change order of fields;

a.guid,
a.name,

 

Profiling is changing like this;

ORDER BY row_number() OVER (ORDER BY [xxxx].[guid] ASC)

 

So, system getting first field for ordering with "ASC".. Not "DESC".

When i use Sort property in DataSource in razor, its working;

.DataSource(dataSource => dataSource
  .Ajax()
  .Sort(s=>s.Add(d=>d.name).Descending())
  .Model(model => model.Id(p => p.guid))
  .PageSize(10)
  .Read(read => read.Action("y", "x"))
)

 

When i use AsEnumerable;

db.testTable.OrderBy(o => o.name).AsEnumerable().Select(x => x);

 

its working with AsEnumerable or ToList().

it just doesn't work for the telerik Grid. In dropdown or other telerik modules, iqueryable queries can run sequentially.

I want to do the sorting with the controller.

First time I encounter such a problem.

Is there an explanation for this problem?

Plamen
Telerik team
 answered on 12 Nov 2019
9 answers
938 views

I have a MVC .NET application. I have a dropdown list that does backend calls to populate it. I want to copy the field and everything seems to work properly... except the searching, the search value that is searched for is from the original field and not the field I am entering the search into. I am assuming that I have missed something when copying the field.  

First I copy the field:

var fieldToCopy = currentRow.find("#" + oldFieldId);
fieldToCopy.clone()
       .attr("id", newFieldId)
       .attr("name", newFieldName)
       .appendTo('#' + fieldId);

 

then I get the field I created:

var newField = $(`#${newFieldId}`);
if (!newField.length) return;

 

I then init the new field:

var originalWidgetType = "kendo" + window.kendo.widgetInstance(fieldToCopy).options.name;
var originalWidget = fieldToCopy.data(originalWidgetType);
newField[originalWidgetType](originalWidget.options);

 

This gets me 90% of the way. I have a working dropdown. The only problem is that although I have a cloned field, searching does not work. I always get the search value from the field I copied. 

When I check the HTML I see that the <script> which is in the original code but missing in the cloned code. How do I properly initialise a cloned field?

This is the stuff that is missing after the clone.

kendo.syncReady(function(){jQuery("#Fields_21__Values_0_").kendoDropDownList({"minLength":3,"value":"100015026","filter":"contains","dataSource":{"transport":{"read":{"url":"/d3Search/Shared/Document/TypeAhead?docId=GD00000148\u0026docType=DEPSU\u0026fieldNumber=61\u0026row=0\u0026currentValue=100015026","data":function() { return kendo.ui.DropDownList.requestData(jQuery("#Fields_21__Values_0_")); }},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}}});});

 

Hopefully somebody can help.

 

 

Ursus
Top achievements
Rank 1
Iron
 answered on 12 Nov 2019
2 answers
445 views

I'm making the Grid/Inline editing list using Kendo UI MVC referring this: https://demos.telerik.com/aspnet-mvc/grid/editing-inline 

I was trying to create and update text with HTML tag, for example, <br>, <h> with some other texts.

But whenever I put HTML tags such as those and even like '<b', '<h', it wasn't created or updated.

They're not updated and created like this image below:

Hyewon
Top achievements
Rank 1
 answered on 11 Nov 2019
1 answer
1.2K+ views

Hi,

I'm trying to pass a DateTime value (Start_Date) to an ActionResult used by a template, but seems it is always null (other arguments string and int format are ok), changing type from dateTime to string seems to work, the value is a not null datetime string version but I would like to use directly the datetime, any suggestion?

 

(index.cshtml)

            columns.Bound(p => p.Start_Date).Format("{0:dd/MM/yyyy}");
            columns.Template(@<text></text>).ClientTemplate(
                                    "<a href='" +
                                         Url.Action("Details", "Data_Values") +
                                         "/?ContactID=#=Contact_ID#&SerialNumber=#=Serial_Number#&StartDate=#=Start_Date#'" +
                                    ">Details</a>").Width("100px");

(controller Data_ValuesController)

public ActionResult Details(int? ContactID, DateTime? StartDate, String SerialNumber)
        {

[...]

 

Veselin Tsvetanov
Telerik team
 answered on 11 Nov 2019
2 answers
830 views

Hello,

I have the following grid:          

 

01.@(Html.Kendo()
02.      .Grid<FVM>()
03.      .Name("grid")
04.      .NoRecords("No records to show")
05.      .PersistSelection(true)
06.      .Columns(column =>
07.      {
08.          column.Select().Width(50);
09.          column.Bound(p => p.ID).Title("View").Width(50);/*.Hidden(true)*/;
10.          column.Bound(p => p.Mnemonic).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
11.          column.Bound(p => p.Name).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
12.          column.Bound(p => p.Country).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
13.          column.Bound(p => p.State).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
14.          column.Bound(p => p.City).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
15.          column.Bound(p => p.Region).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
16.          column.Bound(p => p.District).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " })/*.Hidden(true)*/;
17.          column.Bound(p => p.Address).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " }).Hidden(true);
18.          column.Bound(p => p.Latitude).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " }).Hidden(true);
19.          column.Bound(p => p.Longitude).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal; text-align: right: " }).Hidden(true);
20.      })
21.      .Sortable()
22.      .Filterable()
23.      .Pageable()
24.      .Reorderable(r => r.Columns(true))
25.      .ColumnMenu()
26.      .DataSource(dataSource => dataSource
27.        .Ajax()
28.        .PageSize(10)
29.        .Model(m => m.Id(p => p.ID))
30.        //.ServerOperation(false)
31.        .Read(read => read.Action("FacilityProfile", "Facilities", new { Area = "AccountSettings" }))
32. ))

 

When you press a button, the items that you have selected will be sent to the controller. Also, on filter the selected items persist. My problem is that if you have items from more than one page selected only the items from the current page will be sent to the controller. Is there a way to fix this? Thanks!

 

Here is the button:

1.@(Html.Kendo().Button()
2.      .Name("SaveButton")
3.      .Content("Save")
4.      .Icon("save")
5.      .HtmlAttributes(new { type = "button" })
6.      .Events(e => e.Click("SaveMyFacilities")))

 

And Here is how I'm getting the selected rows:

1.var grid = $("#grid").data("kendoGrid");
2.var selectedRows = grid.select();
3.var list = new Array;
4.selectedRows.each(function (index, row) {
5.    var selectedItems = grid.dataItem(row);
6.    list.push(selectedItems.ID);
7.})
Tsvetomir
Telerik team
 answered on 11 Nov 2019
5 answers
1.2K+ views

Hi, I'm trying restrain the Multiselect to a max-height and have it show a scroll bar display inside the multiselect if the amount of values selected would exceed the max height of the display area.  Nothing I've tried so far has worked though.  Is this possible?  If so, how can I do that?

 

To be clear I'm not talking about the dropdown list that appears when the user selects items, I'm talking about after the items have been selected in the main box area.

 

Thanks

 

Mike

Christopher
Top achievements
Rank 1
 answered on 08 Nov 2019
2 answers
797 views

We have a listview bound to a collection of images. It's set to single select. We handle onChange() to get the name of the image file and write this to a textfield (id = "ImageFile"):

        function onChange(arg) {
            var selected = $.map(this.select(), function (item) {
                return $(item).text();
            });

            $("#ImageFile").val(selected[0].trim());
        }

In order to effectively cancel the selection we provide a hyperlink (id="clearImage") next to the text field and handle it's click method:

        // clears the value in the Image text field
        $("#clearImage").bind("click", function (e) {
            e.preventDefault();
            $("#ImageFile").val("");
        });

Is there a way to clear the listview of any selection (the orange background) from clearImage.click() ? 

Alternatively can the second click of a selected item in the listview deselect it? A toggle() type function that will select/deselect? 

Is there a function to pre-select an item in the listview? So on an Edit record screen I would select the item in the listview as it is loaded that the user selected on the Add screen of the record? 

Hoping we can get rid of the ImageFile text field and handle select/deselect in the ListView itself.

Thank you,

Simon

 

Simon
Top achievements
Rank 1
 answered on 08 Nov 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
Window
ListView
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?