Questions on UI for ASP.NET Core Forum

1 answer

215 views

Getting error on RenderSection inside Kendo Tabstrip content

Hi, Recently I started migrating a .Net MVC project with Kendo to .Net Core MVC. Most of the things went smooth but I'm badly stuck on one thing.

Below is my code where I have a Kendo tabstrip that has three tabs. The last two has Html.Partial in their Content which is working fine. The First one has @RenderSection("HomeTab", false) which I can't get to work. Doesn't RenderSection work with .Net Core MVC?

I have tried removing all of my code and tried just adding a test div inside this section but nothing works. If I move the content of my HomeTab section to another view and try Html.Partial it works but RenderSection doesn't. The tabstrip is inside a Layout page and the content of the HomeTab section is in a different view that also have other sections that are rendering completely fine. I'm badly stuck in this and need help please.

section id="main" class="PageSection">
            @(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Events(events => events
            .Select("onTabSelected")
            .Activate("onTabActivated")
            .ContentLoad("onTabContentLoaded")
            .Error("onTabError")
        )
        .Animation(animation =>
        {animation.Enable(false);})
        .Items(tabstrip =>
        {
            if (!ViewBag.isOffline)
            {
                tabstrip.Add().Text("Home")
                .HtmlAttributes(new { id = "hometabid" })
                .Selected(true)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
                .Content(@<text>
                            @RenderSection("HomeTab", false)
                        </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
            tabstrip.Add().Text("Lead Search")
                .HtmlAttributes(new { id = "LeadSearchtabid" })
                .Selected((bool)ViewBag.isOffline).ContentHtmlAttributes(new { @style = "overflow: auto;" })
                .ImageUrl(Url.Content("~/Content/Images/search-lead-icon.png")).ImageHtmlAttributes(new { id = "leadsearchtabimgid" })
                .Content(@<text>
                    @Html.Partial("LeadSearching")
                </text>);
           if (ViewBag.isOffline)
            {
                tabstrip.Add().Text("VoiceMail")
                .HtmlAttributes(new { id = "vmtabid" })
                .Selected(false)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
               .Content(@<text>
                            @Html.Partial("VoiceMail")
                </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
        }))
            @RenderBody()
            <div id="dvNotification"></div>
        </section>

TabStrip

answered on 31 Jul 2023

1 answer

96 views

Make Grid header row resizable

Hello, I've tried to search online and in this forum for this, but I've not found anything useful.

How can the header row for Grids be made resizable?

Currently all our grids have resizable columns, but sometimes texts are very long which make the header very high, for this cases we need that users are able to resize the header vertically.

Thanks in advance

Grid

answered on 28 Jul 2023

1 answer

203 views

Grid using tag helpers in asp.net core

I am using a drop down list in column template inside a grid..I could save sucessfully but when i click on edit the dropdown losses its bind.Can any one help with what i am missing

<kendo-dropdownlist name="Team"
datatextfield="Team"
datavaluefield="TeamID" data-bind="value:Team">
<datasource>
<transport>
<read url="@Url.Action("Teams_Read", "Grid")" />
</transport>
</datasource>
</kendo-dropdownlist>

i chnaged name of the dropdown to the value of what i wante dto bind but it didnt work.

DropDownList

Grid

answered on 28 Jul 2023

1 answer

254 views

Grid in Bootstrap 4 Modal can drag but cannot drop

HI

I have a grid with row reorder enabled in bootstrap 4 pop up modal.

I can drag the row but cannot drop the row to another position., It works outside of modal.

Can I know is there anything extra to set or need a hack to allow the dropping of row to reorder them?

My code below:

Note: Datasource is set on document ready script.

<div class="modal fade" id="ServiceDetailModal" role="dialog" aria-labelledby="ServiceDetailModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="dialog">

<form id="ServiceDetailModalForm" autocomplete="off" >

<div class="modal-content">

<div class="modal-header pb-0">
Services Detail
</div>
<div class="modal-body">

@(
Html.Kendo().Grid<DSPJobServiceItems>()
.Name("modalServiceDetail_ServiceFeeItem")
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable(true)
.Reorderable(r => r.Rows(true))
.Events(e => e.Edit("ServiceFeeEdit").RowReorder("modalServiceDetail_ServiceFeeItemRowReorder"))
.Columns(columns =>
{
columns.Template("").Width(50).Draggable(true);
columns.Bound(p => p.GeneralServiceTitle).Title("Service Item");
})
)

</div>

<div class="modal-footer">
<button type="button" class="k-button btn-danger">Close</button>
</div>
</div>
</form>
</div>
</div>

Grid

answered on 27 Jul 2023

1 answer

170 views

Grid search doesn't work when operator explicitly specified

This is my grid:

@(Html.Kendo().Grid<Project>()
    .Name("ProjectsGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProjectName)
            .ClientTemplate("<a href=/Directory/project/${Id} target=_blank>${ProjectName}</a>")
            .Width(180);
        columns.Bound(p => p.ProjectManager).Width(230)
            .ClientTemplate("#=data.ProjectManager?.Name#")
            .EditorTemplateName("WorkingEmployee")
            .Sortable(s => s.Compare("(a, b) => compareManager(a, b)"));
        columns.Bound(p => p.IsActive)
            .Width(180)
            .ClientTemplate("#: IsActive ? 'Yes' : 'No' #");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Save();
        toolbar.Search();
    })
    .Search(s =>
    {
        s.Field(e => e.IsActive);
        s.Field(e => e.ProjectName, "contains");
    })
    .Sortable()
    .Editable(GridEditMode.InCell)
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Field(p => p.ProjectManager).DefaultValue(
                ViewData["defaultProjectManager"] as User);
            model.Field(p => p.ProjectName).Editable(false);
        })
        .Read("Projects_Read", "Directory")
        .Update("Projects_Update", "Directory")
    ))

