I have a field in my datasource who's value from the server is a 'Y' or a 'N'. I need to display that string value on the grid. When editing the value, I need to show a checkbox, checked if value == 'Y'.

 

There are 2 ways I can try to solve this problem, as I can tell, but I have problems/questions with each approach.

1. I can change the data model by making the field of type boolean, ie:
model: {
    fields: {

        "myFlag": { type: 'boolean"}

}}

, then changing the template of the column template like so: ` template: "#= (myFlag) ? 'Y' : 'N'"

This gets my desired UI result. However, all of my records on the grid display 'N', even though most of the records have 'Y' as their myFlag value. So therefore, how do I tell the datasource that 'Y' is true and 'N' is false? Furthermore, why does my grid currently treat myFlag as false when myFlag does indeed have a string value in it, which should equate to true.

 

2. The other approach is to leave my data source alone and just build a custom editor. However, most tutorials out there use a template to show a checkbox. I don't want to do that; I want to display "Y/N", and only render the checkbox when editing. I do not see any examples out there with this configuration. Here is my current editor for this checkbox:

editor: function (container, options) {
var value = options.model[options.field];
$('<input required name="' + options.field + '" type="checkbox" data-bind="checked:('+options.field + '==\'Y\')" />')
.appendTo(container)

}

note, i've also tried setting the html attribute 'checked' to no avail.

 

Hi,

I am using the trial edition of the Kendo UI products and I'm working on a scheduler proof of concept.

I've reviewed numerous items in this knowledge base and on the common issues site and I still am unable to get any scheduler events from my api to show on the scheduler. I'm attaching my .html document and the results of my api service call from the browser. I have compared the date formatting to this data from your samples (https://demos.telerik.com/kendo-ui/service/meetings) and I don't see any differences related to the date formatting. I have also tried formatting the date in these formats being returned by the api - yyyy-MM-ddThh:mm:ssZ, yyyy/MM/dd hh:mm:ss AM/PM with no luck.

I can get my resources to appear on the scheduler ok and as you will see in my .html file that I can create an event associated to one of the resources with no problem when I manually create the event in the datasource.

Hello,

I have Scheduler in boostrap tab component. I have two tabs 1 -with scheduler, 2 -with action which can add new events to it by interaction with dataSource.

I discovered that when I'm in second tab and add new event to calendar then calendar refreshes incorrectly. Snippet in DOJO presents this

http://dojo.telerik.com/ISEbUr/3

I have a requirement which has a drop down menu inside each row of the kendo ui grid. Specifically, when user click a button inside a cell of each row of the grid, a pull down menu will open.

I used twitter bootstrap drop down for this pull down menu. However the pull down menu is hidden behind the  cell and would only show the area within bounds of the cell. I need to the pull down menu to be the top floating div on top of the grid. 

I tried to set z-index to a large number like 9999, but didn't seem to have an effect. I used a regular div instead of twitter bootstrap. The same thing happened. The div is hidden.

I think it is something to do with the grid not allowing cell content to be larger and popped out on the grid.

Here is my code snippet if it helps:

<div id="gridCounterOffers" style="z-index: 1;">
</div>

<script id="actionCounterTemplate" type="text/x-kendo-tmpl">  
     <div class="btn-group" style="z-index: 5;">
                <button class="btn btn-mini btn-danger">
                    Counter Offer</button>
                <button class="btn btn-mini  btn-danger dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu action-menu pricing-menu" style="z-index: 99999; border: 1px solid red">
                    <a class="close">×</a>
                    <label style="text-align: left; font-weight: bold" class="spacer">
                        Price Per Carat:
                    </label>
                    <input type="number" min="0" max="1000000" step="10" style="width: 150px" />
                    <table class="table table-striped spacer">
                        <tr>
                            <th>
                                Price Per Carat *
                            </th>
                            <th>
                                Weight
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <span id="lblNewPricePerCarat"></span>
                            </td>
                            <td>
                                <span id="lblWeight"></span>
                            </td>
                        </tr>
                    </table>
                    <span style="font-weight: bold">Price Total =</span><span id="lblNewPriceTotal"></span>
                    <label style="text-align: left" class="spacer">
                        Please Enter Note Below:
                    </label>
                    <textarea rows="2" cols="400" id="txtPricingNote" style="width: 200px"></textarea>
                    <div class="control-group">
                        <button type="submit" class="btn btn-mini btn-action">
                            Submit</button>
                    </div>
                </div>
            </div>
</script>


        $("#gridCounterOffers").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/Product/GetCounterOffers/",
                        contentType: "application/json",
                        type: "GET"
                    }
                },
                schema: {
                    parse: function (response) {
                        console.log('parse');
                        $.each(response, function (idx, elem) {
                            elem.CreateDate = moment(elem.CreateDate).format('MM/DD/YYYY h:mm a');
                        });
                        return response;
                    }
                }
            },
            height: 500,
            scrollable: false,
            sortable: true,
            filterable: false,
            reorderable: true,
            columnMenu: false,
            pageable: {
                pageSize: 10,
                input: true,
                numeric: true,
                pageSizes: true,
                refresh: true
            },
            messages: {
                empty: "There are no counter offers at this time. Please check back later."
            },
            columns: [
                { field: "PreviewImageFileName", title: "Sample", template: "<img src='@Constants.PRODUCT_IMAGE_FOLDER#= PreviewImageFileName #' style='width:50px; height:50px;' title='#= PreviewImageFileName #' />", width: "50px", sortable: false, filterable: false },
                { field: "ProductID", title: "Item ID", template: "<a href='/Product/'>#= ProductID #</a>", width: "30px", sortable: true, filterable: true },
                { field: "PricePerCarat", title: "Price Per Carat", template: '#= kendo.toString(PricePerCarat, "n2") # ', width: "50px", sortable: true, filterable: true },
                { field: "PriceTotal", title: "Price Total", template: '#= kendo.toString(PriceTotal, "n2") # ', width: "50px", sortable: true, filterable: true },
                { field: "CreateByUserName", title: "By", width: "50px", sortable: true, filterable: true },
                { field: "CreateDate", title: "Date", width: "100px", sortable: true, filterable: true },
                { title: "Accept", template:kendo.template($("#actionAcceptTemplate").html()), width: "50px", },
                { title: "Counter Offer", template:kendo.template($("#actionCounterTemplate").html()), width: "100px"}
                ]
        }); //kendogrid

I'm using the Editor and the Immutables functionality.

When I'm editing a document in the Editor that contains Immutables in Internet Explorer and I 'Undo' (Ctrl + Z) something the formatting of the immutable content is messed up or disappears completely.This works fine in Chrome but not in Internet Explorer.

If you want to test use this Kendo demo in Internet Explorer

http://demos.telerik.com/kendo-ui/editor/immutable-elements

Now select some text in the example and Bold it using the editor bold command. Now undo (Ctrl + z). The Immutable fields disappear!!

Any help appreciated Telerik

 

Hi, version kendo ui 2016.3.1118, using Russian localization (Turkish works equally) the setting:

.Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )

simply does not work, instead of the three operators (specified in settings) displays all.  If you include the localization of the default(en-EN) is all works.
Full Code:

bundles.Add(new ScriptBundle("~/bundles/kendoJs").Include("~/Scripts/kendo/2016.3.1118/kendo.all.min.js")
                                                             .Include("~/Scripts/kendo/2016.3.1118/kendo.aspnetmvc.min.js")
                                                             .Include("~/Scripts/kendo/2016.3.1118/cultures/kendo.culture.ru-RU.min.js"));
<system.web>
    <globalizationculture="ru-Ru" uiCulture="ru-Ru" />
</system.web>
kendo.culture("ru-RU");
 @(Html.Kendo().Grid<CertificateDeath>()
    .Name("Grid")
    .Columns(columns =>  {
       columns.Bound(e => e.Name).Width(200);
        columns.Bound(e => e.NameShort).Width(350);
    })
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("List", "CertificateDeath"))
     )
    )
I would be grateful for any help.

Kendo grid does not export to excel with cell borders, someone has a solution ? Follow my code:

 .Events(x => x.ExcelExport("excelExport"))

<script type="text/javascript">
        function excelExport(e) {

var sheet = e.workbook.sheets[0];

            for (var i = 0; i < sheet.rows.length; i++) {              
                sheet.rows[0].cells[0].background = "#ffffff";
                sheet.rows[0].cells[1].background = "#ffffff";
                sheet.rows[0].cells[2].background = "#ffffff";
                sheet.rows[0].cells[3].background = "#ffffff";

                for (var ci = 1; ci < sheet.rows[i].cells.length; ci++) {
                    sheet.rows[i].cells[ci].color = "black";

                    sheet.rows[i].cells[ci].border = "black"; // HERE

                }

 }
  </script>

Hi, I'm using a spreadsheet inside a kendo window. We have some columns with validation on them (type is set to 'reject'). So when the user tries to type something into this column, we get the reject window, however, its z-index is behind the Window the user is using. Is there a way to differentiate this reject window (we have 15 kendo windows) on the screen already?

Spreadsheet is attached, to show the reject window appearing partially behind the current window.

We've been pleased with the LESS support that Kendo UI provides with its themes. However, we want to move away from LESS to either SCSS or SASS. Are there any plans to provide themes in either of these formats soon?

Hi, Is there a way to fire the clear method of a kendo multiselect via a button click? I have ten multiselects, and need a way to quickly clear them all.

Thanks

Marc