Questions on UI for ASP.NET MVC Forum

1 answer

1.6K+ views

Bind Kendo Dropdown list as one column in Kendo Grid

Hi Team ,

I am trying to add Kendo dropdownlist as part of Grid one grid column using EditorTemplates and it was successfully added but it was not binded to model and it was not reflect in cell which is selected from kendo dropdownlist.

I am usinh MVC5 and Kendo version 2015.1.429

Here is my code

.Grid<TEData.Model.Gen_Lists>().Deferred()
.Name("grdGen")
.Columns(cl =>
{
cl.Bound(u => u.TED_ENT_DATA_DAY_GEN_ID).Hidden(true);
cl.Bound(u => u.hourEnding).Width("10ex");
cl.Bound(u => u.actual).Width("10ex").Title("Actual");
//cl.Bound(u => u.Actual_Reason.reasonName).Title("Reason").EditorTemplateName("ReasonEditor").ClientTemplate("#:Actual_Reason.reasonName #");
cl.Bound(u => u.Actual_Reason).Title("Reason").ClientTemplate("#:Actual_Reason.reasonName #");
cl.Bound(u => u.actual_Reason_Notes).Title("Notes");
cl.Bound(u => u.totalCapacity).Title("Total Capacity").Width("10ex");
cl.Bound(u => u.totalCapacity_Reason.reasonName).Title("Reason").EditorTemplateName("ReasonEditor").ClientTemplate("#:totalCapacity_Reason.reasonName #");
cl.Bound(u => u.totalCapacity_Reason_Notes).Title("Notes");
cl.Bound(u => u.runState).Title("Run State").Width("10ex");
cl.Bound(u => u.runState_Reason.reasonName).Title("Reason").EditorTemplateName("ReasonEditor").ClientTemplate("#:runState_Reason.reasonName #");
cl.Bound(u => u.runState_Reason_Notes).Title("Notes");
//cl.Bound(u => u.reasonlist).ClientTemplate("#: reasonlist.reasonName#");
//cl.Bound(u => u.reasonlist.reasonCode).EditorTemplateName("ReasonEditor").ClientTemplate("#:reasonlist.reasonName #");
})
.Sortable()
//.Scrollable()
.Editable(ed => ed.Mode(GridEditMode.InCell))
.DataSource(ds =>
{
ds.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(
m => {
m.Id(u => u.TED_ENT_DATA_DAY_GEN_ID);
m.Field(u => u.hourEnding).Editable(false);
//m.Field(u => u.reasonlist).DefaultValue(ViewData["defaultReason"] as TEData.Model.Gen_Lists);
}
)
.Read(rd => rd.Action("Get_Data", "TECommon")
.Data("userInput")
);
})

EditorTemplates Code

@model TEData.Model.ReasonCode_Lists
@(Html.Kendo()
.DropDownListFor(m => m.reasonName)
.Name("ddlEditor")
.DataTextField("reasonName")
.DataValueField("reasonCode")
.DataSource(d=>d.Read(r=>r.Action("Get_Reason_Codes", "TECommon")))
)

I have tried some sample from telerik and it was not helped me. Please help me

http://demos.telerik.com/aspnet-mvc/grid/editing-custom

Thanks,

Vetri.

Grid

answered on 18 Oct 2017

1 answer

135 views

DropDownList MVC - Virtualization

Why virtualization of DropDownList does not work properly?

Step by step instructions on how to reproduce the problem:
1. Open DropDownList.
2. Start writing the keyword.
3. Select option.
4. Close DropDownList.
5. Open again DropDownList.
6. Start writing another keyword.
Result: From the server I get the right response. DropDwonList does not show new result. It still shows the previous.
The same propblem is on your page with example -> https://demos.telerik.com/aspnet-mvc/dropdownlist/virtualization

DropDownList

answered on 17 Oct 2017

2 answers

127 views

Databoubd events is not showin in Kendo combobox

Hi Team,

Currently I am using Kendo version 2015.1.429 and I am not able to find the Databound event for Kendo combobox

Please advise?

Thanks,

Vetri.

DropDownList

answered on 16 Oct 2017

1 answer

269 views

Kendo Grid Export (MVC)

I am having a Kendo Grid (in MVC) with one cell highlighted in red/green color. When I do excel export, I am not getting the grid cell color exported to excel. Is there any workaround for getting the color displayed.

Also the dollar values in the grid are not getting exported to excel and pdf when exporting. Please provide solution for this too.

Grid

answered on 16 Oct 2017

1 answer

190 views

