i can use auto-suggest with the text box txtCode like this...
as_jsonReportingTo = new bsn.AutoSuggest('<%= txtCode.ClientID %>', optionsRe);
Now I will create text boxes dynamically, i want to bind autosuggest with the new created text boxes. What should I do?
just give those dynamically generated controls a class. then do sth like (with a bit jQuery flavor)
var $controls = $('.mySpecialClass');
$controls.each(function (index, element) {
var control = new bsn.AutoSuggest(element.id, optionsRe);
});
Related
I am new to ASP.NET MVC. I am facing one or other issues to design the layout for below scenario. Could you someone help me with a solution and I will definitely appreciate your help.
The requirement is:
This is an existing application. While loading view there is a Master View and inside few partial views already defined.
In one of the Partial view, I need to have a same layout multiple times on demand. It is depends on the user how many required. may be 1 or 2 or more. We are using Telerik Kendo controls extensively in our UI and in existing View we strongly typed Model object with View.
I would like to go with Kendo Tabstrips control and add Tab dynamically when required by the user. Also, the layout is exactly same, So, would like to design (Html table with many controls like textbox, dropdown etc.) each tab layout as Partial View so that I can reuse the design. Please let me know whether this approach is best or any better approach is available.
I need to get the entire data when the user Submit the master view . Each main partial View contains and the parent of the Tabstrips Partial view also contains a but not defined for each tabstrip partial view as I need data as collection of objects in one of the property in Parent Partial View Model Object.
Can you please let me know how to design model object for each tabs(Partial View) as well as Parent Partial View. it could be good, if you could show a small example code.
The below are the issues faced during designing this
Unable to add inside another as getting below error
Inline markup blocks (#Content) cannot be nested. Only one level of inline markup is allowed.
#(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb => pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(#<text>
<form id="frm_#(panelName)" onsubmit="DisableEvent(event)">
<div style="width:100%; height:auto;">
<button class="k-button">Add new PCG</button>
#(Html.Kendo().TabStrip()
.Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
.Items(items =>
{
items.Add()
.Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
.Encoded(false)
.Selected(true)
.HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
//.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
.Content(#<text>#(Html.Partial("_PCGTab"))</text>);
})
)
</div>
</form>
</text>)))
2.Then Changed the design as shown below. defined partial view in Parent View
#helper RenderPCGTab()
{
<div style="width:100%; height:auto;">
<button class="k-button">Add new PCG</button>
#(Html.Kendo().TabStrip()
.Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
.Items(items =>
{
items.Add()
.Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
.Encoded(false)
.Selected(true)
.HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
//.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
.Content(#<text>#(Html.Partial("_PCGTab"))</text>);
})
)
</div>
}
and designed Kendo panel as shown below the Parent Partial View
#(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb => pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(#<text>
<form id="frm_#(panelName)" onsubmit="DisableEvent(event)">
#RenderPCGTab()
</form>
</text>)))
Since you use a strongly typed View, I would recommend using a Tuple as the model.
The Item1 would hold the required model details, while Item2 would hold the required number of tabs (it holds the names of the tabs).
#model Tuple<[Model],List<string>>
Now create a Kendo Tabstrip control, with dynamic items (based on model's Item2)
#(Html.Kendo().TabStrip()
.Name("KendoTabStrip") //You need to dynamically change the name by appending a unique parameter in case you need multiple Tabstrips
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
var TabItemIndex = 0;
foreach (var TabItem in Model.Item2)
{
tabstrip.Add().Text(TabItem)
.Selected(false)
.HtmlAttributes(new { id = "TabStripButton" + TabItem + "_" + TabItemIndex, title = TabItem}) //Generate a dynamic ID for each Tab
.Content(" ");
TabItemIndex++;
}
})
)
Once you have created the structure of the Tabstrip, you need to populate each tab with its corresponding content
In the View (Parent Partial View) itself, create a Ready function for the tabstrip and serialize the object using JSON
$(("KendoTabStrip")).ready(function () {
_TBSModelName = #Html.Raw(JsonConvert.SerializeObject(this.Model.Item1))
TabStripUserControl();
});
Note: This is in case you need the Model Data in your child partial view.
Create a javascript file and place the function TabStripUserControl() in it. This function will create your content and place it into the tab.
function TabStripUserControl()
{
var _LocalTBSModel = _TBSModelName
var items = "#KendoTabStrip" + " .k-tabstrip-items";
$(items).click(function (z) {
}
);
}
Inside the function (click function), create a div and provide a dynamic ID for the same before placing it inside the tab using Javascript/JQuery.
var div = $("<div/>");
Use Ajax call to call your controller, which in turn will call your Child Partial View (which contains HTML controls) and render the partial view inside the above created div on Ajax call's success.
$.ajax({
url: 'Controller/ActionMethod',
data: JSON.stringify({ Value: "SomeValue" }),
type: 'POST',
contentType: 'application/json;',
async: false,
success: function (data) {
div = data;
}
});
Hope this helps.
I'm using Google places AutoComplete on a textbox and it's essentially working, picking the locations and stuffing them into the textboxes.
The problem is that I want to only stuff the selection name - not the full name + address formatting out of the list that the AutoComplete list produces. I can't seem to find a way to override what goes into the textbox.
var $name = $("#txtName");
$name.focus();
var autocomplete = new google.maps.places.Autocomplete($name[0]);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
// explicitly update model
// but doesn't display in UI
$scope.locationData.Name = place.name;
// explicitly update the input box - doesn't update UI
$name.val(place.name);
return false; // doesn't work - updates UI
});
Basically what I'd like to do is take over the input box text assignment myself by doing the assignment myself and forcing autocomplete to not set the textbox value.
Is this possible?
Set the value with a short delay.
$('#NameBox').on('blur change', function () { $(this).val(place.name).off('blur change'); });
setTimeout(function () { $('#NameBox').val(place.name); }, 150);
Using .off() allows the user to edit the name if they wish. If you wish to only allow the places API name remove .off().
Basically I want that the Title field(Combo Box) should not allow me to enter more than 40 characters.
Can you provide any pointers?
I looks like the control itself does not have that functionality, so you will probably have to write your own version.
You could create a custom control to extend the ComboxBox control. Check out this blog post.
Another idea is to use jQuery to prevent more than 40 characters from being added to the input control the ComboBox control generates:
$(function() {
var comboxBoxControlInput = $("#<%=comboBoxControlId.ClientID%>$TextBox");
$(comboxBoxControlInput).keyup(function() {
limitLenth(this, 40);
});
});
function limitLength(control, length) {
var currentContent = $(control).val();
var currentLength = currentContent.length;
if(currentLength > length) {
$(control).val(currentContent.substr(0, length));
return false;
}
}
Unfortunately it's a bit hacky. You have to get the ClientID of the ComboBox control (<%=comboBoxControlId.ClientID%>) and then append $TextBox to the end in order for jQuery to select the correct control.
Edit:
Another way to select the correct input control is to do this:
$("#<%=comboBoxControlId.ClientId%>").find("input[type=text]");
This selects the first text input within the div the ComboBox control creates.
I'm trying to have an asp.net custom control with a field like:
<ErrorTemplate>
<h1>Error</h1>
<p>Blue wizard shot the food</p>
</ErrorTemplate>
What I want to end up with is:
<h1>Error</h1><p>Blue wizard shot the food</p> in a string in my codebehind.
At the moment, the process I use to get this data out of the template is:
First this gets instantiated into a placeholder by my code:
ErrorTemplate.InstantiateIn(errorPHolder);
which is an asp.net placeholder control - it has to be instantiated into something which can support controls.
What I then want to do is add this to my page using JQuery and a variable, like this:
string script = "var Errortemplate = " + errorPHolder.ToString() + ";";
scriptmanager.register(script); // pseudocode
so the result would be, on my page:
var Errortemplate = '<h1>Error</h1><p>Blue wizard shot the food</p>';
Then I can use JQuery to do someDiv.html(Errortemplate);
Finally resulting in whatever they put in <ErrorTemplate> appearing on the page
Because I'm using JQuery it might be possible to do this a different way, such as adding the placeholder to the page into a hidden div and using JQuery to copy the values out.
Any ideas?
Have you tried to render your control?
StringBuilder sb = new StringBuilder();
using (StringWriter tw = new StringWriter(sb))
{
using (HtmlTextWriter hw = new HtmlTextWriter(tw))
{
errorPHolder.RenderControl(hw);
}
}
// its HTML string representation of errorPHolder
string html = sb.ToString();
I am using the jqGrid for ASP.NET MVC, and have a grid with a subgrid. In that subgrid, I have added a button to the toolbar like so:
ToolBarSettings = new ToolBarSettings()
{
ShowRefreshButton = true,
CustomButtons = new List<JQGridToolBarButton>()
{
new JQGridToolBarButton()
{
Text = "Custom",
Position = ToolBarButtonPosition.Last,
OnClick="CustomClick" }
}
},
etc...
}
The CustomClick is a javascript callback, and it fires without any problems, but I am having trouble getting the parent grid row id in the CustomClick callback.
How can I get the parent row id in the CustomClick function?
Thanks, Dennis
The child Grid id itself contains the parentKey. when ever a child grid is created the id of the child grid is ParentGridName_ParentKey_ChildGridName. So you can get the Parent key
Below is the code for custom button :
<CustomButtons>
<Trirand:JQGridToolBarButton ToolTip="Custom button" OnClick="GetParentKey" />
</CustomButtons>
Then inside GetParentKey function you can get the parentKeyID as follows :
function GetParentKey()
{
var GridId = this.id.toString().split('_');
var parentKey = GridId[1];
}
Inside of CustomClick function you has as this the DOM element of the table from which navigator the custom button are clicked. There are no "parent row", but you can get the id of the currently selected row (if any exist) per
var rowid = $(this).jqGrid('getGridParam', 'selrow');
see example from the following answer oder search for another examples to the navButtonAdd method.