Unfortunately,when I go to delete an item from the grid the grid is not properly updating.  

I've tried 3 things and I haven't had any luck:

1.  $("#userListGrid").data("kendoGrid").dataSource.read;
     $("#userListGrid").data("kendoGrid").refresh();

2.  $('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
          $('#userListGrid').data('kendoGrid').refresh();
     });

3.  KendoGridRefresh();

Here is the code for the function:

function KendoGridRefresh() {
        var grid = $('#userListGrid').data('kendoGrid');
        grid.dataSource.read();
    }

 

Here is the code for the grid:

<div class="content-container">
    <div class="container">
        <h3 class="d-inline">Current Users</h3>
        <button class="btn btn-primary d-inline mb-2 ml-5" onclick="window.location.href = '/user-maintenance/create-new-user'">Create New User</button>

        <div class="row p-0 table-container striped">
            <div id="userListGrid"></div>
        </div>
    </div>
    <div id="delete-confirm-modal" style="background-color: white"></div>
</div>


<script type="text/javascript">
    // Sticky header
    function onDataBound() {
        $("#loader-spinner").hide();

        var wrapper = this.wrapper,
            toolbar = wrapper.find(".k-grid-toolbar"),              // e.g. button to export spreadsheet
            groupingHeader = wrapper.find(".k-grouping-header"),    // interactive tools
            header = wrapper.find(".k-grid-header");                // column headers

        function resizeFixed() {
            var paddingRight = parseInt(toolbar.css("padding-right"));
            toolbar.css("width", wrapper.width() - paddingRight - 3);

            paddingRight = parseInt(groupingHeader.css("padding-right"));
            groupingHeader.css("width", wrapper.width() - paddingRight - 3);

            paddingRight = parseInt(header.css("padding-right"));
            header.css("width", wrapper.width() - paddingRight);
        }

        function scrollFixed() {
            var navbarHeaderHeight = 0;

            if ($(".nav-side-menu").height() <= 100) { // On mobile device or small screen
                navbarHeaderHeight = 0;
            } else { // Full screen
                navbarHeaderHeight = 100;
            }

            var offset = $(this).scrollTop(),
                tableOffsetTop = wrapper.offset().top - navbarHeaderHeight;


            if (offset < tableOffsetTop) {
                toolbar.removeClass("fixed-header");
                toolbar.removeAttr("style");

                groupingHeader.removeClass("fixed-header");
                groupingHeader.removeAttr("style");

                header.removeClass("fixed-header");
                header.removeAttr("style");

            } else if (offset >= tableOffsetTop) {

                toolbar.addClass("fixed-header");
                toolbar.css("top", navbarHeaderHeight);

                groupingHeader.addClass("fixed-header");
                groupingHeader.css("top", navbarHeaderHeight + toolbar.outerHeight());

                header.addClass("fixed-header");
                header.css("top", navbarHeaderHeight + toolbar.outerHeight() + groupingHeader.outerHeight());
            }
        }

        resizeFixed();
        $(window).resize(resizeFixed);
        $(window).resize(scrollFixed);

        $(window).scroll(resizeFixed);
        $(window).scroll(scrollFixed);

        $(".content-container").scroll(resizeFixed);
        $(".content-container").scroll(scrollFixed);
    }


    var externalId = "";
    var firstName = "";
    var lastName = "";
    var emailAddress = "";

    var confirmDelete = function (eid, firstN, lastN, emailA) {
        var dialog = $("#delete-confirm-modal");
        externalId = eid;
        firstName = firstN;
        lastName = lastN;
        emailAddress = emailA;

        if (dialog.data("kendoDialog")) {
            dialog.data("kendoDialog").open();
        } else {
            dialog.kendoDialog({
                width: "450px",
                title: "Confirm delete",
                closable: true,
                modal: true,
                content: "<p>Confirm that you wish to delete user " + firstName + " " + lastName + "(" + emailAddress + "). Once this is done, it cannot be reversed.</p>",
                actions: [
                    {
                        text: "Cancel",
                        primary: true
                    }, {
                        text: "Confirm",
                        action: function (e) {
                            var url = "/apic/usermaintenance/deleteuser/" + externalId;
                            $.get(url,
                                function (data) {
                                    //$("#userListGrid").data("kendoGrid").dataSource.read;
                                    //$("#userListGrid").data("kendoGrid").refresh();

                                    /*$('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
                                        $('#userListGrid').data('kendoGrid').refresh();
                                    });*/

                                    KendoGridRefresh();
                                    
                                    kendo.alert("User has been deleted");
                                }).fail(function () {
                                    kendo.alert("Unable to delete user. An error has occured. Please try again.");
                                });
                                                                               }
                    }
                ],
                close: onClose
            });
        }
    };

    var deleteUser = function () {

    };

    var onClose = function (e) {
        externalId = "";
        firstName = "";
        lastName = "";
        emailAddress = "";
    };

    function KendoGridRefresh() {
        var grid = $('#userListGrid').data('kendoGrid');
        grid.dataSource.read();
    }

    $(document).ready(function () {
        var roles = [{
            id: 1, name: "JB-Admin", key: 1, value: "JB-Admin"
        }, {
            id: 2, name: "M-Admin", key: 2, value: "M-Admin"
        }, {
            id: 3, name: "NM-Admin", key: 3, value: "NM-Admin"
        }, {
            id: 4, name: "Pricing", key: 4, value: "Pricing"
        }, {
            id: 5, name: "Orders", key: 5, value: "Orders"
        }, {
            id: 6, name: "Orders-U", key: 6, value: "Orders-U"
        }, {
            id: 7, name: "Contracts", key: 7, value: "Contracts"
        }, {
            id: 8, name: "Exchange", key: 8, value: "Exchange"
        }, {
            id: 9, name: "Destination", key: 9, value: "Destination"
        }, {
            id: 10, name: "Destination-C", key: 10, value: "Destination-C"
        }, {
            id: 11, name: "Nominations", key: 11, value: "Nominations"
        }, {
            id: 12, name: "Nominations-C", key: 12, value: "Nominations-C"
        }, {
            id: 13, name: "Nominations-U", key: 13, value: "Nominations-U"
        }, {
            id: 14, name: "Store", key: 14, value: "Store"
        }, {
            id: 15, name: "Retail Locator", key: 15, value: "Retail Locator"
        }, {
            id: 16, name: "Lessonly", key: 16, value: "Lessonly"
        }, {
            id: 17, name: "Inspection Form", key: 17, value: "Inspection Form"
        }, {
            id: 18, name: "Products", key: 18, value: "Products"
        }, {
            id: 19, name: "QA/QC", key: 19, value: "QA/QC"
        }, {
            id: 20, name: "Presentations", key: 20, value: "Presentations"
        }, {
            id: 21, name: "About Us", key: 21, value: "About Us"
        }, {
            id: 22, name: "Marketing", key: 22, value: "Marketing"
        }, {
            id: 23, name: "Marketing-C", key: 23, value: "Marketing-C"
        }, {
            id: 24, name: "Marketing-U", key: 24, value: "Marketing-U"
        }, {
            id: 25, name: "Marketing-D", key: 25, value: "Marketing-D"
        }
        ];

        $("#userListGrid").kendoGrid({
            dataSource: {
                transport: {
                    read: "/apic/usermaintenance/getmyusers",
                    dataType: "json"
                },
                schema: {
                    data: function (response) {
                        return response;
                    },
                    model: {
                        fields: {
                            UserId: { type: "string" },
                            ExternalId: { type: "string" },
                            EmailAddress: { type: "string" },
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            Display: { type: "string" },
                            Company: { type: "string" },
                            AxAccountNumber: { type: "string" },
                            MemberType: { type: "string" },
                            AccessPricing: { type: "string" },
                            AccessOrders: { type: "string" },
                            AccessContracts: { type: "string" },
                            AccessExchange: { type: "string" },
                            AccessDestination: { type: "string" },
                            AccessNominations: { type: "string" },
                            AccessMarketingCalendar: { type: "string" },
                            AccessStore: { type: "string" },
                            AccessRetailLocator: { type: "string" },
                            AccessLessonly: { type: "string" },
                            AccessInspectionForm: { type: "string" },
                            AccessProductsList: { type: "string" },
                            AccessQaQc: { type: "string" },
                            AccessPresentations: { type: "string" },
                            AccessAboutUs: { type: "string" },
                            FilterString: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                sort: { field: "AxAccountNumber", dir: "asc" }
            },
            dataBound: onDataBound,
            dataBinding: function (arg) {

            },
            groupable: true,
            sortable: true,
            filterable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            toolbar: ["search", "excel"],
            excel: {
                fileName: "UserList.xlsx",
                allPages: true
            },
            refresh: {
                reload: true
            },
            resizable: true,
            columns: [
                {
                    template: '<a href="/user-maintenance/edit-user?userId=#= ExternalId #"><div class="edit-icon" title="edit"></div></a>',
                    width: '30px'
                },
                {
                    field: "EmailAddress",
                    title: "Email Address",
                    filterable: {
                        multi: true,
                        search: true
                    }
                }, {
                    template: "#= LastName #, #= FirstName #",
                    title: "Name",
                    field: "Display",
                    filterable: {
                        multi: true,
                        search: true
                    }
                }, {
                    title: "Company",
                    field: "Company",
                    filterable: {
                        multi: true,
                        search: true
                    }
                }, {
                    title: "Account Number",
                    field: "AxAccountNumber",
                    filterable: {
                        multi: true,
                        search: true
                    },
                    width: '90px'
                }, {
                    template: kendo.template($("#user-rights-template").html()),
                    title: "Permissions",
                    field: "FilterString",
                    filterable: {
                        search: true
                    }
                },
                {
                    template: '<button class="btn btn-danger btn-sm" onclick="confirmDelete(\'#=ExternalId#\', \'#=FirstName#\', \'#=LastName#\', \'#=EmailAddress#\')" style="padding: .25rem;">X</button>',
                    width: '40px'
                },
            ]
        });
    });
</script>
<script type="text/x-kendo-template" id="user-rights-template">
    #if(MemberType==='JoeBlowAdmins') {#
    <span class='badge badge-pill badge-info'>JB-Admin</span>
    #}#
    #if(MemberType==='JoeBlowUsers') {#
    <span class='badge badge-pill badge-info'>JB-User</span>
    #}#
    #if(MemberType==='MemberAdmin') {#
    <span class='badge badge-pill badge-info'>M-Admin</span>
    #}#
    #if(MemberType==='MemberUser') {#
    <span class='badge badge-pill badge-info'>M-User</span>
    #}#
    #if(MemberType==='NonMemberAdmin') {#
    <span class='badge badge-pill badge-info'>NM-Admin</span>
    #}#
    #if(MemberType==='NonMemberUser') {#
    <span class='badge badge-pill badge-info'>NM-User</span>
    #}#
    #if(AccessPricing==='Read'){#
    <span class='badge badge-pill badge-info'>Pricing</span>
    #}#
    #if(AccessOrders==='Read'){#
    <span class='badge badge-pill badge-info'>Orders</span>
    #}#
    #if(AccessOrders==='Update'){#
    <span class='badge badge-pill badge-info'>Orders-U</span>
    #}#
    #if(AccessContracts==='Read'){#
    <span class='badge badge-pill badge-info'>Contracts</span>
    #}#
    #if(AccessExchange==='Read'){#
    <span class='badge badge-pill badge-info'>Exchange</span>
    #}#
    #if(AccessDestination==='Read'){#
    <span class='badge badge-pill badge-info'>Destination</span>
    #}#
    #if(AccessDestination==='Create'){#
    <span class='badge badge-pill badge-info'>Destination-C</span>
    #}#
    #if(AccessNominations==='Read'){#
    <span class='badge badge-pill badge-info'>Nominations</span>
    #}#
    #if(AccessNominations==='Create'){#
    <span class='badge badge-pill badge-info'>Nominations-C</span>
    #}#
    #if(AccessNominations==='Update'){#
    <span class='badge badge-pill badge-info'>Nominations-U</span>
    #}#
    #if(AccessMarketingCalendar==='Read'){#
    <span class='badge badge-pill badge-info'>Marketing</span>
    #}#
    #if(AccessMarketingCalendar==='Create'){#
    <span class='badge badge-pill badge-info'>Marketing-C</span>
    #}#
    #if(AccessMarketingCalendar==='Update'){#
    <span class='badge badge-pill badge-info'>Marketing-U</span>
    #}#
    #if(AccessMarketingCalendar==='Delete'){#
    <span class='badge badge-pill badge-info'>Marketing-D</span>
    #}#
    #if(AccessStore==='Read'){#
    <span class='badge badge-pill badge-info'>Store</span>
    #}#
    #if(AccessRetailLocator==='Read'){#
    <span class='badge badge-pill badge-info'>Retail Locator</span>
    #}#
    #if(AccessLessonly==='Read'){#
    <span class='badge badge-pill badge-info'>Lessonly</span>
    #}#
    #if(AccessInspectionForm==='Read'){#
    <span class='badge badge-pill badge-info'>Inspection Form</span>
    #}#
    #if(AccessProductsList==='Read'){#
    <span class='badge badge-pill badge-info'>Products</span>
    #}#
    #if(AccessQaQc==='Read'){#
    <span class='badge badge-pill badge-info'>QA/QC</span>
    #}#
    #if(AccessPresentations==='Read'){#
    <span class='badge badge-pill badge-info'>Presentations</span>
    #}#
    #if(AccessAboutUs==='Read'){#
    <span class='badge badge-pill badge-info'>About Us</span>
    #}#
</script>

 

Can someone tell me what I might be doing wrong?

Someone should really update the documentation to indicate in which version new features were added. Not everyone is running the very latest version.

My company is using UI for ASP.Net MVC version 2019.3. (2020.2 is currenlty being evaluated)

Is my assumption correct that "validationSummary: true" in validator was NOT added until version 2020 R2?

I spent hours trying to figure out why this was not working with 2019.3? :)

I am using Kendo Hierarchy Grid and wants a way to remove the header and border lines of the master grid alone/only. When I apply the CSS below the grids' code, it also removes the headers child grids. I have attached a PDF to illustrate the rendering.

 

@(Html.Kendo().Grid<WorkplansViewModel>()
.Name("grid_outputindicators")
.Columns(columns =>
{
columns.Bound(c => c.Transaction_Id).Hidden();
columns.Bound(c => c.WPMainRecord_Ident).Hidden();
columns.Bound(c => c.ProjectId).Hidden();
columns.Bound(c => c.FYearIdent).Hidden();
columns.Bound(c => c.FPeriodIdent).Hidden();
columns.Bound(c => c.ViewNumbering).Title("No").Width(20).Hidden(); 
columns.Bound(c => c.Output).Title("Define Indicators for each Output"); 

columns.Command(command => command.Custom(" Add Indicator").IconClass("k-icon k-i-column-stacked").Click("addoutputindicator"));

})

.Resizable(r=>r.Columns(true))
.ClientDetailTemplateId("templateoutputindicators")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("WP_Outputs_Read", "Admin", new {projid=Model.Project_Id, fyear=Model.FYear, fperiod=Model.FPeriod}))
.Model(model => 
{
 model.Id(p => p.Transaction_Id); 
})

.Events(events => events.Error("error_handler"))


)
.Events(events => events.DataBound("dataBoundOutputIndicators"))
)

 

 

 

