Questions on UI for ASP.NET Core Forum

20 answers

1.2K+ views

Adding Breadcrumb to my kendo grid toolbar template not working

Hi All,

I cant seem to make breadcrumb work inside kendo grid toolbar template.

Heres my code, what did I miss?

Please note that the button menu, user type dropdown, field search dropdown, and searchbox is showing on my grid toolbar.

@(Html.Kendo().Grid<UsersList>
()

.ToolBar(t =>
{
t.ClientTemplateId("GridToolbarTemplate");
})

)

</script>

Breadcrumb

answered on 12 Mar 2020

6 answers

1.5K+ views

Passing data from column to controller

Hello,

I'm trying to utilize some server side filtering as we have a lot of records to filter through and it doesn't make too much sense to do it on the client side.

@(Html.Kendo().Grid<SM.Domain.Med.Explant>()

.Name("grid").Scrollable(c => c.Enabled(true).Height(1000))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("ExplantKendoInitializer", "MedDevice", new { status = Model.Status }).Data("explantsReadData"))

)

.Columns(columns =>

{

columns.Bound(c => c.Device.DeviceType.Name)

.Width(180)

.Title("Type")

.HtmlAttributes(new { id = "typeDropdown" })

.Filterable(filterable => filterable

.Cell(cell => cell

.DataTextField("Name")

.ShowOperators(false)

.InputWidth(170)

.Operator("contains")

.SuggestionOperator(FilterType.Contains)

.Template("deviceTypeFilter")

)

);

.Filterable(filterable => filterable

.Extra(false)

.Messages(m => m.Info("Items equal to:"))

.Operators(operators => operators

.ForString(str => str.Clear()

.IsEqualTo("Is Equal To")

.Contains("Contains")

)

This is the bulk of what most of the grid looks like.

Below is the explantsReadData function that I am referencing in the .Read portion of the DataSource

function explantsReadData() {

return {

type: $('#typeDropdown')

};

}

And the filterable function that we are using if that is of any help.

function deviceTypeFilter(element) {

element.element.kendoDropDownList({

dataSource: @(Html.Raw(Json.Serialize(Model.Filters.DeviceTypes))),

optionLabel: "--Select Device Type--",

});

}

I'm trying to pass the parameter into the ExplantKendoInitializer where I am making a DataSourceRequest. However type always returns as null. I'm not sure of the best way to set an Id or Name to the drop down list which has all of what I need to filter against.

If there is something I'm missing, or a better way to approach this, please let me know.

Be well,

Bradley

Grid

answered on 11 Mar 2020

1 answer

192 views

CreateChild()

I have your Kendo.Mvc.Examples solution and I cannot figure out how your Add Child button works. I have mimicked your control definition as well as have similar implementations of the controller and models. However, when I select that button it locks up the browser and eventually asks if I want to abandon the request. Can you give me an overview of what that button click depends on?

Thanks for your help,

Joel

TreeList

answered on 10 Mar 2020

2 answers

353 views

JQuery conflict

Hi,

I am trying to use Kendo UI ASP.NET core component with the theme I puchased:

https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0

I can't get it working due to Kendo UI is using JQuery and the theme is using JQuery core and JQuery UI.

Has anyone experience integrating themes with the asp.net core and hot to isolate the jquery. Kendo UI usings @Html tag so I can't use JQuery noconflict.

thanks,

General Discussions

answered on 10 Mar 2020

1 answer

596 views

Responsive Menu

Using Bootstrap 4 and navbar class, built a nice little menu that goes across the top on wide screens, then collapses on small screen. But the real magic is that the menu automatically responds and goes vertical when on small screen. The problem is it is not really themeable the way the Kendo widgets are (and something I really want)

I cannot for the life of me figure out how to get a menu to flip it's orientation from horizontal to vertical when the screen size shrinks. I've tried a Responsive Panel, but can't find any events to trigger off of. I've also tried a Drawer and Toolbar. Both unsatisfactory.

Anyone else have a suggestion? This seems like real core functionality for a Menu, but I'm completely stumped.

Menu

answered on 06 Mar 2020

1 answer

340 views

Foreign key filter value as default value for new row

Hello,

How to set the Foreign key filter value as default value for a new row?

If I have filtered my grid (see picture) and I click add new I want to have that filter value in my dropdownlist of the new row as the default value...

robert

Grid

answered on 06 Mar 2020

2 answers

109 views

Working Example - Drag n drop with in-cell editing

The project listed under the demo has so many holes in it that there is no way anyone has had success trying to copy it.

This is the example I'm trying to get working. I want this to work with Cell Editing and Drag and Drop. Do you have a working code set?

https://demos.telerik.com/aspnet-core/treelist/editing-incell

TreeList

answered on 04 Mar 2020

6 answers

171 views

Pull Value from Control into Model

My TreeList is generally working. However, when a user selects a Custom Command Button, I need to populate the Model with that Group.Id key value. How is this accomplished? As shown, the "function goDetail(e)" code works. However, if I remove the comment the last 2 lines the TreeList doesn't build... of course, I don't get any feedback as to what is wrong. That would be nice. But, this is where I'm trying to pull the dataItem.Id into the Model. How can I get this to happen? Thanks.

<script id="icon-template" type="text/x-kendo-template">

<div class='group-icon'

style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>

<div class='group-name'>#: Name #</div>

</script>

@(Html.Kendo().TreeList<Group>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Command(c => { c.Custom().Text("Select")

.Name("selectButton").ClassName("selectButton")

.Click("goDetail"); })

.Width(Glossary.Portal.ButtonWidth);

columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(350);

})

.DataSource(dataSource => dataSource

.Read(read => read.Action("IndexJson", "Groups").Data("getData"))

.ServerOperation(false)

.Model(m =>

{

m.Id(f => f.Id);

m.ParentId(f => f.ParentId);

m.Expanded(true);

m.Field(f => f.Name);

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

)

.Events(evt => evt.DataBound("treeListBound")))

<script type="text/javascript">

function getData() {

return @Html.Raw(Model.GetIndexData());

}

function goDetail(e) {

e.preventDefault();

alert("goDetail: " + e.toString());

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

alert("goDetail: " + dataItem.id);

@*@Model.Item.GroupId = dataItem.id;

alert("goDetail: " + @Model.Item.GroupId);*@

}

function treeListBound(e) {

var treeList = e.sender;

var items = treeList.items();

for (i = 0; i < items.length; i++) {

var dataItem = treeList.dataItem(items[i]);

.....

TreeList

answered on 04 Mar 2020

3 answers

178 views

Removing "Or" option from filter

If I have a column filter configured like this:-

c.Bound(p => p.CreatedDateTime)
.Title("Created")
.Filterable(f => f
.Operators(o => o.ForDate(d => d.Clear().IsGreaterThanOrEqualTo("On or after").IsLessThan("Before")))
.UI(GridFilterUIRole.DateTimePicker)
)

It shows a dropdown for "And" and "Or" between the two filter options. In my case, this doesn't make sense.

Is there a way to specify the options or remove the dropdown?

Grid

answered on 03 Mar 2020

1 answer

191 views

Html.Kendo().Grid Need to show Dynamic name of column as per Model

Hello Support Team, I need to show dynamic name of column as per model value from backend.
in Html.Kendo().Grid.
can you please let me that what to do.
Thanks,

Grid

answered on 03 Mar 2020