Questions on UI for ASP.NET MVC Forum

3 answers

115 views

Grid not refreshing after an update with a DB Trigger

I have a Kendo Grid with some environments data. One of the fields of the grid is "isDefault" wich recieve 1 or 0 (for true or false). In the database I have a trigger that when some record is set to isDefault = 1 any other record is update to isDefault = 0, just to make sure there is only one default environment.The Kendo grid is working fine, it binds the data and updates the records just fine but after the update, the grid is not refreshing all the records and if there was, lets say, record 1 with isDefault =1 and I update record 4 to isDefault = 1 the trigger is fired and updates all others records to isDefault = 0 but the grid still showing record 1 with isDefault = 1 and now record 4 with isDefault = 1This is the code on my view:

Html.Kendo().Grid<Models.Environment>()

.Name("environmentGrid")

.Sortable()

.ToolBar(tb => tb.Create())

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

.Columns(cols =>

{

cols.Bound(c => c.Name).Width(150).Sortable(true);

cols.Bound(c => c.ConnectionString).Width(150).Sortable(true);

cols.Bound(c => c.Template).Width(150).Sortable(true);

cols.Bound(c => c.isDefault).Width(150).Sortable(true);

cols.Bound(c => c.StatusID).Width(150).Sortable(true);

cols.Command(command => { command.Edit();}).Width(60);

})

.DataSource(ds => ds

.Ajax()

.Model(model =>

{

model.Id(m => m.EnvironmentID);

})

.Read(r => r.Action("GetEnvironments", "Admin"))

.Update(update => update.Action("UpdateEnvironments", "Admin"))

.Create(update => update.Action("UpdateEnvironments", "Admin"))

)

and this is the code on my controller:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult UpdateEnvironments([DataSourceRequest] DataSourceRequest dsRequest, Environment environment)

{

environment.ModifiedBy = userName;

if (environment != null && ModelState.IsValid)

{

if (environment.EnvironmentID != 0)

{

var toUpdate = xgr.EnviromentRepository.ListAll().FirstOrDefault(p => p.EnvironmentID == environment.EnvironmentID);

TryUpdateModel(toUpdate);

}

xgr.EnviromentRepository.Save(environment);

}

return Json(ModelState.ToDataSourceResult());

}

Thank you in advance for your answers.

Grid

answered on 26 Jun 2014

2 answers

327 views

ASP.NET MVC 5 Sorting not working

I am developing with Kendo UI Grid with MVC 5. I am finding that I cannot appear to get the sorting working on my columns - I have read the Thread here - http://www.telerik.com/forums/grid-sorting-filtering---doesn-t-work but looking at my Bundle configs it looks like I have the correct js files included and looking at the Network in F12 as well it looks like they have been included. I am using Bootstrap as well in my site - is there possibly something else needed to be included?

Bundle configs are as below:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));

In my _Layout.cshtml I have the following in the <head> section

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")

After @RenderBody() in _Layout.cshtml I have the includes for bootstrap

@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/initialize")
@RenderSection("scripts", required: false)

The folllowing shows the config of my Grid

@(Html.Kendo().Grid<Car.Web.Models.CarViewModel>()
.Name("CarView")
.Columns(columns =>
{
columns.Bound(c => c.Name).Width(180);
columns.Bound(c => c.ModelNo).Width(280);
columns.Bound(c => c.Colour).Width(120);
columns.Bound(c => c.FuelType).Width(65);
})
.HtmlAttributes(new { style = "height: 420px;" })
.Scrollable()
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetCarById", "api/Car").Type(HttpVerbs.Post))
)
)

Note I am using WebAPI controller - the CarController in my API folder looks like below:

public DataSourceResult Read([DataSourceRequest] DataSourceRequest request)
{
//note stubbed data 1 will need to be passed in as id
return GetCarById(1).ToDataSourceResult(request);
}


public IEnumerable<CarViewModel> GetCarById(int carId)
{
// call to service layer to get data
var carResponse = _carService.GetCarDataById(carId);


// map responses to grid

return MapCarSelectView(carResponse );
}

private static IEnumerable<CarViewModel> MapCarSelectView(IEnumerable<CarResponse> carResponses)
{
return carResponses.Select(carResponse => new CarViewModel
{
Id = carResponse.Id, CarName = carResponse.Name, CarModelNo = carResponse.ModelNo, Colour = carResponse .Colour, FuelType= carResponse.FuelType
}).ToList();
}

