Telerik Forums
UI for ASP.NET MVC Forum
7 answers
1.2K+ views

Hi,

Is it possible to programmatically set a column's filter whose "multi" flag is set to true on grid load?

The code I have here:

1.$("#Grid").data("kendoGrid").dataSource.filter({
2.    field: "Person",
3.    operator: "eq",
4.    value: "Brian"
5.});

... doesn't seem to filter properly or show the checkbox for the selected filter.  It filters out everything and no checkboxes in the filter menu are selected.

Thanks!

Shishir
Top achievements
Rank 1
 answered on 23 Jul 2019
4 answers
782 views

Hello, in example https://dojo.telerik.com/ahepILiP, if field is nullable: true, then default value not used.

In version 2019.2.619 of kendo ui mvc wrappers for all srting values initialize "nullabe: true"

changes: Kendo.Mvc/UI/DataSource/ModelDescriptor.cs

+                    IsNullable = p.ModelType.Name == "String" ? true : p.IsNullableValueType

And all my default values for string fields is null, if remove this changes then work fine.

Alex Hajigeorgieva
Telerik team
 answered on 22 Jul 2019
6 answers
2.7K+ views

Hello,

I'm working on a project where I'm trying to use the Listbox. My end goal is to have the items in the 'selected' listbox passed to a POST controller.

Controller.cs

01.[HttpGet]
02. public ActionResult Create()
03. {
04.     List<SelectListItem> memberList = MemberRepository.ListAllMembers(request);
05.     ViewBag.memberList = memberList;
06. 
07.     return View("Create", new MemberSelection());
08. }
09. [HttpPost]
10. [ValidateAntiForgeryToken]
11. public ActionResult Create(MemberSelection m)
12. {
13.     if (ModelState.IsValid)
14.             MemberRepository.Create(request);
15.         else
16.             return View("Create",m);
17.     return RedirectToAction("Members");
18. }

 

Create.cshtml

001.@model MembersDomain.Entities.Member
002. 
003.@{
004.    ViewBag.Title = "Create";
005.    Layout = "~/Views/Shared/_Layout.cshtml";
006.}
007. 
008.@if (!Html.ViewData.ModelState.IsValid)
009.{
010.    <div class="alert alert-danger" id="validationSummary">
011.        @Html.ValidationSummary()
012.    </div>
013.}
014.<div class="row" style="margin-top: 25px;">
015.    <div class="col-lg-12">
016.        <h4>Select Members</h4>
017.    </div>
018.</div>
019.<div class="row" style="margin-top: 25px;">
020.    <div class="col-lg-12">
021.        <p>Use this form to add members to a group.</p>
022.    </div>
023.</div>
024.@using (Html.BeginForm("Create", "Members", FormMethod.Post, new { id = "create" }))
025.{
026.    @Html.AntiForgeryToken()
027.    @Html.ValidationSummary()
028. 
029.    <div class="row" style="margin-top: 25px;">
030.        <div class="col-lg-12">
031.            <strong>Selected Members:</strong>
032.        </div>
033.    </div>
034.    <div class="row" style="margin-top: 25px;">
035.        <div class="col-lg-12">
036.            <div id="example" role="application">
037.                <div class="demo-section k-content wide">
038.                    <label for="optional" id="allMembers">All Members</label>
039.                    <label for="selected">Selected</label>
040.                    <br />
041.                    @(Html.Kendo().ListBox()
042.            .Name("optional")
043.            .Toolbar(toolbar =>
044.            {
045.                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
046.                toolbar.Tools(tools => tools
047.                    .TransferTo()
048.                    .TransferFrom()
049.                    .TransferAllTo()
050.                    .TransferAllFrom()
051.                );
052.            })
053.            .HtmlAttributes(new { title = "AllMembers" })
054.            .ConnectWith("selected")
055.            .BindTo(ViewBag.memberList)
056.                    )
057. 
058.                    @(Html.Kendo().ListBox()
059.            .Name("selected")
060.            .HtmlAttributes(new { title = "SelectedMembers" })
061.            .BindTo(new List<SelectListItem>())
062.            .Selectable(ListBoxSelectable.Multiple)
063.                    )
064.                </div>
065.            </div>
066.        </div>
067.    </div>
068.    <div class="row" style="margin-top: 25px;">
069.        <div class="col-lg-12">
070.            <p><a class="btn btn-primary btn-lg" href="#" onclick="document.getElementById('create').submit()">Submit</a></p>
071.        </div>
072.    </div>
073.}
074. 
075.<style>
076.    .demo-section label {
077.        margin-bottom: 5px;
078.        font-weight: bold;
079.        display: inline-block;
080.    }
081. 
082.    #allMembers {
083.        width: 270px;
084.    }
085. 
086.    #example .demo-section {
087.        max-width: none;
088.        width: 515px;
089.    }
090. 
091.    #example .k-listbox {
092.        width: 236px;
093.        height: 310px;
094.    }
095. 
096.        #example .k-listbox:first-of-type {
097.            width: 270px;
098.            margin-right: 1px;
099.        }
100.</style>
101. 
102.<script type="text/javascript">
103.    function sendAntiForgery() {
104.        return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }
105.    }
106.</script>

 

