I have gotten several user complaints that it is hard to differentiate the weekday checkboxes.

Is there a way to space them out a bit?

I have tried (without success) to handle the edit event of the scheduler and bind to the change event of the recurrenceeditor dropdown to set the margin style.

I am trying to do a simple Export to Excel but when I add the Export snippet to the grid I get the "Excel export is not supported in server binding mode." message. 

I am actually pulling a list of Active Directory users from a custom Object. The Grid works perfect.  All I want to do is because to export the list to an Excel Spreadsheet.

My Controller code, that returns my list

public ActionResult GisUsersTL()
         {
             var ADList = this.GetGisUsers("GISUsers");
                  ViewData["ADList"] = ADList;   //Testing Telerik option to bind data
             return View("GISUsersTL", ADList);
         }

RAZOR page that bombs

@model IEnumerable<GISPortal.Models.ADGisUsers>
@using GISPortal.Controllers

<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
 @(Html.Kendo().Grid((IEnumerable<GISPortal.Models.ADGisUsers>)ViewData["ADList"])
         .Name("Grid")     
        .Columns(columns =>
        {
            columns.Bound(p => p.Username);
            columns.Bound(p => p.DisplayName);
            columns.Bound(p => p.Department);
            columns.Bound(p => p.Office);
            columns.Bound(p => p.JobTitle);
            columns.Bound(p => p.MobilePhoneNumber);
            columns.Bound(p => p.EmailAddress);
        })
           .Pageable() //Enable paging.
           .ToolBar(tools => tools.Excel())  //This is the line that bombs so I can't even add any more custom export lines.

)

In my kendo grid i loading data
.Grid<Portals.Areas.Reports.Models.TransactionReportItem>()  like this. But again i provided in DataSource
 .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(100)
                                .Read(read =>                                  read.Action"GetTransactions","Transactions")))