<script id="templateoutputindicators" type="text/kendo-tmpl">
@(Html.Kendo().Grid<WP_OutputIndicatorsSubGridVM>()
.Name("gridsub_#=Transaction_Id#")
.Columns(columns =>
{
columns.Bound(o => o.Transaction_IndicatorId).Hidden();
columns.Bound(o => o.IndicatorStatementOIVM).Title("Indicator");
columns.Bound(o => o.BaselineOIVM).Width(110).Title("Baseline");
columns.Bound(o => o.TargetOIVM).Title("Target");
columns.Command(command => { command.Destroy().Text(" Delete").IconClass("k-icon k-i-delete"); });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("WP_OutputsSubIndicators_Read", "Admin", new { output_transid = "#=Transaction_Id#" }))
.Destroy(destroy => destroy.Action("WP_Outputs_Delete", "Admin"))
)
.ToClientTemplate()
)
</script>

 

#grid_outputindicators thead.k-grid-header
{
height: 0;
border-bottom-width: 0;
visibility: hidden;
overflow: hidden;
display: none;
}

I'm using the Kendo Grid to list user data.  An issue has been discovered.  When a user clicks the delete button, a verification message comes up stating, "Are you user you want to delete, user Joe Blow".  If I click cancel, and try a different user "Sally Smith", the error message will be, "Are you user you want to delete, user Joe Blow".  I checked the function and the correct data is going into function.

