I am able to write in my MVC 3 view:
#Html.TextBoxFor(model => model.Something, new { style = "display: none;" })
But how can I do the same with a LabelFor?
To explain why: I am hiding the label initially but using JQuery to show this label at a later point. I guess I can use JQuery to initially hide it as well, but I would rather do it this way is possible.
Have a look at this post How to specify ID for an Html.LabelFor<> (MVC Razor)
Personally I'd suggest you wrap the TextBox and Label in a containing div, set that element to display:none and have JQuery show/hide the containing div rather than the individual elements.
Related
I am creating automated test scripts with Ruby and Watir.
I am trying to call a div class from these lines of codes:
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 500px;">
<div class="modal-body" style="overflow: hidden; width: auto; height: 500px;">
<form id="user-form" class="form-inline" enctype="multipart/form-data" method="POST" novalidate="novalidate">
<fieldset></fieldset>
</form>
</div>
My aim is to use this one
browser.div(:class => '').send_keys :space because I want to scroll the div, for me to be able to send_key "" in some other textfield hidden.
I even try to use browser.scroll.to :bottom, but still it doesn't work.
So I am making some guesses as to what you are really trying to accomplish here. I'll first address your question as originally stated, then address how to do what I think you are trying to accomplish.
Selecting elements inside other elements
The high level answer is that there is nothing special to doing this, in many (most) cases you don't even need to worry about how deeply nested an element is, as long as you have a unique way to identify it, such as a class, name, etc that is unique.. For example in the code you provided, to get the div with class modal-body you would just do
browser.div(:class => 'modal-body)
If there were a lot of divs on the page with that class, then you might want to locate the one you want by looking inside some other container element that is unique so you find the right one.. in the code above that would be something like
browser.div(:class => 'slimScrollDiv').div(:class => 'modal-body)
Usually you only do that sort of thing when it is difficult to find an easy way to identify an element because it has few or no attributes, or non-unique attributes.
Scrolling a custom control
This I think is your real issue. You appear to have a control with a non-standard scrollbox. That is to say that instead of being simple HTML that is defined so that the browser creates and controls a scroll box (which would normally work with the methods you have already tried, or even get scrolled into view auto_magically) you instead have a custom control where the scroll box is driven by javascript code such as jQuery or Bootstrap. Such code usually is event driven, looking for things like mousewheel movement when the mouse is over the control, or manually grabbing and dragging the element that is being rendered to look like a scrollbar. Often such controls do NOT respond to keypresses like space or arrows, EVEN if they have been selected, clicked on, have focus etc.
Still I would first suggest try using .location_once_scrolled_into_view on the sub element you want that is inside the scrollbox. (See example in other answer) If that does not work then try manipulating the controls of the sçroll area.
Based on class values in your code fragment, I think you may be dealing with a jQuery powered 'slimScroll' control similar to those shown on this page. If that is indeed the case, then you can scroll the control by using drag methods on the scrollbar element. In slimScroll the element you want will be inside the div with class 'slimScrollDiv' and is another div with the class 'slimScrollBar'.
As long as the scrollbar is visible, you should be able to do a .drag_and_drop_by on it to scroll the content in the scrollbox. If it is not visible (as can happen in the first example on the linked page) then it may be harder, you might have to try firing mouseover events, or invoking some JS code to change it's style to not be hidden. You will need to experiment to see how many pixels to drag it at a time to scroll the window a 'right' amount based on how much content is in there. (potentially you might be able to figure that out based on the .style 'height' values for the elements, but that would take experimentation with the actual page and only needed if the amount of content in the box is variable)
For the second example on the linked page, I was able to scroll things using the following code
scrollbar = browser.div(:class => 'slimScrollBar', :index => 1)
scrollbar.drag_and_drop_by 0,10
I'm not sure what is inside your scrollbox, but for psuedo-code purposes of we just call it 'thing_I_want' then you might be able to scroll it into view with code something like this
scrollbar = browser.div(:class => 'slimScrollBar')
until thing_I_want.present?
scrollbar.drag_and_drop_by 0,5
end
as I said you might have to play with the drag distance there to get a 'right' amount, but 5 (pixels) seemed a reasonable starting place.
hidden text_field or just not visible in page?
you could try focus:
browser.text_field(:id => 'myid').focus
or if you need to scrolldown until it is visible
unless browser.text_field(:id => 'myid').visible?
browser.div(:class => 'slimScrollDiv').send_keys :arrow_down
end
or if you need to scrolldown to the footer (end of page)
browser.div(:id => 'footer').wd.location_once_scrolled_into_view
I am looking for N level nested child behavior in Kendo UI grid.
so far i have been implementing upto 3-4 level but those grids have to be hard coded in the Code.
Please Guide if somebody has done it dynamic way or generating grid dynamically as child grid
if Possible any alternatives to achieve same.
I hope you guys can help out.
I have edited the Detail Template demo found here: http://demos.telerik.com/kendo-ui/grid/detailtemplate
The fiddle:
http://jsfiddle.net/j5b64/1/
detailRow.find(".orders").kendoGrid({
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataSource: {...
Detail rows are not initialized until they are expanded (They don't exist in the DOM). So the call to make the new grid can't happen until we expand the row that will contain it.
Luckily Kendo had provided a 'detailInit' Event that you can plug into and initialize your child grid.
Update for .net binding:
First on your page you will need to define a template. It is important to use a class and not an ID in your template. Your template will be used multiple times and you want to maintain the uniqueness of IDs.
<script type="text/x-kendo-template" id="template">
<div class="orders"></div>
</script>
You will then need to reference that template to be the detail row template for your grid. Here we just need to reference the id of our template above. (you can use .DetailTemplate() to define the template in line, but then it would be harder to use it for later child grids as you would have to parse it out of the server made JS)
#(Html.Kendo().Grid<mySite.ViewModels.GridViewModel>()
.Name("Grid")
.ClientDetailTemplateId("template")
.Columns(columns => .....
Now comes the JS. There is two things we need to do. One is create a reusable initiation function and the other is register this function to be ran on initiation.
In our function we should define a new grid. Again this is done in JS at this point. Theoretically you could define an example grid and look for the server built JQuery that would be its sibling and reuse that for your child grids, but at that point you might as well define your grid using JQuery.
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".orders").kendoGrid({
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
....
Now we need to link up our first grid to use our Initiation function
$(document).ready({
$("#Grid").data("kendoGrid").bind("detailInit", detailInit);
});
I hope this helps.
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I am creating an SPA with KendoUI-Web and my layout for the login view has a sticky header and footer. To do this my divs that make up the view need to be direct children of the body.
I use the Following Code:
objLoginPage_Layout = new kendo.View('loginPage-layout');
objLoginPage_Layout.render($('body'));
However when I look in the Chrome Developer Tools I see that the layout is wrapped in a div. This div breaks my CSS.
How can I tell KendoUI not to wrap my layout in a div?
Regards,
Scott
Use KendoUI window.
I'm doing the same as you.
Here is their example http://demos.kendoui.com/web/window/index.html
If you need, I can share my code, it is real simple, but try yourself first.
try:
var theView = new kendo.View(template, { wrap: false });
http://docs.kendoui.com/api/framework/view#methods-render
For example if i have an implementation of my own helper and i don't like the default WebGrid pager, how may i replace it?
Is it possible to Replace MvcGrid Pager to change it to my custom one?
I did search and didn't find any thing, only what i think i need to do is to render my one and append it to current WebGrid table as a table footer using jQuery.
Is there any another more simple way of doing this?
You can disable the pager by setting the mode to numeric and setting numericLinksCount to zero. Ex:
<div id="gridSample">
#( var grid = new WebGrid(rowsPerPage: Model.GridRowsPerPage);
grid.Bind(source: Model.ListData,
rowCount: Model.TotalRowCount,
autoSortAndPage: false)
)
#grid.GetHtml(mode: WebGridPagerModes.Numeric, numericLinksCount: 0)
<!--...custom paging here...-->
</div>
Then you're free to render your own paging links using a combination of rows per page and total row count. (Each link should pass the "page" parameter) Easy once you disable the built-in pager... hope that helps.
You can change the Pager Mode on the WebGrid see WebGridPagerModes
Other than this you can style the pager with CSS.