Telerik Forums
UI for ASP.NET MVC Forum
8 answers
229 views

In the Linear gauge you can add a pointer value (little red arrow in the example) that goes on the scale.  Is this possible with the Radial gauge as well?  So I could make a low, avg, and high point on radial gauge instead of using the linear gauge?

 

 

Tsvetomir
Telerik team
 answered on 21 Aug 2020
2 answers
1.0K+ views

I have a grid with a Client Group Header Template like this:

columns.Bound(model => model.Area).ClientGroupHeaderTemplate(@"<input onclick='SelectAllSubStores(this)' type='checkbox' style='margin-right:5px;'/>");

I have been trying to get it so when I check the group header check box it will automatically check all the rows within the header. 

In the sub rows there is a column like this so that there are check boxes in the sub rows:

columns.Bound(model => model.Store)
                                        .ClientTemplate("<input type='checkbox'/>")
                                        .Sortable(false).Width(100)
                                        .HtmlAttributes(new { style = "text-align:center" })
                                        .HeaderHtmlAttributes(new { style = "text-align:center" });

 

I have tried this but nothing happens:

function SelectAllSubStores(e) {

$("#Grid tbody input:checkbox").prop("checked", this.checked);

}

and I have tried a few other ways but I wasn't getting anywhere.

 

How do I get it to auto select the sub row check boxes when I select the Group header template check box?

 

Thanks 

Ross
Top achievements
Rank 1
 answered on 21 Aug 2020
1 answer
177 views
 

I am attempting to have an ajax grid that does server side paging. (For reference, I am using Entity Framework for db context, and Automapper for model to view model mapping). The paging is working clientside, but it just pulls in all the data from my db then pages. I cannot seem to get the paging to reflect at the sql query level without doing it manually (which defeats the purpose of passing the request to the DataSourceResult(). Am i missing something, or must i do this manually?

 

Below is my current code:

 

Razor page

01.@(Html.Kendo()
02.            .Grid<AgencyContactViewModel>()
03.            .Name("Grid")
04.            .DataSource(dataSource => dataSource
05.                .Ajax()
06.                .Read(read => read.Action("Read", "AgencyContact"))
07.                .PageSize(5)
08.                .ServerOperation(true)
09.       )
10. 
11.        .Columns(columns =>
12.         {
13.             columns.Bound(o => o.ID).Width(50).Title("Id");
14.             columns.Bound(o => o.LastName).Width(100).Title("Last Name");
15.             columns.Bound(o => o.FirstName).Width(100).Title("First Name");
16.             columns.Bound(o => o.AgencyDescription).Width(175).Title("Agency");
17.             columns.Bound(o => o.IsActiveFlag)
18.             .ClientTemplate("<input type='checkbox' #= IsActiveFlag ? checked = 'checked' : '' #  disabled='disabled' ></input>")
19.             .Width(15).Title("Active");
20. 
21.             columns.Bound(o => o.AgencyCode)
22.             .ClientTemplate("<a href='" + Url.Action("Edit", "AgencyContact") + "/#=AgencyCode#'>Edit<a/>")
23.             .Title("")
24.             .Width(15);
25.             columns.Bound(o => o.AgencyCode)
26.             .ClientTemplate("<a href='" + Url.Action("Details", "AgencyContact") + "/#=AgencyCode#'>Details<a/>")
27.             .Title("")
28.             .Width(15);
29.         })
30.        .Groupable()
31.        .Sortable()
32.        .Pageable()
33.        .Filterable())
 
Controller
1.public JsonResult Read([DataSourceRequest] DataSourceRequest request)
2.{
3.    var agencyContacts = dbContext.AgencyContacts.Include("Agency") .OrderBy(a => a.AgencyCode);
4.    var agencyContactsViewModel = agencyContacts.ProjectTo<AgencyContactViewModel>();
5.    var result = agencyContactsViewModel.ToDataSourceResult(request);
6.    return Json(result, JsonRequestBehavior.AllowGet);
7.}
Veselin Tsvetanov
Telerik team
 answered on 21 Aug 2020
4 answers
195 views

We have had a spreadsheet popup working for a "quick edit" solution for a few years.  I just upgraded to 2020.2.617 and the spreadsheet is no longer calculating correctly.  If I turn the formula row on the top, it looks like the formulas are not there.  What changed between 2017 SP1 and this release?  What do I need to do differently?

Here is an example of the spreadsheet (cshtml)":

@(Html.Kendo().Spreadsheet()
    .Name("spreadsheet")
    .HtmlAttributes(new { style = "width:98%; height: 90%;" }).HeaderHeight(0).HeaderWidth(0)
    .Toolbar(false)
    .Sheetsbar(false)
    .Excel(excel => excel
        .ProxyURL(Url.Action("Index_Save", "Spreadsheet"))
    )
    .Pdf(pdf => pdf
        .ProxyURL(Url.Action("Index_Save", "Spreadsheet"))
    )
    .Events(events => events
        .Render("onRenderExpenses"))
    .Sheets(sheets =>
    {
        sheets.Add()
            .Name("Transactions")
            .Columns(columns =>
            {
                if (Model.SpreadSheetColumns != null)
                {
                    foreach (SpreadSheetColumnSettings col in Model.SpreadSheetColumns)
                    {
                        columns.Add().Width(col.Width);
                    }
                }
            })
            .Rows(rows =>
            {
                rows.Add().Index(0).Height(60).Cells(cells =>
                {
                    if (Model.SpreadSheetColumns != null)
                    {
                        foreach (SpreadSheetColumnSettings col in Model.SpreadSheetColumns)
                        {
                            cells.Add().Bold(true).TextAlign(SpreadsheetTextAlign.Center)
                                .Value(col.Title).Background("#80cce7").Color("#000000").Wrap(true)
                                .Enable(false);
                        }
                    }
                });
                rows.Add().Index(99).Height(40).Cells(cells =>
                {
                    foreach (SpreadSheetColumnSettings col in Model.SpreadSheetColumns)
                    {                       
                        cells.Add().Bold(true).TextAlign(SpreadsheetTextAlign.Right)
                            .Background("rgb(193,226,255)").Color("#000000")
                            .Enable(false).Format(col.Format).Formula(col.Formula);
                    }
 
                });
 
            });
    })
)

And here is an example of the columns:

columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false, Formula = "IF(ROUND(SUM(H" + rowTotal + ":I" + rowTotal + "),2) - ROUND(SUM(K" + rowTotal + ":BG" + rowTotal + "),2) = 0,0,1)" });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 100, Editable = false, Format = "$#,##0.00", Formula = "SUM(H2:H" + maxRows + ")" });               
                columnList.Add(new SpreadSheetColumnSettings() { Width = 100, Editable = false, Format = "$#,##0.00", Formula = "SUM(I2:I" + maxRows + ")" });
                    //columns
                columnList.Add(new SpreadSheetColumnSettings() { Width = 30, Editable = false });
                columnList.Add(new SpreadSheetColumnSettings() { Width = 100, Editable = false, Format = "$#,##0.00", Formula = "SUM(K2:K" + maxRows + ")" });