I went through the code in Chrome debugger and I found out that the error message is coming back from code on: https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.js

I do have a function that resets the values to "".  However, the data is not getting update when it goes to kendo.all.js.  How can I reset the data when it goes there?

The not in focus default for NumericTextBox always rounds to the nearest number defined by the format. 

For Example:

            $("#round_numeric").kendoNumericTextBox({
              format: "n0",
              value: 99.5,
              min: 0, max: 100,
            });

Displays 100.

I would like the not in focus format to round down (floor) so that the output is 99. 

Can this be achieved?

Thanks

Hi!

I have a simple bar chart with Kendo's built-in zoom/pan functionality. When I keep on zooming out, the bars get close to each other and the category axis labels merge. Is there any way to set Zoom In / Zoom Out limits so the chart doesn't get merged. This is what I am using for pan and zoom:

 

Is there an easy way to force a refresh of all the multi-filters everytime a grid is databound?

 

I'm using columnmenu and the mvc exensions if it matters.

I'm using kendos exportpdf function to convert html template into pdf file in django framework.pdf file comes/looks good. when we use only text within template. When I have added block of content using css(bootstrap cards) the text along with block is breaking(as per below screenshot) when it comes to end of the page. Can anyone help me to resolve this issue and please let me know if any additional information to be added for clear understanding.

