Telerik Forums
UI for ASP.NET MVC Forum
1 answer
12 views


@using EconExcelExtender.Classes

@model List<PocoAttributeDetail>

@{
    var modelName = ViewBag.ModelName;
    var companySite = ViewBag.CompanySite;
    var inUse = ViewBag.InUse;
    int hasBeenDownloaded = (int)ViewBag.HasBeenDownloaded;
}

<div id="mdlattributeMaintenance" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Attribute Maintenance</h5>
            </div>
            <div id="attributeMaintenanceBody" class="modal-body">

            </div>
        </div>
    </div>
</div>

@if (hasBeenDownloaded == (int)Enums.AttributeOptionDownloadStatus.InAttributesAndOptions)
{

    <div class="row mt-2">
        <div class="col-12 text-center">
            <h6>Attributes for Model @modelName only exist in the Attribute And Options Table</h6>
            <h6>They must be downloaded before adding new records, or editing existing records can take place.</h6>
        </div>
        <div class="col-12 text-center">
            <button type="button" id="btnDownloadAttributes" onclick="" data-text="Download Attributes" class="btn btn-danger form-control btnDownloadAttributes">Download Attributes</button>
        </div>
    </div>


}

@if (hasBeenDownloaded == (int)Enums.AttributeOptionDownloadStatus.None)
{

    <div class="row mt-2">
        <div class="col-12 text-center">
            <h6>There are no attributes for Model @modelName found on the database</h6>
            <h6>They must be entered using this form.</h6>
        </div>
    </div>

}


@if (Model != null)
{

    <div class="mt-2">
        @(Html.Kendo().Grid(Model)
            .Name("grid")
            .TableHtmlAttributes(new {@style="font-size:smaller"})
            .Columns(columns => {


                columns.Bound(p => p.AttributeDetailID).Title("Attribute ID").Width(105);
                columns.Bound(p => p.AttributeCode).Title("Attribute Code").Width(105);
                columns.Bound(p => p.AttributeName).Title("Attribute Name").Width(150);
                columns.Bound(p => p.InputOutput).Title("Input/Output").Width(105);
                columns.Bound(p => p.Type).Title("Type").Width(105);
                columns.Bound(p => p.IsRange).Title("Is Range").Width(80)
                    .ClientTemplate("#= IsRange ? 'Yes' : 'No' #");
                columns.Bound(p => p.HasLabels).Title("Has Range").Width(80)
                    .ClientTemplate("#= HasLabels ? 'Yes' : 'No' #");
                columns.Bound(p => p.InUse).Title("In Use").Width(80)
                    .ClientTemplate("#= InUse ? 'Yes' : 'No' #");
                
                 columns.Command(commands =>
 {
 commands.Edit();
 commands.Destroy();
 });


            })
                .HtmlAttributes(new { style = "height: 550px;" })

                .Sortable()
    .Scrollable(scr=>scr.Height(430))
    .Filterable()
    .Pageable()

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


    .DataSource(ds => {
        ds.Ajax()
        .Model(model => model.Id(p => p.AttributeDetailID))

     .ServerOperation(false);


        ;



    })
    )
    </div>

}

@using (Ajax.BeginForm("MaintainAttribute", "AttributesAndOptions", null, new AjaxOptions
{
    UpdateTargetId = "attributeMaintenanceBody",
    InsertionMode = InsertionMode.Replace,
    OnComplete = "$('#mdlattributeMaintenance').modal('show');  ShowSpinner(null, '', 'hide'); ",
    HttpMethod = "Post"

}, new { @id = "frmMaintModelAttributes" }))
{

    <input type="hidden" id="itemModel" name="ModelName" value="@modelName" />
    <input type="hidden" id="itemID" name="ItemID" />
}

