I'm trying to change the HTML rendered by the Kendo UI autocomplete MVC helper, but it seems Kendo has hard coded it to be a UL. Here's my code sample:
#(Html.Kendo().AutoComplete()
.Name("clientsAutoComplete")
.DataTextField("ClientCode")
.DataSource(source => source.Read(read => read.Action("GetClients", "Profile").Type(HttpVerbs.Post)))
.Template("<table style='width:600px'>" +
"<thead>" +
"<tr><th>Client</th><th>Code</th></tr>" +
"</thead>" +
"<tbody>" +
"<tr><td> " +
"${ data.Firstname }asdfasdfasdf</td><td>${ data.ClientCode }</td></tr>" +
"</tbody>" +
"</table>")
//.TemplateId("javascriptTemplate")
))
What you end up with is a table repeated for each record. If you change the template value to have only the row definitions of a table as in the following:
.Template("<tr><td>${ data.Firstname }asdfasdfasdf</td><td>${ data.ClientCode }</td></tr>")
Then Kendo removes the TR and TD tags altogether and leaves you with the LI's.
I've even tried using a client side template using a script element as suggested by Kendo, but it has pretty much the same erratic results.
I need a table to render in the drop down, which will have a headers row (THead) and the content in the TBODY section. Anyone know how to achieve this scenario?
Regards,
Jacques
As far as I can tell, tables aren't supported by the templating system. There's a HeaderTemplate property, but no FooterTemplate that you can use to close your table with.
Source link:
http://docs.kendoui.com/api/web/autocomplete#configuration-headerTemplate
Related
I'm working in an old project creating a User Control to add code that will change as I need.
I'd like to add a list element but I only found the property to create list type of <select> using <asp:ListBox, but this is not that I'm looking for
Do you know how generate a <ul><li> elements using Global.System.Web.UI.WebControls? or at least modify its CssClass properties since my VB code. It'd be amazing if I can use a loop to generate the list items.
Thanks in advance
One solution would be to add a BulletedList in your WebForm.aspx:
<asp:BulletedList ID="BulletedList1" runat="server"></asp:BulletedList>
Then in your WebForm.aspx.vb you can add items:
For i As Integer = 1 To 3
BulletedList1.Items.Add("item" & i)
Next
If you inspect your page in a web browser you will see these are equivalent to <ul><li> HTML tags.
I am trying to automate a page using selenium webdriver. The page contains a table which has the following xpath.
Find below a sample xpath validation which works fine.
I am iterating it through div as rows are considered as div under which there will be a table which has all the rows mentioned.
table = common.getObjectByXpath("html/body/div[4]/div[4]/div[1]/div/div/div[3]/div/div[2]/div/div/div/div");
rows = table.findElements(By.tagName("div"));
for(int i=1;i<=rows.size();i++){
if(driver.findElement(By.xpath("html/body/div[4]/div[4]/div[1]/div/div/div[3]/div/div[2]/div/div/div/div/div["+i+"]/table/tbody/tr/td[5]/span").getText().equals("endnode 11.1"))){
System.out.println(" print Something");
}
}
It works fine with xpath. But I want to do it with css selector. I am attaching the sample format of the table.
In the below figure, each div is considered as a row and under which you will see a table which has entries for columns.
The xpath you are using is a very fragile one since it starts right from the html element and heavily depends on the HTML structure of the page. Needless to say - it is huge and is not quite readable and easily understandable.
Instead rely on the element attributes - classes or ids. For example:
div#dojox_grid__View_11 div.dojoxGridContent div.dojoxGridRow
I am trying to write a UI test for an application that uses a kendo grid. I am using selenium to drive the browser, and I am having trouble selecting a row in the grid.
I have been able to select the correct row like this:
IWebElement matterToSelect = MatterToSelectGrid.FindElement(By.XPath("//td[text()='" + matterId + "']/ancestor::tr"));
I was hoping to simply call .click() the webElement, but that did not work. So I tried building an action:
new Actions(Driver).MoveToElement(matterToSelect).Click().Build().Perform();
also no joy. Okay what about selecting it with js?:
IJavaScriptExecutor js = Driver as IJavaScriptExecutor;
js.ExecuteScript("return $(\"tr[data-uid='" + id + "']\").trigger('click');");
still nothing, what about a more direct selection just to see if it will work?
js.ExecuteScript("return $(\"#sourceGrid > table:nth-child(1) > tbody:nth-child(3) > tr:nth-child(1) > td:nth-child(1)\").click();");
grrrr still no luck. So my next thought was perhaps the kendo grid has a select() method I can use? Well it seems yes, but from what I read I also need to re-bind the grid? All the exaples I can find look something like this:
$("#sourceGrid").data("kendoGrid").select()
but I don't want to re-bind the grid from my test, so I have not tried this. Also, I am not sure what should be in data(), as all the grids are set up using the Html helper method, and use the .dataSource method to bind to action methods. Has anyone one got any better suggestions?
okay, I did it in the end like this:
IJavaScriptExecutor js = Driver as IJavaScriptExecutor;
js.ExecuteScript(String.Format("return $('td:contains(\"{0}\")').parent().addClass('k-state-selected');", matterId));
Don't get me wrong, I am not a fan of XPath but this is easiest way I found to select the first row in a Kendo grid. I gave my grid the Id of 'ticketGrid'. I then used Chrome Dev tools to inspect the first row. You can then right click and select 'Copy XPath' and I got this:
//*[#id='ticketGrid']/table/tbody/tr[1]
Then in my specFlow tests I have the following:
var wait = new WebDriverWait(WebDriver, timeout: TimeSpan.FromSeconds(5));
var firstRow = wait.Until(w => w.FindElement(By.XPath(#"//*#id='ticketGrid']/table/tbody/tr[1]")));
firstRow.Click();
Hope this helps
I got my autocomplete stuff working well enough to see that it's returning some data when I type in a field--but the data shown in the dropdown below the textbox is just a vertical column of asterisks or list item bullets. (I can't really tell what they are.)
When I query the web service directly in the browser, it returns a Json array as expected which looks like this where, for example ?term=chi (I've added some line breaks for readability)
[
{"Name":"Chihuahua"},
{"Name":"Chinese Crested"},
{"Name":"Chinese Shar-Pei"},
{"Name":"Japanese Chin"},
{"Name":"Schipperke"}
]
My JavaScript looks like this:
$(function() {
$("#Breed").autocomplete({
source: "#Url.Action("BreedList", "Patient")"
});
});
like I say, my textbox in question (#Breed) does respond sort of like an autocomplete box, but the dropdown data is weird. Any ideas?
Although I did have a CSS bundling problem (somehow I had omitted the jquery ui css from my bundle), a bigger issue was that the Json returned by my service needed a lower case "value" property for each item. I was using the column name as cased on my Linq query. The tip that pointed me in the right direction on this came from the answer here: jQueryUI autoComplete returns back empty list
How do you add a non-standard event field to Full Calendar?
I already read the other questions about this - their answers just say the same thing as the documentation which is incomplete
(Simple concept) - One way to do it, if you already have a field created in the database, is to just place that field in the array from your rails page. On the JS side, use eventRender and append it to whatever element you desire.
I just read this in other question, but i didn't test.
add this callback
eventRender: function( event, element, view )
{
//redo the title to include the description
element.find(".fc-event-title").html(event.title + ": <span>" + event.description + "</span>");
},
jQuery Calendar : how to add clickable events on particular dates?