The data is getting returned to the table correctly by neither the Numeric column of ModelNo nor the Alphabetic columns of name/colour/fuel type are not getting sorted when I click the column header? Is there something missing in my configurtaion?

Grid

answered on 25 Jun 2014

1 answer

120 views

refreshing all rows updated after edit

I have grid using ajax binding that I edit with a popup editor. When I edit a row I also update the data in rows related to the first.

Is it possible to refresh all of the updated rows without reloading all of the rows?

I've added the updated rows to the list that is returned by the update method but that doesn't refresh the updated rows.

return Json(itemList.ToDataSourceResult(dsRequest));

If it's not possible what is the best way to parse the the response object returned by the grids datasource RequestEnd method? I would like to read one of the fields in the response.

Grid

answered on 24 Jun 2014

3 answers

893 views

MultiSelect in Grid Popup Editor not binding values on initial load.

So I have a grid as per:

01.Html.Kendo().Grid<ProvisionMapModel>()

02.

03. .Name("ProvisionMapGrid")

04. .ToolBar(toolbar => toolbar.Create())

05. .Columns(

06. columns =>

07. {

08. columns.Bound(c => c.ID).Visible(false);

09. columns.Command(c => c.Edit()).Width(100).Lockable(false).Locked(true);

10. columns.Bound(c => c.Name).Width(200).Locked(true);

11. columns.Bound(c => c.CohortNumber).Width(50);

12. columns.Bound(c => c.Details).Width(50);

13. columns.Bound(c => c.GroupSize).Width(50);

14. columns.Bound(c => c.Wave).Width(50);

15. columns.Bound(c => c.LengthOfSession).Format("{0:HH:mm}").Width(50);

16. columns.Bound(c => c.HourlyRate).Visible(false);

17.

18. columns.Bound(c => c.NumberOfSessions).Width(50);

19.

20.

21.

22. columns.Bound(c => c.StartDate).Format("{0:dd MMM yy}").Width(150);

23. columns.Bound(c => c.StartTerm).Title("Term").Width(100);

24. columns.Bound(c => c.EndDate).Format("{0:dd MMM yy}").Width(150);

25. columns.Bound(c => c.EndTerm).Title("Term").Width(100);

26. columns.Bound(c => c.StudentList).ClientTemplate("<span class=\"badge\">#=StudentList.length#").Width(50);

27.

28. @*columns.Template(@<text></text>).ClientTemplate("<a class='btn btn-sm btn-primary' href='" + @Url.Action("Details", "Reports", new { area="ProvisionMap", id="#=ID#" }) + "'><span class=\"glyphicon glyphicon-user\"></span> Details</a>");*@

29.

30. }

31. )

32. .Editable(edit =>

33. edit.TemplateName("ProvisionMapEditor").Mode(GridEditMode.PopUp)

34. .Window(window =>

35. {

36. window.HtmlAttributes(new { @class = "kendo-popup-editor" });

37. })

38.

39. )

40. .DataSource(ds =>

41. ds.Ajax().ServerOperation(true)

42. .Read(read => read.Action("ReadProvisionMap", "Home", new { area = "ProvisionMap" }))

43. .Create(create => create.Action("CreateProvisionMap", "Home", new { area = "ProvisionMap" }).Data("sendAntiForgery"))

44. .Update(update => update.Action("UpdateProvisionMap", "Home", new { area = "ProvisionMap" }).Data("sendAntiForgery"))

45..Events(events => events.Error("NewError_Handler"))

46. .Model(model =>

47. {

48. model.Id(m => m.ID);

49. model.Field(m => m.ID).DefaultValue(Guid.NewGuid());

50.

51. model.Field(m => m.Details);

52. model.Field(m => m.GroupSize);

53. model.Field(m => m.Wave);

54. model.Field(m => m.LengthOfSession);

55. model.Field(m => m.HourlyRate);

56.

57. model.Field(m => m.NumberOfSessions);

58. model.Field(m => m.Name);

59.

60. model.Field(m => m.StartDate);

61. model.Field(m => m.StartTerm);

62.

63. model.Field(m => m.EndDate);

64. model.Field(m => m.EndTerm);

65. model.Field(m => m.StudentList).DefaultValue(new List<BasicStudentProvisionMapModel>());

66.

67.

68. })

69.

70.

71. ).Sortable()

72. .Pageable(page => page.PageSizes(new int[] { 10, 20, 50, 100, 250, 1000 }).Refresh(true))

73. .Groupable()

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

75. .Filterable()

76. .HtmlAttributes(new { style = "min-height:300px;" })

77. .Scrollable()

78.

