I have customized grid control which generates table when we give coloumn and table name where there is a feature for searching also available which updates the record and show the updated result in grid while searching through ajax i am getting records updating but not showing in main page
SqlParameter[] sqlParameter = {new SqlParameter("#table",tabelName),
new SqlParameter("#Column1",coloumn1),
new SqlParameter ("#Column2",coloumn2),
new SqlParameter("#AliasName1",aliasName1),
new SqlParameter("#AliasName2",aliasName2)
};
string gridHtml;
if (!isFilterCondition)
{
gridHtml = GenerateHtmlGrid(sqlParameter);
}
else
{
gridHtml = GenerateHtmlGridonSearch();
}
StringBuilder sb = new StringBuilder();
//Opening For Main page Search Control
sb.AppendFormat("<table>");
sb.AppendFormat("<tr><td>");
sb.AppendFormat("<input id='txt_Search' type='text' name='txt_Search'>");
sb.AppendFormat("<input type='hidden' name='{0}' class='WorkItem'>", controlName);
sb.AppendFormat("</td><td>");
sb.AppendFormat("<a href='#' id='searchlink'><img src='../../Content/themes/base/images/16px-Searchtool_right.png' /></a>");
sb.AppendFormat("</td></tr></table>");
//Closing For Main page Search Control
// Opening for the Dialog Box Div
sb.AppendFormat("<div id='dialoggrid' title='{0}' >", popWindowTitle);
sb.AppendFormat("<table>");
sb.AppendFormat("<tr><td></td><td>");
sb.AppendFormat("<select name='foo' id='foo'>");
sb.AppendFormat("<option value=0>{0}</option>", aliasName1);
sb.AppendFormat("<option value=1>{0}</option>", aliasName2);
sb.AppendFormat("</select>");
sb.AppendFormat("</td></tr>");
sb.AppendFormat("<tr><td>");
sb.AppendFormat("<label>Search</label>");
sb.AppendFormat("</td><td>");
sb.AppendFormat("<input id='txtGridSearch' type='text' name='txtGridSearch'>");
//sb.AppendFormat("<a href='#' id='SearchTree'><img src='../../Content/themes/base/images/16px-Searchtool_right.png' /></a>");
sb.AppendFormat("</table>");
sb.AppendFormat("<div id='div_grid'>{0}</div>", gridHtml);
sb.AppendFormat("</div>");
// Closing for the Dialog Box Div
//opening For Script Section
sb.AppendFormat("<script type='text/javascript'>");
//Opening for Document Reddy
sb.AppendFormat("$(document).ready(function() {{ ");
sb.AppendFormat("$('#dialoggrid').dialog({{ autoOpen: false,modal: true,width: 350}});");
//Function For SearchButton on Main Page Click
sb.AppendFormat("$('#searchlink').click(function() {{");
sb.AppendFormat("$( '#dialoggrid').dialog('open');");
sb.AppendFormat("}});");
//Closing For SearchButton on Main Page Click
//opening For Textbox Search inside the Grid on Key Up Event
sb.AppendFormat("$('#txtGridSearch').keyup(function(){{");
sb.AppendFormat("$.post('/CustomeControls/GridSearch')");
sb.AppendFormat("}});");
//Closeing For Textbox Search inside the Grid on Key Up Event
sb.AppendFormat("}});");
//Closing For Document Reddy Function
sb.AppendFormat("</script>");
//Closing for Script Section
return new MvcHtmlString(sb.ToString());
}
Related
I have a kendo grid with filterable = true, mode=row.
I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons.
1) I need to have a saved version of the filter row values before they are removed.
2) After they are removed and re-added they will not work
...
many other reasons, just bad practice and there has to be a better way.
A button that fires the event: toggleFilterClick:
<script type="text/x-kendo-template" id="gridFilter">
<button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>
</script>
The Javascript code:
//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row")[0].innerHTML == '')
{
$(".k-filter-row")[0].innerHTML = filterRowValues;
}
else
{
$(".k-filter-row")[0].innerHTML = '';
}
});
Any thoughts suggestions would be appreciated/
I would just like to hide the actual filter row in the header
I'm not sure if i get the point but if you just want to hide it just simply remove everything except$(".k-filter-row").show(); and $(".k-filter-row").hide();. I create an example where when i hide the filter, the filter condtion will removed, but when it showed again the grid will refiltered with the previous value used to filter
$("#toggle").kendoButton({
click:function(){
if($(".k-filter-row").css("display") == "none"){
$(".k-filter-row").show();
//show again filter and execute previous filter condition
$("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
$("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});
}else{
//store the previous filter value
//autocomplete
vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());
//hide filter row
$(".k-filter-row").show();
//to reset filter of the grid when filterable hidden
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
});
See the details in action
DEMO
Have you tried just hiding the row instead of removing it?
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row").is(":visible")){
$(".k-filter-row").hide();
}
else{
$(".k-filter-row").show();
}
});
I'm trying to create a coded UI test (with VS2010 Ultimate) for a simple web form page with two checkboxes and a submit hyperlink. The checkboxes have the same text label; "I Agree".
Using the coded UI test builder to record actions, only one checkbox is captured because both checkboxes have the same text / same UIMap Name.
Using the crosshair tool to select the second checkbox, it replaces the previous checkbox instance because they have the same text / same UIMap Name.
When the test is run, the first checkbox is checked, the second is not, and the hyperlink is clicked to submitted the form (failing validation).
How can I add the second checkbox to the test map and differentiate between the two?
If there are no unique properties on the checkboxes themselves, specify the parent object of each checkbox to differentiate them.
Example:
For
<div id="box1Parent">
<input label="I Agree"/>
</div>
<div id=box2Parent">
<input label="I Agree"/>
</div>
You would define the object like this:
public HtmlCheckBox AgreementBox1()
{
HtmlDiv parent = new HtmlDiv(browser);
parent.SearchProperties["id"] = "box1Parent";
HtmlCheckBox target = new HtmlCheckBox(parent);
target.SearchProperties["label"] = "I Agree";
return target;
}
Then, do the same for the second box, but point the parent to box2Parent. This would be your code in the non-designer section of the .uitest class.
There are multiple ways to do this.
Try to find out unique property of object like id, name.
Try to find out parent control/container of checkbox, then use {TAB} or {UP}/{DOWN} keys.
Use {TAB} key of keyboard. find out previous control -> click on that control -> use {TAB} from that control to get focus on checkbox control and use {UP}/{DOWN} arrow key to navigate.
Find out text of document and click on first or second occurrence of that as per your need.
Code to find out document Text,
public string GetCurrentPageVisibleTexts()
{
var window = this.UIMap.<WindowObject>
UITestControlCollection c = window.GetChildren();
var pgContent = (string)c[0].GetProperty("OuterHtml");
var document = new HtmlAgilityPack.HtmlDocument();
document.LoadHtml(pgContent);
// We don't want these in our result
var exclusionText = new string[] { "<!--", "<![CDATA", "function()", "</form>" };
var visibleTexts = new List<string>();
//var nodes = document.DocumentNode.Descendants().Where(d => !d.Name.ToLower().Equals("span"));
foreach (var elem in document.DocumentNode.Descendants())
{
// Foreach element iterate its path back till root
// and look for "display: none" attribute in each one of its parent node
// to verify whether that element or any of its parent are marked as hidden
var tempElem = elem;
while (tempElem.ParentNode != null)
{
if (tempElem.Attributes["style"] != null)
{
// if hidden attribute found then break.
if (tempElem.Attributes["style"].Value.ToLower().Contains("display: none")) break;
}
tempElem = tempElem.ParentNode;
}
// If iteration reached to head and element is found clean of hidden property then proceed with text extraction.
if (tempElem.ParentNode == null)
{
if (!exclusionText.Any(e => elem.InnerText.Contains(e))
&& (!elem.InnerText.Trim().IsNullOrEmpty())
&& (!elem.HasChildNodes))
{
visibleTexts.Add(elem.InnerText);
}
}
} // Foreach close
var completeText = string.Join(" ", visibleTexts).Replace(" ", " ");
return Regex.Replace(completeText, #"\s+", " ");
}
Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an UpdatePanel...
<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
<ul>
<li>Attendance</li>
<li>Grades</li>
<li>Gradebook</li>
<li>PFT</li>
<li>Scheduling</li>
<li>Miscellaneous</li>
<li>Parent Data Changing</li>
</ul>
</div>
</asp:UpdatePanel>
...which I then wire up in javascript later...
var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: onMainTabSelect
}).data("kendoTabStrip");
Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.
Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.
Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.
What Already Works
I already have a way to preserve the tab that the user clicked on:
var onMainTabSelect = function (e) {
tabToSelect = e.item;
console.log("onTabSelect --> ", e.item.textContent);
}
and a function to reset the selected tab whenever it is called:
function setMainTab() {
if (!jQuery.isEmptyObject(tabToSelect)) {
var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
console.log("Attempt to set tab to ", tabToSelect.textContent);
tabStrip.select(tabToSelect);
} else {
console.log("tabToSelect was empty");
}
}
What Doesn't Work
My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
setMainTab();
});
...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.
Any ideas what I may be doing wrong?
I ended up changing the onMainTabSelect method to:
var onMainTabSelect = function (e) {
tabToSelect = $(e.item).data("tabindex");
}
which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.
I'm trying generate a images/chart in my controller and have that image displayed in an image tag in the view. In my view, I have
<div id="graphcontainer">Close Graph<img id="chartImage" alt="" /></div>
and in my controller (called EventReport) I have a method called "BuildChart". My idea was to capture the click event of a button designated as the build report button. In the click event handler I would want to assign the image's source to something like "/EventReport/BuildChart" to have the image control populated.
Here's what's in the controller
public ActionResult BuildChart()
{
var chart = new Chart
{
Height = Unit.Pixel(400),
Width = Unit.Pixel(600),
AntiAliasing = AntiAliasingStyles.Graphics,
BackColor = Color.White
};
// Populate chart here ...
var ms = new MemoryStream();
chart.SaveImage(ms);
return File(ms.ToArray(), "image/png");
}
I'm just having problems wiring this up. Am I on the right track?
Thanks!
Set src of your image as link to your action on the click of your button, eg:
using jquery:
$('#build-chart').click(function() {
$('#chartImage').attr('src', '/EventReport/BuildChart');
});
and action will be asked for content for image. Probably some 'loading' indicator will be needed.
How can one make dijit.Dialog to fade in a given time period? Is there any way define it?
I have created above dialog in a method. But I need to call the method frequently. So it will create multiple dialogs. So how to block(not to appear) other dialogs until visible dialog get faded?
<script>
// Require the Dialog class
dojo.require("dijit.Dialog");
// Create counter
var counter = 1;
// Create a new Dialog
function createDialog(first) {
// Create a new dialog
var dialog = new dijit.Dialog({
// Dialog title
title: "New Dialog " + counter,
// Create Dialog content
content: (!first ? "I am a dialog on top of other dialogs" : "I am the bottom dialog") + "<br /><br /><button onclick='createDialog();'>Create another dialog.</button>"
});
dialog.show();
counter++;
} </script> <button onclick="createDialog(true);">Create New Dialog</button>