Questions on UI for ASP.NET MVC Forum

4 answers

717 views

Text alignment in grid client footer template

Hi ,

i want to merge cells in grid client footer template to display text.

below css am used but still no use.

.k-footer-template td:nth-child(1) {
overflow: visible;
white-space: nowrap;
}

.k-footer-template td:nth-child(1),
.k-footer-template td:nth-child(2),
.k-footer-template td:nth-child(3),
.k-footer-template td:nth-child(4),
.k-footer-template td:nth-child(5),
.k-footer-template td:nth-child(6) {
border-width: 0;
}

Grid

answered on 26 Jan 2021

4 answers

901 views

Stepwise Form - Tabs with Different Models

I needed to create a wizard and I started but using this sample: https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui

The two differences for my solution are that I need to use a different model and partial view for each tab and I don't want to load the tab until it is active.

The idea is that on tab 1 I gather some information, submit it, and then get the data and display tab 2...and so on...I can't seem to figure it out.

Each tab should have it's own partial view populated by it's own model by calling a controller action when the tab is activated.

TabStrip

answered on 26 Jan 2021

1 answer

1.5K+ views

How to set total number of rows in a grid

Hi!

I've been trying to do this for less than a week but no luck so far.

I'm doing server-side pagination and try to load as many rows as needed to be shown on a grid page (based on pageSize and pageNumber). So far so good. But the problem is, the kendo grid assumes that the total number of row is the number of records my SP returns (which would be 10 if the page size is set to 10), and the only number it shows for the page number is '1'. I assume if I could set the total number of rows to the number of records I have (for example 100), then the grid will show the other pages. Is it even possible with kendo grids?

Thank you in advance.

Grid

answered on 22 Jan 2021

6 answers

3.6K+ views

Formatting dates in Excel Export

I'm able to format the dates the way I want in the grid, but they don't appear that way in my Excel export.

The code in my controller is:

1.[HttpPost]

2.public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)

3.{

4. var fileContents = Convert.FromBase64String(base64);

5. return File(fileContents, contentType, fileName);

6.}

In my grid code below, lines 11 and 15 are the date fields in question. They appear in the grid as MM/dd/yy hh:mm tt, but in the export they appear as MM/dd/yyyy.

01.@(Html.Kendo().Grid<ErmhsL2BudReqRawDto>()

02. .Name("Grid")

03. .Columns(columns =>

04. {

05. columns.Bound(c => c.Id).Hidden();

06. columns.Bound(c => c.CharterId).Hidden();

07. columns.Bound(c => c.CharterName).Width(400).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains))).Locked(true);

08. columns.Bound(c => c.EdcoeId).Width(100).Locked(true);

09. columns.Bound(c => c.CdsCodeWithDashes).Locked(true).Width(150);

10. columns.Bound(c => c.FiscalYear).Filterable(filterable => filterable.UI("fiscalYearFilter")).Locked(true).Width(100);

11. columns.Bound(c => c.DateEntered).Format("{0:MM/dd/yy hh:mm tt}").HtmlAttributes(new { style = "text-align:right" }).Width(100);

12. columns.Bound(c => c.ProgressMonitoringFrequency).Width(500);

13. columns.Bound(c => c.MonitorNameAndTitle).Width(300);

14. columns.Bound(c => c.IsAmhpCertified).Filterable(filterable => filterable.Messages(m => m.IsFalse("No")).Messages(m => m.IsTrue("Yes"))).ClientTemplate("#=IsAmhpCertified ? 'Yes': 'No'#").HtmlAttributes(new { style = "text-align:center" }).Width(100);

15. columns.Bound(c => c.AmhpDateEntered).Format("{0:MM/dd/yy hh:mm tt}").HtmlAttributes(new { style = "text-align:right" }).Width(100);

16. })

17. .ToolBar(tools => tools.Excel())

18. .Excel(excel => excel

19. .AllPages(true)

20. .FileName("ERMHS Level 2 Budget Requests.xlsx")

21. .Filterable(true)

22. .ProxyURL(Url.Action("Excel_Export_Save", "FiscalReport"))

23. )

24. .Filterable(filterable => filterable

25. .Extra(false)

26. .Operators(operators => operators

27. .ForString(str => str.Clear()

28. .StartsWith("Starts with")

29. .IsEqualTo("Is equal to")

30. .IsNotEqualTo("Is not equal to")

31. ))

32. )

33. .Groupable()

34. .Pageable(m => m.PageSizes(new[] { "25", "50", "100", "All" }))

35. .Resizable(resizable => resizable.Columns(true))

36. .Sortable()

37. .Scrollable(s => s.Enabled(true))

38. .HtmlAttributes(new { style = "height:700px;" })

39. .DataSource(dataSource => dataSource

40. .Ajax()

41. .PageSize(25)

42. .Events(events => events.Error("error_handler"))

43. .Model(model =>

44. {

45. model.Id(p => p.Id);

46. model.Field(p => p.Id).Editable(false);

47. model.Field(p => p.CharterId).Editable(false);

48. })

49. .Sort(sort =>

50. {

51. sort.Add(p => p.CharterName);

52. })

53. .Read(read => read.Action("ErmhsL2BudgetRequests_Read", "FiscalReport"))

54. )

