Questions on UI for ASP.NET MVC Forum

9 answers

861 views

[Solved] Load Treelist on Treeview Expand event

Hi All,

I am having a requirement to load a treelist when i click on any of the node in treeview (i.e. to bind treelist on treeview expand event).

I tried various method but nothing worked for me (even i try to bind dummy data)

My code is as below

<div class="control-container">

    @(Html.Kendo().TreeView()

                    .Name("treeview-kendo")

                    .TemplateId("treeview")

                    .DataSource(dataSource => dataSource

                        .Model(m => m

                        .Id("parentId")

                        .HasChildren("HasChildren"))

                        .Read(read => read

                        .Action("BindingTreeView", "BrowseProgram")))

                    .DataTextField("ShortName")

                    .Deferred()

                    .Events(events => events.Expand(

                        @<text>

   function (e) {

    var data = this.dataItem(e.node);

    if (data.id != null) {

        $.ajax({

            url: "/BrowseProgram/GetContractData",

            type: "POST",

            dataType: "json",

            data: {

                'levelId': data.id

            },

            success: function (response) {

                if (response != null) {

                    var dataSourcer = new kendo.data.TreeListDataSource({

                        data: response

                    });

                    $("#treelist").kendoTreeList({

                        dataSource: dataSourcer

                    });

                }

                else {

                    alert("Something went wrong");

                }

            },

            error: function () {

                alert("Some error occurred!!");

            }

        });

    }

}





                        </text>

                ))

              )

</div>

Controller Code

public JsonResult GetContractData(int? levelId, [DataSourceRequest] DataSourceRequest request)

{

if (levelId != null)

{

IEnumerable<ContractListViewModel> objContractListViewModel = null;

long contactId = 331489;

string userType = "Secured";

objContractListViewModel = ApiHelper.GetRequest<IEnumerable

<ContractListViewModel>>(string.Format(Constants.ApiUrls.TreeViewGetLevelContractsWithCacheLevelContractInfo, levelId, contactId, userType));

var result = objContractListViewModel.AsQueryable().ToTreeDataSourceResult(request, f => f.ContractId, f => f.ParentContractId, f => f);

return Json(result, JsonRequestBehavior.AllowGet);

}

else

return null;

}

public JsonResult BindingTreeView(int? parentId)

{

IEnumerable<TreeViewModel> objTreeView = null;

long contactId = 331489;

string userType = "Secured";

if (parentId != null)

{

objTreeView = ApiHelper.GetRequest<IEnumerable<TreeViewModel>>(string.Format(Constants.ApiUrls.TreeViewGetChildLevelsFiltered, parentId, contactId, userType));

}

else

{

objTreeView = ApiHelper.GetRequest<IEnumerable<TreeViewModel>>(string.Format(Constants.ApiUrls.GetTreeViewRootLevelsAndContracts, contactId, userType));

}

var result = objTreeView.Select(p => new

{

parentId = p.LevelId,

p.ShortName,

p.HasChildren,

p.WrapUpIndicator

});

return Json(result, JsonRequestBehavior.AllowGet);

}

Kendo Treelist

@(Html.Kendo().TreeList<Aon.Ars.Retail.AonWrap.Web.Models.ContractListViewModel>

()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(e => e.ContractNumber).Title(@AonWrapStringResources.Generic_Contract_Number);

columns.Add().Field(e => e.ContractorName).Title(@AonWrapStringResources.Generic_Contractor);

columns.Add().Field(e => e.ContractType).Title(@AonWrapStringResources.BrowseProgram_TypeStatus).TemplateId(Constants.ContractTypeTemplate).Width(100);

columns.Add().Field(e => e.VerifiedInsuranceCostStatus).Title(@AonWrapStringResources.BrowseProgram_VerifiedInsCost).TemplateId(Constants.VerifiedTemplate).Width(100);

columns.Add().Field(e => e.EnrollmentStatus).Title(@AonWrapStringResources.Generic_Label_Enroll).TemplateId(Constants.EnrollmentTemplate).Width(90);

columns.Add().Field(e => e.PayrollStatus).Title(@AonWrapStringResources.Generic_Label_Payroll).TemplateId(Constants.PayrollTemplate).Width(90);

columns.Add().Field(e => e.COIStatus).Title(@AonWrapStringResources.BrowseProgram_ReqCOIs).TemplateId(Constants.COIStatusTemplate).Width(90);

columns.Add().Field(e => e.WorkCompleteStatus).Title(@AonWrapStringResources.Generic_Label_Work_Complete).TemplateId(Constants.WorkTemplate).Width(105);

})

