This is a migrated thread and some comments may be shown as answers.

custom column length in edit mode

14 Answers 315 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 26 Feb 2013, 11:30 AM
In your examples,i noticed that the column has a big width,but when editing the column,the texbox is much smaller,so it doesn't rich the end of column limits.how can i do that?

Regards,
Daniel

14 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 27 Feb 2013, 03:29 PM
Hello Daniel,

to specify that the width of the input fields should fill the whole width of the column, you could set the following CSS styles:

E.g.
<style>
  /*Batch Edit Mode*/
  .k-edit-cell input
  {
      width: 100%;
  }
 
  /*InLine Edit Mode*/
  .k-grid-edit-row input
  {
      width: 100%;
  }
</style>

 

All the best,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 28 Feb 2013, 10:20 AM
.k-edit-cell and  .k-grid-edit-row are internal classes that use the kendogrid for styling?
0
Dimiter Madjarov
Telerik team
answered on 28 Feb 2013, 04:20 PM
Hi Daniel,

.k-edit-cell and  .k-grid-edit-row are Kendo classes, which are set when the Grid enters edit mode. They are used for Batch and for InLine edit mode respectively.

 

Greetings,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 01 Mar 2013, 09:59 AM
this apply to all controls,or only to textboxes?for example to change the width of a texbox and the dropdown from this example,how can i do it?
Regards
0
Accepted
Iliana Nikolova
Telerik team
answered on 05 Mar 2013, 10:32 AM
Hello Daniel,

By design Kendo UI widgets use primitives (i.e. different HTML elements in different widgets use the same CSS classes to provide a level of abstraction and allow common styling). Hence .k-edit-cell / .k-edit-row classes will be applied to each cell / row in Kendo UI Grid when such is in edit mode. 

Regarding your other question, to change the width of a texbox when editing a cell you can use the CSS snippet suggested by Dimiter. In order to change the DropDownList editor's width you should change the CSS selector (you can get the right selector as inspect the HTML output with any browser inspector). For example: 
<style>
.k-edit-cell .k-widget.k-dropdown{
    width: //....;
}
</style>

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rajesh
Top achievements
Rank 1
answered on 18 Aug 2014, 11:11 PM
Hi

The following code did not work for me.
<style>
  /*Batch Edit Mode*/
  .k-edit-cell input
  {
      width: 100%;
  }
 
  /*InLine Edit Mode*/
  .k-grid-edit-row input
  {
      width: 100%;
  }
</style>

What would I be doing wrong?

Thanks


0
Iliana Nikolova
Telerik team
answered on 19 Aug 2014, 11:59 AM
Hi Rajesh,

I am not quite sure what causes the issue in your application. In order to assist you best and provide concrete recommendations I would like to ask you to provide an isolated runnable example which demonstrates your current implementation and which I can test on my side.

Regards,
Iliana Nikolova
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rajesh
Top achievements
Rank 1
answered on 21 Aug 2014, 03:36 PM
Hello
I could not attach a project because the sample project size is more than 2 MB.
But I replied to the email which gets sent via this post and that has the attachment.

Environment
IE 11
VS 2013
Kendo UI Grid for ASP.NET MVC (kendoui.web.2012.3.1114.commercial)  

Thank you for the support
Rajesh

0
Dimiter Madjarov
Telerik team
answered on 25 Aug 2014, 07:08 AM
Hi Rajesh,


Please send us the project here or open a ticket for the problem (the file size limit is 20 MB there).

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rajesh
Top achievements
Rank 1
answered on 25 Aug 2014, 03:51 PM
I tried attaching my project file, which is less than 5 MB. But it did not let me attach it and gave me the following error message.
"The selected file(s) cannot be attached because it may exceed the maximum attachment size (2 MB) or is from not allowed type (allowed: .jpg, .jpeg, .gif, .png, .zip).

I have attached the error message also in this reply.
0
Dimiter Madjarov
Telerik team
answered on 26 Aug 2014, 03:19 PM
Hello Rajesh,


Thank you for the cooperation. Indeed the file limit in our forums is 2 MB. What I was trying to suggest was to open a new support ticket in our ticketing system (not forum), as the limit is bigger there. Thanks for the understanding.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dimiter Madjarov
Telerik team
answered on 05 Sep 2014, 11:00 AM
Hi Rajesh,


I reviewed the project and answered the question in the email.

If you experience any further issues, please send us a ticket in our support system. Thanks for the understanding.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rajesh
Top achievements
Rank 1
answered on 05 Sep 2014, 06:15 PM
Thank you that worked.

Appreciate your support
0
Dimiter Madjarov
Telerik team
answered on 08 Sep 2014, 07:24 AM
Hi Rajesh,


Thanks for the update.
Have a great day!

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Daniel
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Rajesh
Top achievements
Rank 1
Share this question
or