55.)

Grid

answered on 21 Jan 2021

10 answers

179 views

check one or more rows from one GridView and display it/them in another GridView in the same page

Hi,

In order to select one or more rows from one GridView and display it/them in another GridView to do some processing.

How can I handle this?

here is my code:

@(Html.Kendo().Grid<mySolution.Models.EmployeeModel>()

.Name("EmployeeGrid")

.Columns(columns =>

{

columns.Select();

columns.Bound(p => p.EMP_FIRSTNAME).Title("First Name");

columns.Bound(p => p.EMP_LASTNAME).Title("Last Name");

columns.Bound(p => p.EMP_AGE).Title("Age")

columns.Bound(p => p.EMP_CATREGORY).Title("Category");

})

.ToolBar(toolbar =>

{

toolbar.Custom().Text(" Proceed").Action("TreatmentAction", "Employee").HtmlAttributes(new { id = "proceedBtn", @class = "btn btn-primary" });

})

.Resizable(resize => resize.Columns(true))

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.AutoSync(true)

.PageSize(5)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.EMP_ID))

.Read(read => read.Action("Employee_ReadAsync", "Employee"))

)

the other GridView is almost with the same columns but without "columns.Select();"

if I check one row or multiple rows from the first GridView, it should be displayed in the second GridView

Also, if I uncheck one row or multiple rows from the first GridView, it should be not displayed in the second GridView.

Any suggestions please to do this?

Thanks.

Checkbox

answered on 14 Jan 2021

4 answers

316 views

how to get multi filtered values in javascript

Hi,

i have grid with few columns with multiple checkbox filters ( for my grid i have 4 columns with multicheckbox filters).

when i click a button( button is outside the grid) i want to get all filtered values those are applied to kendo grid.

Grid

answered on 13 Jan 2021

3 answers

136 views

Show multiple properties in GroupHeaderTemplate?

Hello,

In my scheduler I want to customize the GroupHeaderTeamplate, so I can make it something like (look at the marked area on the attached image).
It includes: room numer, photo of the attendee and a name.

I am grouping my "Rooms" resource so they are being shown in a sorted order. But how do I add the other properties to the header?

.Group(group => group.Resources("Rooms").Orientation(SchedulerGroupOrientation.Horizontal))

.GroupHeaderTemplate("#= text #")

.Resources(resource =>

{

resource.Add(m => m.RoomID)

.Title("Room")

.Name("Rooms")

.DataTextField("RoomName")

.DataValueField("RoomID")

.BindTo(Model.ResidenceCalendarResourceModelList);

})

Scheduler

answered on 13 Jan 2021

2 answers

1.7K+ views

How to check all checkboxes of a grid that are not disabled

Have a grid with a checkbox column and with a client template that includes a master checkbox. Im able to check/uncheck all checkboxes. However now I need to only check those that are not disabled. Checkbox click event passes "ele" to this method checkAll. Check/uncheck all works, but how to check first if the disabled property is set?

01.function checkAll(ele) {

02. var state = $(ele).is(':checked');

03. var grid = $('#MyGridList').data().kendoGrid;

04. $.each(grid.dataSource.view(), function () {

05. //$(".chkbx").prop("checked", state);

06.

07. //todo dont allow disabled lines to be selected

08. if ($(".chkbx").prop("disabled") == false) {

09. console.log("check checkbox");

10. }

11. else {

12. console.log("dont check checkbox");

13. }

14.

15. });

16.

17.}

Grid

answered on 13 Jan 2021

16 answers

1.2K+ views

How to prevent editor from closing?

I'm using kendo scheduler and I want to use server validation. When server returns validation error (via ModelState - ToDataSourceResult extension) then I want to show them in popup. Now I have problem how to prevent editor window to be closed?

I have following code (it works for grid popup editor and server validation errors):

onError: function (args) {

if (args.errors) {

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.one("dataBinding", function (e) {

e.preventDefault(); // cancel grid rebind if error occurs - this prevents window to closing

/* some error handling */

});

} else {

alertify.error("Unknown error occurred");

}

I found following code which looks like a bug. This is "refresh" method od scheduler. I think that it should check result of trigger("dataBinding") and call _destroyEditable when event wasn't prevented:

this.trigger("dataBinding");

if (!(e && e.action === "resize" && this.editable)) {

this._destroyEditable();

}

Here's code from grid which works good:

if (that.trigger("dataBinding", { action: e.action || "rebind", index: e.index, items: e.items })) {

return;

}

I'm using kendo version 2013.2.918.

Scheduler

answered on 12 Jan 2021

1 answer

889 views

Possible bug in kendo.ParseDate?

I was expecting to get either null or a date object out of the parser, always. However i discovered when we tried to parse the number 253 that you'll end up with this error: Uncaught TypeError: e.indexOf is not a function at ... (where ... is the kendo file and location).

It seems to work ok if you .toString() everything.

Date/Time Pickers

answered on 12 Jan 2021