Questions on Kendo UI for jQuery Forum

1 answer

650 views

Hello,

I am getting into web development for the first time and definitely have alot to catch-up on. I have been able to use some of the KendoUI controls which are pretty cool, so kudos there!

I am now in the process of using a kendoWindow control, which is just a window to allow a user to enter a value in a textbox and to click a button in the same window and it has functionality to check if the pswd is correct, etc. The window does open but somehow the textbox is always read-only. Can somebody please let me know if I maybe missing an attribute or something else? I am not sure if it is because I am using the html in the code to render the window with the label, textbox, and button vs using the .content when initializing the kendoWindow.

Any help would be greatly appreciated!

HTML:

<div id="window">

Please provide an override password.

<br />

<div>

<label id="lblPswd">Password: </label>

<input id="txtOverride" type="text"/>

</div>

<br />

<div style="text-align:center;">

<input id="Text1" type="text"/>

<button class="k-button" id="btnOverride" style="width: 125px" >OK</button>

</div>

jQuery:

//Window to allow users to add a password to override and approve.

var overrideWindow = $("#window").kendoWindow({

height: "200px",

title: "Override Workflow Access",

visible: false,

modal: true,

width: "300px"

}).data("kendoWindow");

//Another button on the page so that when users click it, the window opens and checks if they have access to approve. There is other functionality which I have removed for simplicity. Just need to make the input textbox editable. Btn in window works.

$("#btnApprove").click(function () {

var window = $("#window").data("kendoWindow");

window.center();

window.open();

})

I did see an example online and was testing it out. It opens another aspx page in my project which has the same functionality as what I am trying to do, but the textbox is editable. I am not sure if it is because the content: attribute is used. I would prefer to use the method above instead of going to another page.

// create the window ON THE FLIES

$("<div></div>").kendoWindow({

visible: true,

title: "Creates Window Out Of Thin Air",

modal: true,

width: "400px",

content: { url: "TestKendoWindow.aspx"

},

deactivate: function () {

this.element.closest(".k-widget").remove();

}

}).data("kendoWindow")

// set the content of the window

//.content("<h1>Acheivement UNLOCKED!</h1>")

.center()

.open();

Thanks in advance,
K

Window

answered on 06 Jun 2012

1 answer

148 views

drag and drop in IE

Seems to be firing the drop event more than once with differing results causing issues.

I am dragging from a grid to a treeview - if i add an alert within the drop event it fires twice, each time it fires e.srcElement.ParentElement is different

Is this a bug?

Drag and Drop

answered on 06 Jun 2012

0 answers

69 views

First and Last pager buttons plugin is here

Hi everybody!

Our customers asked us to make First and Last buttons to navigate through the grid pages. So I made this plugin.
I don't know if there is any other way to share kendo plugins, so I'll just place it here.

/*

* Ivelum 2012

* Alexander Skogorev

* Adds 'First' and 'Last' buttons to the pager

*/

(function(a,b){function f(a,b,d,e){return a({idx:b,text:d,ns:c.ns,numeric:e})}var c=window.kendo,d=c.ui,e=d.Pager;var g=e.extend({refresh:function(){var a=this,b,c=1,d,g=a.page(),h=a.totalPages(),i=a.linkTemplate,j=a.options.buttonCount;e.fn.refresh.call(a);if(g>j){d=g%j;c=d===0?g-j+1:g-d+1}b=Math.min(c+j-1,h);if(c>1){a.list.prepend(f(i,1,"First",false))}if(b<h){a.list.append(f(i,h,"Last",false))}}});d.plugin(g)})(jQuery)

Grid

asked on 06 Jun 2012

0 answers

221 views

How to open a details popup from a kendoui grid

I'm trying to open a details popup to show more details about a record in a kendoUI grid.

I've seen this sample: http://demos.kendoui.com/web/grid/detailtemplate.html

But instead of a grid, i'd like to open a popup passing the ID of the selected record.

How can I do this?

Grid

asked on 06 Jun 2012

0 answers

106 views

problems with sorting a grid

Hi

I am trying to get all the functions of a Grid operational.
I have two html tables on one page, which have different id's ("resulttable" and "invoicedetails").
Their set-up is the same: a header with <thead> etc </thead> and a bunch of rows populated by looping through a dataset.
Their visibility is exclusive: when resulttable is visible, invoicedetails is not, and vice versa.
For both tables I instantiatie KendoGrid in the same manner:

			$(document).ready(function () {
				$("#resulttable").kendoGrid({
					width: 860,
					groupable: false,
					sortable: false,
					scrollable: false
				});
			});

and

			$(document).ready(function () {
			    $("#invoicedetails").kendoGrid({
					width: 860,
					groupable: false,
					sortable: false,
					scrollable: false
				});
			});

Now my questions:
I would like to get the grouping operational.
If I set groupable to true for the first table, everything is ok.
However, if I set groupable to true in the second table, two grouping bars appear above my second table, irrespective of the fact that the first table is not visible at all, and that the groupable-attribute of the first table is set to false.
It looks like the second snippet is controlling the first as well.

Has anyone had this issue before, and is there a solution to this?
Probably I am doing something wrong; question is: what?

I would like to get sorting operational.
Both tables are filled by looping through a dataset created by calling a webservice.
I would like to sort the second table, but it looks like it does not do this correctly.
I sort for example a column of prices (formatted as decimal or double or string makes no difference), but it only switches three or four rows out of 20.
What could be a solution to this issue?

The code for "invoicedetails" is:

