I want to be able to resize set the default height of the grid rows

Question

1.00/5 (1 vote)

See more:

hi All,

I am using a Kendo Grid as below, I want to be able to Resize set the default height of the Grid rows and then want to be able to resize it, can anybody please help me in this regards, I am searching on google, but not finding an example for it, can you please help me in this regards thanks in advance friends.

<div class="row  table-responsive " style="padding-left: 0%">
    <div id="datalist">
        @(Html.Kendo().Grid<DHCS.BH.Provider.Models.ErrorLogTable>()
                        .Name("LookupGrid")
                .EnableCustomBinding(true)
                .AutoBind(true)
                .Columns(columns =>
                {
                    columns.Bound(p => p.PKErrorLogId);
                    columns.Bound(p => p.ApplicationName).Width(120).Hidden();
                    columns.Bound(p => p.AppUsername).Width(340).Hidden();
                    columns.Bound(p => p.Class); //.ClientTemplate("#=DateFormat(CreatedDate)#").Width(130);
                    columns.Bound(p => p.DateTS).Width(150);
                    columns.Bound(p => p.LogDetailText); //.ClientTemplate("#=DateFormat(ModifiedDate)#").Width(140); ;
                    columns.Bound(p => p.LogType).Width(150).Hidden();
                    columns.Bound(p => p.Method).Width(100);
                    columns.Bound(p => p.NameSpace).Width(100).Hidden();
                    columns.Bound(p => p.Version).Width(100).Hidden();
                })
                            .Pageable()
                            .Resizable(resize => resize.Columns(true))
                            .Sortable()
                            .Scrollable()                            
                            .Filterable(x => x.Extra(false).Operators(O => O.ForString(str => str.Clear().StartsWith("Starts With"))))
                            .HtmlAttributes(new { style = "height:600px;" })
                            .DataSource(ds => ds
                            .Ajax()
                            .PageSize(20)
                            .Model(model => { model.Id(p => p.PKErrorLogId); })
                                            .Read(read => read.Action("ErrorLogList", "ErrorLog").Data("GetAntiForgeryToken"))                             
                )
        )
    </div>
</div>

What I have tried:

Searching online and reading the Kendo articles so far not been able to find an example

Posted 4-Sep-18 9:06am

simpledeveloper

Updated 5-Sep-18 11:39am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Answer 1 · 2018-09-04T12:09:00

The basic concept of having a realizable grid is you need to remove all the fixed width that you set in your grid. You can then use percent instead(%) of pixels (px) when setting the size of your grid. And finally, you can use client-side plugin such as jQuery realizable to handle that for you.

For example you can define your HTML markup like this:

HTML

<div id="datalist" style="width:550px;">
	<!-- Your Grid here with width = 100% -->
</div

And then use jQuery resizable like this:

JavaScript

<script type="text/javascript">
      $(function() {
          $("#datalist").resizable();
      })
  </script>

More info, see: Resizable | jQuery UI[^]

PS: There may be some here who knows about Telerik controls, but I believed you stand a better chance by posting it at Telerik dedicated forums:https://www.telerik.com/forums/kendo-ui/grid

simpledeveloper · Answer 2 · 2018-09-05T11:39:00

Solution 2

Hi, I am not talking about re-sizable grid, I want to resize the height of rows in the Grid and default the row heights of Grid to a certain then if user wants to check something in detail then user should be able to drag the row and resize its height.

Posted 5-Sep-18 11:39am

simpledeveloper

Comments

Vincent Maverick Durano 5-Sep-18 18:03pm

Please don't reply your query as solution and instead use the "have a question or comment" button.

With regards to your question. I got your point. Unfortunately, I haven't tried using kendo grid before. There may be some here who knows about Telerik controls, but I believed you stand a better chance by posting it at Telerik dedicated forums:https://www.telerik.com/forums/kendo-ui/grid