79. .ColumnMenu()

80. .Events(events =>

81. {

82. events.Edit("PopUpEditorRefresh");

83. })

The grid model and the BasicStudentProvisionMapModel are these classes:

01.public class ProvisionMapModel : BaseModel

02. {

03.

04.

05.

06. public int CohortNumber { get; set; }

07.

08. [AllowHtml]

09. public string Details { get; set; }

10.

11. public DateTime EndDate { get; set; }

12.

13. public int EndTerm { get; set; }

14.

15. public int GroupSize { get; set; }

16.

17. public double HourlyRate { get; set; }

18.

19. public DateTime LengthOfSession { get; set; }

20.

21. public string Name { get; set; }

22.

23. public int NumberOfSessions { get; set; }

24.

25. public DateTime StartDate { get; set; }

26.

27. public int StartTerm { get; set; }

28.

29. public int Wave { get; set; }

30.

31.

32.

33. public List<BasicStudentProvisionMapModel> StudentList { get; set; }

34.

35. }

36.

37.

38. public class BasicStudentProvisionMapModel

39. {

40.

41. public string ID { get; set; }

42.

43. public string Text

44. {

45. get;

46. set;

47. }

48.

49.

50. }

So everything binds correctly to the grid and I can see that the studentlist is populated but when I load up my editor and try to bind the studentlist to the multiselect as per this:

001.@model ProvisionMapModel

002.

003.@Html.HiddenFor(m => m.ID)

004.

005.<div role="form" class="kendo-popup-editor-inner" style="padding:10px;">

006.

007.

008.

009. <div class="form-group">

010. @Html.LabelFor(m => m.Name)

011.

012. @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @Placeholder = "Name of the session" })

013.

014.

015.

016.

017.

018. </div>

019.

020.

021.

022. <div class="form-group">

023. @Html.LabelFor(m => m.Details)

024.

025. @Html.Kendo().EditorFor(m => m.Details).HtmlAttributes(new { style = "min-width:100%;" }).Encode(false)

026.

027.

028.

029.

030.

031. </div>

032.

033.

034.

035.

036.

037. <div class="form-group">

038. @Html.LabelFor(m => m.GroupSize)

039.

040. @Html.Kendo().IntegerTextBoxFor(m => m.GroupSize).HtmlAttributes(new { style = "min-width:100%;" })

041. </div>

042.

043.

044. <div class="form-group">

045. @Html.LabelFor(m => m.Wave)

046.

047. @(Html.Kendo().IntegerTextBoxFor(m => m.Wave).HtmlAttributes(new {style="min-width:100%;" }).Min(1).Max(3))

048. </div>

049.

050. <div class="form-group">

051. @Html.LabelFor(m => m.LengthOfSession)

052.

053. @(Html.Kendo().TimePickerFor(m => m.LengthOfSession).HtmlAttributes(new { style = "min-width:100%;" }))

054.

055. </div>

056.

057. <div class="form-group">

058. @Html.LabelFor(m => m.HourlyRate)

059.

060. @Html.Kendo().NumericTextBoxFor(m => m.HourlyRate).Decimals(2).HtmlAttributes(new { style = "min-width:100%;" })

061. </div>

062.

063.

064.

065.

066.

067.

068. <div class="form-group">

069. @Html.LabelFor(m => m.NumberOfSessions)

070.

071. @Html.Kendo().IntegerTextBoxFor(m => m.NumberOfSessions).HtmlAttributes(new { style = "min-width:100%;" })

072. </div>

073.

074.

075.

076.

077.

078.

079.

080.

081.

082. <div class="form-group">

083. @Html.LabelFor(m => m.StartDate)

084.

085. @Html.Kendo().DatePickerFor(m => m.StartDate).HtmlAttributes(new { style = "min-width:100%;" })

086. </div>

087.

088.

089. <div class="form-group">

090. @Html.LabelFor(m => m.StartTerm)

091.

092.

@Html.Kendo().IntegerTextBoxFor(m => m.StartTerm).Decimals(2).HtmlAttributes(new { style = "min-width:100%;" }).Min(1).Max(6)

093. </div>

094.

095.

096.

097.

098.

099. <div class="form-group">

100. @Html.LabelFor(m => m.EndDate)

101.

102. @Html.Kendo().DatePickerFor(m => m.EndDate).HtmlAttributes(new { style = "min-width:100%;" })

103. </div>

104.

105.

106. <div class="form-group">

107. @Html.LabelFor(m => m.EndTerm)

108.

109.

