Dojo grid: load data from html markup - spring-mvc

I'm currently using dojox.grid.DataGrid for displaying data, in which a second request is sent to the server for the data. I'm using spring MVC, and hence I could fill data (from markup) using the model data in the view (using JSTL, to be exact). And I'm no where getting near in achieving this, since I cant find a way to get the data inside the grid via html markup. Does dojo grid supports filling data only via script (store)?
I found dojox.data.HtmlStore which could be made use of. But just making sure that there's no better solution.

Yes, dojox.grid.DataGrid can be defined using HTML markup.
Sample code:
<table data-dojo-type="dojox.grid.DataGrid" >
<thead>
<tr>
<th field="fieldName" >Col1</th>
<th field="fieldName" >Col2</th>
</tr>
</thead>
</table>
So in your jsp have the logic to generate the above structure.
More info can be found here
And for the data part you can do this:
<table data-dojo-type="dojox.grid.DataGrid" >
<thead>
<tr>
<th field="fieldName" get="myData.getCol1">Col1</th>
<th field="fieldName" get="myData.getCol2">Col2</th>
</tr>
</thead>
</table>
Javascript Function:
myData.getCol1 = function(colIndex,item){
return "<place the actual content from your jstl variables here>";
};
While
the above solution works its not a smarter way, please use the store and return a constructed json object from server.

dojox.data.HtmlStore could made use of. It's not a simple solution, but it is the simplest one.
Documentation with example can be found here: http://dojotoolkit.org/reference-guide/1.10/dojox/data/HtmlStore.html

Related

Long aspx file gets hard to read - is there a way to simplify

My aspx file has lot's of components and has become difficult to work with when eg. adding new items because I can't see the start and end tags of where the new control must go (especially when adding containers).
I was wondering if there is a way to arrange the code with some kind of placeholder (all within the same file is fine) - something along the lines of the mockup below?
<abc:container>
<abc:pages>
<abc:page>
[Page1CodeGoesHere]
</abc:page>
<abc:page>
[Page2CodeGoesHere]
</abc:page>
</abc:pages>
</abc:container>
<Page1CodeGoesHere>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</Page1CodeGoesHere>
<Page2CodeGoesHere>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</Page2CodeGoesHere>
Use ASP.NET User Controls. It allow you to use code from separate files.
It seems you are looking for code-folding a-la #region support.
If yes, then Visual Studio 2013 Update 4 added support for #regions in HTML editor. You would use it like this:
<!-- #region Page1Code -->
..
<!-- #endregion -->
This will allow you to collapse-expand the regions as convenient to you.
Ref: http://blogs.msdn.com/b/webdev/archive/2014/10/16/announcing-new-web-features-in-visual-studio-2013-update-4-rc.aspx
Note 1:
This was voted against for in VS 2015, but was declined. So, #region support for HTML editor is here to stay it seems. Ref: https://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/6571662-do-not-introduce-the-curse-of-regions-to-html
Note 2:
Nothing beats modular approach. Keep your pages small, clean and simple.

Removing a 'New Line' in ASP