<table id="invoicedetails">
	<thead>
        <tr>
			<th ><%=Session("formfields")(453) %></th>
			<th ><%= Session("formfields")(958) %></th>
			<th ><%=Session("formfields")(323)%></th>
			<th ><%=Session("formfields")(961) %></th>
			<th ><%=Session("formfields")(348) %></th>
			<th ><%=Session("formfields")(963) %></th>
        </tr>
	</thead>
	<tbody>
	<% iCnt = 0
		Dim strClass As String = ""
		For Each order In getorders.Rows
			Dim totalex As Decimal = order("nrprod") * order("unitprice")
			totalex = thisorder.round(totalex, 2)
			Dim totalin As Decimal = thisorder.round(totalex * (100 + order("vatperc")) / 100, 2)
			Dim nrunit As String = ""
			If CInt(order("nrprod")) <> 1 Then
				nrunit = order("nrprod").ToString
			End If%>
			<tr >
				<td ><a href="<%: Url.Action(targetaction, targetcontroller, New With {.id = ViewData("functionid"), .roleid = Session("roleid"), .invoicenr=session("invoicenr")}, Nothing) %>"><%=order("invnr") %></a></td>
				<td ><%=order("invline") %></td>
				<td  ><%= order("invdate")%></td>
				<td><%=totalex  %></td>
				<td ><%=order("vatperc")  %>%</td>
				<td ><%=totalin %></td>
			</tr>
			<%iCnt = iCnt + 1
		Next %>   
	</tbody>
</table>

Any help is appreciated!

KR

Henk Jelt

Grid

asked on 06 Jun 2012

0 answers

101 views

dropdownlist in Upload control

Hi,

I have an upload control when ever i am selecting a file a remove option is coming by default beside the remove button i want a dropdownlist to differentiate the selected files else is there any other option to pass comments for each selected file.

Please send me any samples (or) examples.

Thanks,

DropDownList

asked on 06 Jun 2012

0 answers

241 views

KendoGrid: Adding a new row with colspan

Hi Telerik,

I have a grid with 5 columns (Product name, Color, Size, Quantity, Price). So the user is able to select a product from a dropdown in cell 1 and select a color from cell 2 and so on and so forth....you get the picture.

Now, I also need the functionality for them to create custom (or what I call a "Free Form" rows) rows. These rows will have an empty text box that spans the entire length of Product Name, Color and Size.....colspan="3", while the cells for quantity and price remain intact.

I was wondering how would I do this using KendoGrid?

Thanks.

Grid

asked on 06 Jun 2012

2 answers

798 views

KendoUI and Plain Javascript (No jQuery)

Hi,

I have used KendoUI with jQuery and it works very well. Now I need to develop an application that will not use jQuery.

Can I work with kendoUI without jQuery. How can I do it ???

Thanks in advance

General Discussions

answered on 06 Jun 2012

0 answers

117 views

Expanded splitter not resizable

I have some splitters which remember state per user.

If I collapse a panel then expand it all works fine.

But if I collapse the panel, reload the page so that its initialised collapsed, then expand it, I am unable to resize it.

Reloading the page so it starts expanded and all is fine again.

$("#main_wrap").kendoSplitter({
orientation: "horizontal",
panes: [
<? if ($_SESSION['horizontal'] <= 0){$sidebar_state = ", collapsed: true"; $_SESSION['horizontal'] = 100;} ?>
{ collapsible: true<?=$sidebar_state?>, resizable:true, size: "<?=$_SESSION['horizontal']?>px" },
{ collapsible: false, resizable:true}
]
});

Splitter

asked on 06 Jun 2012

2 answers

142 views

[Solved] sending parameters to wcf service for chart

Hi,
I have a problem with the chart component.
I have a wcf service for retrieving data for the kendo ui chart.

<script type="text/javascript">

$(document).ready(function () {

$("#chart").kendoChart({

dataSource: {

transport: {

read: {

type:"post",

url:"http://localhost:1038/Services/ProductService.svc/jIlBazliAnaliz",

dataType: "json",

data: '{BasTar:"2011-01-01",SonTar:"2011-12-31"}'

}

},

seriesDefaults: {

type: "column"

},

series: [{

field: "Sayi",

name: "Sayi"

}],

categoryAxis: {

field: "IlAdi",

labels: {

rotation:-90

}

});

</script>

I just would like to transfer two parameters by using the line ;

data: '{BasTar:"2011-01-01",SonTar:"2011-12-31"}'

and my service side is
in IProductService.cs

[OperationContract]

[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "jIlBazliAnaliz")]

IList<ModelIlBazliAnaliz> jIlBazliAnaliz(DateTime BasTar, DateTime SonTar);

and in ProductService.svc.cs

public IList<ModelIlBazliAnaliz> jIlBazliAnaliz(DateTime BasTar, DateTime SonTar)
{
IList<ModelIlBazliAnaliz> Iller=new List<ModelIlBazliAnaliz>();
using (mxKalibrasyonEntities client = new mxKalibrasyonEntities())
{
var bak = client.kal_IlBazliAnaliz(BasTar, SonTar).ToList();
foreach (var kalIlBazliAnalizResult in bak)
{
Iller.Add(new ModelIlBazliAnaliz
{
Sayi = kalIlBazliAnalizResult.Sayi.Value,
Oran = kalIlBazliAnalizResult.Oran.Value,
IlAdi = kalIlBazliAnalizResult.IlAdi
});
}
return Iller;
}
}

The issue is I am getting always null (0001-01-01) date value in the ProductService.svc.cs .

If ı don't use any parameters, I mean with the

public IList<ModelIlBazliAnaliz> jIlBazliAnaliz() ;

without any parameters , my chart works great. But it is an obligation to have the chart filled for some time intervals.

I wonder how can I send the BasTar and SonTar datetime parameters to the wcf service? I think this is possible.
Kind regards.
Inanc

Charts

answered on 06 Jun 2012