Questions on UI for ASP.NET MVC Forum

0 answers

266 views

Grid height inside a Tab control.(not rendered correctly)

Hi,

My problem is as follows , I have a grid inside a tab which I am setting it height via the on select event of the tab.

function onSelect() {

//var reviewCategoryGrid = $("#ReviewCategoryGrid").data("kendoGrid");

//reviewCategoryGrid.dataSource.read();

var gridItem = $("#ReviewItemGrid");

var gridItemGrid = $("#ReviewItemGrid").data("kendoGrid");

var gridCategory = $("#ReviewCategoryGrid");

var gridCategoryGrid = $("#ReviewCategoryGrid").data("kendoGrid");

var dataAreaCategory = gridCategory.find(".k-grid-content");

var dataArea = gridItem.find(".k-grid-content");

var newGridHeight = 600;

var newDataAreaHeight = newGridHeight - 100;

dataArea.height(newDataAreaHeight);

gridItem.height(newGridHeight);

// gridItemGrid.refresh();

dataAreaCategory.height(newDataAreaHeight);

gridCategory.height(newGridHeight);

// gridCategoryGrid.refresh();

}

This works well when I am clicking directly on the tabs.

However when I want to make it a little more advanced by clicking a button i tab 1, it should load some new data in a grid in tab 2 and tab 2 should be displayed. Here is the code I use for that

function selectReviewCategory(reviewCategoryID, category) {

reviewCategoryId = reviewCategoryID;

//reviewCategoryTitle = Title;

var reviewItemGrid = $("#ReviewItemGrid").data("kendoGrid");

reviewItemGrid.dataSource.read();

var tabstrip = $("#tabstrip").data("kendoTabStrip");

//var tabContent = $("#tabStrip").data("kendoTabStrip").contentElements(0);

var tabReview = $("#reviewCategoriesTab");

tabReview.children(".k-link").text(category);

tabstrip.select("#reviewItemsTab");

}

This will then trigger the onSelect function. But the rendering is not working. I have noticed that removing the

reviewItemGrid.dataSource.read(); line the rendering is ok (but of course with no data).

I have tried to move the tabstrip.select statement to the change event of the datasource of the grid. But that did not have an effect. What shall I do ?

Thanks

Ole

Grid

asked on 09 Oct 2012

8 answers

302 views

[Solved] Inline editing Create - new row invisible until you click a cell

Hello I have a grid with inline editing set. The problem is when you click add new it adds a row but everything is invisible in that row until you click in one of the cells.

The demos I see online here don't work that way at all. You click add and it shows up like it should. Can anyone help me out on this one. I feel like it's right in front of me but don't see it and first thing customer said was hey how come I can't see the line when clicking new...

Any help is appreciated

Thanks

Paul

Grid

answered on 09 Oct 2012

1 answer

225 views

Microsoft JScript runtime error: Invalid template:

Hello,

When I am binding the dynamic dataset (columns can be 25-30 based on request) to Kendo Grid, I am getting this error at the runtime. Could anyone tell me how to solve this error. I dont have any null column header.

Error :

Microsoft JScript runtime error: Invalid template:'<tr data-uid="#=uid#"><td >${Category}</td><td >${ProductID}</td><td >${CurrencyCode}</td><td >${ISIN}</td><td >${CUSIP}</td><td >${IDC Price}</td><td >${IDC Date}</td><td >${JPM Price}</td><td >${JPM Date}</td><td >${BARC Price}</td><td >${BARC Date}</td><td >${GoldSachs Price}</td><td >${GoldSachs Date}</td><td >${BofA Price}</td><td >${BofA Date}</td><td >${MorStan Price}</td><td >${MorStan Date}</td><td >${CITI Price}</td><td >${CITI Date}</td><td >${Add. Broker Price}</td><td >${Add. Broker Date}</td><td >${Add. Broker Source}</td><td >${Gifford Price}</td><td >${Gifford Date}</td><td >${Purchase Price}</td><td >${Purchase Date}</td><td >${AmortCost Price}</td><td >${AmortCost Date}</td><td >${Master OW Price}</td><td >${Master OW Date}</td><td >${Determined Price}</td><td >${Determined Date}</td><td >${Determined Remarks}</td><td >${ModelID}</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td >'+(e(Category))+'</td><td >'+(e(ProductID))+'</td><td >'+(e(CurrencyCode))+'</td><td >'+(e(ISIN))+'</td><td >'+(e(CUSIP))+'</td><td >'+(e(IDC Price))+'</td><td >'+(e(IDC Date))+'</td><td >'+(e(JPM Price))+'</td><td >'+(e(JPM Date))+'</td><td >'+(e(BARC Price))+'</td><td >'+(e(BARC Date))+'</td><td >'+(e(GoldSachs Price))+'</td><td >'+(e(GoldSachs Date))+'</td><td >'+(e(BofA Price))+'</td><td >'+(e(BofA Date))+'</td><td >'+(e(MorStan Price))+'</td><td >'+(e(MorStan Date))+'</td><td >'+(e(CITI Price))+'</td><td >'+(e(CITI Date))+'</td><td >'+(e(Add. Broker Price))+'</td><td >'+(e(Add. Broker Date))+'</td><td >'+(e(Add. Broker Source))+'</td><td >'+(e(Gifford Price))+'</td><td >'+(e(Gifford Date))+'</td><td >'+(e(Purchase Price))+'</td><td >'+(e(Purchase Date))+'</td><td >'+(e(AmortCost Price))+'</td><td >'+(e(AmortCost Date))+'</td><td >'+(e(Master OW Price))+'</td><td >'+(e(Master OW Date))+'</td><td >'+(e(Determined Price))+'</td><td >'+(e(Determined Date))+'</td><td >'+(e(Determined Remarks))+'</td><td >'+(e(ModelID))+'</td></tr>';}return o;'

