Questions on UI for ASP.NET MVC Forum

1 answer

348 views

First of all - I'm a newbie to kendo ui and web programming with .NET as a whole so this might be an easy question. With that in mind, here's my problem:

I have a DatePicker and a Grid on a page. Whenever a date is chosen from the DatePicker, it fires an event which queries data from the server and then populates the grid with it. The problem is - it doesn't. The grid stays empty with no errors client or server-side at all.

Here's how I set up the controls:

@(Html.Kendo().DatePicker()

.Name("DateForReport")

.Value(DateTime.Now)

.Events(e =>

{

e.Change("getStockInfo");

})

)

@(Html.Kendo().Grid<Supermarket.Main.Areas.Management.Models.ProductInStockViewModel>()

.Name("reportsByDateGrid")

.Columns(columns =>

{

columns.Bound(m => m.ProductName);

columns.Bound(m => m.CategoryName);

columns.Bound(m => m.Amount);

columns.Bound(m => m.PricePerUnit);

columns.Bound(m => m.TotalPrice);

})

.Pageable()

.Sortable()

)

And here's the javascript function that does most of the work:

function getStockInfo() {

if (this.value() != null) {

var date = kendo.toString(this.value(), 'd');

$.ajax({

type: "get",

dataType: "json",

url: "@Url.Action("GetAvailabilitiesByDate")",

data: { date: date },

traditional: true,

success: function (result) {

if (result.success) {

var data = result.data;

var newDataSource = new kendo.data.DataSource({

data: data,

pageSize: 15,

schema: {

model: {

fields: {

ProductName: { type: "string" },

CategoryName: { type: "string" },

Amount: { type: "number" },

PricePerUnit: { type: "number" },

TotalPrice: { type: "number" },

}

});

var grid = $("#reportsByDateGrid").data("kendoGrid");

grid.setDataSource(newDataSource);

grid.refresh();

} else {

alert(result.error);

}

},

error: function () {

alert("An error has occurred, please try again or inform an administrator!");

}

});

}

And here's a sample response that I get:

{"success":true,

"data":[{"ProductName":"Borovec","CategoryName":"Food","Amount":18,"PricePerUnit":1.50,"TotalPrice":27.00},{"ProductName":"Coca-cola","CategoryName":"Beverages","Amount":25,"PricePerUnit":2.50,"TotalPrice":62.50},{"ProductName":"Medenka Lubimka","CategoryName":"Food","Amount":23,"PricePerUnit":1.50,"TotalPrice":34.50}]}

How must I set up the datasource of the grid for this to work?

Grid

answered on 24 Feb 2013

1 answer

107 views

script error when using MVC helpers/plugins for image browser

When I try and use the mvc html helpers I get javascript errors when I try and use the image browser. When I use the jquery version, everything works just fine.

One of the errors occurs when you open the image browser, then try and close it. Firefox gives a "TypeError: e is null"

version 2012.3.1315

here is the important part of the razor file:

@(Html.Kendo().EditorFor(m => m.Body)

.Encode(false)

.HtmlAttributes(new { style = "width: 740px;height:440px" })

.Tools(tools => tools.Clear().InsertImage())

.ImageBrowser(imageBrowser => imageBrowser

.Image("~/Content/Images/{0}")

.Read("Read", "ImageBrowser")

.Create("Create", "ImageBrowser")

.Destroy("Destroy", "ImageBrowser")

.Upload("Upload", "ImageBrowser")

.Thumbnail("Thumbnail", "ImageBrowser"))

)

Editor

answered on 22 Feb 2013

2 answers

141 views

IntegerTextboxes don't work in Window

@{ Html.Kendo().Window()

.Name("WindowNveBack")

.Title("Neuer Kundensatz")

.Resizable(resizing => resizing

.Enabled(false)

//.MinHeight(250)

//.MinWidth(250)

//.MaxHeight(500)

//.MaxWidth(500)

)

.Modal(true)

.Content(@<text>

<div class="pddng_7 lft">

<div class="kd_adr_left_sdgerf">

<ul>

<li class="mrgn_bttm_4 li_kd_adr_left_sdgerf">Kd.Nr. / Index</li>

<li class="mrgn_bttm_4 li_kd_adr_left_sdgerf">Name</li>

<li class="mrgn_bttm_4 li_kd_adr_left_sdgerf">Land / PLZ / Ort</li>

<li class="li_kd_adr_left_sdgerf"></li>

</ul>

</div>

<div class="lft">

<ul>

<li class="li_height_sdgerf mrgn_bttm_4">

<div class="lft">@Html.Kendo().IntegerTextBox().Name("text1")</div>

<div class="lft mrgn_left_4">@Html.Kendo().IntegerTextBox().Name("text2")</div>

<div class="lft mrgn_left_4"></div>

<div class="clear"></div>

</li>

</ul>

</div>

<div class="clear"></div>

</div>

</text>)

//.Width(593)

//.Height(300)

.Visible(false)

.Draggable(true).Render();

}

Hello, my problem is, that when the Window is open, I select the first Numeric textbox and type digits, it works. When Iselect the second textbox and try to type digits, it doesn't work. What can I do?

Window

answered on 22 Feb 2013

1 answer

155 views

Kendo UI grid not populating the data

I am working on VS 2010 MVC4, HTML 5 with kendo ui demo version
I tried to bind a grid, corresponding to the data entered in a textbox, but the grid is not getting populated
Also there is no error displayed and if i put a dummy data in datasource it displays
This is the code i used

$("#txtSearchCaller").keyup(function () { SearchCaller($(this)); });

function SearchCaller(txtSearchCaller) {
SearchRequestProcess = $.ajax({
type: "GET",
url: baseURL + "Call/SearchCaller",
data: "term=" + $(txtSearchCaller).val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnGetCallerSuccess,
error: function (request, status, error) { if (request.statusText != "abort") { alert("SearchCaller:: " + request.statusText); } }
});
}
}
function OnGetCallerSuccess(Jsondata, status) {
$("#Grid").kendoGrid({ // create Grid from div HTML element Kendo
dataSource: Jsondata,
selectable: "row",
scrollable: true,
navigatable: true,
resizable: true,
groupable: false,
columns: [
{
field: "category1",
title: "category1",
width: 80
},
{
field: "category2",
title: "Customer Name",
width: 80
},
]
});
}

General Discussions

answered on 22 Feb 2013

3 answers

119 views

Using Load On Demand Check box state is not getting maintained after collapsing a node

Hi,

In our application, we are loading a treeview where there is parent-child relationship
Structure is:
Node 1
    Node 1.1
        Node 1.1.1
            Node 1.1.1.1
            Node 1.1.1.2
            Node 1.1.1.3
    Node 1.2
    Node 1.3
        Node 1.3.1
        Node 1.3.2
Node 2
     Node 2.1
            Node 2.1.1
            Node 2.1.2
            Node 2.1.3
    Node 2.2
Node 3

We are using Load on Demand (Ajax binding) to load the children nodes on expanding a parent node.

Step 1: Expand a parent node, child nodes will be loaded
Step2: Check the parent node, all the child nodes will be checked
Step 3: Now Collapse the parent node (Keep it checked) and expand again to load the child nodes.

Expect:
Child nodes should be checked
Actual:
Child Nodes are not checked

The checkboxes state is not maintained after collapsing a parent node and then expanding the same.
This is one of the critical functionalities in our application.
Please help.

Thanks
Vidya

TreeView

answered on 22 Feb 2013

4 answers

669 views

[Solved] Date format is not working

Hi all,

Here is my kendo grid declaration in the cshtml

columns: [
{ field: "MemberFirstName", title: "Member<br/>First Name" },
{ field: "MemberLastName", title: "Member<br/>Last Name" },
{ field: "ClientMemberID", title: "Client<br/>Member ID" },
{ field: "ProviderID", title: "Provider ID" },
{ field: "ProviderFirstName", title: "Provider<br/>First Name" },
{ field: "ProviderLastName", title: "Provider<br/>Last Name" },
{ field: "AppointmentDate", title: "Appointment<br/>Date" }
],
My last column is a date time column, i want to show only date value not the time.

I can see the data that i am binding and its clearly a date time value, When i see it in the UI, i see it as /Date(1331166600000)/

any one had this issue before?

I tried the following ways

template: '#= kendo.toString(AppointmentDate,"dd MMMM yyyy") #'
format: "{0:dd/MMMM/yyyy}"

None of the above two methods worked for me.

Grid

answered on 21 Feb 2013

1 answer

1.3K+ views

[Solved] DataSourceRequest

Hello,
a small question:
I keep seeing this object DataSourceRequest,
this is specific to kendo library when using with grid or filtering?is there a link about this too?

Regards,
Daniel

Grid

answered on 21 Feb 2013

7 answers

209 views

Wrong style?

Hi,
I have a datepicker, textbox and one autocomplete box on my page. Textbox and autocomplete looks fine but the datepicker doesn't align correctly. Bug?
Looks the same in IE9 and FF17.

Regards,
Mattias

DatePicker

answered on 20 Feb 2013

3 answers

329 views

Text Box Size Ignored in Add/Edit Popup of Grid

I have a grid that is showing fields and one of them is a Name field that can be long. When adding and editing a record, I want the Name field to be a textbox that is 2 rows high.

I created a EditorTemplate that looks as follows:

@(Html.TextArea("Name", new{style="width:200px;height:30px;",row="2",cols="30"})

I placed this at the top of the Name field in the ViewModel:

[UIHint("SponsorNameMultilineText")]

I am now seeing a text box but it has too many lines in it - I want it to be shorter. How do I do that?

Grid

answered on 20 Feb 2013

1 answer

316 views

Child Row taking Parent Data

Hi,

I have a hierarchical grid with where the child is displaying data from the parent, I suspect its the way Im binding to the data.

Parent

@(Html.Kendo().Grid(Model.CVXElements) // Specify the type of the grid

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.ElementSeqNo).Title("Element ID").Width("100px").ClientTemplate(

Html.ActionLink("#= ElementSeqNo #", "PUSH", "ElementBuilder", new {url = "~/PagCC/EB_ElementAddEdit.aspx", ID = "#= ElementSeqNo #", cvxCode = Model.CVXCode  }, null).ToString());

columns.Bound(p => p.ElementName).Width("900px");

columns.Bound(p => p.ElementStatus).Width("100px");

columns.Bound(p => p.ElementActive).Title("Live").Width("100px");

columns.Bound(p => p.ParentElement).HtmlAttributes( new {@style= "display:none"}).HeaderHtmlAttributes(new { @style= "display:none;" });

})

.ClientDetailTemplateId("ParentElementTemplate")

.Events(events => events.DataBound("dataBound"))

.DataSource(dataSource => dataSource

.Ajax()

)

.Events(events => events.DataBound("dataBound"))

Child

<script id="ParentElementTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ElementBuilder.Models.Elements>(Model.CVXElementParents)

.Name("ParentGrid")

.Columns(columns =>

{

columns.Bound(p => p.ElementSeqNo).Title("Element ID").Width("91px")

.ClientTemplate(

Html.ActionLink("#= ElementSeqNo #", "PUSH", "ElementBuilder", new {url = "~/PagCC/EB_ElementAddEdit.aspx", ID = "#= ElementSeqNo #"  }, null).ToString());

columns.Bound(p => p.ElementName).Width("910px");

columns.Bound(p => p.ElementStatus).Width("100px");

columns.Bound(p => p.ElementActive).Title("Live").Width("88px");

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("HierarchyBinding_ParentElements", "ElementBuilder", new { iElemSeqNo = "#=ElementSeqNo#" }))

)

.ToClientTemplate()

)

</script>

Both grids use the ElementSeqNo field to create a Hyperlink, however as stated, the child is taking the parent element data.

Any suggestions appreciated.

Regards
Ross

Grid

answered on 20 Feb 2013