Hello everybody,

ref: Kendo Mobile Listview (Scroller): visibleScrollHints

Is it somehow possible to change the visibility of the y-scrollbar at runtime? 

 

Thanks for your help

axel

I am using Kendo Hierarchy Grid and want a way to remove the header and border lines of the master grid alone. When I apply the the CSS below the grid code, it also removes the headers child grids. 

 

@(Html.Kendo().Grid<WorkplansViewModel>()
.Name("grid_outputindicators")
.Columns(columns =>
{
columns.Bound(c => c.Transaction_Id).Hidden();
columns.Bound(c => c.WPMainRecord_Ident).Hidden();
columns.Bound(c => c.ProjectId).Hidden();
columns.Bound(c => c.FYearIdent).Hidden();
columns.Bound(c => c.FPeriodIdent).Hidden();
columns.Bound(c => c.ViewNumbering).Title("No").Width(20).Hidden();
columns.Bound(c => c.Output).Title("Define Indicators for each Output");

columns.Command(command => command.Custom(" Add Indicator").IconClass("k-icon k-i-column-stacked").Click("addoutputindicator"));

})

.Resizable(r=>r.Columns(true))
.ClientDetailTemplateId("templateoutputindicators")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("WP_Outputs_Read", "Admin", new {projid=Model.Project_Id, fyear=Model.FYear, fperiod=Model.FPeriod}))
.Model(model =>
{
  model.Id(p => p.Transaction_Id);
})

.Events(events => events.Error("error_handler"))


)
.Events(events => events.DataBound("dataBoundOutputIndicators"))
)

 

 

 

<script id="templateoutputindicators" type="text/kendo-tmpl">
@(Html.Kendo().Grid<WP_OutputIndicatorsSubGridVM>()
.Name("gridsub_#=Transaction_Id#")
.Columns(columns =>
{
columns.Bound(o => o.Transaction_IndicatorId).Hidden();
columns.Bound(o => o.IndicatorStatementOIVM).Title("Indicator");
columns.Bound(o => o.BaselineOIVM).Width(110).Title("Baseline");
columns.Bound(o => o.TargetOIVM).Title("Target");
columns.Command(command => { command.Destroy().Text(" Delete").IconClass("k-icon k-i-delete"); });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("WP_OutputsSubIndicators_Read", "Admin", new { output_transid = "#=Transaction_Id#" }))
.Destroy(destroy => destroy.Action("WP_Outputs_Delete", "Admin"))
)
.ToClientTemplate()
)
</script>

 

#grid_outputindicators thead.k-grid-header
{
height: 0;
border-bottom-width: 0;
visibility: hidden;
overflow: hidden;
display: none;
}