How do i remove a new line from the start of a string?
what's happening is that i've been controlling and debugging someone else's php code, and converting it into asp. what he did was put html tags in a db table, and simply echoing them. ex, a field contains html table tags like <thead>,<tbody>,<tr>, etc. i didn't want to continue the wrong doing so what i did was to control them by first turning <tr>s into <br />s, and removing everything else. but problem is that the first <tr> makes a new line in the very start of the string. i want to remove it. another problem is that not all fields has htmlt tags inside, so i have to put something like if text.substring(0,1)="(idk what to put here)" then (maybe the replace or trim functions here). any help please?
here's a sample field content. pretty nasty indeed:
<table width="705" height="323" id="gradient-style" summary="Meeting Results">
<thead>
<tr>
<td width="238">Product</td>
<td width="610">TS2360 Tape<br />
Drive Express</td>
</tr>
</thead>
<tbody>
<tr>
<td>Machine/model, HVEC</td>
<td>3580<br />
S63, 3580S6X</td>
</tr>
<tr>
<td>Product strengths</td>
<td>Multi O/S<br />
Encryption & media<br />
partition capable<br />
LTFS support</td>
</tr>
</tbody>
</table>
so after making <tr>s into <br>s and removing other html tags, output beacame:
Product TS2360 Tape Drive Express
Give background color to the table cells to achieve seamless transition
Machine/model, HVEC 3580 S63, 3580S6X
Product strengths Multi O/S Encryption & media partition capable LTFS support
(supposedly skipping a line before "Product" because it has <tr> before it, but didn't show in the block quote)
Thanks in advance.
var cleanedFieldValue = someValueWithLineBreaks.TrimStart( '\n' );
The VB.NET version might look like:
Dim cleanedFieldValue = someValueWithLineBreaks.TrimStart(ControlChars.Lf)
Edit
It sounds as if you are trying to parse some Html and then do work on it. I would recommend using the Html Agility Pack for that and read about the evils of attempting to use RegEx to parse your Html.

How to add rows to a table dynamically with asp.net

I want to generate a table in following fashion :
<table>
<tbody>
<tr class="folder" style="-moz-user-select: none;">
<td><div><img src="folder.png"><span>home</span></div></td>
<td class="bytes">Folder</td>
</tr>
<tr class="folder hover" style="-moz-user-select: none;">
<td><div><img src="folder.png"><span>share</span></div></td>
<td class="bytes">Folder</td>
</tr>
</tbody>
</table>​
I want to add the rows from the CS code depending on the number of entries.
Instead of "adding elements to html table" you should consider using Repeater for data display, which would give you clean html (exactly as you want).
Then on each click you would do what you need to do (code behind) and rebind the repeater.
Hope that helps.
I would agree with Sebastian why not use a repeater or datalist to bind the data. What source are you using to get your data from? If your pulling the data from a SQL table here is a pretty good article on how to get you started.
http://msdn.microsoft.com/en-us/library/aa719636(v=vs.71).aspx

Is it possible to 'turn off' indentation in asp.net controls?

When I use built-in controls in asp.net I can see many tab characters added at start of each line of the generated html output. Is it possible to 'turn of' these? I'd like to get rid of this waste.
For example when I use GridView control, it generates <table> tag which looks like this:
<div>
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
...
</table>
</div>
But I want to see this:
<div>
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
...
</table>
</div>
I wonder who designed this silly stuff. Although it is "just a few bytes", it sends many unneeded waste over internet if you look at it from a long time period point of view. (I understand that indentation makes it more readable, but still at least those inner <th> and <td> tags are a bit too much indented.)
Or do you think I am completely wrong? [Are those tabs important for The World?]
I wonder who designed this silly stuff
Microsoft Corporation.
Or do you think I am completely wrong?
I think you are completely wrong. HTML is to be read and interpreted by browsers. You, as a developer, could use developer tools such as FireBug to inspect the actual DOM tree in a nice way. Humans/users don't give a s..t about how your HTML is indented. They look at the final product rendered by the browser and this is what you should be focusing on. Actually in production in order to optimize bandwidth you should compress your HTML and remove all white-spaces. Could be done with custom response filters.
Personally, when I write a page (I use the Repeater control, so there's a bit of a difference), I always indent my HTML. Yes, even the content within the <th> and <td> tags.
I can understand your point (especially when we talk about using gzipped and minified copies of JavaScript libraries) when you're talking about a production application that's never debugged. However, without HTML indentation, it would be incredibly difficult for me to unwind problems in my layout or errors I made when I wrote CSS or HTML properties.

DOJO Button within A Grid

I am trying to get the dojo button that is within the data grid to use styling. Currently it does not use the styling.
HTML:
<table dojoType="dojox.grid.DataGrid" class="soria" id="grid1" jsId="grid1" elasticView="2" store="theStore" selectionMode="single" query="{grid1:'*'}">
<thead>
<TR>
<th field="0" formatter="getButton">Show value</th>
</tr>
</thead>
javascript:
function getButton(item){
return "<button class=/"soria/" dojoType=\"dijit.form.Button\" onClick=\"\">Button</button>";
}
You need to provide more info as suggested - like is this being utilized within the custom dijit framework or are you jsut trying to produce a button didjit on the fly?
Im going to assume the later for now so...
1.) You need to reparse the element if you want dynamically added elements created outside the dijit infrastructure to be turned into dijits.
2.) #1 doesnt make sense because if you are doing it on the fly you should be using the javascript programmiatc creation and adding it to the DOM instead of just returning html, ie:
return new dijit.Form.Button()

Resources