Questions on UI for ASP.NET MVC Forum

2 answers

191 views

Hey there guys, i have a grid with grouped rows. Each set of grouped rows has a row called 'Total:' which consist of the summation of the values above. What i want to achieve is to have the name of each group to also appear in the total row. So rather than the static name 'Total:' i want 'People Reached Total:','People Trained Total:', 'Student Completion Total:'. I have attached an image of the grid and also provided a link to the code. Thanks

GroupedGrid

Grid

answered on 09 Jan 2018

7 answers

511 views

Various issues with column filtering....

Banging my head off a wall trying to configure column filtering in a grid within an mvc app.

Main issues are with datepicker filtering and the filter icon on each column missing.

Im pretty sure Ive the latest version of the kendo ui for mvc installed (thats another story, very confused over what to be using!)

Using the following scripts -

I used the custom builder to build kendo.custom.min and included aspnetmvc.min.js

I've attached an img of how the datepicker is displaying, and one of the missing filter icon

Missing icon works on a different screen, with a class of k-i-filter, in the case where its missing its k-filter

Grid code below:

<tbody>

@(Html.Kendo().Grid<OriginGreen.Models.CompanySearchGridViewModel.CompanyModel>()

.Name("CompaniesGrid")

.Columns(columns =>

{

columns.Bound(c => c.Name).ClientTemplate("<a href='" + Url.Action("ManageCompanies") + "/#= CompanyId #'" + ">#= Name #</a>").Title("Company Name").Width(100); //.Filterable(filterable => filterable.UI("nameFilter"));

columns.Bound(c => c.Plan_Version).Title("Plan Version").Width(100);

columns.Bound(c => c.Duration).Title("Duration").Width(100);

columns.Bound(c => c.Period).Title("AR Year").Width(100);

columns.Bound(c => c.New_Legacy_Plan).Title("New/Legacy").Width(100);

columns.Bound(c => c.Next_AR_Due_Date).Format("{0:dd/MM/yyyy}").Title("Next AR Due Date").Width(200).Filterable(f => f.UI("DateFilter"));

columns.Bound(c => c.Current_Status).Title("Current Status").Width(100);

columns.Bound(c => c.Assigned_To).Title("Assigned To").Width(100);

columns.Bound(c => c.BordBiaUserId).Title("BB Reviewer").Width(100);

columns.Bound(c => c.ThirdPartyUserId).Title("SGS Reviewer").Width(100);

})

.ToolBar(tools => tools.Excel())

.Excel(excel => excel

.FileName("Company_List_Admin.xlsx")

.Filterable(true)

.ProxyURL(Url.Action("Excel_Export_Save", "Plan"))

.AllPages(true))

.Events(e => e.DataBound("onRowBound"))

.Pageable()

.Sortable()

.Scrollable()

.Selectable()

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

)

.ForNumber(num => num.Clear()

.IsEqualTo("Is Equal To")

.IsNotEqualTo("Is Not Equal To")

.IsGreaterThan("Is Greater Than")

.IsLessThan("Is Less Than")

)

.ForDate(dt => dt.Clear()

.IsEqualTo("Is Equal To")

.IsNotEqualTo("Is Not Equal To")

.IsGreaterThan("Is Greater Than")

.IsLessThan("Is Less Than")

)

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(10)

.Batch(true)

.Model(model =>

{

model.Id(c => c.CompanyId);

})

.Read(read => read.Action("DisplayAdminSearchGrid", "Plan").Type(HttpVerbs.Get))

)

</tbody>

<script type="text/javascript">

function DateFilter(control) {

$(control).kendoDatePicker();

}

</script>

Grid

answered on 09 Jan 2018

1 answer

842 views

Expand all panels programmatically on click of a button

Hi

I have a PanelBar within a Kendo Grid Custom Edit Popup.

I'd like to place a button within the popup that once clicked, allows all the PanelBar sections to be opened.

Does anyone know if this is possible?

Thanks.

PanelBar

answered on 09 Jan 2018

1 answer

1.0K+ views

Kendo MVC Upgrade Problems

I have performed a kendo upgrade on my MVC application and it has created problems that i need to resolve.

My upgrade was from version 2016.3.1118 to 2017.3.1026

Prior to upgrade wizard running i tried the compatibility checker but got an error saying it was incompatible with MVC projects, then it crashed my instance of VS2017.

So on reloading VS i just did the upgrade which took over an hour and the Upgrade Wizard Log indicated a success. The latest kendo files were installed and i changed my bundles.config to reference the new folders. I also checked my kendo reference was also now the latest version. The editor templates had also been updated. I also updated the reference to Telerik.UI.for.AspNet.Mvc5 version in packages.config.

Looking at a few previous posts on the forum i updated my bundles file to include an additional 2 files...

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/2017.3.1026/kendo.web.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.aspnetmvc.min.js",
"~/Scripts/kendo/2017.3.1026/cultures/kendo.culture.en-GB.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.all.min.js",
"~/Scripts/kendo/2017.3.1026//jszip.min.js"
));

On running my application post upgrade i am not getting any data to display nor am i getting many of the links to work. There are also some CSS issues but these are not a priority till i get the functionality working again.

What steps should i take to try and determine what is wrong? It would seem that my jquery/ typescript files are not running or something is conflicting with them? I do see the main ones loading in the Network tab of Developer Tools, and in the Console tab i see a number of errors that do not appear in the original application. (image attached)

Any help with this would be much appreciated...

General Discussions

answered on 09 Jan 2018

1 answer

137 views

Extend trial