.Sortable()

.Height(540)

.Deferred()

)

TreeList

answered on 15 Oct 2020

3 answers

2.7K+ views

Adding a place holder to date field

Hi there guys, as the title states, i am try to add a placeholder to a date field.

<div class="form-group">

@(Html.Kendo().DatePicker()

.Name("DateReceived")

.Format("dd-MMM-yy")

.DateInput()

.HtmlAttributes(new { style = "width: 90%", title = "DateReceived", placeholder="Enter A Date"})

)

</div>

but regardless of what i do, it doesn't show the placeholder value. What can i do to remedy this?

DatePicker

answered on 15 Oct 2020

3 answers

1.3K+ views

How can I can the value and data of the chosen combobox and display the information on a textbox?

@(Html.Kendo().ComboBox()
.Name("TransferItemId")
.DataTextField("Location.Code")
.DataValueField("Id")

.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetInventoryPallets", "Item" });

})
.ServerFiltering(true);
})

)

ComboBox

answered on 14 Oct 2020

1 answer

270 views

Breadcrumb MVC (real world) examples

Hello,

are there any examples on how to use the Breadcrumb control with MVC Actions, and maybe multiple root items to accomodate an application structure with views and sub-views?

So far we were not able to implement the Breadcrumb into out application, neither by BindToLocation nor by defining items explicitly; the navigation/routing always breaks in some part or another.

Kind regards.

Breadcrumb

answered on 14 Oct 2020

3 answers

10.0K+ views

How to set the Kendo UI Grid Column Width to Auto

Hi,

I would like to set Kendo UI MVC Grid Column width to auto size.

Anybody can please help me in this.

--Satish

Grid

answered on 13 Oct 2020

3 answers

1.8K+ views

Kendo Grid Checkbox/Radio Buttons not maintang selections on Grid Actions

Hi Kendo Team,

We have the following issues with radio button/checkboxes in a Grid:

1) In our grids, we have radio buttons or checkboxes for selection of records. However, on sorting or filtering, the selections are lost. Please advise how to maintain selections.

2) We have a grid which has is a bound column with custom template of a checkbox like so:

columns.Bound(m => m.Indicator)
.Title("Is Indicator")
.Template(@<text></text>)
.ClientTemplate(
"<input name='Indicator-#=(Id)?Id:uid#' id='Indicator-#=(Id)?Id:uid#' type='checkbox' #= Indicator ? checked='checked':'' # class='k-checkbox bind-checkbox' data-column-key='Indicator' />" +
"<label class='k-checkbox-label' for='Indicator-#=(Id)?Id:uid#'></label>" +
"<input name='view-value-#=(Id)?Id:uid#' type='hidden' value='#=Indicator#'>")
.Width(80);

When this grid is in a full page, the filtering/sorting maintains the checkbox selection. However, when this grid is in a kendoWindow popup, the selections are not maintained. Please advise.

Thanks.

Grid

answered on 13 Oct 2020

2 answers

1.6K+ views

Data does not display in the Kendo Grid MVC ASP.NET Core

I am trying out fairly basic databinding with hard coded data using Kendo Grid using MVC - ASP.NET Core. The Grid renders fine and the .read method is called. It returns JSON however, the data does not display in the grid. I verified no errors related to aspnet-mvc.js script. The required scripts are listed only once and in the correct order. Help appreciated. I tried using JsonResult. No luck.

@using Kendo.Mvc.UI

@model IEnumerable<GridPortal.Web.Models.Company>

<script src="~/lib/kendo/2020.1.406/js/kendo.all.min.js"></script>

<script src="~/lib/kendo/2020.1.406/js/kendo.web.min.js"></script>

<script src="~/lib/kendo/2020.1.406/js/kendo.aspnetmvc.min.js"></script>

<div style="width:100%;height:60%">