Regards,
Ravi

Grid

answered on 09 Oct 2012

0 answers

155 views

No intellisense while typing kendo command within <script> section

I am not getting intellisense when I tried to type the kendo command within <script> section. As shown below I am not getting intellisense when I type ".kendoAutoComplete(...". However the code is working fine. Thanks!
@section javascript
{
    <script type="text/javascript" language="javascript">
        var countries = ["Austrialia", "Canada", "United States"];
        $(function () {
            $("#countriesAutoComplete").kendoAutoComplete(countries);
        });
    </script>
}

AutoComplete

asked on 08 Oct 2012

5 answers

352 views

Editing Issues

I've got a grid which is bound via AJAX binding, with a pop-up edit form based upon an editortemplate. The form will only allow certain fields to be updated, and the controller takes this into account.

I've encountered several issues

I can't display some fields as text (for informational purposes) using the html helper DisplayTextFor - integer fields just display 0, and text fields show nothing. However, these fields display ok, when using the TextBoxFor helper (which I don't want!)
When using the Kendo dropdown list, I can get it display the list of values, but it won't display the current value in the edit form - just the first value in the list. I've had to go back to using the standard DropDownListFor helper, which works.

@(Html.Kendo().DropDownListFor(c=>c.HRFlag)

.Name("HRList")

.DataTextField("DisplayText")

.HtmlAttributes(new { value = Model.HRFlag })

.DataValueField("KeyValue")

.DataSource(source=>source

.Read(read=>read.Action("GetEditHRStatusList", "HR"))))

3. When the update is made, the grid isn't being refreshed to display the correct data - sometimes no changes are shown, and sometimes two records are shown duplicated. I've checked the update controller method, and the updated data is being passed back OK.

Controller:-

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Update([DataSourceRequest] DataSourceRequest request, Models.sysVacancies proposal)

{

Models.EVASdBDataContext db = new Models.EVASdBDataContext();

Models.Vacancy originalProposal = (from v in db.Vacancies

where v.ID==proposal.ID

select v).Single();

originalProposal.HRFlag = proposal.HRFlag;

originalProposal.HRVacancyRef = proposal.HRVacancyRef;

db.SubmitChanges();

var query = from v in db.sysVacancies

where v.FinalReview != null & v.VacancyAuthorisation == "Y"

select v;

query = query.OrderByDescending(c => c.SubmissionDate);

return Json(query.ToDataSourceResult(request, ModelState));

}

Grid definition:-

