Questions on UI for ASP.NET MVC Forum

1 answer

839 views

Custom Toolbar Template in MVC Grid

I need to create a custom toolbar template for a mvc detail grid.

here is my detail grid definition:

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

@(Html.Kendo().Grid<CNX.Domain.Entities.CnxRailcar>()

.Name("IncompleteTrains_#=Id#")

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

.Columns(columns =>

{

columns.Bound(o => o.Id).Visible(false);

columns.Bound(o => o.TRAIN_GUID).Visible(false);

columns.Bound(o => o.EQUIPMENT_NUMBER).Width(125);

columns.Bound(o => o.SEQUENCE_NUMBER).Width(75) ;

columns.Bound(o => o.PILE).Width(75);

columns.Bound(o => o.CLASS).Width(75);

columns.Bound(o => o.LOT).Width(75);

columns.Bound(o => o.INBOUND_TRACK).EditorTemplateName("_inboundTrackDropDown").Width(100);

columns.Bound(o => o.EMPTY_TRACK).EditorTemplateName("_emptyTrackDropDown").Width(100);

columns.Bound(o => o.AS_RECEIVED_WEIGHT).Width(100);

columns.Bound(o => o.STATUS);

})

.DataSource(dataSource => dataSource.Ajax()

.PageSize(10)

.Update(update => update.Action("CnxRailcarUpdate" , "MenuTrain" , Model))

.Read(read => read.Action("CnxRailcars", "MenuTrain", new { trainGuid = "#=Id#" })

.Type(HttpVerbs.Post))

.Update(update => update.Action("CnxRailcarUpdate", "MenuTrain", Model).Type(HttpVerbs.Post))

.Model(model => model.Id(o => o.Id)))

.Pageable()

.Sortable()

.Filterable()

.Events(ev => ev.Save("incompleteRailcars_Save"))//.DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))

.ToolBar(tb =>

{

tb.Template(() =>

{

@Html.Kendo().DropDownList().Name("Lot_#=Id#").DataTextField("val").DataValueField("id").DataSource(dataSource => dataSource.Read(read => read.Action("GetTrainLots", "MenuTrain", new { trainGuid = "#=TRAIN_GUID#" })));

});

})

.ToClientTemplate()

)

</script>

Here are my controller actions :

[HttpPost]

public ActionResult CnxRailcars(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)

{

return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));

}

[HttpPost]

public JsonResult GetTrainLots(Guid trainGuid, [DataSourceRequest] DataSourceRequest request)

{

return Json(cnxRailcarRepository.Railcars(trainGuid).ToDataSourceResult(request));

}

I just can figure out how to force the dropdownlist's datasource to read. Should i be reading from the datasource in the grid's databound event?

Maybe something like this

.Events(ev => ev.Save("incompleteRailcars_Save")).DataBound("function(e){setTimeout(function(){$('\\#Lot_#=Id#').data('kendoDropDownList').dataSource.read()})}"))

Maybe i'm going completely in the wrong direction. Any ideas on what i'm doing wrong or missing here?

Thanks in advance

Grid

answered on 15 Nov 2013

2 answers

222 views

Initially loading data locally with remote data source

I have Grid View which I'm using with a remote data source but initially populating with local data. Basically the same requirement as the following
http://www.kendoui.com/forums/kendo-ui-web/grid/initial-load-locally-with-remote-datasource.aspx except that I'm using .NET MVC extensions.

Its essentially working as a normal remotely loaded grid view but I'm also passing data with a view model on the initial page load.

This seems to work fine (at least with a smallish data set) however I can't find any other examples of anyone doing this which makes me wonder if I'm being stupid and there is a reason I shouldn't do this? Is the fact the I'm using 2 data set likely to cause issues that I've not yet discovered? Would the fact I'm not passing my data DataSourceResult in Index() mean I bring more data to the server than I need to? The data set for this isn't big, but it's being pulled together from various sources so it is quite slow, so speed is a big consideration for me.

My Grid view is as follows

@model IEnumerable<MVCCOD.ViewModels.ProviderDisputeViewModel>

@(Html.Kendo().Grid(Model).Name("Disputes").Columns(c => {

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

c.Bound(p => p.BillingPrvName);

/* etc */

}

).

DataSource(d => d

.Ajax()

.Read(r => r.Action("JsonRead", "ProviderDispute")).PageSize(50)

).

Pageable().

Sortable())

Controller is below where the view is loaded via ActionIndex

public class ProviderDisputeController : Controller