I am using Visual Studio 2015 and the project is ASP.NET MVC. Any insight is appreciated!

TJim
Top achievements
Rank 1
 answered on 19 Jul 2019
14 answers
875 views

I have a grid nested within a tab control, with quite a few initially hidden columns.

This looks fine, until some of the hidden columns are shown, when most of the grid expands along with a horizontal scrollbar being shown. However, the toolbar which has the Export To Excel button in it, remains the original width, giving a messy unprofessional look to the screen.

How can I get the toolbar to expand along with the rest of the grid?

I've attached two screenshots, and the Grid code is:-

<div class="panel-body" style="font-size:0.85em;">
 
       @(Html.Kendo().TabStrip()
       .Name("tab")
       .Items(t =>
       {
       t.Add().Text("Listing")
           .Selected(true)
           .Content(@<text>
 
 
               @(Html.Kendo().Grid<WLI_Payments.Models.View_Requests_Master>
   ()
   .Name("Grid")
 
   .Columns(col =>
   {
       col.Bound(o => o.RequestID).Title("Ref.");
       col.Bound(o => o.Directorate).Title("Directorate");
       col.Bound(o => o.RechargeToDirectorate).Title("Recharge Directorate").Hidden();
       col.Bound(o => o.RequestingUser).Title("Requester");
       col.Bound(o => o.Site).Title("Site").Hidden();
       col.Bound(o => o.Location).Title("Location").Hidden();
       col.Bound(o => o.CreationDate).Title("Requested").Format("{0:d}").Width(70);
       col.Bound(o => o.SessionDate).Title("Session").Format("{0:d}").Width(70);
       col.Bound(o => o.PlannedStart).Title("Start").Format("{0:t}").Hidden();
       col.Bound(o => o.PlannedEnd).Title("End").Format("{0:t}").Hidden();
       col.Bound(o => o.ReasonType).Title("Reason Type").Hidden();
       col.Bound(o => o.MedicName).Title("Req. Practitioner");
       col.Bound(o => o.SessionType).Title("Type");
       col.Bound(o => o.PointOfDelivery).Title("PoD");
       col.Bound(o => o.ForecastCost).Title("Forecast £").Format("{0:C}").Width(70);
       col.Bound(o => o.ActualCost).Title("Actual £").Format("{0:C}").Hidden().Width(70);
       col.Bound(o => o.PaymentAmount).Title("Payment").Format("{0:C}").Hidden();
       //col.Bound(o => o.ApprovalStatus).Title("Status");
       //col.Bound(o => o.PaymentStatus).Title("Pay Status");
       col.Bound(o => o.ActualMedicName).Title("Actual Practitioner").Hidden();
       col.Bound(o => o.ActualStart).Title("Start").Format("{0:t}").Hidden();
       col.Bound(o => o.ActualEnd).Title("End").Format("{0:t}").Hidden();
       col.Bound(o => o.RequestTypeDescription).Title("Pathway").Filterable(false).Sortable(false);
       col.Bound(o => o.PaymentBatchID).Title("Batch ID").Hidden();
       col.Bound(o => o.ApprovalStatusCode).Title("Status").ClientTemplate("<span title='#=TotalStatusText#' data-toggle='tooltip' data-placement='top' ><img alt='#=TotalStatusText#' src='" + Url.Content("~/Content/Images/") + "#=TotalStatusGlyph#'  /></span>").Sortable(false).Filterable(false).Width(40);
       //col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=showSubmit#'><button onclick='submitRequest(#=RequestID#);' class='btn btn-primary btn-sm'>Submit</button></span>");
 
       col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=QueryButton#'><button class='btn btn-warning btn-xs xssBtn' onclick='manageQuery(#=RequestID#);'><span class='glyphicon glyphicon-warning-sign' data-toggle='tooltip' data-placement='top' title='Manage query'></span></button></span><span style='margin-left:2px;'><button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='View Form' onclick='qwikView(#=RequestID#);'><span class='glyphicon glyphicon-search'></span></button></span>").Sortable(false).Filterable(false).Width(60);
 
       col.Bound(o => o.Backdated).Title("").ClientTemplate("<button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='Admin' onclick='admin(#=RequestID#);'><span class='glyphicon glyphicon-flash'></span></button>").Sortable(false).Filterable(false).Visible((bool)ViewBag.IsAdmin);
 
       col.Bound(o => o.RequestID).Title("").ClientTemplate("#=FinanceQueryButtonCode#").Sortable(false).Filterable(false).Visible((bool)ViewBag.ShowQueryButton);
 
   })
    .ClientDetailTemplateId("subdetailsTemplate")
    .Events(e => e.DataBound("onBound").DataBound("exportUpdate"))
    .ToolBar(toolBar =>
                toolBar.Custom()
                .Text("Export To Excel")
                .HtmlAttributes(new { id = "export" })
                 
                .Url(Url.Action("ExportData", "Enquiry", new { page = 1, pageSize = "~", filter = "~", sort = "~", directorateID = 0, tStatusCode = 0 }))
                )
       .DataSource(ds => ds
       .Ajax()
       .Model(m => m.Id(p => p.RequestID))
       .PageSize(15)
       .Read(rd => rd.Action("RD_Requests", "Enquiry").Data("gridFilter")
       )
       )
 
       .Pageable(p => p.Refresh(true))
       .Sortable()
 
       .Filterable()
       .ColumnMenu()
               )
 
 
 
 
 
 
 
 
           </text>);

 

Thanks

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 18 Jul 2019
3 answers
1.4K+ views

I have read all (most of) the entries in this forum regarding this matter and cannot seem to find my error. I want to upload a single file that I then pass onto another system. As multiple users could upload at the same time I use a GUID as a message ID and create a folder per user. Here I get the document (from a backend system where I would then like to upload the file to) and create the GUID:

       public IActionResult Open()

        {
            ViewBag.MessageId = Guid.NewGuid().ToString();
            return View("DocumentOpen", new List<string> { "in open event" });
        }

Here is part of my View - I have many fields but I have created a view with only the upload widget:

@using Kendo.Mvc.UI

<form method="post" enctype="multipart/form-data">
    <div class="k-content">
        @(Html.Kendo().Upload()
              .Name("attachments")
              .Multiple(false)
              .Async(async => async
                  .Save("UploadFileAsync", "Document", new { messageId = ViewBag.MessageId })
                  .Remove("RemoveFileAsync", "Document")
                  .AutoUpload(true)
              )
        )
    </div>
</form>

Here the processing of the upload - as you can see the name and the parameter coincide (attachments) and the messageId has the GUID

        [HttpPost]
        public ActionResult UploadFileAsync(IEnumerable<HttpPostedFileBase> attachments, string messageId)
        {
            if (attachments == null) return Content("");

            HttpPostedFileBase fileBase = attachments.FirstOrDefault();
            var fileName = Path.GetFileName(fileBase?.FileName);
            if (fileName != null)
            {
                var serverDirectory = System.Web.HttpContext.Current.Server.MapPath("~/" + messageId);
                var serverPath = Path.Combine(serverDirectory, fileName);
                fileBase.SaveAs(serverPath);
            }


            return Content("");
        }

When running the code I get a GUID in the messageId field, the attachments field has a count of 0 i.e. It is *not* null. I have tried multiple examples here but am always getting the same error. 

 

Any ideas?

 

PS: I cannot upload the project as it needs a backend document management system :(

Ianko
Telerik team
 answered on 16 Jul 2019
2 answers
114 views

MVC 5; .Net Core; Visual Studio 2017; Telerik 2019.2.514

I have a grid that uses SetOptions to load the users saved state.  I am using incell editing.  After using setOptions my events for Editable no longer get hit.  Is there something I have to set manually after this like with the command buttons?

--Below I reassign the btnEdit event to the command button

var options = JSON.parse(response.myOptions);
options.columns[0].command[0].click = btnEdit;
grid.setOptions(options);

 

--My cell from grid

columns.Bound(p => p.ClearedBy).Title(text: "Cleared by").Editable("ClearedByEditable").Lockable(true);

 

--My Editable Event

function ClearedByEditable(e) {

Alert("I am here");

return false;

}

Tsvetomir
Telerik team
 answered on 16 Jul 2019
2 answers
400 views

     Hello,

In my current project we are facing some issues regarding XSS using the Editor in MVC. We already use the AntiXss library to "clean" the html posted to the server but we are facing the following difficulty.

In the editor "Insert Hyperlink" functionality, we have been warned that a possible script can be run by inserting malicious content to the Tooltip field.

For example look at "Hyperlink xss example.png".

I have already reviewed the documentation Telerik provides regarding this XSS but didn't find anything related to this particular issue.

Is there a way to remove the Tooltip field from the Insert Hyperlink form? (Using MVC, not Jquery). Or any other possible solution for this problem.

 

Thanks

 

 

Dimitar
Telerik team
 answered on 16 Jul 2019
3 answers
302 views

Hi,

For a project I'm required to use Bootstrap 4, which in turn requires jQuery 3.+ (currently using 3.4.1).

While Kendo UI officially only supports jQuery 1.12.4, I've been using jQuery 3.+ without any problems, until now.

 

I'm exporting HTML into PDF using the Kendo UI Drawing functionality (snippet below). This snippet generates the PDF document with content without problems when using jQuery 1.12.4 or 2.2, but fails to add content when using jQuery 3.+. I've tried versions 3.0.0, 3.3.1 and 3.4.1 without success. Browsers I've tested: Firefox 67/68, Internet Explorer 11 and Chrome 75.

Unfortunately I'm unable to downgrade jQuery version due to Bootstrap 4 requirement, and would like to ask how I can solve this issue using jQuery 3.4.1 (using Kendo UI for MVC version 2019.2.619).

 

Thanks, Matthijs

 

<div class="container">
   <div class="btn btn-primary" id="pdf-export">PDF Export</div>
   <div class="export-to-pdf">
      <div>This is PDF content for page 1.</div>
   </div>
   <div class="export-to-pdf">
      <div>This is PDF content for page 2.</div>
   </div>
   <!-- etc.. -->
</div>

 

$(document).ready(function () {
 
    $("#pdf-export").click(function () {
        createPDF();
    });
 
});
 
function createPDF()
{
    kendo.pdf.defineFont({
        "Lato": "/Content/Fonts/Lato-Regular.TTF",
        "Lato|Bold": "/Content/Fonts/Lato-Bold.TTF",
        "Lato|Bold|Italic": "/Content/Fonts/Lato-BoldItalic.TTF",
        "Lato|Italic": "/Content/Fonts/Lato-Italic.TTF"
    });
 
    var root = new kendo.drawing.Group();
 
    $('.export-to-pdf').each(function () {
        kendo.drawing.drawDOM(this)
            .then(function (group) {
                group.options.set("pdf", {
                    margin: {
                        left: "1cm",
                        right: "1cm",
                        top: "1cm",
                        bottom: "1cm",
                    }
            });
            root.append(group);
        });
    });
    root.options.set("pdf", {
        multiPage: 'true'
    });
 
    kendo.drawing.exportPDF(root).done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "DocumentName.pdf",
            proxyURL: "@Url.Action("PdfExport")",
            forceProxy: true
        });
    });
}

 

