Telerik Forums
UI for ASP.NET MVC Forum
3 answers
956 views

Hi

I'm try to get data from an external Api (different domain), how can i send an Authentication token with my request   

e.g

.DataSource(dataSource => dataSource

  .Custom()
  .PageSize(20)
   .Schema(schema => schema.Model(m => m.Id(p => p.subid)))
   .Transport(transport =>
        {
            transport.Read(read =>
             read.Url("http://localhost:5000/api/subscriber/getall")
                .DataType("jsonp")
                .Type(HttpVerbs.Get)

                 );      

      })}

))

Tsvetina
Telerik team
 answered on 09 May 2018
2 answers
158 views

Situation - 

I have a grid, which is set to use a popup editor.  Here's the relevant .editable section from the grid:

.Editable(editable => editable.Mode(GridEditMode.PopUp)
  .TemplateName("JobPopup")
  .Window(w => w.Title("Edit Job")
    .Width(800))
  .DisplayDeleteConfirmation("Are you sure you want to deactivate this job?")
)

 

I'm trying to change two of the fields in the popup editor from text boxes to rich editors.  Everything seems to work fine in Chrome, but not in Internet Explorer.

In IE, once either of the editors receives focus, it has to lose it before the built-in "Update" button works.

if I focus one of the editors and enter some text, clicking the window's "Update" button doesn't work - I get a flash, the page scrolls a bit, but it doesn't submit (no fiddler calls to the back end).  Pushing the "Update" button again submits the data as expected (because the editor no longer has focus?).  

If I edit the field then leave the editor (tab out, click another field, etc.), the "Update" button works fine first click. 

If I never enter one of the editors, the "Update button works first click.

Hopefully someone has an idea for me?  Company standards require both Chrome and IE functionality, or I'd just tell the user "Use Chrome!".

 

Here's the Popup Editor Template in question:

@model JobBank.Models.JobsGridViewModel
 
