Hello,

We used both kendo Grid and kendo Chart in our MVC project. When we load big data on Grid , the Processing Wheel image (see below image)  had automatically applied to UI even we don’t setting anything. Unlike Grid I did not found same image applied to the UI when get big data for chart. Since we need calculate the value based on the busyness logic which take bit longer time. Now user will wait in front of empty chart screen until chart finally showed up.  Could Telerik team have some guides for resolving the issue?  Thanks.

Image of Processing data...

Hi,

Im using kendo MVC version 2016.3.1118.545

I want to use equal to filter on date and time column for format {MM/dd/yyyy hh:mm tt} but its not working

I have seen few solution but its only for filtering date alone.

Please provide some solution for this

Hello,

I'm currently working on adding content to a ClientGroupHeaderTemplate and I run into some issues regarding aggregate functions and what type of logical expressions I can use within the template itself.

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/group-templates

I cannot seem to use if{}else{} statements as I normally do in Telerik component templates. And I was wondering if I could utilize a version of the aggregate functions but on other columns in the same group instead of the actual column, the group by is being done on.

For Example:

trip.Add().Text("New").Selected(true).Content(@<text>
                                                       <div class="row">
                                                           @(Html.Kendo().DataSource<OrderSearchBindingModel>().Name("newDataSource").Ajax(t =>
                                                       {
                                                           t.Read(read => read.Action("GetOrderSearch", "Fulfillment", new { status = "New"}));
                                                           t.PageSize(300);
                                                           t.ServerOperation(true);
                                                           t.Group(p => p.Add("KitControl", typeof(string)));
                                                           t.Aggregates(agg =>
                                                           {
                                                               agg.Add(field => field.InternalOrderId).Count();
                                                           });
                                                           t.Events(events => events.Error("error_ajax"));
                                                       }))
                                                           <div class="col-2">
                                                               @(Html.Kendo().Filter<OrderSearchBindingModel>()
                                                                   .Name("newFilter")
                                                                   .ApplyButton()
                                                                   .ExpressionPreview()
                                                                   .MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
                                                               {
                                                                   f.Add(p => p.InternalOrderId).Label("Internal Order ID");
                                                                   f.Add(p => p.ExternalOrderId).Label("External Order ID");
                                                                   f.Add(p => p.KitControl).Label("Kit Control");
                                                                   f.Add(p => p.Department).Label("Department");
                                                                   f.Add(p => p.WorkCenter).Label("Work Center");
                                                               }).FilterExpression(fe =>
                                                               {
                                                                   fe.Add(p => p.InternalOrderId);
                                                               }).DataSource("newDataSource"))
                                                           </div>
                                                           <div class="col-9">
                                                               @(Html.Kendo().Grid<OrderSearchBindingModel>().Name("newOrderGrid").Columns(columns =>
                                                           {
                                                               columns.Bound(p => p.InternalOrderId).Width(95).ClientGroupHeaderColumnTemplate("Total Orders: #= sum #");
                                                               columns.Bound(oi => oi.ExternalOrderId).Width(110);
                                                               columns.Bound(p => p.CreatedDate).Format("{0:MM/dd/yyyy HH:mm tt}").Width(120);
                                                               columns.Bound(oi => oi.DueDate).Width(120);
                                                               columns.Bound(oi => oi.KitControl)
                                                                   .ClientGroupHeaderTemplate("#= value != null ? value : 'Non-Kitted' || value != '   ' ? value : 'Non-Kitted' || value != undefined ? value : 'Non-Kitted' # <button type='button' class='manifest-btn btn btn-sm btn-info d-inline'>Manifest</button>").Width(190);
                                                               columns.Bound(oi => oi.Department).Width(95);
                                                               columns.Bound(oi => oi.WorkCenter).Width(95);
                                                               columns.Command(command =>
                                                               {
                                                                   command.Custom("View").Click("order_view").HtmlAttributes(new{@class="btn btn-sm btn-info d-block text-white"});
                                                                   command.Custom("Packing Slip").Click("order_packing_slip").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
                                                                   command.Custom("Pick Ticket").Click("order_pick_ticket").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
                                                                   command.Custom("Reprint").Click("order_reprint").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
                                                               }).Width(125);
                                                           }).ClientDetailTemplateId("order-detail")
                                                                   .HtmlAttributes(new {style = "height: 750px"})
                                                                   .Scrollable()
                                                                   .Groupable()
                                                                   .Filterable()
                                                                   .Resizable(r => r.Columns(true))
                                                                   .Sortable()
                                                                   .Pageable()
                                                                   .Events(events => events.DataBound("on_bound"))
                                                                   .DataSource("newDataSource"))
                                                           </div>
                                                       </div>

