Questions on UI for ASP.NET MVC Forum

1 answer

246 views

Validation in hierarchical Grid

Hi!

I've got a small MVC application with hierarchical Kendo UI MVC Grid in it. Here is the code for the main grid.

01.Html.Kendo().Grid<PurchaseStageViewModel>()

02. .Name("purchaseStagesGrid")

03. .ToolBar(toolbar =>

04. {

05. if (!Model.ReadOnly)

06. {

07. toolbar.Create();

08. }

09. })

10. .Editable(e => e.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))

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

12. .Columns(c => {

13. c.Bound(s => s.Name);

14. c.Bound(s => s.StartDate).Format("{0:dd.MM.yyyy}");

15. c.Bound(s => s.EndDate).Format("{0:dd.MM.yyyy}");

16. })

17. .DataSource(d => d.Ajax().

18. Model(m =>

19. {

20. m.Id(p => p.Id);

21. })

22. .Read(a => a.Action("GetStages","PurchaseStage"))

23. .Create(a => a.Action("CreateStage", "PurchaseStage"))

24. .Update(a => a.Action("UpdateStage","PurchaseStage"))

25. .Destroy(a => a.Action("DeleteStage", "PurchaseStage"))

26. )

27. .ClientDetailTemplateId("childStagesTemplate")

And this code is for details.

01.<script id="childStagesTemplate" type="text/kendo-tmpl">

02. @(

03. Html.Kendo().Grid<purchaseStageViewModel>()

04. .Name("grid_#=Id#")

05. .TableHtmlAttributes(new {@class ="k-grid-nested" })

06. .ToolBar(toolbar =>

07. {

08. toolbar.Create());

09. })

10. .Editable(e => e.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))

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

12. .Columns(c =>

13. {

14. c.Bound(s => s.Name);

15. c.Bound(s => s.StartDate).Format("{0:dd.MM.yyyy}");

16. c.Bound(s => s.EndDate).Format("{0:dd.MM.yyyy}");

17. c.Command(command =>

18. {

19. command.Edit();

20. command.Destroy();

21. });

22. })

23. .DataSource(d => d.Ajax().

24. Model(m =>

25. {

26. m.Id(p => p.Id);

27. m.Field(p => p.Id).DefaultValue(default(long));

28. m.Field(p => p.ParentStageId).DefaultValue("#=Id#"); //ParentStageId - is a string type

29. })

30. .Read(a => a.Action("GetNestedStages", "PurchaseStage", new { parentStageId = "#=Id#" }))

31. .Create(a => a.Action("CreateStage", "PurchaseStage",new { parentStageId = "#=Id#" }))

32. .Update(a => a.Action("UpdateStage", "PurchaseStage"))

33. .Destroy(a => a.Action("DeleteStage", "PurchaseStage"))

34. )

35. .ClientDetailTemplateId("testTemplate")

36. .ToClientTemplate()

37. )

38.</script>

Actualy this grid appears to be recursive, so each detail contains it's own details grid. For DateTime fields I use Kendo DatePicker.

So each row has StartDate and EndDate. I need to implement validation in all nested grids so the StartDate and EndDate properties of nested grids could be selected only in StartDate and EndDate range of parent row. Is there any way to implement it?

Grid

answered on 10 Aug 2016

6 answers

331 views

[Solved] MVC6 /ASP.Net Core Support

Hello. I've got telerik.ui.for.aspnetmvc.2016.2.714.commercial installed and I've got the MVC6 samples running (C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2016\wrappers\aspnetmvc\Examples\MVC6\Kendo.Mvc.Examples). Very cool!

I can't seem to find the mention of Diagram anywhere out there. I noticed it isn't supported in the "core" version of Telerik.UI.for.AspNet.Core per the GITHUB page:
https://github.com/telerik/kendo-ui-core

It shows Diagram is supported in "Professional" but I'm unable to find a sample of someone using the professional Kendo with ASP.NET Core.

Anyone figured this out?

Diagram

answered on 10 Aug 2016

1 answer

484 views

"elem.getClientRects is not a function" error when using Date Picker

ASP.NET MVC Core app

I get "elem.getClientRects is not a function" when clicking on the control to open the calendar. If I enter the date using text the control works but the calendar pop up never opens when clicked.

It worked with earlier jquery versions but when I moved to 3.1 (for compatibility with another lib) it stopped working. I am using the kendo bootstrap themed libraries and bootstrap 3.3.7.

Thanks

