I want to let users format the text in the editor only using the tools in the toolbar. It seems that even if the tools for Italic or Underlined are not included the text can still be formated with the keyboard shortcuts (<ctrl> + i or <ctrl> + u). 

When using the shortcuts (for ex. <ctrl> + i) when the tool is not included the Execute event is not fired but the text can still be formated.

See http://dojo.telerik.com/@alexc/eHArEg

Is there a way to prevent unwanted keyboard shortcuts? 

Hi,

 

I am evaluating Kendo Trial, have been trying to get the Kendo Grid with Angular example to work in our existing MVC5 project for several hours, and am having numerous angular issues. Any help would be appreciated.

Error:

 

angular.min.js:40 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=csa&p1=Error%3A%20%…%20c%20(http%3A%2F%2Flocalhost%3A8049%2FScripts%2Fangular.min.js%3A21%3A19)

The view-source is: 

 

Hi, I'm trying to show a grid inside a ListView. In order to do that I added a MVVM div data-role="grid" in the ListView template.

When the ListView is bound, everything is displayed correctly except the grid ( not rendered ). If I copy the same MVVM div inside the editTemplate, and click Edit at runtime, the grid is displayed in the editTemplate. Here and example of the code: ( as you can see both Template and EditTemplate have the same grid, but it's only displayed on EDITING mode )

<script type="text/x-kendo-tmpl" id="level-template">
        <div class="hierarchy-view k-widget">
            <dl>
                <dt>Event</dt>
                <dd>#: Description #</dd>
                <dt>Escalation Time Seconds</dt>
                <dd>#: EscalationTimeSeconds #</dd>
                <dt>Subscriber</dt>
            </dl>
         <div data-role="grid" data-columns='["Subscriber.Name", "Subscriber.Description"]' data-bind="source: Subscriptions"></div>
            <div class="edit-buttons">
                <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="level-editTemplate">
        <div class="hierarchy-view k-widget">
            <dl>
                <dt>Description</dt>
                <dd>
                    <input type="text" class="k-textbox" data-bind="value:Description" name="EscalationHierarchyDescription" required="required" validationMessage="required" />
                    <span data-for="EscalationHierarchyDescription" class="k-invalid-msg"></span>
                </dd>
                <dt>Escalation Time Seconds</dt>
                <dd>
                    <input type="text" data-bind="value:EscalationTimeSeconds" data-role="numerictextbox" data-type="number" name="EscalationHierarchyEscalationTimeSeconds" required="required" min="30" validationMessage="required" />
                    <span data-for="EscalationHierarchyEscalationTimeSeconds" class="k-invalid-msg"></span>
                </dd>
                <dt>Subscriber</dt>            
            </dl>
        <div data-role="grid" data-columns='["Subscriber.Name", "Subscriber.Description"]' data-bind="source: Subscriptions"></div>
            <div class="edit-buttons">
                <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
            </div>
        </div>
    </script>

    var listLevel = $("#lvLevel").kendoListView({
        autoBind: false,
        dataSource: dsEscalationHierarchy,
        template: kendo.template($("#level-template").html()),
        editTemplate: kendo.template($("#level-editTemplate").html()),
        cancel: function(e) {
            dsEscalationHierarchy.read();
        },
        remove: function (e) {
            if (viewModel.EscalationHierarchy.length <= 1) {
                e.preventDefault();
                alert("At least one item is required");
            }
        }
    }).data("kendoListView");

I am having kendo grid in detailRowTemplate of kendo grid(Primary Grid). In my primary Grid template, I have checkAll Checkbox. If I check that checkbox, I want to check all the checkboxes in the detailGrid related to that particular row. Right now, I am using class to check all checkboxes. So, it is checking all checkboxes for all the rows of the primary Grid. I want to check only the Grid that is related to Primar Grid detail Temlplate. How can I do this ? Below is my code

//Primary Grid
$("#grid").kendoGrid({
        dataSource: dataSource,
        rowTemplate: kendo.template($("#Template").html()),  
        detailTemplate: kendo.template($("#gridtemplate").html()),
        detailInit: detailInit,
        dataBound: function () {
        },
        columns: [
           { field: "Id", hidden: true },
           { field: "Name", title: "Name" },
           { field: "Read", title: "Read" }           
        ]
    });

//Detail Template Grid
detailRow.find(".SiteGrid").kendoGrid({
        dataSource: dataSource,        
        rowTemplate: kendo.template($("#SiteTemplate").html()),   
        columns: [
          { field: "Id", hidden: true },
          { field: "Name", title: "Site", width: 350 },
          { field: "Read", title: "Read", }       
        ]
    });

//Detail Grid Template
<script type="text/x-kendo-template" id="gridtemplate">
    <div class="SiteGrid">
    </div>
</script>

//Primary Grid Template
<script type="text/x-kendo-template" id="Template">
    <tr class="k-master-row k-alt">
        <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
        <td> #= Name # </td>
        <td><input type="checkbox" name="#: Id #" value="Select All" onclick="CheckCheckboxes(); return true;" /></td>   
    </tr>
</script>

//Detail Grid Template
<script type="text/x-kendo-template" id="SiteTemplate">
    <tr class='k-alt'>
        <td>#: Name #</td>
        <td>
            #if(AccessType == 'Read') { #
            <input type="radio" name="#: Id #" class="read" checked="checked" />
            #}else{#
            <input type="radio" name="#: Id #" class="read" />
            # } #
        </td>      
    </tr>
</script>

//Checking Check boxes
<script>
    function CheckCheckboxes() {    
        $('.read').prop('checked', true);
    }
</script>

HI. I'm looking to implement a kendo Editor and we want users to be able to upload files and images. So I got introduced to the imagebrowser component (let's forget the file browser for now and let's just focus on image) and I'm saying to myself, "well, what about the server side code? What does this component need served up?" A directory with this name was not found showed up when I first started playing with this component. That message most likely appeared because I'm just at the phase of copying and pasting in the code based on what's in the example on this site...

What's happening here on the backend? /kendo-ui/service/ImageBrowser/Read - is just one of many questions. 

I'm using Web API 2.0. JS on front end on an ASP.NET web form/aspx server page actually. I'm hoping there's some sort of canned example I can use somewhere for server side code? I wouldn't even know where to begin because I don't know what this component needs. Again I can either throw the code on the codebehind (c#) on the page itself, or I can use Web API (preferred). 

Thanks.

I currently am using listview to display some birthdays. We're displaying the name, Date of birth and a field that is a binary image from a DB.

This would normally be fine as it is, with the pager controls, etc. But we have some requirements...we want these to be displayed like a regular image slider you'd find on the web.

1.) Images and other content scrolls automatically without any user intervention.

