I am developing a kendo grid in my HTML page (not MVC app) and it gets about 500+ records from the backend service. I have 4 Kendo dropdown lists in each row and 2 are getting values from local variables and other 2 are getting data from ajax calls.
When I try to edit any dropdown list, it goes to the editor function of the column, but takes long time to show the values in dropdown list and sometimes the IE page crashes. I am using IE11.
Do you have any best practices to work with Kendo dropdown list type if the grid has more records say > 200 records.
When I need to show that many results in a dropdown list I usually create an autocomplete combobox instead. You can show, for example, 10 results and have the server return more results as the user types.
Related
I have a JSP Page (this is a tabbed view) with 2 text boxes, 2 dropdowns, checkbox & 4 list boxes.
One dropdown is populated by making connection to db and query through prepared statement.
The 4 listboxes & 2nd dropdown get populated through AJAX if the checkbox is checked. By default the checkbox is unchecked.
The problem here is, the JSP Page takes too long to load. It is approx 0.11 min to load the page.
Even before I check the checkbox and populate the list boxes and the 2nd dropdown, the page loads too slow.
Does being page in tab slow the performance?
Any idea why is this happening and what can I do to improve the page performance?
I found a workaroud for this issue. I am loading the page first and then making AJAX call to load just this dropdowndown control. In that way, user won't feel that the page is loading slowly. I know this is not a permanent solution.
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.
I have two ListBox controls (or 2 html select controls with
runat=server) on a web page and some buttons to move data from one
listbox to another (using javascript). The problem is that when the
page gets on the server I can't get the items that I've moved from the
1st list to the second on the client, I always see the controls as
they were when the page was generated on the 1st request.
How I can see on the servers the items that I've put on the 2nd list?please provide the code in mvc3
It seems..everytime postback .. two select boxes are refresh. Please try to put
In Page Load event
If(!IsPostBack)
{
// populate data into select boxes here
}
I have one view page in MVC named as ‘Index’. There are 3 main controls in that view page. For better understanding, take below example as reference.
1. One Dropdown ‘Customer’
2. One Dropdown ‘Project’ (that depends on ‘Customer’)
3. List of Task (that depends on ‘Project’).
Currently first user needs to select ‘Customer’. So based on customer ‘Project’ dropdown data will be fetched from post method of Index and bind that ‘Project’ dropdown. After selecting ‘Project’, List of task will be fetch from post method of Index and bind those tasks. So every time page is loaded again.I want to do it by Ajax form submit.
My problem – those 3 controls are in one view page so I want to return page view using Ajax without using Partial View. Is this possible? If yes then how? Or any other solution so that I am able to display data without reload whole page again.
If u can give me example of such scenario then it will be good.
This may be a followup to this question Possible to make jqGrid Search Box Stay on Page? - Or it may be unrelated because clicking the search button manually shows the same behavior.
We have a dynamically generated grid that is created by a) making an ajax request to get the grid columns based on a report id and then b) setting up the grid model and fetching the data. When the page loads initially, we pass in a starting report id, but there is a dropdown box on the page that lets the user change reports.
When the dropdown changes, I unload any existing grid, make the ajax request to get the columns, set up the grid model, and then get the data. The columns change, the data changes, and everything looks correct - except the search columns do not change in the search dropdown.
If I close the search box and reopen it, it still has the old search columns. Likewise, if I click the reset button or reload the entire grid.
I found it after a bit more poking around. I needed to set the recreateFilter option to true
prmSearch = {recreateFilter:true,multipleSearch:true,overlay:false,sopt:['cn','eq','ne','lt','le','gt','ge','in','ni','nc']};