DatePicker

answered on 10 Aug 2016

11 answers

2.3K+ views

[Solved] Define a custom Html.Kendo extension helper

I would like to create a custom Html helper for a Kendo grid. We have a particular view-model combination which will be used across multiple controllers. I would like to be able to create a custom help method for display a grid of these models. It would basically be a short cut to use in all the views so we wouldn't have to maintain the same code in many different files. I would like to call it like this:

@Html.Kendo().ConfigruationGrid();

@* or *@

@Html.ConfigurationKendoGrid();

And have it output all the bells and whistles of a full grid declaration, like this:

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

.Name("KnockoutQuestions")

.DataSource(datasource => datasource

.Ajax()

.Model(model =>

{

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

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

model.Field(k => k.Enabled).DefaultValue(true);

})

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

.Create(create => create.Action("Create", "KnockOutQuestion"))

.Read(read => read.Action("Read", "KnockOutQuestion"))

.Update(update => update.Action("Update", "KnockOutQuestion"))

)

.Columns(columns => {

columns.ForeignKey(k => k.AdminLeadType,

new SelectList(from pair in BaseKnockOutQuestionModel.EnumLeadTypes select new { text = pair.Value, value = pair.Key },

"value", "text"));

columns.ForeignKey(k => k.QuestionTypeId,

new SelectList(from pair in BaseKnockOutQuestionModel.QuestionTypes select new { text = pair.Value, value = pair.Key },

"value", "text"));

columns.Bound(k => k.QuestionText);

columns.Bound(k => k.Answer1Text);

columns.Bound(k => k.Answer2Text);

columns.Bound(k => k.Price);

columns.Bound(k => k.Enabled);

columns.Command(command => command.Edit());

})

.ToolBar(toolbar => { toolbar.Create(); })

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.Pageable()

.Sortable()

.Filterable()

)

I know how to do custom Html helper methods, but I haven't found any examples of how to do a shortcut like this. It's probably something simple like using the "this HtmlHelper helper" param to execute and return the output of the Kendo().Grid() function. I wanted to ask anyways so I could hopefully avoid common mistakes/pitfalls.

Grid

answered on 10 Aug 2016

2 answers

179 views

A installation error of Telerik.UI.for.Aspnet.Core (v2016.2.714)

Hi,

A error was encounted when I installed Telerik.UI.for.Aspnet.Core (v2016.2.714) by NuGet in VS2015. The error detail is as the attached file.

Could you please help to check them and tell me how to install it correctly. Is there any special setting in VS2015 for the installation?

BTW, I can't submit support ticket through login of my account now (investigating cause), I want to get your help from here as suggest from your support team.

Regards,

Amstrong

Aug.8, 2016

Installer and VS Extensions

answered on 10 Aug 2016

1 answer

387 views

[Solved] Set Textbox value in Editor Template from Javascript

Hello,

I have a grid with a Editor Template with one TextBox and a Upload Control (see Code)

in the Upload Control Client Event "Success" I want to set the filename to the TextBox Control - how to Access the TextBox Control in edit mode of the template from this Event?

@model string

@using Kendo.Mvc.UI

@Html.TextBoxFor(model => model, new { @class = "k-textbox" })