Aleksandar
Telerik team
 answered on 21 Aug 2020
1 answer
139 views

Here's my JQuery mask for textbox in $(document).ready():

$("#MyTextbox").inputmask({ "mask": "(99:99:9{6,7}:9{1,},{0,1}){1,}", 'autoUnmask': false, clearIncomplete: false });

 

Model contains values as a list so i wrote the element like this:

@(Html.Kendo().TextBox()
   .Value(string.Join(",", Model.Objects.Select(x=>x.SomeValue).ToList()))
   .Name("MyTextbox")
   .HtmlAttributes(...))

 

and instead of 

99:99:9999999:999,66:66:6666666:666,33:33:3333333:333

value shows up like 

99:99:9999999:9996666666666666633333333333333

What can i change to keep the mask for the whole string?

 

 

 

Neli
Telerik team
 answered on 21 Aug 2020
2 answers
224 views

Hey Guys

I want to render 1 column ( 1 that shows a file with the complete path) with the filename always showing and the rest of the path hidden to the left when the column is not wide enough.

Adding the htmlAttribute to set the direction works.. except that the '\\' at the start of the path seems to get moved to the end of the path 

c.Bound(Function(p) p.filename).Title("Filename").HtmlAttributes(New With {.style = "direction: rtl;"})
c.Bound(Function(p) p.info).Title("Info").Width(10)
c.Bound(Function(p) p.filename).Title("Filename")

 

To demonstrate, I have added the Filename column twice. First one using 'rtl' , the 2nd regular not to show what I am talking about. This is shown in the attached screen shot. 
I also tried implementing this as a Client Template and I get the same issue.

Any suggestions greatly appreciated.

Rob

Petar
Telerik team
 answered on 20 Aug 2020