With "s.Field(e => e.ProjectName, "contains");" it throws:

Uncaught TypeError: e.charAt is not a function kendo.all.js:2114

Without this, it runs correctly.

Additional question

Also, I would like to know how to search for value of bool variable. The variable is shown as yes, no words. When I search for no, it should show me records where value is false. How to implement this?

Grid

answered on 25 Jul 2023

1 answer

109 views

Issue with RadioGroupFor .ToClientTemplate (2023.2.718 buid)

I'm trying to add a RadioGroupFor control to a Toolbar control as a templated item but am getting a JS error related to the generated client template.

Here is the template definition:

<script id="ApproveOrDenyTemplate" type="text/x-kendo-template">
    @(Html.Kendo().RadioGroupFor(model => model.ApproveOrDeny)
        .Layout(RadioGroupLayout.Horizontal)
        .HtmlAttributes(new { style = "display: inline-flex; vertical-align: top;" })
        .LabelPosition(RadioGroupLabelPosition.After)
        .Items(i =>
        {
            i.Add().Label("Approve").Value("Approve");
            i.Add().Label("Deny").Value("Deny");
        })
        .Events(e => e.Change("changeApproveOrDeny"))
        .ToClientTemplate()
    )
</script>

Here is the Toolbar templated item entry:

items.Add()
    .TemplateId("ApproveOrDenyTemplate")
    .Hidden(!Model.ShowApprovalRadioGroup);

Here is the error being thrown and the generated client template javascript (the bold red code is what shows as offending text in console.log) - have I defined the template wrong or is the toolbar item entry wrong?

VM48:1 Uncaught SyntaxError: Unexpected token '<'
kendo.syncReady(function(){jQuery("\#ApproveOrDeny").kendoRadioGroup({"change":changeApproveOrDeny,"items":[{"label":"Approve","value":"Approve"},{"label":"Deny","value":"Deny"}],"value":"Approve","layout":"horizontal","labelPosition":"after"});});<\/script>

RadioGroup

answered on 25 Jul 2023

1 answer

424 views

Disabling (making readonly) a whole bunch of datepickers on a form.

I've got a page which contains a dozen tabs, each of which has their own ViewComponent. Each ViewComponent has many datepicker controls.

I have a situation where I need to disable almost all of them, except on one tab, based on the user's role.