{

public ActionResult Index()

{

return View(GetDisputes());

}

public ActionResult JsonRead([DataSourceRequest] DataSourceRequest request)

{

return Json(GetDisputes().ToDataSourceResult(request));

}

private List<ProviderDisputeViewModel> GetDisputes()

{

/* etc */

}

Grid

answered on 14 Nov 2013

1 answer

342 views

Kendo Grid Header - column context menu replaces default "sort" when clicking Header text

I have a Kendo grid with sorting, filtering and column menu enabled. Out of the box, there are two clickable actions in each column header:
* Clicking the title in the column header sorts the data in that column
* Clicking the chevron column menu icon displays the column menu options

What I’d like to accomplish - instead of a sort being applied when the title in the column header is clicked is for the column menu options (sort asc, sort desc, columns, filter) to appear. Essentially, I want the title in each column header to take the place of the chevron icon. Is this possible? The main motivation is that some of the columns are just too narrow (ex: 40px)to properly display all the default icons. Is there some event that can be intercepted to do this? BTW, I am using the MVC Html wrappers to setup the grid - if that matters.

Thanks,
R Cornish

Grid

answered on 14 Nov 2013

9 answers

736 views

Preserve grid state in a cookie - Razor syntax

Hi, i am trying to follow this guide and rewrite it to the Razor syntax:
Preserve grid state in cookie example.

The difference from my code and the example code is that they use AutoBind: false.
I cant use that in Razor because i initialize the data into the model when the view is rendered.

Another difference is that the example uses schema: syntax, don't think i need that when using razor, Am i correct?

Here is my razor code:

01.@model IEnumerable<Backend.ViewModel.ViewSalon>

02.<div id="salonDetail">

03.

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

05. .Name("Grid")

06. .Columns(c =>

07. {

08. c.Bound(m => m.Id).Width(30);

09. c.Bound(m => m.Name).Width(110).HtmlAttributes(new { @class = "customerName" });

10. c.Bound(m => m.Telephone).Width(100);

11. c.Bound(m => m.ContactPerson).Width(100);

12. c.Bound(m => m.City).Width(50);

13. c.Bound(m => m.StatusId).HtmlAttributes(new { @class = "statusid" }).Hidden();

14. c.Bound(m => m.Kundnr).Width(50);

15.

16. })

17. .Scrollable()

18. .DataSource(dataSource => dataSource

19. .Ajax()

20. .ServerOperation(false)

21. )

22.

23. .ColumnMenu()

24. .Reorderable(reorder => reorder.Columns(true))

25. .Resizable(resize => resize.Columns(true))

26. .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

27. .Sortable()

28. .Filterable()

29. .Events(events => events.Change("onChange").DataBound("onDataBound").DataBinding("onDataBinding"))

30. .HtmlAttributes(new { style = "height: 408px" })

31. )

32.</div>

01.@* Loads cookie support *@

02.<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.2/jquery.cookie.js"></script>

03.

04.<script type="text/javascript">

05. //START: *** Save grid state ***

06.

07. function onDataBound(e) {

08. var grid = $(this).data("kendoGrid");

09. var dataSource = this.dataSource;

10.

11. var state = kendo.stringify({

12. page: dataSource.page(),

13. pageSize: dataSource.pageSize(),

14. sort: dataSource.sort(),

15. group: dataSource.group(),

16. filter: dataSource.filter()

17. });

18.

19. $.cookie("customerState", state);

20.

21. if ($.cookie('customerRows')) {

22. $.each(JSON.parse($.cookie('customerRows')), function () {

23. var item = dataSource.get(this);

24. var row = grid.tbody.find('[data-uid=' + item.uid + ']');

25. row.addClass('k-state-selected');

26. });

27. }

28. }

29.

30. function onChange(e) {

31. var grid = $(this).data("kendoGrid");

32. var ids = grid.select().map(function () {

33. return grid.dataItem($(this)).Id;

34. }).toArray();

35. $.cookie('customerRows', JSON.stringify(ids));

36. }

37.

38. function parseFilterDates(filter, fields) {

39. if (filter.filters) {

40. for (var i = 0; i < filter.filters.length; i++) {

41. parseFilterDates(filter.filters[i], fields);

42. }

43. }

44. else {

45. if (fields[filter.field].type == "date") {

46. filter.value = kendo.parseDate(filter.value);

47. }

48. }

49. }

50.

51. function onDataBinding() {

52.

53. }

54.

