Questions on UI for ASP.NET MVC Forum

3 answers

1.2K+ views

MultiSelect find value in Jquery

My question is How can I find value and select it with jquery?

I have a textarea and the user put a list to it.

I have to check one by one the item is exist in the multiselect and select it.

Thanks, Károly

MultiSelect

answered on 16 Jan 2019

2 answers

382 views

Conditional .Editable based upon Role

Hello,

What is the best way to handle a grid that can be edited by one role and read only by another?

Thanks

John

Grid

answered on 15 Jan 2019

3 answers

245 views

Date filter not working

Hi, I´m using a date filter, but it shows all the data. I´ve done it like this:

On properties > Report parameters > Add > Type: DateTime Visible: True

On properties > Filters > on Expression I have =Trim(Fields.Date) on Operator = on Value = Fields.Date

On preview I choose a date, but all records appear.

Chart

answered on 14 Jan 2019

3 answers

181 views

Loading a PartialPage inside a TabStrip after Postback from ComboBox doesn't render parent

Hi, I'm using a Grid inside a TabStrip and a Combobox for filtering. First time it loads correctly, but after I do a postback from the ComboBox it loads only the PartialPage instead of reloading the Partial inside the TabStrip.

div class="btn-group">

@using (Ajax.BeginForm("Rules", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "Rules", InsertionMode = InsertionMode.Replace }))

{

@Html.AntiForgeryToken()

<label>Account No</label>

@(Html.Kendo().DropDownList()

.Name("selectedAccountNo")

.DataTextField("Value")

.DataValueField("Text")

.BindTo(Model.selectedAccNo)

.HtmlAttributes(new { style = "width: 100%" })

)

<br />

<label> Application </label>

@(Html.Kendo().DropDownList()

.Name("selectedAppNo")

.DataTextField("Value")

.DataValueField("Text")

.BindTo(Model.selectedAppNo)

.HtmlAttributes(new { style = "width: 100%", @onchange = "this.form.submit();" })

)

}

</div>

01.[HttpPost]

02.[ValidateAntiForgeryToken]

03.public ActionResult Rules(string selectedAccountNo = "", string selectedAppNo = "")

04.{

05. var rules = from rule in _db.Rules

06. select rule;

07.

08. var ruletypes = from rTypes in _db.RuleTypes

09. select rTypes.RuleType1;

10.

11. var vm = new RuleListAndSearchVM(_db);

12. var rulesVm = new List<RuleVM>();

13.

14. ViewBag.Title = "Rules";

15.

16.

17. var ruleTypes = _db.RuleTypes.AsNoTracking().Select(n => new SelectListItem { Value = n.RuleTypeId.ToString(), Text = n.RuleType1 }).ToList();

18. ViewBag.RuleType = ruleTypes;

19. TempData.ContainsKey("RuleType");

20. vm.RuleType = ruleTypes;

21.

22. List<SelectListItem> appNumbers = _db.Rules.AsNoTracking().Select(n => new SelectListItem { Value = n.AppNo, Text = n.AppNo }).ToList();

23. List<SelectListItem> accNumbers = _db.Rules.AsNoTracking().Select(n => new SelectListItem { Value = n.AccNo, Text = n.AccNo }).ToList();

24. vm.selectedAppNo = appNumbers;

25. vm.selectedAccNo = accNumbers;

26.

27. if (!String.IsNullOrEmpty(selectedAccountNo))

28. {

29. rules = rules.Where(acc => acc.AccNo == selectedAccountNo);

30. }

31. if (!String.IsNullOrEmpty(selectedAppNo))

32. {

33. rules = rules.Where(acc => acc.AppNo == selectedAppNo);

34. }

35.

36.

37. foreach (var r in rules)

38. {

39. var newRule = new RuleVM() { AccNo = r.AccNo, AppNo = r.AppNo, RuleId = r.RuleId, RuleType = new RuleTypeVM() { RuleTypeId = r.RuleTypeId }, RuleValue = r.RuleValue, CreatedBy = new UserVM() { UserId = r.CreatedBy }, DateCreated = r.DateCreated };

40.

41. if (r.Status == true)

42. newRule.Status = "Active";

43. else

44. newRule.Status = "Deleted";

45.

46. newRule.RuleType.RuleType = _db.RuleTypes.Find(newRule.RuleType.RuleTypeId).RuleType1;

47. newRule.CreatedBy.Username = _db.Users.Find(newRule.CreatedBy.UserId).Username;

48. rulesVm.Add(newRule);

49.

50. }

51.

52. vm.Data = rulesVm;

53.

54. vm.SelectedAccNo = selectedAccountNo;

55. vm.SelectedAppNo = selectedAppNo;

56.

57. if (!string.IsNullOrEmpty(selectedAccountNo) || !string.IsNullOrEmpty(selectedAppNo))

58. {

59. View("RulesPartial", vm).ExecuteResult(this.ControllerContext);

60. return View("RulesPartial", vm);

61. }

62.

63. return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

64.

65.}