I cannot even get the evaluation correct with the current group header template to replace empty text with a "No Kit Control" placeholder it just shows up empty still. As well as the Aggregate of the internal order id not showing up in the header as well, that is something I made an attempt at but I couldn't seem to get a reference to work properly in the ClientGroupHeaderTemplate.

I had attempted to apply some if{}else{} conditional logic to not display the KitControl Manifest button however that would just give me script/tag errors on page render.

Is there a more comprehensive description of the template capabilities I am missing? Or am I just trying to push this template too far?

I have two password fields on a form. I have used your demo way to change there editor to password boxes. If I validate in the controller and pass back an error message indicating they need to match the error message is not displayed. How do I correct this. I am open to preventing the submit with a little javascript validation so it never goes to the server. Please Advise.

                        i.Add()
                            .Field(f => f.Password)
                            .EditorTemplateHandler("setPasswordEditor")
                            .Label(l => l.Text("Password:"));

                        i.Add()
                            .Field(f => f.ConfirmPassword)
                            .EditorTemplateHandler("setConfirmPasswordEditor")
                            .Label(l => l.Text("Confirm Password:"));

        function setPasswordEditor(container, options) {
            container.append($("<input type='password' class='k-textbox k-valid' id='Password' name='Password' title='Password' required='required' autocomplete='off' aria-labelledby='Password-form-label' data-bind='value:Password' aria-describedby='Password-form-hint'>"));
        }
        function setConfirmPasswordEditor(container, options) {
            container.append($("<input type='password' class='k-textbox k-valid' id='ConfirmPassword' name='ConfirmPassword' title='Confirm Password' required='required' autocomplete='off' aria-labelledby='Password-form-label' data-bind='value:ConfirmPassword' aria-describedby='Password-form-hint'>"));
        }

            if (model.Password!=model.ConfirmPassword)
            {
                ModelState.AddModelError("Password", "Passwords Must Match");
                ModelState.AddModelError("ConfirmPassword", "Passwords Must Match");
                return View("UserEditView",model);
            }

Hello,

I have a Kendo grid with multiple columns, and only one of the columns has .Filterable(true). When the filter icon above this column is clicked, a custom filter menu pops up. This menu has fields to set the filter data for multiple columns all at once, and then a "Filter" button which sets the datasource filter data to these specifications.

This filtering is working correctly, however the issue is, when going to another page in the results, the column with .Filterable(true) has its filter data removed from the request that is sent to the Controller. All other columns have their filter data persisted across the pages, just not the one with .Filterable(true). This is the case for whichever column is given this attribute.

For example, if I have Column2 set to .Filterable(true), then filter Column2's data and click "Filter", the correct filtered results are populated in the grid. But after clicking to another page of the results, the results reset and no longer filter Column2's data. It also stays like this when clicking back to page 1.

When looking at the DataSourceRequest object passed to the Controller method that gets the grid results, I can see the filter data for this column is there after clicking the "Filter" button. But after clicking to another page in the results, the request object sent to the Controller method no longer has this column included in its filter data.

Any idea why this is happening or how to resolve?

I've included some code for the grid, the custom filter menu function, and the controller method. Please let me know if anything else is needed, thank you.