hello, I want to extend the trial of Telerik ui for asp.net MVC, I have send an email to the address troalextend@progress.com. is there any other i need to do? Hope your reply

General Discussions

answered on 08 Jan 2018

4 answers

472 views

Kendo DropDownListfor validation using jquery unobtrusive

Hi,

I wanted to achieve required filed validation on Drop Down list.Currently I am getting a pop up saying as required but unfortunately I couldn't get any red border around it, For rest of the controls on the page i get the red border. I tried below code but still i dont get any red border around drop down.

$(document).ready(function () {
        /* Bind Mutation Events */
        var elements = $("#AddUserForm").find("[data-role=combobox],[data-role=dropdownlist],[data-role=numerictextbox],[data-role^=date]");

        //correct mutation event detection
        var hasMutationEvents = ("MutationEvent" in window),
            MutationObserver = window.WebKitMutationObserver || window.MutationObserver;

        if (MutationObserver) {
            var observer = new MutationObserver(function (mutations) {
                var idx = 0,
                    mutation,
                    length = mutations.length;

                for (; idx < length; idx++) {
                    mutation = mutations[idx];
                    if (mutation.attributeName === "class") {
                        updateCssOnPropertyChange(mutation);
                    }
                }
            }),
            config = { attributes: true, childList: false, characterData: false };

            elements.each(function () {
                observer.observe(this, config);
            });
        } else if (hasMutationEvents) {
            elements.bind("DOMAttrModified", updateCssOnPropertyChange);
        } else {
            elements.each(function () {
                this.attachEvent("onpropertychange", updateCssOnPropertyChange);
            });
        }
});

function updateCssOnPropertyChange(e) {
        var element = $(e.target);

        element.siblings("span.k-dropdown-wrap")
               .add(element.parent("span.k-numeric-wrap"))
               .add(element.parent("span.k-picker-wrap"))
               .toggleClass("k-invalid", element.hasClass("input-validation-error"));
    }

<style>
.k-widget > span.k-invalid,
    input.k-invalid {
        border-color: red;
    }

    #innerList li {
        margin: 10px 10px;
    }
</style>

Can you please let me know how can I get a red border around required drop down list when form is submiited.

DropDownList

answered on 08 Jan 2018

1 answer

137 views

Easily Tag Paging Footer with ISO Form Number

When needing to add a "Form Number" to my grids to satisfy ISO requirements for forms, I didn't want to sacrifice any vertical screen space. I added the text to the existing paging footer at the bottom left corner, where it normally appears on our paper forms.

I added the following line to my $(document).ready(function () ...

$("#grid").getKendoGrid().pager.element.prepend("<div class='docver'>EFORM: PTZ-0021 Rev: A</div>");

and then the css to keep that div in line with the paging buttons...

.docver {
float: left;
display: inline-block;
font-weight: normal ;
font-size: 12px;
}

Darron

Grid

answered on 08 Jan 2018

3 answers

853 views

multiple typescript errors in kendo-ui.d.ts

After updating my project I get several errors about kendo-ui.d.ts

Typescript version 2.5

e.g.

SeverityCodeDescriptionProjectFileLineSuppression State
ErrorTS2430(TS) Interface 'DataSourceTransportWithFunctionOperations' incorrectly extends interface 'DataSourceTransport'.
Types of property 'create' are incompatible.
Type '(options: DataSourceTransportOptions) => void' has no properties in common with type 'DataSourceTransportCreate'.ExternC:\Users\Maurice.Lucas\Source\Repos\Juice\JuiceSolution\Extern\Scripts\typings\kendo-ui\kendo-ui.d.ts1196Active

SeverityCodeDescriptionProjectFileLineSuppression State
ErrorTS2559(TS) Type 'AgendaView' has no properties in common with type 'SchedulerView'.ExternC:\Users\Maurice.Lucas\Source\Repos\Juice\JuiceSolution\Extern\Scripts\typings\kendo-ui\kendo-ui.d.ts1542Active

SeverityCodeDescriptionProjectFileLineSuppression State
ErrorTS2415(TS) Class 'Alert' incorrectly extends base class 'Dialog'.
Types of property 'options' are incompatible.
Type 'AlertOptions' is not assignable to type 'DialogOptions'.
Types of property 'messages' are incompatible.
Type 'AlertMessages' has no properties in common with type 'DialogMessages'.ExternC:\Users\Maurice.Lucas\Source\Repos\Juice\JuiceSolution\Extern\Scripts\typings\kendo-ui\kendo-ui.d.ts1551Active

Installer and VS Extensions

answered on 08 Jan 2018

1 answer

303 views

[Solved] Gantt Chart Time Problem

i'm facing an issue related to TIME in gantt chart.

the problem is if i'm having time at server side Start -> 1:00:00 and End -> 3:00:00 then in the browser in date field the time is showing like 1:00:00 is being shown as 6:00 and 3:00:00 is being shown as 8:00 . But when i save this task then at server side same time 1:00 and 3:00 is posted which is being done by onUpdateCreate() event method. i want to show same time which is at the server at the client side. how can i do that ?

Gantt

answered on 05 Jan 2018

5 answers

417 views

MVC5 Full example

Hello,

I would like to see the full example of Kendo Diagram for Asp.Net MVC. Especially I would like to know what is hidden behind the code in the default example You offer on website (http://demos.telerik.com/aspnet-mvc/diagram/index):

public ActionResult _OrgChart()

{

return Json(DiagramDataRepository.OrgChart(), JsonRequestBehavior.AllowGet);

}

Can You show me, what's in DiagramDataRepository.OrgChart() method, please? Or tell me, where I can find it?

Thank You!

Diagram