TabStrip

answered on 14 Jan 2019

5 answers

519 views

Grid Filter Multi-Select Checkbox Sorting - Brute Force Solution

I've achieved sorting in Filter Multi-Select Checkboxes but I'm thinking I may be making it harder than it has to be.

The simpler code shown here provides multi-select checkboxes, but they're not sorted into order.

.Filterable(ftb => ftb.Multi(true).Search(true));

Adding a data source enables us to sort each checkbox list into proper order.

.Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("filterPOD", "Home").Data("{ field: 'PODNumber' }"))))

But this requires me to have a corresponding block of code in my controller for EACH column that I intend to filter with Multi-select CBs.

public ActionResult filterPOD(string field)

{

var w = new SQL_DB_Entities();

var result = w.Shipping_Table.Select(x => new filterModel

{

PODNumber = x.PODNumber

}).Distinct().OrderBy(p => p.PODNumber);

return Json(result, JsonRequestBehavior.AllowGet);

}

It's probably something simple I'm overlooking, but I'd like to create a block of "Generic" code in my controller to return the sorted lists needed for multi select checkboxes, rather than having to repeat this block of code for each fieldname / column that I filter. I'm already passing the field name as a string (named "field"). How can I replace the 3 instances of "PODNumber" in this block of code to use the value of the field variable instead so that I can have a single generic block of code? That would be a more elegant solution than the "brute force" one of repeating this code over and over. I'm new to MVC and jquery, so please be gentle with me. -Darron

Grid

answered on 11 Jan 2019

10 answers

5.1K+ views

mvc grid custom command to call actionLink with parameter from grid

Hi,

I have an NVC4 kendo grid in which I want to place a button which, when pressed, will call an ActionLink with an ID taken from a column in the current row. In my case this will jump to a new page to display a map of the location by calling the MVC action method via the URL ~/Controller/ShowMap?Id=123 (if the Id was 123)

I have found columns.Command method and have written the following code

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

.Name("SchemeResults")

.Columns(columns =>

{

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

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

columns.Command(command => command.Custom( "Map") .Click("GotoMap"));

})

.Pageable()

)

This successfully calls the JavaScript function "GotoMap", but I can't find a method of getting the ID from the event.

Please could you advise me on the best way to implement this feature.

Grid

answered on 11 Jan 2019

3 answers

215 views

MVC SharedDataSource Between Pie Chart & Grid

I have a pie chart that is populated via a remote datasource that returns JSON. I now want to add a grid that will use the same data. When I implement the shared data source for the pie chart it calls the action to get the data but the pie chart no longer shows.

This Works:

@(Html.Kendo().Chart<PortalApp.Areas.TaskManagement.Features.Reporting.Index.Vendor> ()
.Name("chart1")
.Title(title => title
//.Text("Vendor - Total Assigned: 27564")
.Text("Vendor")
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(false)
)
.ChartArea(chart => chart
.Background("transparent")
.Height(300)
)
.SeriesColors(new string[] { "#9de219", "#90cc38", "#068c35", "#006634", "#004d38", "#033939" })
.DataSource(ds => ds.Read(read => read.Action("GetVendorGraph", "Reporting")))
//.DataSource("graphOneDS")
.Series(series =>
{
series.Pie(m => m.value, m => m.category)
.Padding(0)
.Labels(labels => labels
.Template("#= dataItem.category #: #= dataItem.value2 #")
.Background("transparent")
.Visible(true)
)
.StartAngle(210);
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.category #: #= dataItem.value #% (#= dataItem.value2 # Review Tasks Assigned)</br>Outstanding Requests: #= dataItem.value3 #</br>Outstanding Questions: #= dataItem.value4 #")
)
.Deferred(true)
)

This Doesn't

@(Html.Kendo().DataSource<PortalApp.Areas.TaskManagement.Features.Reporting.Index.Vendor>()
.Name("graphOneDS")
.Ajax(dataSource => dataSource
.Read(read => read.Action("GetVendorGraph", "Reporting"))
)
.Deferred(true)
)
@(Html.Kendo().Chart<PortalApp.Areas.TaskManagement.Features.Reporting.Index.Vendor> ()
.Name("chart1")
.Title(title => title
//.Text("Vendor - Total Assigned: 27564")
.Text("Vendor")
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(false)
)
.ChartArea(chart => chart
.Background("transparent")
.Height(300)
)
.SeriesColors(new string[] { "#9de219", "#90cc38", "#068c35", "#006634", "#004d38", "#033939" })
//.DataSource(ds => ds.Read(read => read.Action("GetVendorGraph", "Reporting")))
.DataSource("graphOneDS")
.Series(series =>
{
series.Pie(m => m.value, m => m.category)
.Padding(0)
.Labels(labels => labels
.Template("#= dataItem.category #: #= dataItem.value2 #")
.Background("transparent")
.Visible(true)
)
.StartAngle(210);
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.category #: #= dataItem.value #% (#= dataItem.value2 # Review Tasks Assigned)</br>Outstanding Requests: #= dataItem.value3 #</br>Outstanding Questions: #= dataItem.value4 #")
)
.Deferred(true)
)

Chart

answered on 11 Jan 2019

1 answer

209 views

How to stop time zone conversion when cell enters edit mode

Hi all,

I currently have a grid that contains a datetime column that we use to display just the time. When retrieving the time data, we're parsing it with code as follows before the data is being returned to the grid:

var tz = System.TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");

schedule.StartTimeDT = System.TimeZoneInfo.ConvertTimeToUtc(DateTime.Parse(schedule.StartTime), tz);

In the grid definition the column is set up as such:

columns.Bound(c => c.StartTimeDT).Title("Start Time").HtmlAttributes(new { style = "text-align: center;" })

When viewed in from a computer that's not in the EST zone, the time value gets automatically changed to whatever the computer timezone is. We got around to forcing it to display EST in the view mode of the grid by modifying the column definition to use a client template:

columns.Bound(c => c.StartTimeDT).Title("Start Time").HtmlAttributes(new { style = "text-align: center;" }).EditorTemplateName("_TimePicker1").ClientTemplate("\\#= moment(data.StartTimeDT).tz('America/New_York').format('HH:mm') \\#");

Which works fine in view mode. But once I click on the edit button to go into the inline edit mode, the time is being changed again. How do I stop this automatic time zone shift when in edit mode?

Grid

answered on 11 Jan 2019

1 answer

5.1K+ views

Kendo UI MVC grid with Date picker and combo box (data of combo is based on each row data)

Hi,

I am new to the Kendo UI MVC grid. We have a scenario where we have a Kendo UI MVC Grid.

Points to be noted in the grid.

The columns Finish Date, Machine Id, Master Roll are editable.
The column Pln Ind is editable based on the other column value.
We need to update the grid data in batch.
By default the grid will be empty.
When we click the Filter button, based on the filter condition the grid data will be loaded.
The toolbar should be invisible during the load of the page and it should be visible only if the grid is binded with the data.
The Datepicker need to be displayed in the Finish Date Column. The Combo box need to be displayed in the MachineId column. The Key is content of the combo is dynamic for each row.

My .cshtml file contains

@(Html.Kendo().Grid(Model.PlanOrderToMachineModelList)
    .Name("GrdPlanOrderToMachine")
    .AutoBind(false)
    .BindTo(Model.PlanOrderToMachineModelList)
    .Columns(columns =>
    {
        columns.Bound(p => p.CustomerOrder).Filterable(true).Width(120).Title("Customer Order");
        columns.Bound(p => p.SlitPattern).Filterable(false).Width(100).Title("Slit Pattern");
        columns.Bound(p => p.FinishSeq).Filterable(false).Width(50).Title("Fin Seq");
        columns.Bound(p => p.Status).Filterable(false).Width(50).Title("Status");
        columns.Bound(p => p.WorkCenter).Filterable(false).Width(100).Title("Work Center");
        columns.Bound(p => p.CSR).Filterable(false).Width(50).Title(("CSR"));
        columns.Bound(p => p.Roll).Filterable(false).Width(100).Title("Roll");
        columns.Bound(p => p.Width).Filterable(false).Width(100).Title("Width");
        columns.Bound(p => p.Length).Filterable(false).Width(100).Title("Length");
         columns.Bound(p => p.FinishDate).Filterable(false).Width(100).Title("Finish Date") .ClientTemplate((
         @Html.Kendo().DatePicker()
          .Name("FDPicker_#=CustomerOrder#")
          .Value("#=FinishDate#")
          .Format("{0:dd/MM/yyyy}")
          .ToClientTemplate()).ToHtmlString());
        columns.Bound(p => p.ShipDate).Filterable(false).Width(100).Title("Ship Date").Format("{0:dd/MM/yyyy}");
        columns.Bound(p => p.FinishTime).Filterable(false).Width(100).Title("Finish Time").Format("{0:HH:mm}");
        columns.Bound(p => p.ShipTime).Filterable(false).Width(100).Title("Ship Time").Format("{0:HH:mm}");
        columns.Bound(p => p.PackageId).Filterable(false).Width(100).Title("Pkg");
        columns.Bound(p => p.OrderType).Filterable(false).Width(100).Title("Ord Type");
        columns.Bound(p => p.ServiceVariant).Filterable(false).Width(100).Title("Srvc. Vmt");
        columns.Bound(p => p.TentativeInd).Filterable(false).Width(100).Title("Ttty");

        columns.Bound(p => p.Machines).Filterable(false).Width(100).Title("Mach ID").ClientTemplate((
          @Html.Kendo().ComboBox()
          .Name("Machines_#=CustomerOrder#")
          .DataTextField("MachineId")
          .DataValueField("MachineId")
          .HtmlAttributes(new { style = "width:250px" })
          //.Filter("contains")
          //.AutoBind(false)
          //.MinLength(3)
          //.BindTo((System.Collections.IEnumerable)"#=Machines#")
          //.BindTo((System.Collections.IEnumerable)Model.Machines[0].MachineId)
          .ToClientTemplate()).ToHtmlString());
        //.DataSource(p => p.Machines)
        //columns.Bound(p => p.Machines).Filterable(false).Width(100).Title("Mach ID").ClientTemplate("#=Machines.MachineId#");
        columns.Bound(p => p.PlanningInd).Filterable(false).Width(100).Title("Pln Ind");
        columns.Bound(p => p.PlanningSeq).Filterable(false).Width(100).Title("Seq");
        columns.Bound(p => p.Grd).Filterable(false).Width(100).Title("Grd");
        columns.Bound(p => p.Message).Filterable(false).Width(100).Title("Msg");
        columns.Bound(p => p.MasterRoll).Filterable(false).Width(100).Title("Master-roll");
        columns.Bound(p => p.MasterRollDesc).Filterable(false).Width(100).Title("Master-roll Description");
        columns.Bound(p => p.Customer).Filterable(false).Width(100).Title("Customer");
        columns.Bound(p => p.SumOfSlitWidth).Filterable(false).Width(100).Title("SumOfSlitWidth").Hidden(true);
        columns.Bound(p => p.MaximumCrossWidth).Filterable(false).Width(100).Title("MaximumCrossWidth").Hidden(true);
        columns.Bound(p => p.ProductWidth).Filterable(false).Width(100).Title("ProductWidth").Hidden(true);
    })
            //.ToolBar(toolbar =>
            //{
            //    toolbar.Save();
            //})
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Resizable(resize=>resize.Columns(true))
    .Editable(p => p.Mode(GridEditMode.InCell))
    .HtmlAttributes(new { style = "height:400px;width:900px" })
    .Events(e => e.DataBound("onGridDataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Batch(true)
        .Model(model =>
            {
                model.Id(p => p.CustomerOrder);
                model.Field(p => p.CustomerOrder).Editable(false);
                model.Field(p => p.SlitPattern).Editable(false);
                model.Field(p => p.FinishSeq).Editable(false);
                model.Field(p => p.Status).Editable(false);
                model.Field(p => p.WorkCenter).Editable(false);
                model.Field(p => p.CSR).Editable(false);
                model.Field(p => p.Roll).Editable(false);
                model.Field(p => p.Width).Editable(false);
                model.Field(p => p.Length).Editable(false);
                model.Field(p => p.FinishDate).Editable(false);
                model.Field(p => p.ShipDate).Editable(false);
                model.Field(p => p.ShipTime).Editable(false);
                model.Field(p => p.PackageId).Editable(false);
                model.Field(p => p.OrderType).Editable(false);
                model.Field(p => p.ServiceVariant).Editable(false);
                model.Field(p => p.TentativeInd).Editable(false);
                model.Field(p => p.PlanningSeq).Editable(false);
                model.Field(p => p.Grd).Editable(false);
                model.Field(p => p.Message).Editable(false);
                model.Field(p => p.MasterRoll).Editable(false);
                model.Field(p => p.MasterRollDesc).Editable(false);
                model.Field(p => p.Customer).Editable(false);
            })
        .Read(read => read.Action("Index", "PlanOrderToMachine").Data("AdditionalParameters"))
        .PageSize(10)
        .Update("Index","Home")
    )
      )

I am getting the combobox and the datepicker, but the values are not binded. It is coming as empty. Please help me to solve this issue. I am using Client Template.

Please give a code sample, that will help me better.

Kind Regards,
Suniel

Grid

answered on 11 Jan 2019

6 answers

1.0K+ views

how to make multi level hierarchy

Hello,

so, i want to make multi level hierarchy and i dont know how to make it, The one i want to make is Hierarchy of ProductID , so i can click on it and display the product name , price , etc.

here's my current code,

controller :

namespace TelerikMvcApp100.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

ViewBag.Message = "Welcome to ASP.NET MVC!";

return View();

}

public ActionResult Headers_Read([DataSourceRequest]DataSourceRequest request)

{

using (var salesheaders = new SalesHeaderEntities1())

{

IQueryable<Header> headers = salesheaders.Headers;

DataSourceResult result = headers.ToDataSourceResult(request, header => new

{

header.OrderID,

header.CustomerID,

header.TotalAmount

});

return Json(result);

}

public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, int orderID)

{

using (var salesheaders = new SalesHeaderEntities1())

{

IQueryable<Order> orders = salesheaders.Orders.Where(order => order.OrderID == orderID);

DataSourceResult result = orders.ToDataSourceResult(request, order => new

{

order.LinesID,

order.ProductID,

order.Quantity,

order.Unit,

order.TotalPrice

});

return Json(result);

}

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request, int productID)

{

using (var salesheaders = new SalesHeaderEntities1())

{

IQueryable<Product> products = salesheaders.Products.Where(product => product.ProductID == productID);

DataSourceResult result = products.ToDataSourceResult(request, product => new

{

product.ProductName,

product.Price

});

return Json(result);

}

view :

@(Html.Kendo().Grid<TelerikMvcApp100.Models.Header>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(header => header.OrderID);

columns.Bound(header => header.CustomerID);

columns.Bound(header => header.TotalAmount);

})

.DataSource(dataSource =>

dataSource.Ajax().Read(read => read.Action("Headers_Read", "Home"))

)

.ClientDetailTemplateId("client-template")

)

<script id="client-template" type="text/x-kendo-template">

@(Html.Kendo().Grid<TelerikMvcApp100.Models.Order>()

.Name("grid_#=OrderID#")

.Columns(columns =>

{

columns.Bound(order => order.ProductID);

columns.Bound(order => order.Quantity);

columns.Bound(order => order.Unit);

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

})

.DataSource(dataSource =>

dataSource.Ajax().Read(read => read.Action("Orders_Read", "Home", new { orderID = "#=OrderID#" }))

)

.Pageable()

.ToClientTemplate()

)

</script>

@(Html.Kendo().Grid<TelerikMvcApp100.Models.Product>() // CORRECT THIS CODE PLS

.Name("grid_#=ProductID#")

.Columns(columns =>

{

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

columns.Bound(product => product.Price);

})

.DataSource(dataSource =>

dataSource.Ajax().Read(read => read.Action("Products_Read", "Home", new { producID = "#=ProductID#" }))

)

.Pageable()

.ToClientTemplate()

)

Grid

answered on 10 Jan 2019