@using (Ajax.BeginForm("DownloadAttributes", "AttributesAndOptions", null, new AjaxOptions
{
    UpdateTargetId = "maintenancediv",
    InsertionMode = InsertionMode.Replace,
    OnComplete = "SetUpTable('#tblDisplay');ShowSpinner(null, '', 'hide'); ",
    HttpMethod = "Post"

}, new { @id = "frmDownloadAttributes" }))
{

    <input type="hidden" id="optionModel" name="ModelName" value="@modelName" />
    <input type="hidden" id="optionCompany" name="CompanySite" value="@companySite" />

}

Hi,

I am trying to do inline editing on a local datasource provided from a controller source. 

When I add the command button I get the following error:

System.InvalidOperationException: 'The parameter conversion from type 'System.String' to type 'System.Boolean' failed. See the inner exception for more information.'

This is the error message: 		"-1 is not a valid value for Boolean."


I'm wondering what I am doing wrong.

 

Thanks

 

Sean

Anton Mironov
Telerik team
 answered on 31 May 2021
4 answers
108 views

I use a kendo Splitter with 2 vertical panes (top-pane and bottom-pane).
Inside the top-pane .Content( ), I have a Kendo TabStrip with 3 tabs. Inside the bottom-pane .Content( ), I have a DropDownList / textbox controls and one input button "Save".
When the Main View page loads, my Main Controller Action retrieves the data and return the MainViewModel for my DropDownList / textbox controls and determines which Tab to select (ie show) to the user.

Here is my Kendo TabStrip on my main view with the MainViewModel

 

