Questions on UI for ASP.NET MVC Forum

1 answer

2.6K+ views

Greetings,

I am new to Telerik's MVC controls and also to Jquery in general. I am trying to build a wizard like interface for the attached screen shot using the Telerik window. I can get the first step to load, but when click either of the buttons to load the new view for step 2, nothing happens. The controller fires correctly. It seems like I need to somehow refresh or reload the Telerik window, but I am not sure how to to do this. Any help would be much appreciated.

View

@{

ViewBag.Title = "AddCampaignStep1";

Layout = "~/Views/Shared/_LayoutModal.cshtml";

}

<script type="text/javascript">

function SaveandExit() {

var itemId = $('#btnSaveandExit').attr('itemid');

var url = '@Url.Action("AddCampaignStep1", "AgencyCampaign")';

var data = { Id:itemId };

$.post(url, data, function (result) {

var id = '#postedFor' + postId;

$(id).html(result);

});

}

function SaveandContinue() {

var itemId = $('#btnSaveandContinue').attr('itemid');

var url = '@Url.Action("AddCampaignStep1", "AgencyCampaign")';

var data = { Id: itemId };

$.post(url, data, function (result) {

var id = '#postedFor' + postId;

$(id).html(result);

});

}

</script>

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

<h4 class="modal-title" id="addCampaignModalLabel">Add New Campaign</h4>

<div class="center">

<img src="~/Content/img/progress-add_campaign-step1.png">

</div>

<fieldset>

<div class="form-group">

<label for="inputCampaingName" class="control-label">Campaign Name:</label>

<input type="text" name="inputCampaingName" id="inputCampaingName" class="form-control" value="">

</div>

<div class="checkbox">

<label>

<input type="checkbox" name="inputCampaingEndsNotification" id="inputCampaingEndsNotification"> Email me when campaign ends

</label>

</div>

</fieldset>

<input id="btnSaveandExit" itemid="0" type="button" onclick="SaveandExit()" class="btn btn-default" value="Save and Exit"/>

<input id="btnSaveandContinue" itemid="1" type="button" onclick="SaveandContinue()" class="btn btn-primary modal-btn" value="Save and Continue" />

}

Controller

public ActionResult AddCampaignStep1(int id)

{

return View("AddCampaignStep2"); //this line fires with the correct id

}

Window

answered on 08 May 2015

1 answer

1.1K+ views

Events on Grid.Editable.Window

I am trying to get events to fire on a popup window used for the editor on a grid.  My code is below.  When I review the generated script, the .Window does not get configured with "Open" or "Activate".  Can anyone tell me what I need to do to get these events to fire?