Ivan Danchev
Telerik team
 answered on 12 Jul 2019
3 answers
1.5K+ views
Hi ..
I have Master details datageid, in the row details i have tabstrip as partial view i'm loading each tabitem data with 
.LoadContentFrom("Action", "controller", new { Action parameters  });
i have listbox with the tabs names and in  the Change event i select the tabitem

everything work fine and the data loaded well, the problem is if i update the data and trying  to load the data in the details
can not  see the changes , looks like the data is in the cash
here is the details  code  : 

   @(Html.Kendo().DropDownList()
                  .Name("cmbCaseDetails_" + Model.CaseID)
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .BindTo(new List<SelectListItem>() {
                          new SelectListItem() {
                            Text = "Fields", Value = "0" 
                          },
                          new SelectListItem() {
                            Text = "Descriptions", Value = "1"
                          },
                         new SelectListItem() {
                            Text = Relations", Value = "2"
                          }
                 })
                 .SelectedIndex(0)
                 .Events(e => e.Change("onDetailsListChanged"))
        )
       


 @(Html.Kendo().TabStrip()

                    .Name("tabDetails_" + Model.CaseID)
                  .HtmlAttributes(new { style = "background-color:#FFFFFF;border-style:none;" })
                  .Animation(animation => { animation.Enable(false); })
                  .Items(tabCaseDetails =>
                  {
                        tabCaseDetails.Add().Text("Fields")
                          .LoadContentFrom("CaseFields", "CaseDetails", new { CaseID = Model.CaseID });

                      tabCaseDetails.Add().Text("Descriptions")
                        .LoadContentFrom("CaseDescriptions", "CaseDetails", new { CaseID = Model.CaseID });

                      tabCaseDetails.Add().Text("Relations")
                        .LoadContentFrom("CaseRelations", "CaseDetails", new { CaseID = Model.CaseID });


                  })


<script type="text/javascript">
function onDetailsListChanged() {
      
        var val1 = "cmbDetails_" + "@Model.CaseID";
        var value = $("#" + val1).val();
        var id = "tabDetails_" + "@Model.CaseID";
        $("#" + id).kendoTabStrip().data("kendoTabStrip").select(value);  //set the selected tab page
     $("#" + id).kendoTabStrip().reload(value); // try to reload the data  not work

    }
</script>

Ianko
Telerik team
 answered on 12 Jul 2019
5 answers
757 views

Hi,

I try to do that in asp.net mvc :  http://dojo.telerik.com/UViSA/13

I want to add item in a multiselect control and after i want to select it.

It work find to add in datasource of my multiselect but i can't select my new item by code (this.value(add);) .

i don't think it the new item the problem because i can't select a existing item. I tried to select a existing element in this event and a had the same error.

I add in attach files a print screen of my error ("Failed to execute 'removeChild' on 'Node' : Parameter 1 is not of type 'Node'....)

This is my code :

@(Html.Kendo().MultiSelectFor(model => model.LesDestinataires)
           .Name("LesDestinataires")
           .AutoBind(true)        
           .Filter("contains") 
         
       .DataTextField("NomComplet")
       .DataValueField("AdresseCourriel")
               .Events(e =>
               {
                   e.Change("onChange").Filtering("onFiltering");
               })
 
               .DataSource(source =>
               {
                   source.Read(read =>
                   {
                       read.Action("ObtenirCourriels", "Assignation");
                       //read.Type(HttpVerbs.Post);
 
                   })
                   .ServerFiltering(false);
               }
               )
               .HtmlAttributes(new { style = "width:350px;" })
       )

 

after my event : (the problem it at this line : this.value(add);)

function onFiltering(e)
   {
       var filter = e.filter;
        
       if (filter.value.indexOf(";") > 0) {           
           
           var newtag = filter.value.replace(";","");
           var values = this.value().slice();
                    
 
           //e.preventDefault();
           var ajout = {NomComplet: newtag ,AdresseCourriel: newtag };
 
           this.dataSource.add(ajout);
 
           this.dataSource.filter({});
                        
           var add = [newtag];
           
   
           if (values.length> 0) {    
               var merge = $.merge(add, values);
              this.value($.unique(merge));
 
           } else {
              
               this.value(add);
                
           }
 
          this.trigger("change");
 
          //this.dataSource.refresh(); //This don't work
 
       }
 
 
   }

 

My read.action to fill multiselect :

public JsonResult ObtenirCourriels()
{
    List<Mentore> maSource = db.Mentores.ToList();
    var lstMentores = maSource.Take(1).Select(s => new { NomComplet = s.NomComplet_Mentore, AdresseCourriel = s.Courriel_Mentore }); //Take(1) to just fill with one item my multiselect
    
 
    return Json(lstMentores, JsonRequestBehavior.AllowGet);
}

 

 

Thank for your help!

 

Ivan Danchev
Telerik team
 answered on 11 Jul 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?