@Html.Kendo().NumericTextBoxFor(m => m.EndTerm).Decimals(2).HtmlAttributes(new { style = "min-width:100%;" }).Min(1).Max(6)

110. </div>

111.

112. <div class="form-group">

113. @Html.LabelFor(m => m.StudentList)

114.

115. @(Html.Kendo().MultiSelectFor(m => m.StudentList)

116. .Name("StudentList")

117. .DataTextField("Text")

118. .DataValueField("ID")

119. .Value(new SelectList(Model.StudentList, "ID", "Text"))

120. .IgnoreCase(true)

121. .AutoBind(false)

122. .DataSource(datasource =>

123. {

124. datasource.ServerFiltering(true);

125.

126. datasource.Read(read => read.Action("ReadStudents", "Home", new { area = "ProvisionMap" }).Data("FilterMe"));

127.

128.

129. }).Filter(FilterType.Contains)

130. )

131.

132. </div>

133. <div class="jumbotron">

134. @Model.StudentList.Count.ToString()

135.

136. @foreach (var item in Model.StudentList)

137. {

138. <p>hello</p>

139. <p>@item.ID</p>

140. <p>@item.Text</p>

141. }

142. </div>

143.</div>

144.

145.

146.

147.@Html.Partial("_ErrorPanel")

No matter what I try to do the list of students is getting reset. Now is this due to the default value being set to a new instance of the list type or am I doing something really stupid.

As I said I know the list is being populated as I have inspected the json being presented to the grid and it shows me with the appropriate data.

So what am I over looking here.

If required I can raise a support ticket for this and provide my project code if needed.

MultiSelect

answered on 24 Jun 2014

1 answer

195 views

ComboBoxFor not displaying combo when Iframe true

I've spent a couple hours and solved my issue, I think. If Iframe is true, the Kendo UI Widget is not working as a combobox. If Iframe is false, it works. Should I be using Iframe true or false, just not sure why I would care unless a browser does not allow them. Please explain the difference.

I have a View using the Window and loading content for a partial view and cannot get the ComboBoxFor to show a combobox, it only shows a text box.
I'm showing my View and PartialView below. Any ideas? I see in debugger the exact same combobox with a different ID, working perfectly but then the Window is loaded into an iFrame and does not work.

//View
@helper NewProspectWorkflowProject()
{
   @(Html.Kendo().Window()
    .Name("window")
    .Width(630)
    .Height(650)
    .Title("Add new project")
    .Content("loading user info...")
    .LoadContentFrom("AddProject", "ProspectWorkflow")

    .Iframe(true)
    .Draggable()
    .Resizable()
)

<span id="undo" class="k-button">Click here to open the window.</span>

<script>
$(document).ready(function() {
$("#undo")
.bind("click", function() {
$("#window").data("kendoWindow").open();
});
});
</script>

}

//PartialView
@{
Layout = null;
}

@model OperationsSite.Models.ProspectWorkflowProject

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
       <legend>ProspectWorkflowProject2</legend>

       <div class="editor-label">
               @Html.LabelFor(model => model.projectID)
       </div>
        <div>
              @(Html.Kendo().ComboBoxFor(model => model.projectID)
                          .Name("client_name_dropdown2")
                          .HtmlAttributes(new { style = "width:250px", id = "client_name_dropdown2" })
                          .SelectedIndex(0)
                          .Suggest(true)
                          .Filter("contains")
                          .AutoBind(false)
                          .DataTextField("DisplayValue")
                          .DataValueField("Value")
                           .DataSource(source =>
                           {
                                source.Read(read =>
                                {
                                     read.Action("GetClientNames", "ComboBox");
                                })
                               .ServerFiltering(true);
                             })
                    )
            @Html.ValidationMessageFor(model => model.projectID)
    </div>

Thank you,

Russ

Window

answered on 24 Jun 2014

1 answer

77 views

Select mobile tabstrip item that is already selected

I am trying to fire an action every time a mobile tabstrip item is selected and not just the first click. This is very common for refreshing the current view or scrolling back to the top on apps like Twitter that are an endless scrolling list.

data-select="onSelect" only fires when the item is inactive (first time) and data-click="onClick" which I saw here in the forums does nothing nor is it in the api docs (deprecated maybe?).