55. $(document).ready(function () {

56. var grid = $('#Grid').data("kendoGrid");

57.

58. var state = JSON.parse($.cookie("customerState"));

59. if (state) {

60. if (state.filter) {

61. parseFilterDates(state.filter, grid.dataSource.options.schema.model.fields);

62. }

63. grid.dataSource.query(state);

64. }

65. else {

66. grid.dataSource.read();

67. }

68.

69. // END: *** Save grid state ***

70.</script>

Grid

answered on 13 Nov 2013

1 answer

49 views

Combo box server side filter working only in IE10 but not IE9/8

Hi,

Combo box server side filter working only in IE10 but not IE9/8. When i open developer tool ( under network => start capturing)
ajax request is not sending for IE 9/8 but ajax request sending in IE10. I saw the HTML source code for both ie9 and ie10 . Its was same.

Please find attached scripts and css files

HTML Code.(.cshtml)

<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.metro.min.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.metro.min.css")" rel="stylesheet" type="text/css" />



    <script type="text/javascript"  src="@Url.Content("~/Scripts/kendo/2013.2.918/jquery.min.js")"></script>

    <script type="text/javascript"  src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.all.min.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js")"></script>





<

div>

@(Html.Kendo().ComboBox()

.Name("countires")

.Filter("contains")

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

.Placeholder("please select")

.DataTextField("Text")

.DataValueField("Value")

.DataSource(source =>

source.Read(read =>

{

read.Url("http://localhost:59590/api/Search/GetCountires");

}).ServerFiltering(true))

.HighlightFirst(true)

.IgnoreCase(true)

.AutoBind(false)

.Suggest(true)

)

</div>

Server side code

[HttpGet]

public List<MVC.SelectListItem> GetCountires(string text)

{

text = string.IsNullOrEmpty(text) ? null : text.ToUpper();

DataTable results = Counties.GetALLCountires(text);

return ConvertToSelectListItem(results);

}

ComboBox

answered on 13 Nov 2013

4 answers

477 views

Load toolbar template from x-kendo-template

Hi

How can i use the x-kendo-template for my grid toolbar?

Before I got something like this:
kendoGrid({
toolbar: kendo.template($("#toolbarTemplate").html())
});

and a corresponding script like:
<script type="text/x-kendo-template" id="toolbarTemplate">
<div class="toolbar">
</div>
</script>

how can i use the same template script inside asp.net mvc kendo ui grid
@(Html.Kendo().Grid(Of CProductionDataGridViewModel)().Name("datagrid").ToolBar(Sub(toolbar)
toolbar.Template("kendo.template($('#toolbarTemplate').html()")
End Sub))

Thanks

Grid

answered on 12 Nov 2013

3 answers

686 views

MultiSelectFor and Values

Here is a code snip:

@Html.Kendo().MultiSelectFor(model => model.Programs).BindTo((SelectList)ViewBag.Programs).DataTextField("Text").DataValueField("Id").Name("SelectedProgramIds ")

ViewBag.Programs is populated by:

Models.Program[] obj = model.List();

ViewBag.Programs = new SelectList(obj, "Id", "Name", project.Programs);

I'm also using:

public IEnumerable<String> SelectedProgramIds { get; set; }

.. as the property for the saved value in the model.

After I POST, SelectedProgramIds contains the Text Name (but not values) of the entries in the MultiSelect control. How can I get the Value as set by DataValueField(), instead of the DataTextField() after POST?

Also, when the control loads, how can existing items be selected? Currently the box is empty.

MultiSelect

answered on 12 Nov 2013

5 answers

552 views

grid popup insert/update success view

hey guys.

I'm using a grid with popup editmode which looks like:

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

.Name("Pattern")

.ToolBar(toolbar =>

{

toolbar.Create().Text("New Pattern");

}

)

.DataSource(dataSource =>

dataSource.Ajax().PageSize(50)

.Model(model =>

{

model.Id(s => s.RegExID);

model.Field(s => s.Category).DefaultValue(new Category());

model.Field(s => s.Table).DefaultValue(new ExpressionTable());

model.Field(s => s.Version).DefaultValue("%");

}

)

.Create(create => create.Action("CreatePattern", "Pattern"))

.Destroy(destroy => destroy.Action("DeletePattern", "Pattern"))

.Update(update => update.Action("UpdatePattern", "Pattern"))

.Read(reader => reader.Action("LoadPattern", "Pattern"))

)

.Sortable()

.Selectable()

.Pageable(pager =>

{

pager.Enabled(true).Refresh(true).PageSizes(new int[] { 50, 100, 150 });

pager.Info(false);

})

.Scrollable(s => s.Enabled(true).Height(500))

.Filterable(filterable =>

filterable.Extra(false).Operators(operators => operators

.ForString(str =>

str.Clear()

.StartsWith("Starts with")

.Contains("Contains")

)

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PatternPopUp")

)

The Template used looks like this:

@Html.HiddenFor(model => model.RegExID)

<div class="editor-label">

@Html.LabelFor(model => model.Table)

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.Table)

.OptionLabel("Please select a value")

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

.AutoBind(true)

.Name("Table")

.DataTextField("Name")

.DataValueField("TableID")

.Events(e =>

{

e.Select("select");

e.DataBound("bound");

}

)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetRegExpressions", "Pattern");

})