Kendo Grid Export

I have two questions on Kendo Grid Export (using ASP.Net MVC)

1) I have 2 kendo grids on a single ASP.NET MVC page. I wanted to export data from both the grids to a single worksheet in excel.

As per the below code, data is getting exported to two worksheets (2 tabs) in a single excel file. I wanted to have the data displayed in a single worksheet instead of 2 worksheets.

var sheets = [
                       productsWorkbook.sheets[0],
                       ordersWorkbook.sheets[0]
                     ];
                     sheets[0].title = "XXX_DataView";
                     sheets[1].title = "YYY_DataView";
                     var workbook = new kendo.ooxml.Workbook({
                         sheets: sheets
                     });
                     kendo.saveAs({
                         dataURI: workbook.toDataURL(),
                         fileName: "XXX_YYY_DataView.xlsx"

2) Is there any limit on data export to PDF. We have difficulty in exporting more than 6000 rows of data to PDF. Please let us know how we can get this resolved.

Appreciate your faster response. Thanks!

Grid

answered on 16 Oct 2017

2 answers

536 views

Telerik ASP.NET MVC Grid Foreign Key Refresh

Hello guys!

I have a little question but before posting source code I will just try to explaion. Basically I have a Grid with a foreign key. Everything works fine but on the same screen I have a dialog that updates the table which holds the foreing key values.

Let's say I have a Group with Id and Name. The Ids are loaded in the Grid and everything is fine. I can change the Names from outside the gird but when I refresh the Grid the group names are not updated.

I use $("#Grid").data("kendoGrid").dataSource.read(); to refresh the Grid. The other columns are refreshed, I see the loading indicator but the foreign key is not updated.

I would be grateful if anyone could help.

Regards,

Kaloyan Manev

Grid

answered on 16 Oct 2017

12 answers

749 views

Grid with EditorTemplate using ComboBox with Server Filtering - Create not populating the row

Hello,

I have a form that contains several fields and also an editable Grid. The grid is binding correctly to the ViewModel however when I Create a new row or edit an existing row the data is not populated in the row fields. The editable fields are populated correctly like if I go back to an added row but the label view is populated with no value like so:

<td class="" role="gridcell" data-role="editable">

<input type="hidden" value="" name="AffectedItems[0].Title">

</td>

It should be like this:

<td class="" role="gridcell" data-role="editable">

Item 1

<input type="hidden" value="Item 1" name="AffectedItems[0].Title">

</td>

I am not sure what is wrong with my implementation here is my code - any help is appreciated:

View:

@(Html.Kendo().Grid(Model)

.Name("AffectedItems")

.ToolBar(tools => tools.Create().Text("Add Affected Item"))

.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))

.Columns(columns =>

{

columns.Bound(p => p.Title).ClientTemplate("#= Title #" +

"<input type='hidden' name='AffectedItems[#= index(data)#].Title' value='#= Title #' />"

).EditorTemplateName("AffectedItemsEditor");

columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +

"<input type='hidden' name='AffectedItems[#= index(data)#].Id' value='#= Id #' />"

);

columns.Command(command => command.Destroy()).Width(100);

})

.DataSource(dataSource => dataSource.Ajax()

.Model(model =>

{

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

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

})

.ServerOperation(false)

)

<script>

function index(dataItem) {

var data = $("#AffectedItems").data("kendoGrid").dataSource.data();

return data.indexOf(dataItem);

}

function filterAffectedItems() {

return {

itemFilter: $("#AddAffectedItem").data("kendoComboBox").input.val()

};

}

</script>

EditorTemplate:

@(Html.Kendo().ComboBox()

.Name("AddAffectedItem")

.Placeholder("Choose One...")

.DataTextField("Text")

.DataValueField("Value")

.MinLength(3)

.Filter(FilterType.Contains)

.AutoBind(false)

.DataSource(dataSource => dataSource

.Read(read => read.Action("GetAffectedItemsList", "AffectedItems")

.Data("filterAffectedItems"))

.ServerFiltering(true)

))

Controller:

public class AffectedItemsController : Controller