My problem is when i provided some external filter, because  of datasource its displaying all data instead of filter data. 
my question is how we can apply external filter  condition in data source or is it possible to stop calling datasource?
Below i giving entire code of grid

          @(Html.Kendo()
                            .Grid<Portals.Areas.Reports.Models.TransactionReportItem>()
                            .Name("transactionGrid")
                            .HtmlAttributes(new { @class = "grid-primary" })
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(100)
                                .Read(read => read.Action("GetTransactions", "Transactions")))
                                
                            .Pageable(pageable => pageable
                                .Enabled(true)
                                .PageSizes(new[] { 100, 500 })
                                .Refresh(false)
                                .ButtonCount(5))
                            .Columns(columns =>
                            {
                                //Txn Status Column
                                columns.Bound(row => row.TransactionStatus)
                                    .ClientTemplate(@"
                                        #if(TransactionStatus == 'Void'){#
                                            <span class='icon-status-box'>
                                             <span class='icon icon-status-void'></span>
                                             <span class='status-void'>#: TransactionStatus #</span>
                                             </span>
                                        #}else if(TransactionStatus == 'Declined'){#
                                            <span class='icon-status-box'>
                                             <span class='icon icon-status-declined'></span>
                                             <span class='status-declined'>#: TransactionStatus #</span>
                                             </span>
                                        #}else if(TransactionStatus == 'Chargeback'){#
                                            <span class='icon-status-box'>
                                             <span class='icon icon-status-chargeback'></span>
                                             <span class='status-chargeback'>#: TransactionStatus #</span>
                                             </span>
                                        #}else if(TransactionStatus == 'Authorized'){#
                                            <span class='icon-status-box'>
                                             <span class='icon icon-status-authorised'></span>
                                             <span class='status-authorised'>#: TransactionStatus #</span>
                                             </span>
                                        #}else{#
                                            <span class='icon-status-box'>
                                             <span class='icon icon-status-default'></span>
                                             <span class='status-default'>Pending</span>
                                             </span>
                                        #}#
                                    ");
                                //Txn ID Column
                                columns.Bound(row => row.TransactionID);

                                //Order ID Column
                                columns.Bound(row => row.OrderID);

                                //TxnAmount Column
                                columns.Bound(row => row.TransactionAmount).Format("{0:n2}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });

                                //Txn date column
                                columns.Bound(row => row.TransactionDate).Format("{0:" + userPreference.PreferredDateDisplayFormat + "}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });

                                //ViewDetail column
                                columns.Bound(row => row.TransactionID).Title("").Filterable(f => f.Enabled(false))
                                .ClientTemplate(@"
                                    <button id='#= TransactionID #' data-btn-viewDetail='#= TransactionID #' class='btn btn-neutral btn-sm'>
                                        View Detail
                                    </button>
                                ");
                            })
                            .Sortable()
                            .Filterable(ftb => ftb.Enabled(true))
                            .ToolBar(tools => tools.Pdf())
                            .ToolBar(tools => tools.Excel())
                            .Pdf(pdf => pdf
                                .AllPages()
                                .PaperSize("A4")
                                .Scale(0.8)
                                .RepeatHeaders()
                                .AvoidLinks()
                                .Landscape()
                                .Title("ABC Merchaant Transaction Report")
                                .TemplateId("page-template")
                                .Margin("2cm", "1cm", "1cm", "1cm")
                                .FileName(string.Format("ABC_Merchant_Transaction_Report_{0}.pdf", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
                                .ForceProxy(true)
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
                            )
                            .Excel(excel => excel
                                .AllPages(true)
                                .FileName(string.Format("ABC_Merchant_Transaction_Report_{0}.xlsx", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
                                .ForceProxy(true)
                                .ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
                            )

                            )

Hi,

I have implemented a custom validation on the kendo grid. Ex: The column name is "DemandUnit" and value is "kVA"/"kW" or blank. The problem is if I change the value "kVA" to "kVAd" the validation message is showing but if I remove the "d" i.e. from "kVAd" to "kVA" the validation message not go away. I know kendo grid uses "MVVM" model but how I can force to apply validation always.

Here with code,

(function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: { // custom rules               
                demandunitvalidation: function (input, params) {
                    if (input.is("[name='DemandUnit']") && input.val() != "") {
                        input.attr("data-demandunitvalidation-msg", "Demand unit must be kVA/kW or blank.");
                        return /^(kVA|kW)$/.test(input.val())
                    }
                    return true;
                },
            },
            messages: { //custom rules messages               
                demandunitvalidation: function (input) {
                    // return the message text
                    return input.attr("data-val-demandunitvalidation");
                }
            }
        });
    })(jQuery, kendo);

Any help will be appreicated.

Regards,

Ujjwal

What solution can I use to combine these two requirements so that the grid column displays names (but with values of IDs) and also provides the form input tag?

Thanks.

Note: Cross-posted from here.

Hi,

I am encountering strange issue in kendo mvc grid. My kendo mvc grid supports two feature one is saving state which save the state of filter/column order in my local database and other one is to upload pdf files using link button in the row.

Now say I loaded my kendo mvc grid with some records and applied a date range filter on it and save the state of it. Now when i load that saved state and try to upload record I encounter following error on reloading grid after successful upload. Please check attached screenshot for more details :

Following are the details

kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:26 Uncaught Error: Cannot call method 'value' of kendoDropDownList before it is initialized at HTMLSelectElement.<anonymous> (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:26:4132) at Function.each (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:2881) at M.fn.init.each (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:846) at M.fn.init.e.fn.(anonymous function) [as kendoDropDownList] (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:26:4079) at init.refresh (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:37:20463) at init.d (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:3856) at init.trigger (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:25:6794) at init._process (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:28:3663) at init.success (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:31463) at success (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:30421)

I'm trying to write a declaration of a details grid as a ClientTemplate using an MVC wrapper with a ToClientTemplate() call. Within this grid I'm need to write another client template for a column with a conditional data binding expression.

I'm getting invalid template error:

looks like the problem is the conditional expression in the if statement:

    if(FirstName == \u0027John\u0027)

the single quote is encoded. What do I have to do to prevent that? Is there a way to escape single quote?

Here is sample code:

Hello,

I'm using visualTemplate to see from my model (dataItem) whether entity is of one type or the other to use, among other things, corresponding image for the entity.

I'm also using (Editable) Tools under ShapeDefaults to have some custom tools for the entities in the model.

Now, I would like that depending on the entity type from the model I can choose which custom tool will be shown to the user. How can I do this?

For more clarity, mvc razor part:

Javascript template:

I have the following code in an MVC page. When I export to PDF, the content in the "page-template" script tag prints at the bottom of the grid on each page instead of the top, as I thought it should because I've specified a class type of "header".

<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>
            Multi-page grid with automatic page breaking
        </div>
    </div>
</script>

<div id="main-content" class="JeffreysContainer">
    <h3 class="text-center">Dealer Closeout History</h3>

    @(Html.Kendo().Grid<JeffreysOnline.Entities.vwCloseout>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.CloseoutDate).Width(120).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.BeginDate).Width(120).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EndDate).Width(120).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.BoothNumber).Title("Booth").Width(80);
                columns.Bound(p => p.DealerName).Title("Dealer Name").Width(100);
                columns.Bound(p => p.DealerId).Title("Dealer Id").Width(100);
                columns.Bound(p => p.RetailSales).Width(125);
                columns.Bound(p => p.WholesaleSales).Width(125);
                columns.Bound(p => p.LayawayPayments).Title("Deposit Payments").Width(125);
                columns.Bound(p => p.RentWithheld).Title("Rent").Width(125);
                columns.Bound(p => p.CommissionWithheld).Title("Commissions").Width(125);
                columns.Bound(p => p.ChargeCardFees).Title("Charge Fees").Width(125);
                columns.Bound(p => p.AssessmentWithheld).Title("Asessment").Width(125);
                columns.Bound(p => p.TotalPayout).Title("Total Payout").Width(125);
                columns.Bound(p => p.CheckNumber).Title("Check Number").Width(125);
            })
            .ToolBar(toolbar =>
            {
                toolbar.Excel();
                toolbar.Pdf();
            })
            .ColumnMenu()
            .Excel(excel => excel
                .FileName("CloseoutHistory.xlsx")
                .Filterable(true)
                .AllPages(true)
                .ProxyURL(Url.Action("ExcelExport", "Customer"))
             )
             .Pdf(pdf => pdf
                .AllPages()
                .AvoidLinks()
                .PaperSize("A4")
                .Scale(0.6)
                .Margin("2cm", "1cm", "1cm", "1cm")
                .Landscape()
                .RepeatHeaders()
                .Title("Closeout History")
                .TemplateId("page-template")
                .FileName("CloseoutHistory.pdf")
                .ProxyURL(Url.Action("PdfExport", "Dealer"))
            )
             .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(false)                                               // We want to perform batch operations
                .PageSize(50)                                               // Set the page size
                .Events(events => events.Error("gridErrorHandler"))         // Define a function that gets called on an error
                .Read(read => read.Action("ReadCloseoutHistory", "Closeout"))  // The Read method in the controller
             )
    )
</div>