Hello,

I am trying to build a UI which is basically an editable version of the Kendo Web Demo for Sortable ==> Handlers.  However, attaching the Sortable to the editable Listview seems to disrupt the datasource detection and management of the create and update conditions.  I've done a snippet at trykendoui.com but can't figure out how to save/share it.  The complete code is below.

Forget the actual actions in the transport specification -- I just want to see that I can trap the events and get the IDs and Names as required -- I will be building up REST call URLs.  Everything is fine while the list view is not a Sortable.  However, when you remove the comments around the Sortable specification, then the following problems occur. 

(1) on edit, the name field is not editable (or on my system, is somewhat editable but when the checkmark is clicked to save, the updated product name isn't available),

(2) on add new, the new product name doesn't appear to be available. 

Delete still seems to work.

We're designing this functionality into several places in our UI, so an answer or workaround is really key.  Thank you in advance!

 

 

Hi There,

Using Kendo UI v2014.1.416,  I have a need to place a legend well outside a chart area.  With IE 11, I can set the legend's offsetX and offsetY and see the legend in the position I want.  But the legend is not visible with FireFox and Chrome: it appears to be clipped.  In this case, if I mess with the svg's width, I can get the legend visible.  Is there any kind of workaround for this scenario?

If the only workaround is creating a HTML element that mimics the legend, how would one duplicate the hover and click events that the legend has.  That functionality I can't do without.

Thanks

I'm trying to get my notifications to collapse, rather than just fade out.  I've looked all over for a list of possible animations, but all i can find is a few examples (using fade and zoom), and a forum post from 2011 that said the animation types would soon be listed in the documentation for Window.

http://www.telerik.com/forums/list-of-animation-types

I've come across the "collapseVertical" option in the javascript, but that doesn't work for the notification.  Here's what i tried:

var staticNotification = $("<span></span>").kendoNotification({
appendTo: $(".topStaticNotification"),
animation: {
close: {
effects: "collapseVertical"
}
},
hide: hideNotification
}).data("kendoNotification");

If i put in "fadeOut", then the notification behaves as normal.  But it doesn't look like any other options can work there.  Is this possible by just using the built in animation somehow?

My next thought was to just catch the "hide" event and manually collapse it (hence the hideNotification above).  But, for whatever reason, this doesn't seem to work either.

Any ideas?

Hi Kendo Team,
I'm using something similiar to your Grid /Detail template example and it turns out that that tabstrip is showing a border-bottom line below the active tab.
To reproduce this, follow these steps:
1. Open your sample Grid / Detail template
2. Change the theme to Default
3. collapse/expand the theme dropdown.
I've attached a picture that shows this effect.

You can also check this in your tabStrip samples. Collapse and expand the theme dropdown.

Kind regards,
Oscar.

This is driving me nuts.  I have a simple list view bound to some external json data.  The list view uses an external template.  It's working fine.  However, the raw template is also rendering to the HTML in the page.  WHY?!?!


The rendered output:


Thanks in advance!

I am attempting to use a MVVM grid in a div that is marked as role="dialog" and has the aria-hidden set to true.  The div is tied to a button using the data-target attribute on a button.  The basic setup of the MVC Razor page is that button is in one div block and the grid is in another div block.

<div class="...." id="view">
  <div class="row>
     <div class="col-md-3">
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myGridDiv" data-bind="click: onMyButtonPressed">View</button>
     </div>
      ......
  </div>
</div>

<div class="modal fade" id="myGridDiv" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" data-role="content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">View</h4>
            </div>
            <div class="modal-body">
                <div id="myGrid"
                     data-role="grid"
                     data-columns='[
                        { field: "Col1", title: "Col 1", width: "15%" },
                        { field: "Col2", title: "Col 2", width: "20%"},
                        { field: "Col3", title: "Col 3", width: "20%"},
                        { field: "Col4", title: "Col 4", width: "15%"},
                        { field: "Col5", title: "Col 5", width: "15%"},
                        { field: "Col6", title: "Col 6", width: "15%" } ]'
                     data-bind="source: myGridDataSource, visible: true">
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    var myGridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        async: false,
                        url: '/api/GridData/GetData?id=1',
                        dataType: "json"
                    },
                },
                serverPaging: true,
                pageSize: 10,
                filter: { field: "Id", operator: "eq", value: 1 },
                schema: {
                    model: { id: "Id" },
                    total: function(data) {
                        return data.length;
                    }
                },
                error: function(result) {
                    alert(result);
                }
            });


            var myModel = kendo.observable({
                isVisible: false,
                isEnabled: false,
                dataSource: myGridDataSource,
                onViewHistoryButtonPressed: function (e) {
                    var grid = $('#myGrid').data("kendoGrid");
                    if (null != grid) {
                        grid.dataSource.read();
                        grid.refresh();
                    } else {
                        console.log("failed to find grid");
                    }
                 }
            });
            kendo.bind($("#view"), myModel);
}


So the probably I am running into is that the above does not seem to populate the grid with any data.  When I click the button I see it hit my click method and the dialog does display, but there is not grid data being displayed.  The grid does not even attempt to hit my WebApi controller.

I am not sure what I am doing wrong on this since I have been able to use this same grid logic on other pages without issue.  The only difference here is that the grid is being displayed in a dialog and must be refreshed each time the dialog is loaded.

Hi Just trying to get to grips with the above, but am a noob.

So I am receiving the following data from an ws.



If am issuing the following when populating the treeview


My CSS looks like this


When I run the code, the tree view displays ok BUT only ever shows the top image from the list in the CSS, namely the TextItem image. 

As a noob, I'm not sure where my problem lies. Obviously the sprites png is being found ok and the first item in the list is being loaded, but I'm not sure if there is problem with the way I am doing this or whether there is a problem with my .png. I have noticed that if I inspect the image element sample on the telerik site, Chrome showws a preview of the file, whereas in my sceanrio, Chrome only shows the url to the file.

Any pointers would be gratefully received

S

   ds_par is the first node, and when I collapsed, I want to deliver two params to remote method like "public Node GetNode(string id, string name)", How can I to complete it? Thanks.

<script>

    var ds_sub={
        transport:{
           read:{url:"http://......"},
           dataType:"json",
           data:{ how to use params of parent}
        },
       schema:{ 
          model:{
              NodeId:"NodeId",
             NodeName:"NodeName"
            }
    }
    var ds_par={
         transport:{
           read:{url:"http:...."}
        },schema:{model:{children:"ds_sub"}}
     }


</script>

This used to work on a computer:


But now, it seems like no swipe events are delivered any longer.

Why?

I would like to load different content into the window depending on what button the user clicks.

Right now i have always the same text inside.


I want to be to somehow add the content inside where i put the ?????, but i am not sure how.

Or maybe some other alternative way of doing this?

Any help would be appreciated.