@(Html.Kendo()

.Upload()

.Multiple(false)

.Messages(m => m.HeaderStatusUploaded("Erfolgreich"))

.Messages(m => m.Select("Word Dokument hochladen..."))

//.HtmlAttributes(new { accept = "application/pdf" })

.Name("Wordvorlage1Upload")

.Async(a => a

.Save("Save", "Auszeichnungsart")

.AutoUpload(true)

)

.Events(events => events

.Upload("onUpload")

.Success("onUploadSuccess")

)

the Javascript Events

function onUpload(e) {

//var grid = $("#grid").data("kendoGrid");

//grid.saveChanges();

e.data = { Auszeichnungsart_ID: $("#Auszeichnungsart_ID").val() };

}

function onUploadSuccess(e) {

alert(e.files[0].name);

here I want to set the TextBox value of the edit template

var grid = $("#grid").data("kendoGrid");

grid.dataSource.read();

}

Grid

answered on 09 Aug 2016

1 answer

3.0K+ views

DropDownList with dynamic parameter in DataSource

Greetings!

I've implemented an EditorTemplate that uses Kedno.DropDownList for one of the model properties. Here is an example of it

1.@(Html.Kendo().DropDownList()

2. .Name(ViewData.ModelMetadata.AdditionalValues["id"].ToString())

3. .OptionLabel("not selected")

4. .DataTextField("Name")

5. .DataValueField("Id")

6. .DataSource(ds => ds.Read(a => a.Action("GetAvailiableOrders","Orders")))

7. .Filter(FilterType.Contains)

8.

I use this model to populate grid, like so

01.@(

02. Html.Kendo().Grid<CustomerViewModel>()

03. .Name("customersGrid")

04. .ToolBar(toolbar =>

05. {

06. if (!Model.ReadOnly)

07. {

08. toolbar.Create();

09. }

10. })

11. .Editable(e => e.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))

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

13. .Columns(c => {

14. c.Bound(s => s.Order); //EditorTemplate will be used here

15. c.Bound(s => s.ConsumerName).Format("{0:dd.MM.yyyy}");

16. c.Bound(s => s.OrderDate).Format("{0:dd.MM.yyyy}");

17. if (!Model.ReadOnly)

18. {

19. c.Command(command =>

20. {

21. command.Edit();

22. command.Destroy();

23. });

24. }

25. })

26. .DataSource(d => d.Ajax().

27. Model(m =>

28. {

29. m.Id(p => p.Id);

30. m.Field(p => p.Id).DefaultValue(default(long));

31. })

32. .Read(a => a.Action("GetCostumers","Costumers"))

33. .Create(a => a.Action("CreateCostumer", "Costumers"))

34. .Update(a => a.Action("UpdateCostumer","Costumers"))

35. .Destroy(a => a.Action("DeleteCostumer", "Costumers"))

36. )

37.)

I need some how to pass additional argument to the DataSource Read method,this parameter depends on other model property an is uiniqe for each grid row.

.DataSource(ds => ds.Read(a => a.Action("GetAvailiableOrders","Orders"))) //Need to pass additional argument here dependting on current row

Is there any way to implement this?

DropDownList

answered on 09 Aug 2016

1 answer

114 views

grid filter to next view

Hi,

I have a grid with some of the filters set. In the toolbar I have a new button going to a new page.

After inserting a new line in the grid I want to go back to the origional grid and set all the filters again.

Is this possible?

In the example in the attachment:

I have filtered on Project Number and Project Subnumber and pressed new which give me the bottom part of the image on a new webpage.

After pressing back or save I want to let the user going back to the old filtered information.

With kind regards,

Maurice Lucas

Grid

answered on 09 Aug 2016

2 answers

317 views

[Solved] Deleting Row in Grid with PageSize 'All' Selected in Kendo UI ASP.NET MVC

I have two grids with pageSize enabled which includes 'All' text to display all the items of the grid. There is a button in the form which when clicked will move items from one grid to other. The issue is when i select pageSize 'All' and click the button to move the item, the pageSize label changes to total count of the grid item. e.g. if grid1 has 50 items and if i move 1 item from grid1 to grid2, the pageSize text 'All' changes to '50' in grid1 after the move is performed.

I have created sample which has grid and delete button to remove one item from grid to mock this behavior. To replicate this behavior, select 'All' in the grid and click 'Delete' button. You should see '4' in the pageSize after the removal of the item from the grid.

http://dojo.telerik.com/eqIDe/2

Is there anyway to have 'All' text selected even after the removal of item from grid1?

Thanks.

Avinash

Grid

answered on 08 Aug 2016

4 answers

2.0K+ views

Set color of a cell based on data

I'm struggling on how to set the color of a cell in the grid based on data. I see where this question has been asked a lot before - but I'm not seeing an answer that is understandable to me.

I am using ASP.NET MVC with a grid that has an AJAX datasource. The datasource returns a column that contains the color I want the cell to be.

The view's model contains the selection fields for the page. The grid is using a different class named: PlannedProjectList. There is a field in PlannedProjectList that contains the color of the cell.

@model LRFP.ViewModels.PlannedProjectSelection

@(Html.Kendo().Grid<LRFP.ViewModels.PlannedProjectList>()

I was able to set the color of the cell with this. But I don't want to use a model field. Because each row can be a different color. So I need to use a field from the data on the grid.

columns.Bound(c => c.PlannedProjectName).HtmlAttributes(new { style = "color: " + @Model.fieldColor + " ;" });

Is it possible to do what I'm asking? Or is there another way? If so, please show a detailed example. I'm a newbie - so the more detailed example the better.

Thanks for your help.

Grid

answered on 08 Aug 2016