2.) We do not want paging controls, however, if there were some arrows overlayed near the image that could disappear when the user's mouse is NOT in the content area, that would be fine. In other words, no paging controls at all, but if the user hovers into the content area, I'm OK with a left and right arrow appearing nearby.

I tried looking at kendo scrollview but I can't get that to work, I'm thinking because there's all this key business and more complexities that I think we're looking for.

How can this be achieved?

I'd like my tooltip to stay open if the mouse is above the tooltip target *or* if it is above the tooltip content (which is loading dynamically), so that the use can move the mouse from the target onto the tooltip and click on links in the content.

A good example of EXACTLY what I'm looking for is the popup that comes up in Facebook when you hover on a Friend on the right side of the page... you get an interactive popup.

I know that I can do this by setting AutoHide off and adding a "close" button to the tooltip content, but the users don't want that, (it would also be impractical as it the tooltips are in a grid and sliding the mouse over the grid could easily lead to loads of tool tips opening up and getting stuck open).

Has anyone done this? Care to share your JS?
I'm surprised it's not a built-in an option for the widget...

Cheers,
Chris

  

 

 

Hello All,

I've seen questions like this several times and based on the answers, I think I'm doing everything right and even so it's not working.

My grid invokes the remote update method ok, and the server receives the requirement as expected. It executes the code perfectly. I'm using popup edit and the problem is the edit window never closes. It remains there. I receive no error message either from the grid control, the server or jquery/javascript.

The response I'm sending is the following:

Response HTTP/1.1 200 OK
Content-Length 110
Content-Type application/json; charset=utf-8
Server Microsoft-HTTPAPI/2.0
Access-Control-Allow-Origin *
Access-Control-Allow-Methods GET, POST, PUT, DELETE
Date Sun, 18 Sep 2016 00:01:57 GMT
[{"firstName":"XXX","lastName":"YYY","number":666,"role":0,"roleDescription":"User"}]

 

The grid definition follows:

$(document).ready(function () {
$("#userGrid").kendoGrid({
dataSource: {
type: "jsonp",
transport: {
read: "<%=ConfigurationManager.AppSettings["wsbase"]%>/getuserlist",
update: {
url: "<%=ConfigurationManager.AppSettings["wsbase"]%>/updateuser",
dataType: "jsonp",
type: "get",
},
 error: function (e) {
if (e.errors) {
alert(e.errors);
this.cancelChanges();
}
 },
},
            schema: {
               model: {
                  id: "number",
                  fields: {
                     number: { type: "number", editable: false },
                     firstName: { type: "string", editable: false },
                     lastName: { type: "string", editable: false },
                     role: { type: "number", validation: {min: 0, max: 3, required: true} },
                     roleDescription: { type: "string", editable: false }
                  }
               }
            }
},
pageable: false,
height: 350,
toolbar: ["create"],
columns: [
{ field: "number", title: "Número" },
            { field: "firstName", title: "Nombre"},
            { field: "lastName", title: "Apellido"},
            { field: "role", title: "Cód. Perfil"},
            { field: "roleDescription", title: "Perfil"},
            { command: ["destroy", "edit"], title: "Opciones"}],
editable: "popup"
});
});

 

Any help, VERY WELCOMED!

I've noticed that when column filtering is applied to the grid that the Excel export number of rows is less than what is present on the grid after the column filtering.  It seems kind of random on what is missing.  Is this a known issue?   When I don't apply column filtering it exports the correct number of rows.

Filter event is not firing in your demo.

The GridOptions interface in TypeScript definition files is also missing filter definition.