01.@(Html.Kendo().TabStrip()
02.    .Name("WorksheetTabStrip")
03.    .Items(tabstrip =>
04.    {
05.        tabstrip.Add().Text("Condition 1")
06.            .Selected( Model.ConditionSelection == 1 ? true : false)
07.            .LoadContentFrom("ConditionAction", "Worksheet", new { invoiceID = Model.InvoiceID, tabNum = 1 })
08.            .ContentHtmlAttributes(new { style = "height:580px;" });
09. 
10.        tabstrip.Add().Text("Condition 2")
11.            .Selected(Model.ConditionSelection == 2 ? true : false)
12.            .LoadContentFrom("ConditionAction", "Worksheet", new { invoiceID = Model.InvoiceID, tabNum = 2 })
13.            .ContentHtmlAttributes(new { style = "height:580px;" });
14. 
15.        tabstrip.Add().Text("Condition 3")
16.            .Selected(Model.ConditionSelection == 3 ? true : false)
17.            .LoadContentFrom("ConditionAction", "Worksheet", new { invoiceID = Model.InvoiceID, tabNum = 3 })
18.            .ContentHtmlAttributes(new { style = "height:580px;" });
19. 
20.    })
21. 

 

Each of the tabStrip .LoadContentFrom( ) calls the action "ConditionAction" to load data in the tab's corresponding PartialView.

 

public ActionResult ConditionAction(int invoiceID, int tabNum)  {
      // ... get data for the corresponding Tab from database
      ConditionViewModel model = getDBdata();
      if (tabNum == 1)
             return PartialView("_Condition1", model);
      else if (tabNum == 2)
             return PartialView("_Condition2", model);
      else if (tabNum == 3)
             return PartialView("_Condition3", model);
       else
             return View("Error");
}

 

With the codes that I have so far,  displaying the right data for the appropriate tab contents works.

My problem is when user clicks on the "Save" button (at the bottom-pane), how do I read from the form data of the Tab that I want.

For example, user clicks "Tab 2" and types some inputs in Textboxes, then clicks the Save button. I just want to read the form in Tab2 and save its data. (form in Tab1 and Tab 3 are ignored) and additionally read the main form controls (DropdownList etc) and save as well all at the same time.

I was planning to do an Ajax call onClick of the Save button. But don't know how to read and pass the PartialViewModel to my Controller.

 

<input type="button" id="btnSave" name="btnSave" value="Save" class="btn btn-danger btn-default" style="width:100px;" />
 
<script type="text/javascript">
 
    $("#btnSave").click(function () {
        var formData = $("#formWorksheet").serialize();
 
        $.ajax({
            url: '@Url.Action("SaveWorksheet", "Worksheet")',
            type: "POST",
            cache: false,
            contentType: "application/x-www-form-urlencoded",
            data: formData,
            datatype: "json",
            success: function (response) {
                if (response.ok) {
                    alert(response.message);
                }
                else {
                    window.alert("Error: " + response.message);
                }
            },
            error: function (request, status, error) {
                alert("Unexpected Error! Please contact the Administrator.");
                alert(error);
            }
        });
    })
 
</script>

 

Any suggestion? 

 

Tony
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 27 May 2021
1 answer
15 views

I am using the kendo dropdown tree with vuejs. Below is how I am using the dropwdowntree.

The "mySelectedList" contains an array of IDs. If the form is being edited and the array is populated, this array will check items on the dropdowntree. This is as expected.

But as items from the dropdowntree are checked or unchecked by the user, this array "mySelectedList" does not get updated.

What is the proper way to bind a property to the dropdowntree?  How do I get "mySelectedList" to get updated as the user checks or unchecks items in the dropdowntree?

 

<dropdowntree 

:data-source="myDataSource"
autoClose: false
:checkboxes="true"
:check-all="true"
:placeholder="'Select from tree'"
dataTextField="text"
dataValueField="id"
v-model="mySelectedList"
>
</dropdowntree>

 

Petar
Telerik team
 answered on 27 May 2021
2 answers
11 views

I have been trying to get a scheduler to show simple events, but Im doing some wrong (probably something simple I'm not seeing.

I'm simply trying to return a list into the schedular based on the demo TaskViewModel

 

What am I doing wrong here.

 

Thanbks in advance

@(Html.Kendo().Scheduler<ShitTruckLibrary.Models.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2021, 05, 10))
    .StartTime(new DateTime(2021, 5, 08, 00, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView(workWeekView => workWeekView.Selected(true));
        views.WeekView();
        views.MonthView();
   
        views.AgendaView();
        views.TimelineView();
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.OwnerID)
            .Title("Owner")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                new { Text = "STC", Value = 1, Color = "#f8a398" } ,
                new { Text = "GTC", Value = 2, Color = "#51a0ed" }
               
            });
    })
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.OwnerID).DefaultValue(1);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("Basic_Usage_Read", "WorkJobs")
   
        .Filter(filters =>
        {
            filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
        })
    )
)

 public static  IList<TaskViewModel> GetAllJobs()
        {
            List<ContactJob> c = new List<ContactJob>();

            List<TaskViewModel> caLL = new List<TaskViewModel>();

            DataTable dt = new DataTable();

                    
            dt = SqlStore.CreateDataSet($@"SELECT cj.*,ForeName, SurName, CompanyName,Address1,Address2 FROM [dbo].[ContactJob]  cj join [dbo].[Contacts] c on cj.contactid = c.id order by JobDate desc").Tables[0];

            c = DataHelper.ConvertDataTable<ContactJob>(dt);
        


            foreach (ContactJob cc in c)
            {

                TaskViewModel vv = new TaskViewModel();
                vv.Start = DateTime.SpecifyKind(new DateTime(cc.JobDate.Year, cc.JobDate.Month, cc.JobDate.Day, 09, 00, 00),DateTimeKind.Local);
                vv.End = DateTime.SpecifyKind(new DateTime(cc.JobDate.Year, cc.JobDate.Month, cc.JobDate.Day, 10, 00, 00), DateTimeKind.Local);
                vv.Title = $"{cc.CompanyName} {cc.ForeName} {cc.SurName}".Trim();
                vv.Description = $"{cc.Address1} {cc.Address1}";
                vv.IsAllDay = true;
                vv.OwnerID = (cc.Type == "STC" ? 1 : 2);
                caLL.Add(vv);
            }


            return caLL;
        }

 

 public virtual JsonResult Basic_Usage_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(Job.GetAllJobs().ToDataSourceResult(request));
        }

        public static  IList<TaskViewModel> GetAllJobs()
        {
            List<TaskViewModel> caLL = new List<TaskViewModel>();

            DataTable dt = SqlStore.CreateDataSet($@"SELECT cj.*,ForeName, SurName, CompanyName,Address1,Address2 FROM [dbo].[ContactJob]  cj join [dbo].[Contacts] c on cj.contactid = c.id order by JobDate desc").Tables[0];

            List<ContactJob> c = DataHelper.ConvertDataTable<ContactJob>(dt);

            foreach (ContactJob cc in c)
            {

                TaskViewModel vv = new TaskViewModel();
                vv.Start = DateTime.SpecifyKind(new DateTime(cc.JobDate.Year, cc.JobDate.Month, cc.JobDate.Day, 09, 00, 00),DateTimeKind.Local);
                vv.End = DateTime.SpecifyKind(new DateTime(cc.JobDate.Year, cc.JobDate.Month, cc.JobDate.Day, 10, 00, 00), DateTimeKind.Local);
                vv.Title = $"{cc.CompanyName} {cc.ForeName} {cc.SurName}".Trim();
                vv.Description = $"{cc.Address1} {cc.Address1}";
                vv.IsAllDay = true;
                vv.OwnerID = (cc.Type == "STC" ? 1 : 2);
                caLL.Add(vv);
            }


            return caLL;
        }

 