@(Html.Kendo().Grid<GridPortal.Web.Models.Company>() .Name("BindGridUsingRead")

.Columns(columns => {

columns.Bound(p => p.Id).Width(15).Title("ID").Filterable(false);

columns.Bound(p => p.Name).Title("Name").Width(30).Filterable(false);

columns.Bound(p => p.CompanyId).Title("CompanyID").Width(15).Filterable(false);

})

.Scrollable()

.Pageable()

.Filterable(ftp => ftp.Mode(GridFilterMode.Row))

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

.HtmlAttributes(new { style = "height: 100%" })

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

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

.ServerOperation(false)

.Read(read => read.Action("BindGrid", "Home"))) )

</div>

public ActionResult BindGrid([DataSourceRequest] DataSourceRequest request)

{

var company = new List<Company>();

company.Add(new Company

{

CompanyId = 102,

Id = 1,

Name = "John Smith"

});

DataSourceResult result = company.ToDataSourceResult(request);

return Json(result);

}

public void ConfigureServices(IServiceCollection services)

{

services.AddControllersWithViews();

services.AddKendo();

services.AddMvc().AddNewtonsoftJson(o =>

{

o.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;

}).SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Version_3_0);

}

Grid

answered on 12 Oct 2020

10 answers

1.6K+ views

[Solved] Pass parameters to SignalR read method

Hi all.

I am looking for a way to pass filter criteria to my read method. E.g. the resource list, the startdate and the end date.
There is a thread solving this for a SignalR bound grid. But I don't see how to do it with the scheduler

Any ideas?

Kind regards

Bernd

Scheduler

answered on 09 Oct 2020

6 answers

1.4K+ views

Multiple clickable icons in grid column

Hi,

I am using a Telerik MVC Grid and I am trying to get multiple clickable icons in one column. Did manage to do this via

columns.Command(command => {
command.Custom("View").Click("view").IconClass("k-icon k-i-preview k-i-eye");

command.Custom("Modify").Click("modify").IconClass("k-icon k-i-track-changes"); });

What I really want to achieve is to do this not via command, but in a normal column, using own icon with "onclick" event.

Did try this, but does not really work.

columns.Template(@<text><span class='viewicon' onclick='view'><span class='modifyicon' onclick='modify'></text>)

When I tried : columns.Template(@<text><span class='viewicon' onclick='view'></text>), the event does not get attached to the icon.

Maybe you have some useful input on the topic.

Thanks a lot!

Grid

answered on 09 Oct 2020

4 answers

643 views

Scheduler event template id within templates

Hi,

I currently have a scheduler setup that is loaded within a template.
The problem is if I try to add a EventTemplateId to the scheduler within the template with the fluent interface, it will break because the prefixed hash is not escaped. Normally this is not a problem but it's my understanding that within templates if using Ids for selectors the hash needs to be escaped
I've attached a screenshot of the error I receive in the console that should hopefully make things clearer.

Please let me know if i can help any further

Thanks

Thomas

Here is how my scheduler is configured

01.@(Html.Kendo().Scheduler<TelerikScheduleViewModel>()

02. .Name("staffAvailability")

03. .Height(300)

04. .HtmlAttributes(new { data_bind = "bindDate:start, filterBy:Staff, visible:Staff.length" })

05. .Timezone("Europe/London")

06. .Mobile(MobileMode.Auto)

07. .MajorTick(120)

08. .Editable(false)

09. .ShowWorkHours(true)

10. .Footer(false)

11. .AutoBind(false)

12. .Views(views =>

13. {

14. views.TimelineView(timeline =>

15. {

16. timeline.Footer(false);

17. timeline.Groups(group => group.Resources("StaffResources").Orientation(SchedulerGroupOrientation.Vertical));

18. timeline.EventTemplateId("some-event-template");

19. });

20.

21. })

22. .DataSource(dataSource => dataSource

23. .ServerOperation(false)

24. .Events(e => e.Change("staffOnChange").RequestStart("staffRequestStart"))

25. .Read(read => read.Action("ListStaffSessions", "Calendar").Data("getStaffAttendance"))

26. ).Events(e => e.DataBound("dataBoundAttendanceControl").DataBinding("dataBindingAttendanceControl"))

27. )

Scheduler

answered on 09 Oct 2020