{

public JsonResult GetAffectedItemsList(string itemFilter)

{

var items = new List<SelectListItem>();

for (int i = 1; i <= 60; i++)

{

items.Add(new SelectListItem { Value = i.ToString(), Text = "Item " + i.ToString() });

}

items.Add(new SelectListItem { Value = "Desktop", Text = "Desktop" });

if (!String.IsNullOrEmpty(itemFilter))

return Json(items.AsEnumerable().Where(i => i.Text.Contains(itemFilter)).Take(50), JsonRequestBehavior.AllowGet);

return Json(items.AsEnumerable().Take(50), JsonRequestBehavior.AllowGet);

}

Grid

answered on 16 Oct 2017

1 answer

160 views

Issues with scroll position when SignalR update occurs

Hello,

I have a grid that when there is an update via SignalR all of the clients that the update is sent to scrolls to the top.

I have attached a gif of the issue the window on the right is what the other clients see

Grid

answered on 13 Oct 2017

4 answers

415 views

Skipping non-editable cells when tabbing in grid

Hi there, i am running into a bit of a problem. I want to tab through a batch edit grid and i have certain cells that are non-editable. I read in Telerik's documentation that for this to work, i have to remove "Navigatable()" from grid. But if there is not event to attach to, how does the java script execute when i press the Tab key. Could this also be the reason whey i get the error "The grid is undefined."

Here is the JavaSript

01.<script type="text/javascript">

02. var grid = $('#PlanPepole').data('kendoGrid');

03.

04. console.log("this is grid:", grid);

05.

06. grid.table.on('keydown', function (e) {

07. if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {

08. e.preventDefault();

09. var currentNumberOfItems = grid.dataSource.view().length;

10. var row = $(e.target).closest('tr').index();

11. var col = grid.cellIndex($(e.target).closest('td'));

12.

13. var dataItem = grid.dataItem($(e.target).closest('tr'));

14. var field = grid.columns[col].field;

15. var value = $(e.target).val();

16. dataItem.set(field, value);

17. var nextCellCol = 3;

18.

19. if (row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {

20. console.log("this is col:",col);

21. var nextCellRow;

22. if (col === 3) {

23. nextCellCol = 4;

24. }

25. else if (col === 4) {

26. nextCellCol = 5;

27. }

28. else if (col === 5) {

29. nextCellCol = 6;

30. }

31. else if (col === 6) {

32. nextCellCol = 7;

33. }

34.

35. if (e.shiftKey) {

36. nextCellRow = nextCellCol === 3 ? row : row - 1;

37. } else {

38. nextCellRow = nextCellCol === 3 ? row + 1 : row;

39. }

40.

41. if (nextCellRow >= currentNumberOfItems || nextCellRow < 0) {

42. return;

43. }

44.

45. // wait for cell to close and Grid to rebind when changes have been made

46. setTimeout(function () {

47. grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));

48. });

49. }

50. }

51. });

52.

53.</script>

Here is my code Index.cshtml

01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanPeopleVM>()

02. .Name("PlanPepole")

03. .Columns(columns =>

04. {

05. columns.Bound(e => e.PeopleCategoryName).Title("").Width(154);

06. columns.Bound(e => e.MinistryGroupCategoryName).Title("Ministry Group").Width(2);

07. columns.Bound(e => e.AgeCategoryName).Title("Age Category").Width(2);

08. columns.Bound(e => e.PeopleQ1).Title("Q1").Width(79);

09. columns.Bound(e => e.PeopleQ2).Title("Q2").Width(79);

10. columns.Bound(e => e.PeopleQ3).Title("Q3").Width(79);

11. columns.Bound(e => e.PeopleQ4).Title("Q4").Width(79);

12. columns.Bound(e => e.Annual).Width(79);

13. })

14. .ToolBar(toolbar =>

15. {

16. toolbar.Save();

17. })

18. .Editable(editable => editable.Mode(GridEditMode.InCell))

19. //.Navigatable()

20. .Events(events =>

21. {

22. events.DataBound("Ppg_Uneditable_ColandRow");

23. events.SaveChanges("disableBeforeUnload");

24. events.Edit("onEditPlanPepole");

25. })

26. .DataSource(dataSource => dataSource

27. .Ajax()

28. .ServerOperation(false)

29.

30. .Batch(true)

31. .Model(model =>

32. {

33. model.Id(p => p.PlanPeopleID);

34. model.Field(p => p.PeopleCategoryName).Editable(false);

35. model.Field(p => p.MinistryGroupCategoryName).Editable(false);

36. model.Field(p => p.AgeCategoryName).Editable(false);

37. })

38. .PageSize(30)

39. .Read(read => read.Action("People_Read", "PlanPeople"))

40. )

41.)

Grid

answered on 12 Oct 2017

5 answers

171 views

Data binding for Azure DocumentDB

I created a standard MVC web app in VS 2015

I want to use the Grid and can not figure out how to data bind it

Grid

answered on 12 Oct 2017