I tried simply using jQuery to get (#tabstrip a).click() and then reset the scroller of the current view but this would only fire on subsequent clicks (not the initial) and it wasn't working right on my phone, only in the simulator.

Please advise on the best way to do this?

TabStrip (Mobile)

answered on 24 Jun 2014

1 answer

375 views

Partial view datasource url for different areas not working as expected

Scenario:

I have a kendo ui panel bar in a view within an area(say MyArea) which has kendoComboBox (partial view) from a different area(say Services)

@(Html.Kendo().PanelBar()
        .Name("PanelBar")
        .Items(search =>
            {
                search.Add()
                    .Text("Search YLAU EdiLog")
                    .Expanded(true)
                    .Content(@<text>
                                <form method="post" id="myForm">
    <div class="TableCell">@Html.Partial("~/Services/Views/Customer/WMSCustomerList.cshtml") </div>

WMSCustomerList.cshtml(partial view):

<script type="text/javascript">

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url:"Services/Customer/WMSCustomerList",
                dataType: "json"
            }
        }
    });
    $("#Company").kendoComboBox({
        dataSource: dataSource,
        dataTextField: "AccountName",
        dataValueField:"AccountCode"
    })

Issues:

- The url specified for the kendo combo box does not gets called i.e, the controller from a different area(Services) does not get called.

Q: How do you call a datasource from different areas in a partial view ?

- I changes the datasource url by adding a slash in the start of the url (url:"/Services/Customer/WMSCustomerList",) which then works correctly.

Q: What is the significance of adding a slash in front of the url? Why doesn't the url area switching work without a slash? Please clarify

Thanks!

View

answered on 24 Jun 2014

1 answer

158 views

Change barcode encoding at runtime in a template

How would you change the barcode encoding at runtime if the barcode widget is used in a template?
To clarify, user selects barcode type from a dropdown list, according to selection the barcode changes.
The barcode widget is used in a listview as a template.
For example, in the listView -
@(Html.Kendo().ListView()
    .Name("listView')
    .ClientTemplateId("aTemplate")
    :
    :
)

<script type="text/x-kendo-tmpl" id="aTemplate">
        <div class="product">
            <h3>#:ProductTitle#</h3>
            @(Html.Kendo().Barcode()
                .Name("Id_#=Id#")
                .Value("#=Barcode#")
                .Encoding(BarcodeSymbology.Code128)       <-- how whould you change this at runtime?
                .Height(50)
                .Width(180)
                .ToClientTemplate()
            )
         </div>
</script>

Regards,
Menashay

Barcode

answered on 24 Jun 2014

2 answers

1.6K+ views

Model is null on Post to Controller

Hey!

I'm creating a view, based on a ViewModel. This View Model has two Complex Properties, of which one is collection

public class SecurityTemplateViewModel

{

public SecurityTemplate secTemp { get; set; }

public List<SecurityListViewModel> secList { get; set; }

}

Second Property (viz. secList) is collection which displays two columns in grid(Description, Action, Rest are hidden). Action is a list of CheckBoxes.

Action Method to fill the View is:

public ActionResult Create()

{

SecurityTemplateViewModel secTempVM = new SecurityTemplateViewModel();

var securityList = _secTemp.GetSecurityList();

secTempVM.secList = securityList;

return View(secTempVM);

}

Razor Code which Renders Kendo Grid is:

@(Html.Kendo().Grid(Model.secList)
.Name("secList")
.Columns(columns =>
{
columns.Bound(p => p.SecurityListId).Hidden();
columns.Bound(p => p.HubId).Hidden();
columns.Bound(p => p.FormId).Hidden();
columns.Bound(p => p.DataActionId).Hidden();
columns.Bound(p => p.Description).Width(450).Filterable(true);
columns.Bound(p => p.Action).Width(50).Sortable(false).Filterable(false);
.HeaderTemplate("<div align=center><p>Select All </p><input id='selectall' type='checkbox' checked= 'checked' /></div>")
.ClientTemplate("<div align=center><input type='checkbox' checked='checked' /></div>");
})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.SecurityTemplateId);
model.Field(p => p.Description).Editable(false);
model.Field(p => p.Action).Editable(true);

}))
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:530px;" })
);

All i need from grid to show Description and List of Checkboxes. Logic of Insertion is on Action (Post) in Controller.
My Issue is I'm able to display gird, but when I try to access this collection on Create (Post), the model Property (secList) is null. Can you please advise from where I'm getting it wrong?

Grid

answered on 23 Jun 2014

2 answers

256 views

Replace "Insert HTML" as snippet title to something else

I am using snippets with my kendo editor and need to replace the standard "Insert HTML" drop down label with "Insert Merge Field".

I have tried simply replacing the text, but it gets replaced as soon as i insert the first field.

TIA

Editor

answered on 23 Jun 2014