What are some ways to do this in one fell swoop, rather than setting .Enable(false) on each individual datepicker in markup?

Bonus: there are some regular old <input type="text">'s on these forms as well. Those are easy enough to disable with JQuery, but JQuery doesn't work on the datepickers, because while the text portion is read-only, the popup button displaying a calendar still works and can change the value of the text box.

Thanks so much for any ideas!

Date/Time Pickers

answered on 25 Jul 2023

1 answer

615 views

IHtmlHelper does not contain definition for Kendo .NET 7

I am using AspNet Core MVC 7

I am trying to create a custom HTML helper outside of a razor view. I am using the IHtmlHelper in this scenario and unfortunately outside of a razor view I cannot do something like this:

var uploader = _helper.Kendo().Upload()
                .Name("uploadFiles")
                .Multiple(true)
                .HtmlAttributes(new { style = "margin: 15px 0 5px 0;" });

Compilation error:

Error CS1061 'IHtmlHelper' does not contain a definition for'Kendo'

and no accessible extension method 'Kendo' accepting a first argument of

type'IHtmlHelper' could be found (are you missing a using directive or an assembly reference?)

Installer and VS Extensions

answered on 25 Jul 2023

1 answer

96 views

Grid Setup

Good morning,

i need to save column sorting and other filters within a grid.

The only method i figured out is this:

I save the current grid state to the browser local storage

$(window).on("beforeunload", function () {

               var GType = '@Model.flowCatalogId' + '@Model.flowTypeCatalogId' + '@Model.filterVersion' + '@ViewBag.Lang' + '_grid_filtered';
            var grid = $("#grid_filtered").data("kendoGrid");
               localStorage["QSW-grid-Claim-List" + GType] = utf8_to_b64(kendo.stringify(grid.getOptions()));

         })

Then i reload it every time i enter the page at the end of it's load

$(document).ready(function () {

        $('body').css('pointer-events', 'all') //activate all pointer-events on body
        $('#dialog_pos').data("kendoDialog").close();
        $('#dialog_pos_supp').data("kendoDialog").close();
        $('#dialog_create').data("kendoDialog").close();

        var GType = '@Model.flowCatalogId' + '@Model.flowTypeCatalogId' + '@Model.filterVersion' + '@ViewBag.Lang' + '_grid_filtered';
        var grid = $("#grid_filtered").data("kendoGrid");

        if (localStorage["QSW-grid-Claim-List" + GType]) {
            var options = b64_to_utf8(localStorage["QSW-grid-Claim-List" + GType]);
            grid.setOptions(JSON.parse(options));
        }
        else
        {
            for (i = 0; i < localStorage.length; i++) {
                x = localStorage.key(i);
                if (x.includes("QSW")) { localStorage.removeItem(x);}
            }
        }

        $('#btnCreate').click(function (e) {
            $(this).prop('disabled', true);
            $('#create_form').submit();
        });


    });

This works but it do the read function of my grid 2 times.

.Read(read => read.Action("Claims_Read_Filtered", "Claim", new { flowCatalogId = Model.flowCatalogId, flowTypeCatalogId = Model.flowTypeCatalogId, Model.DateFrom, Model.DateTo})

My question is, how can i save the state of the grid with all of its filters and the column sorting and all the eventual changes i've done to it without run the read a second time?

Grid

answered on 24 Jul 2023

1 answer

153 views

Using Autocomplete in ASP.NET Core Grid column using tag helpers

Hello I have being looking for examples on using auto complete using tag helpers but coulnt find any

in my grid column i have

and the categoryDropDownEditor has code as below....the code hits the url but not sure how to pass the data from column to method and serach the functionality.Any example would be helpful.

function categoryDropDownEditor(data) {
$('<input data-bind="value: value" name="' + data.field + '"/>')
.kendoAutoComplete({
dataSource: {
transport: {
read: {
url: "/Home/EmpSearchData",
dataType: "jsonp"
}
}
},
dataTextField: "ename",

filter: "contains",
minLength: 4
});
}

AutoComplete

Grid

answered on 24 Jul 2023