Ivan Danchev
Telerik team
 answered on 27 May 2021
1 answer
13 views

I have a field in a grid, which is a nullable Boolean. However, the filter option for this field, shown by the grid just has options for true and false.

This is obviously incorrect for a nullable Boolean, which should also show a filter option for null.

How can I rectify this?

I'm using version v2021.1.119 

Thanks

Eyup
Telerik team
 answered on 26 May 2021
1 answer
16 views

Hi,

I am trying to use the same Dropdownlist in a parent grid, and its hierarchal/child grid. This Dropdownlist was written in jQuery and is kept inside the Shared/EditorTemplates folder and works as expected for the parent grid. However, when I apply it to columns on the child grid, it does not appear. It ignores the template and prompts me for an input like usual for inline editing instead of displaying the dropdownlist options.

Is it possible to use the same EditorTemplate inside of a hierarchy grid?

0 answers
5 views

 

how do I remove the upload done and change it to "ok"

 

        @(Html.Kendo().Upload().Name("files")
                                                    .TemplateId("fileTemplate")
                                                    .Multiple(false)
                                                    .Messages(m => m.Select("Selecionar Arquivo...").UploadSelectedFiles("Importar").StatusUploading("OK").StatusUploaded("OK"))
                                                    .Async(a => a
                                                        .Save("SaveAsync", "Util")
                                                        .Remove("Remove", "Util")
                                                        .AutoUpload(false))
                                                    .HtmlAttributes(new { accept = ".xml,.xlsx,.xlsb,.xls" })
                                                    .Events(e => e.Error("uploadError").Complete("carregarGridErros")))

 

 

Douglas
Top achievements
Rank 1
 asked on 25 May 2021
1 answer
32 views

Hi,

I am creating a Kendo grid which involves using a Dropdown List for certain cells. I have created the Editor Template for the dropdown inside the Shared/EditorTemplates folder called DropdownList.cshtml. The dropdown list works as intended, I have inline editing enabled and I am able to update the values via Ajax.

Here's the column in the initial grid:

columns.Bound(e => e.Balance).Width(40).Title("Balance").ClientTemplate("<span>#=getIcon(Balance)#</span>").EditorTemplateName("DropdownList");

The problem occurs when I try to use that same EditorTemplate called DropdownList in a hierarchy grid, just below its predecessor. The subgrid is configured using .ClientDetailTemplateId("template"), where the child grid is titled .Name("tracking-grid_#=id#"), and linked using .ToClientTemplate(). (As shown in the Telerik demonstration here.).

As soon as I add the .EditorTemplateName("DropdownList"); to the following line, the grid does not load and I receive the following error in the browser console: Uncaught Error: Invalid template

