I have a kendo UI DropdownList that has values:
User 1, User 2, User 3 and User 4 and I would like to hide User 1 and User 2 and only show User 3 and User 4 based on a certain condition.
Here is the Dojo for that.
Kindly let me know how I can achieve the above.
Cheers.
There are many possible ways to achieve this. See one of them here:
http://dojo.telerik.com/eyORO/16
I've moved the data from the html markup to a local JavaScript variable. Then a kendo DropDownList is being initialized (you didn't initialized it at all) with the WHOLE data. Then the data is being filtered via dropDownList's dataSource via its filter() method.
If your data comes from the server, you should send only the data which you need. By this approach the network traffic will be as minimum as possible and no additional filtering will be done on the client. This can be achived with additional settings in dataSource. Please take a deep look at kendo's documentation for dataSource and dropDownList.
Related
In my Vaadin web application I need to display 10,000+ user Information in a Table(or Grid) . The User information displaying in UI is retrieved from our own Spring REST web Service.
How Can I achieve this? ...
Thanks
Steps:
1. Read the list of users from your REST service.
2. Created a GRID and attache the BeamItemContainer of User to it.
Grid will take care of displaying the users. You don't have to do anything special for lazy loading. grid will take care of it by displaying only required rows on UI and fetching it lazily at component level.
P.S : Grid is very smooth while loading the data on scroll than table. If you have too many rows prefer grid over table.
I am using Kendo UI ASP.NET MVC Grid (Razor) in Ajax mode with a popup editor.
As an example say: Customers have orders
User of the application go to a grid that displays all customers. User is allowed to add/edit/delete customers (and their orders). But when the user clicks on edit and the popup editor comes up that is when I want to load orders. I do not want to load orders eagerly since a customer may have many orders and the user may never edit any customer at all.
Seems like this should be a simple thing to do. I have looked through all forums/questions. I have not been able to find such an example. Can someone help me with this?
Thanks a bunch!
j
Are the orders already loaded when the initial grid is loaded (are they in the model)?
If not, one way to do this is define a grid in your popup editor and set .Autobind(false) and set its Read action to a Controller/action.
When editing a record, you can fire a .refresh() on the datasource of the Orders grid.
I would need some more info on the structure of the template and the grid.
Can anybody suggest me the possibilities to differentiate the filtered Telerik grid column with other columns. Meaning that I can provide different color scheme to differentiate the filtered column.
Thanks
Speaking as someone who has had to deal with the Telerik MVC grid in a similar manner, I will share with you my solution for doing this:
1) Run the web page that has your grid, and view the source.
2) Find out, by viewing the source, what exactly happens when the filter is turned on (i.e. an attribute change, some function being called, etc.).
3) Using jQuery, set the color scheme of that column when that event occurs.
It's rather annoying that you can't just do it using Telerik's control itself, but this should help you out.
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
Telerik Experts, I need your help guys!
In my grid, data gets bound on the client, through .ClientEvents .OnDataBinding.
I just call grid.dataBind(customData). Data gets displayed, but grouping, filtering, sorting don't work. Is it possible to group or filter stuff after grid.dataBind call?
Right now it just moves my columns around and doesn't do any grouping. Sorting and filtering fails also.
Can you show me a simple example of grouping without any server calls please?
You may want to consider using the Operation Mode feature, which was released in the recent Q2 2011 release.
Client operation mode - This new mode allows operations like sorting,
paging, filtering or grouping to be performed purely on the client, by
making a single initial call to the server to retrieve all data.
Client Mode Implementation:
Html.Telerik().Grid(Model)
.Name("YourGrid")
.DataBinding(dataBinding => dataBinding
.Ajax()
.OperationMode(GridOperationMode.Client) // Set to Client
.Select("Select", "Home")
)
Otherwise, to manually group using javascript, as follows:
<script type='text/javascript'>
function yourGrid_onDataBinding(e){
//Grabs your Grid
var yourGrid = $("#yourGrid").data("tGrid");
//Removes any existing groupings
yourGrid.groups = [];
//Ensure the column you wish to group by is EXACTLY as it appears in the Grid
yourGrid.group("yourColumnName");
}
</script>
Here are a few useful threads from the Telerik MVC forum that might help you solve your issue if this isn't a viable solution for you:
Client-Side Grouping | Has a great deal of code for client-side grouping operations
Client-Side dataBinding | More client-side code, talks about ClientSideGroupHeaderTemplates
Grouping with OperationMode.Client | If you have any issues with OperationMode.Client
As I know you couldn't do it without any hit to the server again.
But you can do it by Ajax throw JavaScript.
All you need to do is and these methods will rebind your grid :
// For filtering
grid.filter("propName~eq~youValue");
// For grouping
grid.group("column Title");
And take care this is column title not property name so if your property is "CustomerName" and your column title is "Customer Name" the you should pass the column title.
Anyway this will make an Ajax call to the controller to rebind Grid again.
Update:
Your grid should set .EnableCustomBinding(true) and you should decorate controller method that get your Ajax grid with [GridAction(EnableCustomBinding = true)] Attribute.
Hope this helped
I'm doing the exact same thing in my grid. I'm using 2011.2.629, jQuery 1.6.2. I'm actually doing this for external filtering--so I don't use the built in filtering--but grouping and sorting both work for me.
We need some code, man.
As someone else mentioned, make sure you have the following set:
dataBinding.Ajax().OperationMode(GridOperationMode.Client)
Is your grid bound at runtime? If not, bind it to an empty viewModel that's the same as the one you're using in the dataBind(). Also, how are you binding to the new list? It could be something in your onDataBinding().