Kendo ui datagrid - user-interface

I am just trying to use keno ui into my project. But Kendo is new to me. So I am not sure how to proper use it. Some of the widgets like dialog window, datepicker, timepicker etc. are easy to use but I am having problem with datagird. Could anybody let me know how can we use datagrid widget server databound and xml as datatype. Please give me little bit give me an example. If possible. Let me know how xml file will look. How can we get page number, number of rows on the server side. I am using asp.net with c# as server side language.

Is there a reason why you want to bind to an xml file? Generally speaking you should be using JSON for the dataSource. For an example of using an xml datasource have you looked at this:
Binding to xml DataSource
If you haven't used these before and have access to the MVC Wrappers then I would suggest looking at this demo as a good starting place for the Grid:
Kendo Grid bound to local data
Kendo Grid bound to remote data
If you use the demo from the first example and apply it to the "local data" example this should get you going. If you get stuck please provide some code showing what you have tried and any issues you are faced with.

Related

Is it possible to use Kendo UI FX with MVVM binding?

I'm currently using two-way binding to control the visibility of a DIV based on a boolean in my view model. Instead of merely setting it as visible or hidden, I would like it to expand or contract via the the "expand" effect.
http://docs.telerik.com/kendo-ui/api/javascript/effects/expand
I don't see any way to bind this via MVVM. Has anyone managed to do this?
Thanks
Following is the given link from where I got help for my issue.
http://demos.telerik.com/kendo-ui/mvvm/custom

MVVM and masked input

There is no masked input control in KendoUI framework. But I need to have a mask input capabilities for textboxes as well as for datepicker.
The application mostly based on MVVM with Kendo Templates. So I need a solution compatible with it.
What is the best way to go with our problem? Currently i'm looking at several solutions:
Have a custom widget (as kendo plugin) that is connected with jquery.inputmask plugin.
Have a custom binding that connects a widget and jquery.inputmask plugin
Invoke a jQuery code $(..).input. The problem with this approach that it hard to get it invoked after template is rendered
Basically I the cleanest solution I can suggest you is to create custom Widget or extend one of the existing.
Take a look at the the following example we created - it demonstrates how to extend the datepicker widget custom logic:
http://jsfiddle.net/7JA74/10/
A part from this please notice there is some malfunctioning when a value is selected from the date picker.

KendoGrid with in a new custom kendo ui widget

Please guide me how to make a custom kendo ui widget, like if you could refer to some tutorial or anything. Secondly the main question is that I want to use kendo grid to consume webapi and i want to use it in a widget in which and pass the datasource to this widget.
Bascially I want to make a widget which will consume the webapi using a particular url, and which will return a data source that I can add to this kendogrid widget.
Googling a little I just found:
Creating Custom Kendo UI Plugins
Creating a DataSource Aware Kendo UI Widget
Inheriting From Custom Widgets
Creating A Kendo UI MVVM Widget
I think that any and all this blogs should help you (I've written several widget and I found here all I needed).
In addition to #Emiliano's links, the Kendo Music Store demo app also contains a custom Widget bound to a DataSource that you can look at as an example:
Live demo site: http://www.kendouimusicstore.com/
Source code: https://github.com/telerik/kendo-music-store
Custom Widget source: MvcMusicStore/Scripts/App/kendo-cart-menu-widget.js
Documentation for this custom widget: http://docs.kendoui.com/tutorials/ASP.NET/Kendo%20Music%20Store/Music%20Store%20Web/kendo-music-store-web-cart-menu-widget
If you are going to use WebAPI, you will probably want to read this (The Facts On Using Kendo UI With ASP.NET WebAPI) first.
"Use WebApi" is a very broad statement, and narrowing down your approach would be the first step.

Image button inside a Data table

I'm facing a scenario that i need to add image button inside a datatable. Is it possible to add an image button control inside a datatable.
I'm using Framework 3.5 and C# language.
Thanks In Advance!
Regards,
Ranga
I think you are trying to work with a user interface control like a DataGrid or DataGridView. DataTable is an ADO.NET class for holding data from a database. It doesn't present data in a user interface, so adding an image button maes no sense.
I presume you're working with a grid of some sort, but in order to get a sensible answer you need to tell us which one. Is your user interface WPF, Windows Forms, or ASP.NET? Specifically, which grid class are you trying to use?

Using asp.net mvc 3 + Razor with Ajax and jquery

I'm trying to make the "Google Instant" like experience (I'm not looking for Auto-complete).
Google instant is the dynamically change the "search result" as you type (not the suggestions, which can be achieved with auto complete).
The page will simply have a text input control, in which as your type, you get result below the text input control.
I know, I must make some async calls on "onKeyPress": So first how can I do that in jquery?
Second, any good tutorials on combining asp.net MVC with Razor and Ajax?
edited: as people were confusing auto-complete with instant result
The term that you should use is 'autocomplete'
Have a look at the link below:
http://docs.jquery.com/Plugins/autocomplete
It's server independant. Basically, on the server side, you must create a service, given a string return the possible values that relate to that string.
Hope this helps.
There is a great article here on how to create an instant search with Jquery, PHP and HTML
http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/
The one caveat I encountered was that you need to put the Javscript code inside a
$(document).ready(function(){
/*Your JS Instant Search goes here */
});
which wasn't clear from the article.
For ASP.NET MVC 3, create a controller/action that returns a JSON or JSONP object. If you're a beginner, this might trip you up as you will get CrossSiteJson errors. This link will help:
Ajax json post to Controller across domains, "not allowed by" Access-Control-Allow-Headers
From doing these two, I was able to do the instant search in MVC3 and it works really well.
Using Firebug or WebKit Web Inspector and Fiddler really helps.
It is still a variant of autocomplete, if you break it down:
Fire autocomplete on key presses.
Fire Ajax search on autocomplete success/load (whatever the event might be).
Writing number 2 is minimal work for you unless somebody has written a plugin that does both. It's a nice little project - write a plugin that combines a text box and div and does autosearch.

Resources