columns.Bound(e => e.Balance).Width(40).Title("Balance").ClientTemplate("<span>#=getIcon(Balance)#</span>").EditorTemplateName("DropdownList");

** Note: I know these columns have the same name, but they are being taken from different datasets. It just so happens to appear in both grids.

Searching for solutions, I made sure to try escaping all (#) hash characters with \\ wherever they appear, and I tried creating an alternate file in the EditorTemplates folder so they would be distinct. The grid still breaks and fails to render each time from just this one line.

I found a similar discussion here that I thought would help me, but no luck.

I understand that I am trying to use the same Editor Template in two separate grids. But I really need to use this dropdownlist in both. Is MVC not able to use the same editor template in nested grids like this, or is there something else I'm missing?

Thanks.

Patrick
Telerik team
 answered on 24 May 2021
4 answers
20 views

hello, 

I have students kendo grid in my MVC project with below settings . I’d like to mark dirty flag on the certain cells programmatically. But I didn’t see dirty flag (red triangle on let top corner) on the cell after I run js code. Could someone help me out? Thanks!

 

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

                .ColumnMenu()

                .Resizable(resizable => resizable.Columns(true))

                .Pageable(p => p.PageSizes(new int[] {25, 50, 100 }))

                .DataSource(dataSource => dataSource

                    .Ajax()

                    .Batch(true)

                    .ServerOperation(false)

                    .PageSize(15)

                                ...

 

Run JavaScript when button click:

 

        $("#markDirty").click(function (e) {

            e.preventDefault();

            var grid = $("#studentGrid").data("kendoGrid");

            var data = grid.dataSource.data();

 

            for (var i = 0; i < data.length; i++) {

                if (data[i].ClassName == "MVC") {

                    data[i].ClassName = "MVC 5.0";

                    data[i].dirty = true;

                }

            }

            grid.refresh();//didn't see the data change without this line.

        });

Daochuen
Top achievements
Rank 1
Iron
 answered on 22 May 2021
1 answer
23 views

Hi,

I have a Kendo Grid with 20columns in that i have 12 columns as months. in one column am getting data like below attached image format (1/0,2/1,3/2).  in ClientFooterTemplate am displaying sum of this column. here i want to apply same logic all 12 months.

below is my code.

columns.Group(group => group.Title("200<hr> Jan").Columns(Jan =>
                        {
                            Jan.Bound(p => p.Jan_A).Width(60).Filterable(false).Editable("function(dataItem) {if (((new Date).getMonth() + 1) <= 1) {return true}else return false;}").ClientFooterTemplate("#=kendo.toString(conditionalSum(), '0,0')#").HtmlAttributes(new { style = "text-align: center;" }).HeaderHtmlAttributes(new { @class = "col-sm-1 col-md-1 col-lg-1 col-xl-1 ", style = "white-space: normal;text-align: center;" }).Title("A / F");
                        }));

below is Javascript code

function conditionalSum() {
        //alert("a")
        var dataSource = $("#Grid").data("kendoGrid").dataSource;
        var filters = dataSource.filter();
        var allData = dataSource.data();
        var query = new kendo.data.Query(allData);
        var data = query.filter(filters).data;

        //var data = dataSource.data();
        var item, Jansum = 0,Febsum=0;
        for (var idx = 0; idx < data.length; idx++) {
            item = data[idx];
            if (item.Jan_A != null) {
                if (item.Jan_A.includes("/") && item.Jan_A.split("/")[0] != "") {
                    Jansum += parseInt(item.Jan_A.split("/")[0]);
                }
            }
            if (item.Feb_A != null) {
                if (item.Feb_A.includes("/") && item.Feb_A.split("/")[0] != "") {
                    Febsum += parseInt(item.Feb_A.split("/")[0]);
                }
            }
        }
        return kendo.toString(Jansum, "0,0");
        
    }

 

this function is working fine for only month. how can i use same function for remaining 11 columns.

Anton Mironov
Telerik team
 answered on 21 May 2021