.cshtml Grid Code

    @(Html.Kendo().Grid<Model>()
    .Name("MyGrid")
    .HtmlAttributes(new { style = "height: 400px;font-size:12px;" })
    .Columns(columns =>
    {
        columns.Bound(m => m.Column1).Title("Column1").Width(90).Filterable(false);
        columns.Bound(m => m.Column2).Title("Column2").Width(90).Filterable(true);
        columns.Bound(m => m.Column3).Title("Column3").Width(90).Filterable(false);

    . . .

    })
            .Sortable()
            .AutoBind(false)
            .Pageable(p => p
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
            .Scrollable()
            .Filterable(f => f
                        .Mode(GridFilterMode.Menu)
                        )
            .Events(e => e
                .FilterMenuInit("OnFilterMenuInit")
            )
        .Resizable(rs => rs.Columns(true))
        .Navigatable()
        .Selectable(s => s
           .Mode(GridSelectionMode.Single)
           .Type(GridSelectionType.Row))
        .NoRecords("No Records!")
        .DataSource(ds => ds
            .Ajax()
            .Model(m=> m.Id(p => p.id))
            .PageSize(10)
                    .Read(read => read.Action("GetData", "Test").Data("{arg1: " + 1 + ", arg2:'testarg'}"))
            .Update(upd => upd.Action("EditData", "Test"))
            .Events(e => e.RequestEnd("onRequestEnd").Error("error_handler"))
            .ServerOperation(true))

.js OnFilterMenuInit function:

function OnFilterMenuInit(e) {

    e.container
      .empty()
        .append($('<div class="row"><div class="col-md-2"><span>Column1: </span></div><div class="col-md-1"><input id="col1-operators" /></div><div class="col-md-4"><input id="col1-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col1-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column2: </span></div><div class="col-md-1"><input id="col2-operators" /></div><div class="col-md-4"><input id="col2-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col2-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column3: </span></div><div class="col-md-1"><input id="col3-operators" /></div><div class="col-md-4"><input id="col3-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col3-logic" /> </div> </div>\
<div class="row"><div class="col-md-4"> <button type="submit" class="k-button k-primary" id="filter">Filter</button> </div><div class="col-md-4"><button type="reset" class="k-button" id="clear">Clear</button></div></div>'));

    $('#filter').kendoButton({
        click: function () {
            var col1 = $('#col1-tb').val();
            var col2 = $('#col2-tb').val();
            var col3 = $('#col3-tb').val();

            var col1Ops = $('#col1-operators').value();
            var col2Ops = $('#col2-operators').value();
            var col3Ops = $('#col3-operators').value();

            var col1Logic = $('#col1-logic').value();
            var col2Logic = $('#col2-logic').value();
            var col3Logic = $('#col3-logic').value();

            var orfilter = { logic: "or", filters: [] };
            var andfilter = { logic: "and", filters: [] };

            if (col1 != "") {
                if (col1Logic == 'and') {
                    andfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
                else {
                    orfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
            }

            if (col2 != "") {
                if (col2Logic == 'and') {
                    andfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
                else {
                    orfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
            }

            if (col3 != "") {
                if (col3Logic == 'and') {
                    andfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
                else {
                    orfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
            }
. . .

            andfilter.filters.push(orfilter);
            orfilter = { logic: "or", filters: [] };

            e.sender.dataSource.filter(andfilter);
            localStorage["kendo-grid-filter"] = kendo.stringify(e.sender.dataSource.filter().filters);

        }
    });

    $('#clear').kendoButton({
        click: function () {
            e.sender.dataSource.filter({});
            localStorage["kendo-grid-filter"] = kendo.stringify({});
        }
    })
}

.cs TestController GetData Method

Hello, is it possible to open a selected document into the editor ? I'm looking to open a document into the editor when the editor loads up. I have gone through the demos and saw its possible to import a file to the editor, however I'm looking for the editor to open up a document selected in the controller.

Thank you

Anisha

Hi there,

Is the recommended way of dealing with encoded HTML in grid cells being sent back to the controller still using [ValidateInput(false)] on the controller as per this forum post html encode in UI for ASP.NET MVC | Telerik Forums ?

Thank you,

Mike Kingscott