<p>For a .netcore 3.1 web application I have a grid using grideditmode.inline and the columns are loaded using columns.LoadSettings(Model.columns)</p><p>The width of the editable columns is set in the Model.columns but no matter how I change the size, it always displays the same width.&nbsp; The width is too small in either state (editable or view) that you cannot see a full number if it is longer than 4 characters.</p><p>The columns that are set to not editable seem to follow the column width setting as passed in the columns.LoadSettings(Model.columns).&nbsp; I set the first editable field to a ridiculously large number and it made no difference.</p><p>What am I missing?</p><p>&nbsp;</p><p>&nbsp;</p>

This is a snippet of the columns - only showing a section for brevity since it is over 40 columns total (only half are visible.)

     IList<GridColumnSettings> columns = new List<GridColumnSettings>
        {
            new GridColumnSettings
            {
                Member = "rowId",
                //Member = "rowId",
                Title = "Row Id",
                Visible = false
                //Locked = true
            },
            new GridColumnSettings
            {
                Member = "fgid",
                Visible = false
            },
            new GridColumnSettings
            {
                Member = "PartNumber",
                //Member = "PartNumber",
                Title = "Part",
                Width = "150px",
                Filterable = true,
                //Visible = true,
                Locked = true
            },
            new GridColumnSettings
            {
                Member = "currentMon1",
                Title = titles[0],
                Visible = true,
                Width = "500px",
                Filterable = false,
                Locked = false
            },
             new GridColumnSettings
            {
                Member = "currentMon1Id",
                Title = "Mon1Id",
                Visible = false
            },

this is the grid:

  @(Html.Kendo().Grid<PartRowView>().Name("grid1")
        .Sortable()
        .Editable(x => x.Mode(GridEditMode.InLine))
        .Scrollable()
        .Filterable()
        .Resizable(r => r.Columns(true))
        .ToolBar(tools => tools.Excel().IconClass("k-icon k-i-download"))
        .Excel(excel => excel
             .FileName(Model.filename)
             .Filterable(true)
            .AllPages(true)
            .ProxyURL("/forecast/TestPage?handler=Save")
          )
        .Columns(columns => columns.LoadSettings(Model.columns)
        )
    .DataSource(ds => ds.Ajax()
    .Events(events => events.Error("errors_handler"))
    .ServerOperation(false)
    .Read(r => r.Url(Url.Action() +"?handler=Read").Data("forgeryToken"))
    .Update(u => u.Url(Url.Action() +"?handler=Update").Data("forgeryToken"))
    .Model(model =>
    {
        model.Id(p => p.rowId);
        model.Field(p => p.PartNumber).Editable(false);
        model.Field(p => p.currentMon1Id).Editable(false);
        model.Field(p => p.currentMon2Id).Editable(false);
        model.Field(p => p.currentMon3Id).Editable(false);
        model.Field(p => p.currentMon4Id).Editable(false);
        model.Field(p => p.currentMon5Id).Editable(false);
        model.Field(p => p.currentMon6Id).Editable(false);
        model.Field(p => p.currentMon7Id).Editable(false);
        model.Field(p => p.currentMon8Id).Editable(false);
        model.Field(p => p.currentMon9Id).Editable(false);
        model.Field(p => p.currentMon10Id).Editable(false);
        model.Field(p => p.currentMon11Id).Editable(false);
        model.Field(p => p.currentMon12Id).Editable(false);
        model.Field(p => p.currentMon13Id).Editable(false);
        model.Field(p => p.currentMon14Id).Editable(false);
        model.Field(p => p.currentMon15Id).Editable(false);
        model.Field(p => p.currentMon16Id).Editable(false);
        model.Field(p => p.currentMon17Id).Editable(false);
        model.Field(p => p.currentMon18Id).Editable(false);
    })
        .PageSize(100)
    )
    .Pageable()
)

In the following example, the width of the filter boxes are much bigger than the data for that column.  For example, the max number of digits for Order ID is 5.  Therefore, the filter box only needs to be wide enough to hold 5 digits. 

https://demos.telerik.com/aspnet-core/grid/filter-row

How do you reduce the width of the filter boxes?

Thanks,

Robert

I have a page using ListView paging which is well.
Problem is that the pager shows a dropdown instead of numeric links, unless the width of div containing listview is increased (to 50% in my case)

This is how it looks when div is wide (50% width)

This is how I need it to be. with numeric links

But this is how it looks now (with width at 30%)

Unfortunately I need the width at 30% due to the content on the right side of the listview.

My question is how do I force the listview to show pager as numeric links only?

Hello,

is there a possibility to support multitouch input on Pdf Viewer and Image Editor?

Moving and tapping is supported. So I can scroll through the pages for example. But I need to use zoom and pinch gesture for zooming in or out to documents / images also.

As we need to zoom just areas (e.g. maps with geo information) and keep the menus on top, the pages are not user-scalable as a whole:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no,text/html,charset=utf-8">

Is there any workaround to catch the event and set the zoom factor?

And is there a possibility to couple the mouse wheel / double click event to the zoom factor?

Thanks,

Christine

Hi,

I have the requirement where I need to get the confirmation from the user when they click on the delete button in the listview before proceeding to destroy action. I am trying to subscribe to the click event on the delete button to cancel the destroy action. But I am unable to do so as Kendo has already bound the delete button click to destroy action.

Please suggest/guide on how I can get a confirm box displayed before proceeding to destroy action.

Thanks,

Ashwini

I have a grid worth of data coming from 2 different data sources that I smash together on the server side and send to the grid. Data from one of my sources is fine (ish... it is pretty slow too), data from the other source is brutally slow. So I want to send all of the data from source one and the first page worth of data from source 2 to the grid on page load, and then use JQuery/ajax to do a deferred load on the remaining data in the background.

I do not want to do an AJAX call per page because data source 1 isn't fast enough for that.

Since the second data source is so slow, I am chunking the unpopulated data into page sized chunks (blocks of 10) and letting the async goodness do its thing. I can do the ajax and get the supplemental data without a problem. I just can't seem to get the grid to respect the updated data. I can't replace the whole datasource's data set at once because we are doing this all async and we will have data pouring in all willy nilly and we don't want to have potential over writes. So we have to update it per row.

const fieldsToUpdate = ["field1", "field2", "field3", "field4"];

$.ajax({
.... blah blah blah ....
success: function(responseData) {

     const accounts = responseData.Data.AccountList;
     for (let idx = 0; idx < accounts.length; idx++) {
              const curAccount = accounts[idx];
              const dataItem = theGrid.dataSource.get(curAccount.AccountNumber);
              if (dataItem) {
			console.log(`Deferred data load for: ${curAccount.AccountNumber}`);
			for (let propIdx = 0; propIdx < fieldsToUpdate.length; propIdx++) {
				const key = fieldsToUpdate[propIdx];

                                // because the set method will ignore anything that isn't marked as 'editable' and I don't care about that
                                let hasEdit = false;
				if (dataItem.fields[key].hasOwnProperty("editable")) {
					dataItem.fields[key].editable = hasEdit = true;
				}

				// actually set the value
				dataItem.set(key, curAccount[key]);

                                // set it back to whatever it was
                                  if (hasEdit) {
					dataItem.fields[key].editable = false;
				}
			}

                        // we don't care
			dataItem.dirtyFields = {};
                        dataItem.dirty = false;
	}
     }
}
});
				
				

So the above kinda sorta works. It will display the right data until you attempt to move to a different page. Then it looses it mind and the data reverts back to what it was originally (unset) and the paging breaks and the grid just stops working all together. There are no errors visible in the console.

What is the proper way to update individual rows of data in a grid that may or may not be visible on the current page of the grid?

We  seem to be seeing a mis-match in paging options on grids used across our system.

The majority have the following default: 

However, we're seeing a couple grids with the drop-down version used:

What could cause this? There's no paging options set on either of the grids however both are showing different paging options.

For reference, here's a snippit of the grid displaying the paging drop-down: 

I use Grids with both popup and inline editing.  My application is in English and I have not configured any localization at all.  I have the problem of unwanted localization when editing, buttons (inline and popup) and Window header (popup, see image) are getting localized. In my case with Swedish translations. It seems to be the same as the server Windows setting. If I use a client with English OS and settings, the popup is still in server localization. If I install on a English OS, the buttons and headers are in English.

This always shows "en-US" as result, whatever combination of Swedish/english server/client browser I use.

var culture = kendo.culture();
console.log(culture.name); 

How do I turn off this "default" OS unwanted localization and make everything in English regardless of OS language?

How you do bind a value to an input when using a responsive columns template? The value wont be saved from the input when trying to save. E.G: Row is added, I edit the value, but when I save, it goes back to 0.

        columns.Template("#=resColTemplate(data)#").Title("Items").Media("(max-width: 475px)");

<script id="responsive-column-template" type="text/x-kendo-template">
    <strong>Amount</strong>
    <p class="col-template-val">
        <input class="numeric" data-bind="#: Amount #" value="#: Amount#" required />
    </p>
</script>