.ServerFiltering(true);

})

)

</div>

<div id="regSW">

<div class="editor-label">

@Html.LabelFor(model => model.SoftwareName)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.SoftwareName)

@Html.ValidationMessageFor(model => model.SoftwareName)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.SoftwarePublisher)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.SoftwarePublisher)

@Html.ValidationMessageFor(model => model.SoftwarePublisher)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Version)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Version)

@Html.ValidationMessageFor(model => model.Version)

</div>

<div id="regMachine">

<div class="editor-label">

@Html.LabelFor(model => model.InstallSource)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.InstallSource)

@Html.ValidationMessageFor(model => model.InstallSource)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Category)

</div>

<div class="editor-field">

@(Html.Kendo().DropDownListFor(model => model.Category)

.OptionLabel("Please select a value")

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

.AutoBind(false)

.Name("Category")

.DataTextField("Name")

.DataValueField("CategoryID")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCategories", "Software");

})

.ServerFiltering(true);

})

)

</div>

<div class="editor-label" id="regDeslbl">

@Html.LabelFor(model => model.Description)

</div>

<div class="editor-field" id="regDesfld">

@Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", style = "width: 200px" })

@Html.ValidationMessageFor(model => model.Description)

</div>

<script>

$("#regSW").hide();

$("#regMachine").hide();

</script>

what I want to implement now is something like this:
after the sumbit(save, update) button is clicked I don't want the window to close. I want it to remain open and display something like a progressbar or an ajax loader to inform the user that sth. is happening right now and there's no need to submit again.

in the background there will be items added to the database and I want to display the amount of items added on a new view.

when the db operation is finished the loader should disappear and something like: 6 items have been added to the database should be displayed on a lets call it success view.

hopefully there's a way without creating kendo windows, having partial views with the content displayed and an ajax.beginform.

thanks in advance
cheers, tom

Grid

answered on 12 Nov 2013

0 answers

218 views

RadHtmlChart TooltipsAppearance ClientTemplate does not display data on binding to a value from database.

Hi,
Facing an issue while binding tooltip to database item, below is the code for reference -

<Series>
<telerik:ColumnSeries Name="Power" Stacked="true" DataFieldY="TotalPower" AxisName="Power">
<Appearance>
<FillStyle BackgroundColor="#36b8f4"></FillStyle>
</Appearance>
<LabelsAppearance Position="Center" Visible="false">
</LabelsAppearance>
<TooltipsAppearance ClientTemplate="#= dataItem.TotalPower#">
</TooltipsAppearance>

<%--
<TooltipsAppearance ClientTemplate="#= kendo(\'{0:dd MMM yy}\', dataItem.Date)#<br/>Power: #= kendo.format(\'{0:N2}\',dataItem.TotalPower)# kW">
</TooltipsAppearance>
--%>
<%--
<TooltipsAppearance ClientTemplate="#=dataItem.Date#<br/>Power: #=dataItem.TotalPower# kW">
</TooltipsAppearance>--%>

</telerik:ColumnSeries>
</Series>

When i use ClientTemplate in TooltipsAppearance to bind tooltip to TotalPower value (this value comes from dataset), it shows "undefined" on mouse over, and instead of ClientTemplate if dataformatstring is used then it display the value
(<TooltipsAppearance DataFormatString="{0}"></TooltipsAppearance>).

My requirement is that, i want to display both Date and TotalPower values in tooltip. Also, tried using kendo after googling this issue, but still without any success.

Please help as I'm stuck into this.

ToolTip

asked on 12 Nov 2013

6 answers

636 views

Remove file from filelist

How to remove file from Kendo Upload MVC file-list which is hidden by default? Previously in Telerik Upload I have used the code below but it do not works anymore.

this.removeFile = function (fileName) {
fileName = fileName.split("'")[0];
$('span.k-filename[title="' + fileName + '"]').parent().remove();
};

Upload

answered on 12 Nov 2013