@(Html.Kendo().Grid<FooRecord>()

.Name("cFooGrid")

.Columns(c =>

{

c.Bound(f => f.Foo);

c.Bound(f => f.Bar);

c.Bound(f => f.Bas);

c.Command(a => a.Edit());

})

.Editable(e => e

.Mode(GridEditMode.PopUp)

.Window(w => w.Events(v => v.Open("OnEditStart").Activate(@<text>function () {console.log("EditWindow.Activate")}</text>)))

)

.ToolBar(t =>

{

t.Create();

})

.DataSource(ds => ds

.Ajax()

.Create(r => r.Action("UpdateIndex", "Home"))

.Read(r => r.Action("IndexList", "Home"))

.Update(u => u.Action("UpdateIndex", "Home"))

.Model( m => {

m.Id(f => f.Foo);

})

)

Grid

answered on 08 May 2015

1 answer

163 views

Disable global errorhandling

Hi,

How can I disable error to get to the global error handlar, when we define a local error handle for Kendo grid? I've tried to use e.preventDefault(), but it doesn't work.

Global error handling

$(document).ajaxError(function (e, request) {

setError(request);

});

Example of local error handling

<script>

function onError(e, args) {

//TODO: Stop error from being propagated to global .ajaxError

HandleError(e);

}

</script>

@(Html.Kendo().Grid<Premise>()

.Name("grdName")

<-- SNIP -->

.DataSource(ds => ds

.Ajax()

<-- SNIP -->

.Events(e => e.Error("onError")

))

Any ideas on how to solve it?

Grid

answered on 08 May 2015

1 answer

155 views

Export to Excel in Chrome issue

I was exporting to Excel just fine in Chrome when I started using this product. Now I get an "Aw, Snap" error anytime I do it. Firefox works just fine. I cleared cache/cookies, disabled virus scanner, rebooted machine, even reinstalled Chrome.

Here is the grid code:

this.Html.Kendo().Grid<EmployeeHistoryGridVM>()
.Name("grid")
.Filterable()
.ColumnMenu(x => x.Filterable(true))
.Sortable()
.Groupable()
.ToolBar(toolbar =>
{
toolbar.Excel();
//toolbar.Custom().Name("foo").Text("Perform Action").Action("PerformAction", "EmployeeHistory");
//toolbar.Template(x => { this.Html.Write("test"); });
})
.Scrollable(scrollable => scrollable.Height(430))
.Columns(col =>
{
col.Bound(x => x.Id).Width(120).Sortable(false).Locked();
col.Bound(x => x.CategoryName).Width(120).Sortable(true);
col.Bound(x => x.CompanyName).Width(120).Sortable(true).Filterable(true);
col.Group(g =>
g.Title("Month 12th Count")
.HeaderHtmlAttributes(new { style = "text-align: center;"})
.Columns(c =>
{
c.Bound(x => x.Month1_12Count).Title("Month 1").Filterable(true).HeaderHtmlAttributes(new { style = "white-space: normal"}).Width(120);
c.Bound(x => x.Month2_12Count).Title("Month 2").Filterable(true).HeaderHtmlAttributes(new { style = "white-space: normal" }).Width(120);
c.Bound(x => x.Month3_12Count).Title("Month 3").Filterable(true).HeaderHtmlAttributes(new { style = "white-space: normal" }).Width(120);
}));
col.Bound(x => x.Month1).Filterable(true).Width(120);
col.Bound(x => x.Month2).Filterable(true).Width(120);
col.Bound(x => x.Month3).Filterable(true).Width(120);
col.Bound(x => x.PayCycleCode).Sortable(true).Filterable(true).Width(120);
col.Bound(x => x.Quarter).Sortable(true).Filterable(true).Width(120);
col.Bound(x => x.TaxCode).Sortable(true).Filterable(true).Width(120);
col.Bound(x => x.Year).Sortable(true).Filterable(true).Width(120);
})
.Excel(excel => excel
.FileName("test.xlsx")
.Filterable(true)
.AllPages(true)
//.ForceProxy(true)
.ProxyURL(Url.Action("Export_Save", "EmployeeHistory")))
.Filterable()
.Resizable(x => x.Columns(true))
.Reorderable(x => x.Columns(true))
//.Events(e => { e.ColumnMenuInit("filterMenuInit"); })
.Pageable(pageable => pageable
.ButtonCount(5)
.Info(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Read(read => read.Action("GetData", "EmployeeHistory").Data("sendAntiForgery")))
.ToHtmlString();

And here is the Controller code:

[HttpPost]
public ActionResult Export_Save(string contentType, string base64, string fileName)
{
var fileContents = Convert.FromBase64String(base64);

return File(fileContents, contentType, fileName);
}

public ActionResult GetData([DataSourceRequest]DataSourceRequest request)
{
//request.Deflatten(EmployeeHistoryGridVM.KendoDBMapping);

IQueryable<ViewCompanyStatus> details = this.DataManager.AppDataContextManager.GetViewCompanyStatusRepository()
.Find(x => x.Id != 0) as IQueryable<ViewCompanyStatus>;

Func<ViewCompanyStatus, HistoryCompanyStatsGridVM> InfoFactory = delegate(ViewCompanyStatus model)
{
return new HistoryCompanyStatsGridVM
(
model
);
};

DataSourceResult result = details.ToDataSourceResult(request, x => InfoFactory(x));

// large data sets will blow us the F up for export
//JsonResult r = Json(result, JsonRequestBehavior.AllowGet);

var serializer = new JavaScriptSerializer { MaxJsonLength = Int32.MaxValue };
var result2 = new ContentResult
{
Content = serializer.Serialize(result),
ContentType = "application/json"
};
return result2;
}

Thanks in advance!

Grid

answered on 08 May 2015

2 answers

394 views

How to costomize a popup form in Telerik Grid / Popup editing

I am using Telerik Grid / Popup editing. When the user clicks the Add New Record/Edit button, he/she needs to see a form with several fields that are not from the grid. How can that be done?

In other words, the form needs to be customized.

For Example:

My grid contains the following columns:

1) name

2) phone

3) fax

But the popup should contain:

1) email

2) address

3) state.

I am using Telerik MVC with razor and C#.

Grid

answered on 08 May 2015

3 answers

242 views

Changing labels from json data

Hi guys,

I have a pie chart that I'm fetching json data from my controller to populate. The json is pretty basic:

[

{

type: "AddOutageRequest",

count: 155

},

{

type: "AuthorizationRequest",

count: 362

},

{

type: "CurrentOutageRequest",

count: 2118

},

{

type: "PlannedOutageRequest",

count: 97

},

{

type: "RegionRequest",

count: 1212

}

]

This is good and I fetch it with my controller method but the labels on the pie chart/legend/etc. are (of course) the same as the "type" field. I want to present it in a more friendly manner so for example show "PlannedOutageRequest" as "Planned Outages" on the chart.

