Hello ,

I'm trying to develop a web app that will use inline grid editing for new records and updates.

Each row of data will require around 10 numeric inputs -- the default value is zero. It's essential that users can use TAB to move to the next field and then enter the required figure as quickly as possible.

Currently, when a user tabs to the next field, the existing content is not highlighted, so they are having to either use the mouse to highlight/delete it or use the arrow keys. This is slowing down data entry considerably.

How can I highlight the cell's existing  content when the user TABs to it?

Thanks

I have a ListView and Pager bound to a DataSource that gets its data from a remote url (i.e. using transport.read).  For the sake of this example we'll call the objects returned by the url and bound to the DataSource, "DataSourceObjects".  It works as expected.  

However, the ListView exists on a webpage that uses ajax to update other elements on the webpage (Call #1).  When those other elements update, the ListView must update and display data from a different page of the DataSource, based on the new values of those elements.  This means a call to DataSource.page() and thus another round-trip to the server (Call #2).  I'd like to combine Call #1 and Call #2 into one call.  I should be able to do this by sending the DataSourceObjects for the new page during Call#1 and then manually updating the DataSource with those new DataSourceObjects, bypassing the DataSource.page() call and bypassing transport.read().  I'd also need to manually update the page being displayed by the Pager attached to the DataSource, again without it making another call to the server.

I've done a lot of looking around to see how this could be accomplished but haven't found an example of what I'm describing.  I've gotten so far as to update the data being displayed by the ListView by calling DataSource.data(DataSourceObjects), but I can't get the Pager to display the right page number.  I read a suggestion to try DataSource.query({ page: NewPageNumber }) but that doesn't seem to work.

Can you tell me how to accomplish what I've described?  Thanks.


UPDATE:
I was able to use the get the .query() call working as described here (http://www.kendoui.com/forums/framework/data-source/setiing-pagesize-dynamically-causing-read-.aspx).  Calling manuallyUpdateDataSource() seems to update the data as I want it to, but the .query() line causes a server hit, which I don't want.

Hi,

I have tested your Multi Select widget 
It seems to me there is a bug there :
When navigating to http://demos.kendoui.com/beta/web/multiselect/serverfiltering.html
I can see that all  products are being
downloaded to the client when the page just loads.
I would expect that no data will be downloaded to the client, and only the relevant products will be fetched as I type inside the input area (fetching seems to happen , but since all products have already
being downloaded at first hit , there is no use to download them again from the
server).
In the above sample 74 products were downloaded to the client when the widget have been loaded...

Hi,

We have converted the the treeview from telerik MVC to Kendo UI looks fine but how should we do operations on it after the tree is loaded ? Previously we used OnLoad event in telerik to do some operations after the tree is loaded but in Kendo no Onload event is present so we used document.ready function but it fires before the tree is loaded due to which the few steps do not work.
Other question is regarding the Kendo treeview expand and collapse animation. We need to show the + and - signs instead os the small triangle, how shall we achieve this ?

Thanks..

I'm running into this issue where the tooltip remains on the chart if I mouseover from one to another quickly. Here's a JSFiddle where the occurrence can be tested, and a screenshot of the issue.

http://jsfiddle.net/Dysch/

In our internal application, we have several charts, up to 8 on a page and this occurrence has more tooltips that remain. Screencast of issue happening in our application.

http://screencast.com/t/ObzneNk53r8

Thanks for any info and help on how to fix

Hello:

I have a layout page with 4 absolute positioned divs, Header 1, Header 2, Content, and Footer.
Header 1 & 2, and Footer are sticky divs, only the Content div can scroll vertically.

I put the Menu on Header 1, the expanded menu is hidden behind the Header 2.
Here is my html layout



and here is the Layout.css

I've tried to set z-index on secHeader1, .k-menu .k-animation-container, etc, none of them worked.

Please advise.
Thank you

Hi Support

I have this very annoying issue using the following Button:
When clicking on the text in the Button, the Button changes to its hover-style but the action is not happening. Clicking on the outside of the text fires the click-event properly. The span around the text is generated automaticly.

I'm now trying to find a workaround, but this needs a fix asap - for sure.
Thanks

Hi everyone, 

I'm trying to handle various grid events.   The grid is setup to use in-line mode editing.  For the most part, everything works good, except for the cancel event on the grid (which should be fire when the user cancels in edit mode in the grid).  Although the documentation lists it as a valid event (http://docs.kendoui.com/api/web/grid#events-cancel),  it is not firing for me.  The change, remove, and save events all fire as expected.  Is this a bug or is something special about this Cancel event?

my grid initialization looks like this:
 

       <table id="jobs" 
               data-role="grid" 
               data-bind="source: jobsList, events: { change: gridChange, cancel: gridCancel, remove: gridRemove, save: gridSave}"
               data-columns="[{ field: 'Id', width: 50, title: 'Id', filterable: true}, { field: 'Name', width: 80, title: 'Name', filterable: true}, { field: 'Description', width: 150, title: 'Description', filterable: true},{ command: ['edit','destroy'], title: '' }]"  
               data-toolbar="[{ name: 'create', text: 'Add new job'}]"
               data-pageable="true"
               data-editable="{mode: 'inline', confirmation: 'Are you sure you want to delete this job?  It will not be recoverable'}"
               data-sortable="true"
               data-column-menu="false"
               data-resizable="true"
               data-selectable="true"
               data-filterable="{ extra: false, operators: { string: { startswith: 'Starts with', eq: 'same as',  neq: 'different' }, number: {eq: '==',  neq: '!=' , gt: '>', lt: '<'}}}"
            >
        </table>

and then i have an observable that the gird gets bound to that implements these methods:

       gridChange: function (eventArgs) {
            //do something
        }, 
        gridRemove: function(eventArgs) {
            //do something 
        }, 
        gridCancel: function(eventArgs) {
            //do something
        },
        gridSave: function(eventArgs) {
            //do something
        }

Again, the change, save, and remove events fire fine but the cancel does not fire.

Any help would be greatly appreciated,

thanks,
Florence

Hello all,

I have the following below which is my detail template for my main grid.   The tab attachments has a grid in it.  I want to place an update control after the detail attachments grid.  I tried adding it in a few places but I get an error "Invalid Template" anywhere I try and place it.  Below is the code for the detail template and also below that the form I have on another view that works fine.:

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=CustomerNumber#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Attachments").Content(@<text>
@(Html.Kendo().Grid<ABC.DataModel.Document.DocumentModel>()
.Name("grid_#=CustomerNumber#")
.Columns(columns =>
{
columns.Bound(p => p.DocumentType).Width(40).Title("Type").ClientTemplate("\\#=RenderImage(data)\\#");
columns.Bound(p => p.DocumentName).ClientTemplate(@Html.ActionLink("\\#=DocumentName\\#", "DownloadFile",
new { ID = "\\#=DocID\\#", fileRef = "\\#=FileRef\\#", fileName = "\\#=DocumentNameExt\\#" }).ToHtmlString());
columns.Bound(p => p.ModifiedDate).Format("{0:M/dd/yyyy h:mm tt}").Title("Modified");
columns.Bound(p => p.ModifiedBy).Title("Modified By");
columns.Bound(p => p.LatestVersion).Title("Latest Version");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("CustomerAttachments_Read", "Customers", new { library = "Customers", folder = "#=CustomerNumber#" }))
)
.Sortable()
.ToClientTemplate())
</text>
);
})
.ToClientTemplate()
)
</script>

//I want to place this below the grid in the tab also not sure how to pass two params id and folder.  Below the sample only has id.

@(Html.Kendo().Upload()
.Name("attachments")
.Async(async => async
 .SaveUrl(@Url.Action("FileUpload"))
.AutoUpload(true)
 ).Events(e => e
.Upload(@<text>
function(e) {
e.data = { id: $("#Id").val() };
}
</text>)
)
)