@(Html.Kendo().Grid<EVAS_MVC.Models.sysVacancies>()

.Name("Grid")

.Events(e=>e.Edit("onEdit"))

.Columns(columns=>

{

columns.Bound(p => p.ID).Title("").ClientTemplate("<img src='" + @Url.Content("~/Content/") + "#: HRGif #' alt='Proposal Details'").Filterable(false).Sortable(false);

columns.Bound(p=>p.ID);

columns.Bound(p => p.SubmissionDate).Title("Submission Date").Format("{0:d}");

columns.Bound(p => p.PostTitle);

columns.Bound(p=>p.SubmittingUser).Filterable(false);

columns.Bound(p => p.DirectorateName).Title("Directorate").Filterable(false);

columns.Bound(p => p.DGMName).Title("Manager").Filterable(false);

columns.Bound(p => p.NoOfPosts).Title("Posts").Filterable(false);

columns.Bound(p => p.WTE).Title("WTE").Filterable(false);

columns.Bound(p => p.PayScaleDesc).Title("Pay Scale").Filterable(false);

columns.Bound(p => p.Grade).Title("Grade").Filterable(false);

columns.Bound(p => p.SmartCard).Title("Smart Card?").Filterable(false);

columns.Bound(p => p.ID).Title("").ClientTemplate("<a href='http://ReportServer/ProposalDetails_Dev&id=#: ID #&rs:Command=Render&rs:Format=PDF' target='_blank'><img src='" + @Url.Content("~/Content/Images/pdf.gif") + "' alt='Proposal Details' style='border-width:0;Margin-left:5px;' /></a> <a href='http://getfile.aspx?DocID=#: JobDescID #' target='_blank' style='#: JobDescStyle #'><img src='" + @Url.Content("~/Content/Images/16-message-info.gif") + "' alt='Job Description' style='border-width:0;Margin-left:5px;' /></a><a href='getfile.aspx?DocID=#: PersSpecID #' target='_blank' style='#: PersSpecStyle #'><img src='" + @Url.Content("~/Content/Images/16-message-info.gif") + "' alt='Personal Specification' style='border-width:0;Margin-left:5px;' /></a> <input type='image' src=' " + @Url.Content("~/Content/Images/16-clock.gif") + "' onclick='showTimes(#: ID#);' style='border-width:0;Margin-left:5px;'/>").Filterable(false).Sortable(false);

columns.Command(command =>

{

command.Edit().Text(" ");

});

})

.ToolBar(c=>c.Template("<span style='Margin-right:10px;Margin-left:10px;'>Status:</span>" +

Html.Kendo().DropDownList().Name("StatusList").DataTextField("DisplayText").DataValueField("KeyValue")

.Events(e=>e.Change("onChange"))

.HtmlAttributes(new { style="width:300px;"})

.DataSource(source=>source

.Read(read=>read.Action("GetHRStatusList", "HR"))).ToHtmlString()

))

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource=>dataSource

.Ajax()

.Model(m=>m.Id(p=>p.ID))

.PageSize(20)

.Read(read=>read.Action("HRVacanciesRead","HR"))

.Update(update=>update.Action("Update","HR"))

)

.Pageable()

.Sortable()

.Filterable()

)

I'm using the latest version of the Kendo UI Complete for ASP.NET MVC (2012.2.831), which has solved the issue of null fields being shown as 'null'.

Grid

answered on 08 Oct 2012

0 answers

181 views

Auto Scroll

If a grid row is selected by default when the grid is loading, and if that particular row is not visible in the page i.e. it is the last row of the grid so you have to scroll to see it.
Then after some operation in another page when the grid is reloaded i have a function that auto selects the previously selected row but since it is the last item you cant see it. Is there any way to auto scroll the grid to the selected row.

Grid

asked on 08 Oct 2012

4 answers

268 views

Kendo UI Mvc Problem

Hi,

I am using Visual Studio 2010 and MVC 4.
I am creating a new "Asp.NET MVC 4 Web Application".
Right click and "Kendo UI for Asp.NET MVC" \\ "Convert to Kendo UI for ASP.NET MVC Application" and project is preparing for me.
and I am inserting to index.cshtml "@(Html.Kendo().DatePicker().Name("Birthday"))"
and I am running....
But style is curropted as it appears in the attached file.

Installer and VS Extensions

answered on 08 Oct 2012

1 answer

278 views

Binding Dynamic data to Kendo UI Grid with all the Grid features

Hello,

I am new to Kendo and also to MVC 3. I am trying to bind the grid with Dynamic datatable (It can have 20-25 columns based on the request). Currently I am using the autogenerate to bind the grid. but the problem what I am facing is, I am unable to set the width of each column also also horizantal scroll bar is not appering.

It would be great, if anyone could suggest me better approach to bind the datatable to grid otherthan what I am doing and also the solutions to my problem.

Thanks in advance.

Regards,
Ravi

Grid

answered on 08 Oct 2012

1 answer

162 views

Aggregates in the detail template

Using the aggregates example, I am tryiing to create totals and counts on the header and footer templates in the detail templates. The "sum" or "count" template spacers are not recognized. It gives me a javscript error "sum" not recognized or "value" not recognized". Can you point to an emxample or give me some idea about how to get aggregates int he detail templates

Grid

answered on 04 Oct 2012

0 answers

144 views

How to make a weekly date picker like in teampulse

I was looking at the team pulse demo and the time sheet has a weekly date picker and when you change the date you can see what has been put in for that week. I was wanting to make a time card web app that a user can sign in and enter the number of hours they worked per day so It would take the week they selected and update the view to display the correct dates for that week. I will include the screen shot but my question is how does this get wired up to where it knows the dates of that week? Also this is a MVC 4 app

Brent

Calendar

asked on 04 Oct 2012