1 answer
179 views

     What I mean is, I recently had a question about making my grid column rows smaller. I used the css .k-grid tbody tr td {line-height:5px;}, but it wasn't working. After all my search, everything I tried from java functions, to changing the whole css sheet with anything that was "height" on it. So, I put a ticket in, and I was given this code to try. 

.k-grid .k-hierarchy-cell > .k-icon, .k-grid tbody tr td {line-height: 10px;padding: 0;margin: 0;}

WORKED! So, now I'm trying to find out where the information on .k-hierarchy-cell is located and the other parts of the code so I can do this myself. When I google it, I can't find like a API section of it or anything. Plus, what is with the > in the code? I know it means it's greater then the right side, but I want to find out different ways to use it, as well as the .k items. Is their a API section, or a HTML CSS section with this info? I haven't found it and would like to and find out what else I can do to spruce up my data grid. 

 

 

Aleksandar
Telerik team
 answered on 19 Aug 2020
1 answer
122 views

Hi,

Is moving items(drag/drop) to the root not allowed in the FileManager?  I see that the treeview component allows this, but doesn't seem to work in the FileManager.

Thanks,

Carlos

Aleksandar
Telerik team
 answered on 17 Aug 2020
3 answers
438 views

Hi,

I'm experiencing some issues when implementing the full screen edit mode for editors when more than one editor appears on the page.

I have followed the example on this page: https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/appearance/show-editor-in-full-screen

and it works well when there is only one editor.

When there are multiple editors, the full screen edit mode always displays the content of the last editor on the page.

Here is an example of the behaviour using the code from the link above and simply creating another editor:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
 
 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
   
  <textarea class="editor" id="editor1"></textarea>
 
  <textarea class="editor" id="editor2"></textarea>
 
  <style>
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
      .selector:not(*:root), .k-fullscreen .k-editor .k-editable-area {
        height: auto;
      }
 
      .selector:not(*:root), .k-fullscreen .k-editor .k-editor-toolbar-wrap {
        height: 35px;
      }
    }
    .k-fullscreen .k-editor {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100% !important;
    }
  </style>
 
  <script>
      var classHolder = $(document.documentElement);
      var fullscreenChange = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
      $(document).bind(fullscreenChange, $.proxy(classHolder.toggleClass, classHolder, "k-fullscreen"));
 
      function toggleFullScreen() {
        var docEl = document.documentElement;
 
        var fullscreenElement =
            document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement;
 
        var requestFullScreen = docEl.requestFullscreen ||
            docEl.msRequestFullscreen ||
            docEl.mozRequestFullScreen ||
            docEl.webkitRequestFullscreen;
 
        var exitFullScreen = document.exitFullscreen ||
            document.msExitFullscreen ||
            document.mozCancelFullScreen ||
            document.webkitExitFullscreen;
 
        if (!requestFullScreen) {
          return;
        }
 
        if (!fullscreenElement) {
          requestFullScreen.call(docEl, Element.ALLOW_KEYBOARD_INPUT);
        } else {
          exitFullScreen.call(document);
        }
      }
 
      $(".editor").kendoEditor({
        tools: [
          {
            name: "fullscreen",
            template:
              '<a class="k-button" onclick="toggleFullScreen()">' +
                '<span class="k-icon k-i-maximize k-tool-icon" /> Toggle fullscreen' +
              '</a>'
          }
        ]
      });
  </script>
</body>
</html>
Neli
Telerik team
 answered on 17 Aug 2020
1 answer
301 views

Hi Team ,

Good Day!!

I am not able to set decimal restriction in grid columns , i need your support to get it. ( need to restrict one decimal  tried Format("{0:n1}")  , "{0:0.#}")

 

I have tried different format types , but not able to successes . Below is the code which i using in my application.

  c.Group(p => p.Title((string)ViewBag.Month01)
                                            .Columns(f => f.Bound(fo => fo.month01FD).Format("{0:n1}") .Width(colWidthFD).ClientFooterTemplate("#=getTotals('month01FD',false)# ").HtmlAttributes(new { @class = "telerik-edit-cell-inline" }))
                                            .Columns(f => f.Bound(fo => fo.month01AC).Format("{0:n1}") .Width(colWithAC).ClientFooterTemplate("#=getTotals('month01AC',true)#").HtmlAttributes(new { @class = "telerik-edit-cell-inline" })));

 

Waiting for your response.

 

Thank you!!

Petar
Telerik team
 answered on 17 Aug 2020
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
AICodingAssistant
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
+? 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?