I have a list of employees (around 500). In a component I want to display this list. I display the list as a table. Each individual row is defined in a component. The user can edit a data row inline on demand. For that purpose I insert an input field when the user wants to edit the data. The following exemplifies my current solution:
<!--Parent Component-->
<table>
<thead>[...]</thead>
<tbody>
<Virtualize Items="employeeData">
<TableRow rowModel="context" />
</Virtualize>
</tbody>
</table>
<!--Child Component-->
#if(IsInEditMode)
{
<tr>
<td><input #bind="#employee.name" /></td>
<td>...</td>
<td><button #onclick="SaveData">Save</button>
</tr>
}
else
{
<tr>
<td>#employee.name</td>
<td>...</td>
<td><button #onclick="EnableEditing">Edit</button>
</tr>
}
I introduced virtualization as I noticed a big delay while typing in the input fields. Using virtualization the typing is working perfectly fine again.
As a result I noticed the following issue though:
When I scroll out of sight, the rows get reset - the inserted data gets lost and the editing mode is turned off. My guess is that is happening because the row gets rerendered and by default
editing is turned off.
How do I keep the state of specific components while using the virtualization feature?
The issue seemed to be that virtualisation had problems rendering the child components. Integrating the child component into the parent component resolved the problems.
I'll try to investigate further whether this was a problem with my component or a problem of blazor's virtualisation.
Related
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.
I am working on an application using meteorjs. I am totally new to meteor. In my application I am using dataTables with meteor for shorting , pagination and searching.
This is my template code
<template name="questions">
<div class="col-md-3">
{{#constant}}
<table class="table table-striped table-bordered table-condensed table-hover listing"
id="content_listing-table">
<thead>
<tr>
<th>Questions</th>
</tr>
</thead>
<tbody>
{{#each questions}}
<tr>
<td>
{{questionSubString question_text}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/constant}}
</div>
</template>
and my meteor code is
Template.questions.rendered = function () {
$("#content_listing-table").dataTable();
}
Template.questions.questions = function () {
return Meteor.questions.find({topic_id: Session.get("currentTopicId")})
}
my problem is when i add a question to the database it doesn't seem on template. and generate an exception. I know this is because of datatables . and datatable is not update when document updated. i tried many examples from stackoverflow but couldn't get rid of this problem .I tried by appending row dynamically but it always give me a warning . and it doen't seems to do a right way. can i remove the datatables from the element dynamically? help will be appreciated
EDIT:
$('#content_listing-table').dataTable().fnClearTable();
$('#content_listing-table').dataTable().fnAddData(Meteor.questions.find().fetch());
I am trying to do this first empty the table and then again add the data to it. But here it is emptying the table for not adding the data again.
You are using a {{constant}} region. This disables reactivity for that part of the template.
Try getting rid of your constant region and run meteor using meteor --release template-engine-preview-5.5. This will run meteor using the new, in progress template engine Meteor UI. There are no constants or preserves in Meteor UI - it's smart enough to make DOM changes at a fine-grained level, so it should work out of the box with things like jQuery plugins.
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.
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.
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()