Questions on UI for ASP.NET MVC Forum

1 answer

168 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.}

Grid

answered on 21 Aug 2020

4 answers

179 views

Formulas missing after upgrade to 2020.2.617

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, 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 + ")" });

Spreadsheet

answered on 21 Aug 2020

1 answer

133 views

TextBox loses mask on load

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?

TextBox

answered on 21 Aug 2020

2 answers

212 views

RTL in a single column

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

Grid

answered on 20 Aug 2020

1 answer

168 views

Can I get a link to the CSS grid sections?

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.

Grid

answered on 19 Aug 2020

1 answer

105 views

How to move items to root in FileManager?

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

FileManager

answered on 17 Aug 2020

3 answers

406 views

Full screen edit mode with multiple Editors on page

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>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.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>

Editor

answered on 17 Aug 2020

1 answer

293 views

Decimal format not working in Gid

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!!

Grid

answered on 17 Aug 2020

1 answer

2.7K+ views

Decimal format not working in Gid

Hi Team,

Very Good!!

Currently i am using Kenod.mvc.dll for 2018 version .

I am not able to restict decimal places in grid bound column , could you help on this . i have tried different format's but didn't successed.

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" })));

Grid

answered on 17 Aug 2020

3 answers

238 views

Delete unfinished file on Cancel

When the user clicks Cancel, the filename is removed from the list on the page, but I noticed the actual file fragment still exists on the server. Is there any way to also delete the cancelled file from the file system? I tried adding removeFileByUid() to the onCancel function, but I get the following JavaScript error:
Uncaught ReferenceError: upload is not defined
at init.onCancel ((index):96)
at init.trigger (kendo.all.js:164)
at init._onFileAction (kendo.all.js:71201)
at HTMLButtonElement.d (jquery.min.js:2)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)
onCancel @ (index):96
trigger @ kendo.all.min.js:25
_onFileAction @ kendo.all.js:72295
d @ jquery.min.js:2
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

I assume this is because my removeFileByUid() call runs before the built-in "Cancel" code, which is also trying to remove the file that was already removed...?

I also tried making an Ajax call to my C# "remove" function directly, and I get the following error: "The process cannot access the file...because it is being used by another process."

For reference, here is my uploader:

@(Html.Kendo().Upload()

.Name("files")

.Async(a => a

.Save("Chunk_Upload_Save", "Home")

.Remove("Async_Remove", "Home")

.AutoUpload(true)

.ChunkSize(1024000) //bytes

)

.Events(events => events

.Cancel("onCancel")

)

Upload