How would I do this in my chart wrapper (as I can't change the backend) or would I have do some javascript after the chart loads?

Here's my chart markup if that helps:

<div class="chart-wrapper">

@(Html.Kendo().Chart()

.Name("serverRequestsByTypeChart")

.Legend(legend => legend.Position(ChartLegendPosition.Bottom))

.Series(series =>

{

series

.Pie("count", "type")

.Labels(labels => labels

.Template("#= category #: \n #= value#")

.Background("transparent")

.Visible(true)

); ;

})

.DataSource(datasource =>

{

datasource.Read(read => read.Action("RequestTypesByTimePeriod", "Data"));

})

)

</div>

Thanks!

Chart

answered on 07 May 2015

9 answers

1.5K+ views

DateTime Column Filter

In Kendo UI Grid, if you have a dateTime Column then the column filter input has a date picker but no time picker. Due to this if you select option IsEqualTo and give a date then you get zero results as the time is set to 00:00:00 in the filter but the columns have some time value.

eg.

values in my column are
08-10-2012 15:08:00
05-09-2012 15:23:00

and when u use the filter then the value in the filter is
08-10-2012 00:00:00

hence when You give the option of IsEqualTo then you get zero values.

Grid

answered on 07 May 2015

4 answers

743 views

Cascade DropDownList keep selected value after initial loading

Hey...

I´m developing a CRUD application and I have a cascade ddl working fine in my Create view :

@Html.Kendo().DropDownListFor(model => model.CarSelected).BindTo(Model.Cars)

@(Html.Kendo().DropDownListFor(x => x.CarModelSelected).DataTextField("Name").DataValueField("Id")

.Enable(false).AutoBind(false).OptionLabel("Select"))

.CascadeFrom("CarSelected")

.DataSource(source => source.Read(read => read.Action("CarModels", "Car")

.Data("filter")).ServerFiltering(true))

That works great...

But in a Edit view, I have to previous load the car model selected, so I have something like that :

public ActionResult Edit(int id)

{

var car = repository.load(id);

CarVm carVm = car.InjectFrom(car);

...

carVm.CarModelSelected = car.Model.Id;

return View(carVm);

}

It works great and my inital Edit view is loaded fine...
Now when I change the car, it loads all car model (cascade) but the CarModelSelected keep the inital value, and the CarModel DropDown dont reset to OptionLabel "Select" .

So, If open a View with :Car A Model AB, change car to "Select", and after select Car A again, the model AB will be selected automatically

How can I fix that?

Thanks

DropDownList

answered on 07 May 2015

1 answer

285 views

Data Loss from DatePicker In Grid Inline Edit

Seeing an interesting problem when combining DatePicker and Grid functionality in the inline editing.

The date is editable without clicking the edit button. Clicking the edit button returns the date field to a input box and datepicker functionality is lost and when cancelling an edit the date is lost entirely and becomes an empty field.

Downloaded some other code samples out there and seeing some of the same issues. Anyone come upon these?

Cshtml:

<div>

@(Html.Kendo().Grid(Model)

.Name("commissionGrid")

.Columns(columns =>

{

columns.Bound(p => p.CommissionId).Hidden();

columns.Bound(p => p.TenantId).Hidden();

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

columns.Bound(p => p.StartDate).HtmlAttributes(new

{

@class = "templateCell"

}).ClientTemplate(

Html.Kendo().DatePicker()

.Name("FDPicker_#=CommissionId#")

.Format("{0:MM/dd/yyyy}")

.HtmlAttributes(new { data_bind = "value:StartDate" })

.ToClientTemplate().ToString()

).Format("{0:MM/dd/yyyy}");

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

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

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Title("Commands");

})

.Events(ev => ev.DataBound("db"))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Navigatable()

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(false)

.PageSize(10)

.ServerOperation(true)

.Model(model =>

{

model.Id(p => p.CommissionId);

model.Field(p => p.CommissionId).Editable(false);

})

.Update(update => update.Action("EditingInline_Update", "Commissions"))

.Destroy(destroy => destroy.Action("EditingInLine_Destroy", "Commissions"))

)

</div>

JavaScript

function db(e) {

var grid = this;

$(".templateCell").each(function () {

eval($(this).children("script").last().html());

var tr = $(this).closest('tr');

var item = grid.dataItem(tr);

kendo.bind($(this), item);

});

}

Grid

answered on 07 May 2015

1 answer

183 views

DropDownList displays Index instead of display text

My Goal:

On Edit - display display text associated with DropDownList ID selected in lookup table.

Problem:

When creating a record, the DropDownList will lookup the value and display the associated text. Because the field is used to store only the "index" or ID of the associated record, when editing, only the integer index is displayed. I would like the text to be displayed as if it was just selected when the edit window is opened.

I have just begun working with Kendo and just not sure of the syntax.

Thank you!

DropDownList

answered on 07 May 2015