<table style="margin-left:15px;margin-right:15px;width:700px">
  <tr>
    <td style="vertical-align:top;">
      @Html.LabelFor(model => model.JobName, new { @class = "control-label" })<br />
      @Html.Kendo().TextBoxFor(model => model.JobName).HtmlAttributes(new { @class = "form-control", style = "width:400px", maxlength = "50" })
      <br />
      @Html.ValidationMessageFor(model => model.JobName, "", new { @class = "text-danger" })
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      @Html.LabelFor(model => model.ContactID, new { @class = "control-label" })<br />
      @(Html.Kendo().DropDownListFor(model => model.ContactID)
                    .OptionLabel("-- No Contact Selected --")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataSource(source => {
                      source.Read(read => {                       
                        read.Action("GetPicklist", "Contacts").Data("grdEmployerJobs_GetContactLookupParameters").Type(HttpVerbs.Post);
                      });
                    })
                    .HtmlAttributes(new { data_value_primitive = "true", style = "width:400px" })
      )
      <br />
      @Html.ValidationMessageFor(model => model.ContactID, "", new { @class = "text-danger" })
    </td>
  </tr>
   <tr>
    <td style="vertical-align:top;">
      <table style="width:75%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.JobTypeID, new { @class = "control-label" })<br />
            @(Html.Kendo().DropDownListFor(model => model.JobTypeID)
                    .OptionLabel("-- No Job Type Selected --")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataSource(source => {
                      source.Read(read => {
                        read.Action("GetPicklist", "JobTypes").Data("grdEmployerJobs_GetJobTypeID").Type(HttpVerbs.Post);
                      });
                    })
                    .HtmlAttributes(new { data_value_primitive = "true", style = "width:300px" })
            )
            <br />
            @Html.ValidationMessageFor(model => model.JobTypeID, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top;">
            @Html.LabelFor(model => model.Rate, new { @class = "control-label" })<br />
            @Html.Kendo().TextBoxFor(model => model.Rate).HtmlAttributes(new { @class = "form-control", style = "width:200px", @maxlength = "50" })
            <br />
            @Html.ValidationMessageFor(model => model.Rate, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      <table style="width:100%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.DayShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.DayShift)
            <br />
            @Html.ValidationMessageFor(model => model.DayShift, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.EveningShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.EveningShift)
            <br />
            @Html.ValidationMessageFor(model => model.EveningShift, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.NightShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.NightShift)
            <br />
            @Html.ValidationMessageFor(model => model.NightShift, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.WeekendShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.WeekendShift)
            <br />
            @Html.ValidationMessageFor(model => model.WeekendShift, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      <table style="width:75%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.DateJobPosted, new { @class = "control-label" })<br />
            @Html.EditorFor(model => model.DateJobPosted, new { htmlAttributes = new { @class = "form-control" } })
            <br />
            @Html.ValidationMessageFor(model => model.DateJobPosted, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top;">
            @Html.LabelFor(model => model.EndDatePosted, new { @class = "control-label" })<br />
            @Html.EditorFor(model => model.EndDatePosted, new { htmlAttributes = new { @class = "form-control" } })
            <br />
            @Html.ValidationMessageFor(model => model.EndDatePosted, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      <table style="width:75%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.JobFilled, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.JobFilled)
            <br />
            @Html.ValidationMessageFor(model => model.JobFilled, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; width:500px">
      @Html.LabelFor(model => model.Skills, new { @class = "control-label" })<br />
      @Html.Kendo().EditorFor(model => model.Skills).Tools(tools => tools
         .Clear()
         .Bold().Italic().Underline()
         .InsertUnorderedList().InsertOrderedList()
         .Outdent().Indent()
         .CreateLink().Unlink()
         .FontColor().BackColor()
       ).Encode(true)
      <br />
      @Html.ValidationMessageFor(model => model.Skills, "", new { @class = "text-danger" })
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; width:500px">
      @Html.LabelFor(model => model.Notes, new { @class = "control-label" })<br />
      @Html.Kendo().EditorFor(model => model.Notes).Tools(tools => tools
         .Clear()
         .Bold().Italic().Underline()
         .InsertUnorderedList().InsertOrderedList()
         .Outdent().Indent()
         .CreateLink().Unlink()
         .FontColor().BackColor()
       ).Encode(true)
      <br />
      @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
    </td>
  </tr>
</table>
Chris T.
Top achievements
Rank 1
 answered on 09 May 2018
2 answers
3.8K+ views

When loading a Web-App that includes some of the Kendo UI components I can see in the Browser that it throws an error: 414 - Request URL too long. The URL is:

https://mywebsite/Content/kendo/2018.1.221/data:application/font-woff;base64,...

and then a lot of characters (I assume that is the content of the woff file). The Web-App is hosted on Azure, the web.config includes the correct MimeMap. What is going wrong?

Regards
Heiko

 

Heiko
Top achievements
Rank 1
Iron
Veteran
 answered on 08 May 2018
7 answers
266 views

I have a grid set when I'm pulling one of the fields in using an inline drop down list.  

I can retrieve the values I need from the dropdown list data item, and i can set the values in the grid's edit row using the dropdown list.

The following code works fine as long as A, B, C, and D are editable... BUT... these values should not be editable.  The values in these cells should be driven strictly by the values of the drop down list.  

I feel like I should be able to display the values in a template column, but I'm not finding any good documentation on column.template.

 

function ddl_OnSelect(e)
{
    var DDLdataItem = this.dataItem(e.item);
 
    var A = DDLdataItem.A;
    var B = DDLdataItem.B;
    var C = DDLdataItem.C;
    var D = DDLdataItem.D;
    
    var grid = $('#grd').data('kendoGrid');
     
    var editRow = grid.dataItem("tr.k-grid-edit-row");
 
     
    editRow.set("A", DDLdataItem.A);
    editRow.set("B", DDLdataItem.B);
    editRow.set("C", DDLdataItem.C);
    editRow.set("D", DDLdataItem.D);
 
}
Viktor Tachev
Telerik team
 answered on 08 May 2018
3 answers
249 views

Hi,

I am expecting a large amount of data to be displayed in the grid and used paging. I tried to use the Kendo.Mvc.Extensions ToDataSourceResult method but don't want to expose my context in the controller. Is there any way to achieve this?

Georgi
Telerik team
 answered on 08 May 2018
2 answers
570 views

Hello!

I've been trying to see if there's a way to set the datasource for in-row filtering? I'm confused since I added the filtering successfully to the in-menu filtering but the in-row just ignores and uses the default grid's datasource to fetch all filter options. Here's an excerpt from a defined column in the grid:

cols.Bound("JobNumber").Title("Job").Filterable(f => f.Multi(true).Search(true).DataSource(ds => ds.Read("JobNumbers", "Filter")));

So the above totally works as expected using the in-menu filtering but the in-row ignores this. Anyway to achieve what I'm looking for? Thanks!

Caleb
Top achievements
Rank 1
 answered on 04 May 2018
2 answers
5.5K+ views

Hello

 

I am trying out Kendo for MVC and I'm having some difficulties with a custom URL action.

Previously I used DataTables in which I had a column for Edit, Details and Delete options which triggers the record to edit and a JavaScript function that initializes a partial view popup where I can edit, view or delete the record.

 

Here is an example of the code from the column inside DataTables that I used:

return '<a href="@Url.Action("Edit", "Country")?id=' + data + '" class="editCountry">Edit</a>;

 

And here is the JavaScript function that us triggered when I click on Edit:

$('#countriesTable').on("click", ".editCountry", function (event) {
 
                event.preventDefault();
 
                var url = $(this).attr("href");
 
                $.get(url, function (data) {
                    $('#editCountryContainer').html(data);
 
                    $('#editCountryModal').modal('show');
                });
 
            });

 

Here is my current code for the edit button inside the Kendo Grid:

columns.Template(@<text>Actions</text>).ClientTemplate("<a href='" + Url.Action("Edit", "Country") + "/#=CountryIdentifier#'>Edit</a>");

 

When I click on the edit button it tries to edit the record on a new page which obviously won't work because I'm using a partial view.

 

How can I trigger the same JavaScript function I used in my DataTables Column inside my Kendo Grid Column?

 

Thanks

Preslav
Telerik team
 answered on 04 May 2018
4 answers
412 views

Hi,

I was trying to frozen my first column on Kendo Grid:

            @(Html.Kendo().Grid<AssortmentResult>()
                            .Name("transomGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(d => d.Style).Width(100).Locked(true).Lockable(false).Filterable(false);
                                columns.Bound(d => d.StyleOption).Width(110).Filterable(false);
                                columns.Bound(d => d.WidthDescription).Title("Width").Width(100).Filterable(true);
                                columns.Bound(d => d.DoorCollectionCode).Width(150).Filterable(true);
                                columns.Bound(d => d.GlassDesign).Width(150).Filterable(true);
                                 columns.Bound(d => d.DealerMarkupWithCommission).Width(150).Filterable(false);
                                columns.Bound(d => d.FlatRate).Width(150).Filterable(false);
                                columns.Bound(d => d.FinalRetailPrice).Width(150).Filterable(false);
                                columns.Bound(d => d.DoubleDeduct).Width(150).Filterable(false);
                            })
                        .DataSource(d => d
                            .Ajax()
                            .PageSize(500)
                            .Read(read => read.Action("DisplayTransoms", "Existing", new { area = "Assortment", assortmentId = (int)ViewData["assortmentId"] }))
                        )
                    .Scrollable(scrollable => scrollable.Height(540))
                    .Reorderable(reorderable => reorderable.Columns(true))
                    .Resizable(resizable => resizable.Columns(true))
                    .Filterable(filterable => filterable
                        .Extra(false)
                        .Operators(operators => operators
                            .ForString(str => str.Clear()
                                .StartsWith("Starts with")
                                .IsEqualTo("Is equal to")
                                .IsNotEqualTo("Is not equal to")
                            ))
                        )
                    .Pageable()
                    .Sortable()

)

But when rendered, the column header of the first column is missing but its content is being displayed which make the header and the content of the grid not even. 

 

Viktor Tachev
Telerik team
 answered on 04 May 2018
1 answer
792 views

Hey folks,

When I export my grid to Excel, the client footer value is formatted as a string (see the Excel image below).

Is it possible to tell Excel that this is a numeric value?

Thanks,

Ken

columns.Bound(e => e.Total).Title("Amount").Width(120).Format("{0:C}").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#");
Alex Hajigeorgieva
Telerik team
 answered on 01 May 2018
4 answers
1.4K+ views

Hi everyone,

I have aproblem with the Kendo UI TreeView and I'm looking for a solution for a while now.

In my view I fill my TreeView like this:

Html.Kendo().TreeView()
                    .Name("treeview")
                    .BindTo((IEnumerable<TreeViewItemModel>) ViewBag.inlineDefault)
                    .Events(events => events
                        .Select("onSelect")
 )
private IEnumerable<TreeViewItemModel> GetDefaultInlineData(ArrayList tables)
        {
            List<TreeViewItemModel> names = tables.Cast<TreeViewItemModel>().ToList();
 
            List<TreeViewItemModel> inlineDefault = new List<TreeViewItemModel>
            {
                    new TreeViewItemModel
                    {
                        Text = "Tables",
                        Items = names
                    }
            };
 
            return inlineDefault;
        }

My onSelect funtion is the following:

<script>
    function onSelect(e) {
        $.ajax({
            type: 'POST',
            url: '/Editor/GetTableContent' ,
            data: { tableName: ?????? },
            success: function (data) {
                $('#table').html(data);
            }
        }).done(function () {
            alert('Done');
        });
    }
</script>

It calls a mehtod in my controller that needs the name of the selected node as parameter (string) to display the content of a table in a grid.

Is there a possibility to get what I need?

Thx for your help!

Erik

Ivan Danchev
Telerik team
 answered on 01 May 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?