I have an Angular 1.5 (with components) application. I am using Kendo UI as a front end framework.
I have a window defined as:
<div kendo-window="wSearch" k-title="'Search Results'" k-visible="false" k-actions="['Close']" k-width="'600px;'" k-height="'500px'">
<h2>Search Results</h2>
</div>
The problem I am having is opening the window from the component. If I want to open the window from a button directly I could do that:
ng-click="wSearch.center().open()"
The issue is that I need to perform some logic before opening the window so I need to open it from code, not the markup.
How can I reference wSearch from code?
Thank you.
For those of view, facing the same issue, here is how I resolved it:
in the click method:
$scope.wSearch.center().open();
just make sure that $scope is injected in the component definition.
I am not sure if this is the best way to do that. I know that the use of $scope is discouraged when using components, but I could not find any other way to achieve that.
Hope that helps.
Related
I am working with Umbraco 7.5 grid and I've created some macros that work with javascript. I need a javascript array on the page on top of my grid so I can add my items to it.
<script>
if (!_components) _components = [];
</script>
I can do it on the normal view since I have access to master page. but how can I do it in the back office?
It will be easier to maintain if you will create separated, custom grid property editor for your control / macro. Then you'll be able to add anything you want in the output of the editor and it will be included only when the specific control will be used in backoffice.
Check documentation here: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout/build-your-own-editor
You can also check LeBlender package - https://our.umbraco.org/projects/backoffice-extensions/leblender/. I've used it to play with the Grid a couple of times. It's giving you a visual UI to create and manage those custom editors with params and anything you need there.
I'm very new to backbone.js but we're starting to use more and more JS on the front end and I wanted to use some framework to give the code structure - backbone seems to suit our needs.
So started off with a very simple test app that launches a dialogue window using jquery-ui. The problem I have is that since jquery-ui adds a wrapper DIV round the original template used by backbone, the events no longer fire.
I don't want to use the jquery-ui event model as I'd rather just use the one - how can I bind backbone's to this new structure?
It looks as though the call to _.template() is actually doing the wrapping in an extra div. The parent div with the events bound to it is being left behind appended to #well. A simple workaround is to call .parent() on the result of getting the element with the model class ID. See here for example
There's more than likely some information in the _ documentation that might shed some more light on the problem too.
OK - at the end of this project, I finally realised that I hadn't answered this. What happens is when you create a .dialog with JQueryUI, it actually detatches your original DOM element and moves it to the bottom of the DOM wrapped in it's own JQueryUI markup to turn it into a dialog.
Since the Backbone view's element has now been moved, Backbone doesn't pick up any events that fire as it's happening outside it's own "view" as far as it is concerned.
So what you have to do is reassign the view's element:
var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);
Where this is the view. This is done within the initialize method
You can create div wrapper in your view and modal it's content, as described here (first part of the post)
cocovan does a good job explaining the problem in his answer. However, as for the solution, the JQuery UI team actually added a method at the end of 2012 (Allow dialog to be attached to a element other than body) that takes care of this issue.
It is the appendTo(selector) method (jQuery Dialog appendTo method). So simply specify to which element you want the dialog appended.
We have a bit big blocks of C# code within our cshtml files which must be presented in cshtml and nowhere else (obviously it's not a brilliant case but it's another question).
How we can collapse or hide these blocks of code in order to let our designers work more smoothly? We also want to hide these blocks of code during the demos of the progress with markup.
The real issue is that we also must save the visual representation into SVN.
Is there any native VS 2010 functionality for this or plugin? Maybe there is an opportunity to use "partial" cshtml pages where all the markup will be in one file and all C# code will be in another?
Unfortunately VS isn't going to collapse C# blocks of code within #region directive in such files.
Ultimately there is a similar question Regions In ASP.NET Views? but it gives no answer on how to save the collapsed representation when "Collapse Tag" context menu action item was used.
Try using Visual Studio's collapse functionality. By default I believe the keys are:
[Ctrl+M,Ctrl+H] to hide an arbitrary selection, and
[Ctrl+M,Ctrl+U] to unhide the same ( while collapsed ).
This should allow you to temporarily hide any code. More details available on MSDN
Is this what you were looking for?
Having read a little further you wish to save them collapsed, and apparently .cshtml doesn't support #regions. I guess a hacky solution might be the old:
#if(false){
<div>
<!--/*{your long code}*/-->
</div>
}
Or something to that effect, but you get the idea :)
Just select your code, right click and select Collapse Tag
The way that I see it is that cshtml files are meant for a "user control" side of a presentation layer. If you have too much code in your view files, then I would refactor the code and move re-usable components into partial views. I would then include these partial views through
#Html.RenderPartial("PartialViewName", Model.propertyToRender), or I would use
#{ Html.RenderAction("ActionName", "ControllerName") ;}
I am using a Telerik combobox and using jquery to make a clone of it.
the control is being rendered correctly, however the dropdown is not working I believe due to the fact the javascript has not been initialized on the control.
Is there a way to do this or a better way to make a duplicate of the control?
I may have to resort to making an ajax request but would ideally like to keep it all clientside.
Cheers,
Mark
After the clone you need to attach the AJAX call to it as follows.
var c = $('rowTemplate').clone();
c.find('selectorToGetInputControl').tAutoComplete({ ajax: { "selectUrl": "Your Ajax Call" },filter: 1 });
Not sure how you attempt to make a client clone of MVC server control using jQuery, I doubt such thing can operate properly. Either use another instance of the combo or go for pure client-side component.
I've created a theme and applied it to my ASP.NET MVC site. However, the elements on the page aren't picking up the styles automatically. If I do the following for a specific element they get applied appropriately:
$("input[type=button]").button();
$("input[type=submit]").button();
Am I right in thinking I need to do this for all the different elements? Perhaps incorrectly, I assumed this would be done automatically by referencing the css and custom js files?
Thanks
you can write :submit instead of input[type=submit], but I know that's no the answer of your question.
The jQuery UI library only provides code to style your website, but it doesn't do it automatically. So what you need to do is something like this:
$(":submit, :button, :reset").button();
But sometimes you want to use icons or something like this, then you can use
$("#specificButton").button("option", "...", "...");
I hope it helps!